/* Services.jsx — grid de serviços com acento por tipo, lista de capacidades e hover sofisticado */

const ServiceCard = ({ it, narrow }) => {
  const [hov, setHov] = React.useState(false);

  /* ---- celular: cartão compacto e minimalista (ícone + texto ao lado) ---- */
  if (narrow) {
    return (
      <a href={it.href} className="srv-link" aria-label={'Conhecer ' + it.t}>
        <div className="srv-card srv-card-m">
          <div style={{
            width: 44, height: 44, borderRadius: 13, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: `linear-gradient(135deg, ${it.accent}22, ${it.accent}09)`,
            border: `1px solid ${it.accent}28`,
          }}>
            <i data-lucide={it.icon} style={{ width: 21, height: 21, color: it.accent }}></i>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <span className="srv-tag-m" style={{ color: it.accent }}>{it.tag}</span>
            <h3 style={{
              fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 15.5,
              color: 'var(--ar-text-main)', margin: '3px 0 0', letterSpacing: '-0.008em', lineHeight: 1.25,
            }}>{it.t}</h3>
          </div>

          <i data-lucide="arrow-up-right" style={{ width: 17, height: 17, color: 'rgba(255,255,255,0.28)', flexShrink: 0 }}></i>
        </div>
      </a>
    );
  }

  return (
    <a href={it.href} className="srv-link" aria-label={'Conhecer ' + it.t}>
      <div
        className="srv-card"
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        style={{
          background: hov
            ? `linear-gradient(155deg, ${it.accent}0D 0%, var(--ar-bg-card) 65%)`
            : 'var(--ar-bg-card)',
          borderColor: hov ? `${it.accent}4D` : 'rgba(255,255,255,0.07)',
          boxShadow: hov
            ? `0 22px 56px -18px ${it.accent}40, 0 0 0 1px ${it.accent}1A`
            : '0 1px 4px rgba(0,0,0,0.28)',
          transform: hov ? 'translateY(-5px)' : 'translateY(0)',
        }}
      >
        {/* linha superior: tag + seta */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <span className="srv-tag" style={{
            color: it.accent,
            borderColor: `${it.accent}2A`,
            background: `${it.accent}0D`,
          }}>
            {it.tag}
          </span>
          <span style={{
            color: hov ? it.accent : 'rgba(255,255,255,0.18)',
            transition: 'color 240ms var(--ar-ease), transform 240ms var(--ar-ease)',
            transform: hov ? 'translate(2px,-2px)' : 'translate(0,0)',
            display: 'inline-flex',
          }}>
            <i data-lucide="arrow-up-right" style={{ width: 17, height: 17 }}></i>
          </span>
        </div>

        {/* ícone com glow por acento */}
        <div style={{
          width: 52, height: 52, borderRadius: 16, marginBottom: 18, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: `linear-gradient(135deg, ${it.accent}22, ${it.accent}09)`,
          border: `1px solid ${it.accent}28`,
          boxShadow: hov ? `0 0 28px -4px ${it.accent}55` : 'none',
          transition: 'box-shadow 280ms var(--ar-ease)',
        }}>
          <i data-lucide={it.icon} style={{ width: 24, height: 24, color: it.accent }}></i>
        </div>

        {/* título e descrição */}
        <h3 style={{
          fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 17,
          color: 'var(--ar-text-main)', margin: '0 0 8px', letterSpacing: '-0.008em', lineHeight: 1.3,
        }}>{it.t}</h3>
        <p style={{
          fontFamily: 'var(--ar-font-body)', fontSize: 14, lineHeight: 1.6,
          color: 'var(--ar-text-muted)', margin: 0, flex: 1,
        }}>{it.d}</p>

        {/* divisor */}
        <div style={{ height: 1, background: 'rgba(255,255,255,0.055)', margin: '18px 0 14px' }} />

        {/* lista de capacidades */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 10px' }}>
          {it.caps.map(c => (
            <div key={c} style={{ display: 'flex', alignItems: 'flex-start', gap: 7 }}>
              <i data-lucide="check" style={{ width: 13, height: 13, color: it.accent, flexShrink: 0, marginTop: 1 }}></i>
              <span style={{
                fontFamily: 'var(--ar-font-body)', fontSize: 12.5, fontWeight: 500,
                color: 'var(--ar-text-muted)', lineHeight: 1.4,
              }}>{c}</span>
            </div>
          ))}
        </div>
      </div>
    </a>
  );
};

const Services = () => {
  const [narrow, setNarrow] = React.useState(() => window.matchMedia('(max-width: 620px)').matches);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 620px)');
    const on = () => setNarrow(mq.matches);
    on(); mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const items = [
    {
      icon: 'bot', tag: 'AGENTES DE IA',
      t: 'Agentes de IA para atendimento',
      d: 'Agente que responde, qualifica e encaminha clientes com o contexto real do seu negócio — em qualquer canal.',
      caps: ['Atendimento 24h/7', 'Qualificação de leads', 'Triagem automática', 'Memória de contexto'],
      accent: '#00D4FF', href: '/servicos/agentes-de-ia/',
    },
    {
      icon: 'workflow', tag: 'AUTOMAÇÕES',
      t: 'Automações de processos',
      d: 'Fluxos que eliminam tarefas repetitivas e conectam as ferramentas que sua equipe já usa.',
      caps: ['Fluxos sem código', 'Notificações automáticas', 'Sincronização de dados', 'Relatórios em tempo real'],
      accent: '#005EFF', href: '/servicos/automacoes/',
    },
    {
      icon: 'share-2', tag: 'INTEGRAÇÕES',
      t: 'Integrações de canais',
      d: 'WhatsApp, Instagram, sites e CRM conversando entre si, com contexto compartilhado.',
      caps: ['WhatsApp Business API', 'CRM integrado', 'API unificada', 'Histórico centralizado'],
      accent: '#00D4FF', href: '/servicos/integracoes/',
    },
    {
      icon: 'globe', tag: 'SITES COM IA',
      t: 'Criação de sites com IA',
      d: 'Sites rápidos, modernos e otimizados, construídos com apoio de IA e boas práticas.',
      caps: ['SEO avançado', 'Conteúdo com IA', 'Performance otimizada', 'Analytics integrado'],
      accent: '#4C9BFF', href: '/servicos/sites-e-sistemas/',
    },
    {
      icon: 'layout-dashboard', tag: 'APPS',
      t: 'Aplicativos web e mobile',
      d: 'Apps sob medida para a operação — painéis, portais e ferramentas internas.',
      caps: ['iOS e Android', 'Painel administrativo', 'Autenticação segura', 'Notificações push'],
      accent: '#005EFF', href: '/servicos/sites-e-sistemas/',
    },
    {
      icon: 'server', tag: 'SISTEMAS',
      t: 'Sistemas internos',
      d: 'Sistemas que organizam dados, processos e equipes em um só lugar.',
      caps: ['Dashboard em tempo real', 'Controle de acesso', 'Relatórios automáticos', 'Segurança e backup'],
      accent: '#4C9BFF', href: '/servicos/sites-e-sistemas/',
    },
  ];

  return (
    <section id="servicos" style={{ background: 'var(--ar-bg-section)', padding: '116px 0' }}>
      <Container>
        <SectionHead
          eyebrow="SERVIÇOS"
          title={<>Soluções que conectam <GradText>IA e operação</GradText></>}
          sub="Do agente de atendimento ao sistema interno: entregamos IA aplicada sem alterar o que sua equipe já faz bem."
          subMobile="IA aplicada do atendimento ao sistema interno — sem mudar o que já funciona."
        />

        <div className="grid-3 srv-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 52 }}>
          {items.map((it, i) => (
            <Reveal key={it.t} delay={(i % 3) * 70} style={{ display: 'flex' }}>
              <ServiceCard it={it} narrow={narrow} />
            </Reveal>
          ))}
        </div>

        {/* Banda de consultoria */}
        <Reveal delay={120}>
          <div className="grid-2 services-band" style={{
            marginTop: 18, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, alignItems: 'center',
            padding: '34px 38px', borderRadius: 24,
            background: 'linear-gradient(135deg, rgba(0,94,255,0.20), rgba(0,212,255,0.06))',
            border: '1px solid rgba(0,212,255,0.30)',
            boxShadow: '0 28px 70px -30px rgba(0,94,255,0.5)',
          }}>
            <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 16, flexShrink: 0,
                background: 'linear-gradient(135deg,#005EFF,#00D4FF)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', boxShadow: '0 0 28px rgba(0,212,255,0.5)',
              }}>
                <i data-lucide="compass" style={{ width: 26, height: 26 }}></i>
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 22, color: 'var(--ar-text-main)', margin: 0 }}>
                  Consultoria em IA aplicada a negócios
                </h3>
                <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 15, lineHeight: 1.55, color: 'var(--ar-text-muted)', margin: '6px 0 0', maxWidth: 520 }}>
                  Diagnóstico, priorização e um plano claro de onde a IA gera mais retorno na sua operação.
                </p>
              </div>
            </div>
            <div className="services-band-cta" style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button size="md" onClick={() => { window.location.href = '/servicos/consultoria/'; }}>
                Agendar análise <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
              </Button>
            </div>
          </div>
        </Reveal>
      </Container>

      <style>{`
        .srv-link {
          display: flex; flex: 1; min-width: 0;
          border-radius: 20px; text-decoration: none;
        }
        .srv-card {
          flex: 1; display: flex; flex-direction: column;
          padding: 26px 24px; border-radius: 20px;
          border: 1px solid rgba(255,255,255,0.07);
          transition:
            transform 280ms var(--ar-ease),
            border-color 280ms var(--ar-ease),
            box-shadow 280ms var(--ar-ease),
            background 280ms var(--ar-ease);
          cursor: pointer;
          box-sizing: border-box;
        }
        .srv-tag {
          display: inline-flex; align-items: center;
          padding: 4px 10px; border-radius: 999px; border: 1px solid;
          font-family: var(--ar-font-body); font-size: 10px;
          font-weight: 700; letter-spacing: 0.11em;
        }
        .srv-link:focus-visible {
          outline: 2px solid var(--ar-cyan);
          outline-offset: 4px; border-radius: 20px;
        }
        /* cartão compacto (celular): ícone + texto ao lado, sem listas */
        .srv-card-m {
          flex-direction: row; align-items: center; gap: 13px;
          padding: 14px 16px; border-radius: 16px;
          background: var(--ar-bg-card);
        }
        .srv-tag-m {
          font-family: var(--ar-font-body); font-size: 9.5px;
          font-weight: 700; letter-spacing: 0.11em;
        }
        @media (prefers-reduced-motion: reduce) {
          .srv-card { transition: none !important; transform: none !important; }
        }
      `}</style>
    </section>
  );
};

window.Services = Services;