/* Services.jsx — expanded services grid (9 cards + consultancy band) */
const Services = () => {
  const items = [
    { icon: 'bot', t: 'Agentes de IA para atendimento', d: 'Atendimento, vendas e triagem com inteligência contextual que entende o seu negócio.', href: '/servicos/agentes-de-ia/' },
    { icon: 'workflow', t: 'Automações de processos', d: 'Fluxos que eliminam tarefas repetitivas e conectam as ferramentas que sua equipe já usa.', href: '/servicos/automacoes/' },
    { icon: 'share-2', t: 'Integrações de canais', d: 'WhatsApp, Instagram, sites e CRM conversando entre si, com contexto compartilhado.', href: '/servicos/integracoes/' },
    { icon: 'globe', t: 'Criação de sites com IA', d: 'Sites rápidos, modernos e otimizados, construídos com apoio de IA e boas práticas.', href: '/servicos/sites-e-sistemas/' },
    { icon: 'layout-dashboard', t: 'Aplicativos web e mobile', d: 'Apps sob medida para a operação — painéis, portais e ferramentas internas.', href: '/servicos/sites-e-sistemas/' },
    { icon: 'server', t: 'Sistemas internos', d: 'Sistemas que organizam dados, processos e equipes em um só lugar.', 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: implantamos IA aplicada sem complicar o que sua equipe já faz bem."
        />

        <div className="grid-3" 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' }}>
              <a href={it.href} className="service-card-link" aria-label={'Conhecer ' + it.t}>
                <Card premium style={{ flex: 1, cursor: 'pointer' }}>
                  <IconTile icon={it.icon} size={52} />
                  <h3 style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 18, color: 'var(--ar-text-main)', margin: '18px 0 8px', letterSpacing: '-0.005em', lineHeight: 1.25 }}>{it.t}</h3>
                  <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--ar-text-muted)', margin: 0 }}>{it.d}</p>
                </Card>
              </a>
            </Reveal>
          ))}
        </div>

        {/* Consultancy band */}
        <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="lg" 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>{`
        .service-card-link { display: flex; flex: 1; min-width: 0; border-radius: var(--ar-radius-xl); }
        .service-card-link > div { width: 100%; box-sizing: border-box; }
        .service-card-link:focus-visible { outline: 2px solid var(--ar-cyan); outline-offset: 4px; }
      `}</style>
    </section>
  );
};

window.Services = Services;