// ============================================================
// AgenticX Landing v3 — Ascone-style editorial fintech
// build: refresh
// ============================================================

// ---------- Shared ----------
const Container = ({ children, className = '' }) => (
  <div className={`mx-auto w-full max-w-container px-6 sm:px-8 ${className}`}>{children}</div>
);

// SlideButton — pílula com seta deslizante (assinatura Ascone).
// variant: forest (sólido escuro) · white (sólido claro p/ fundos verdes) · outline (contorno)
// `dark` mantido por retrocompatibilidade (dark=true → forest, dark=false → outline).
const SLIDE_VARIANTS = {
  forest:  { btn: 'bg-forest text-white hover:bg-forest-700',          arrow: 'bg-white text-forest', weight: 'font-medium'   },
  white:   { btn: 'bg-white text-forest hover:bg-cream',               arrow: 'bg-forest text-white', weight: 'font-semibold' },
  outline: { btn: 'bg-white text-forest ring-1 ring-line hover:ring-forest', arrow: 'bg-forest text-white', weight: 'font-medium' },
};
const SLIDE_SIZES = { sm: 'px-5 py-2.5', md: 'px-6 py-3.5', lg: 'px-7 py-4' };

const SlideButton = ({
  children, href = '#', variant, dark = true, size = 'md',
  arrowIcon: ArrowIcon = IArrow, arrowSize = 13, trailing = null,
  labelClassName = '', className = '', as = 'a', type, ...rest
}) => {
  const v = SLIDE_VARIANTS[variant] || (dark ? SLIDE_VARIANTS.forest : SLIDE_VARIANTS.outline);
  const pad = SLIDE_SIZES[size] || size;
  const Tag = as === 'button' || type ? 'button' : 'a';
  return (
    <Tag href={Tag === 'a' ? href : undefined} type={type}
       className={`btn-slide group ${pad} text-sm ${v.weight} ${v.btn} ${className}`} {...rest}>
      <span className={`btn-arrow ${v.arrow}`}><ArrowIcon size={arrowSize}/></span>
      <span className={`btn-label ${labelClassName}`}>{children}{trailing}</span>
    </Tag>
  );
};

const Eyebrow = ({ children, className = '' }) => (
  <span className={`eyebrow ${className}`}>{children}</span>
);

// ---------- Header ----------
const Header = ({ nav, auth }) => {
  const isAuthed = auth && auth.status === 'authed';
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [announce, setAnnounce] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Trava o scroll do body enquanto o drawer mobile está aberto.
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      {/* Announcement strip */}
      {announce && (
        <div className="bg-forest text-white text-xs">
          <Container className="flex items-center justify-center gap-2 py-2.5 relative">
            <Sparkle size={12} color="#EBE8D8"/>
            <span className="tracking-wide">Sessão 2026 · Inscrições antecipadas abertas</span>
            <button onClick={() => setAnnounce(false)} aria-label="Fechar aviso" className="absolute right-6 sm:right-8 text-white/60 hover:text-white"><IX size={14}/></button>
          </Container>
        </div>
      )}

      <header className={`sticky top-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/90 backdrop-blur-md border-b border-line' : 'bg-white border-b border-transparent'}`}>
        <Container className="flex items-center justify-between h-[4.5rem]">
          <a href="#home" className="flex items-center gap-2.5">
            <img src="assets/logo-agenticx-wordmark.png" alt="AgenticX" className="h-9 sm:h-10 w-auto block"/>
          </a>

          <nav className="hidden lg:flex items-center gap-9 absolute left-1/2 -translate-x-1/2">
            {nav.map((n, i) => (
              <a key={i} href={n.href} className="text-sm font-medium text-black/80 hover:text-forest transition">{n.label}</a>
            ))}
          </nav>

          <div className="flex items-center gap-5">
            {isAuthed ? (
              <>
                <a href="#cliente" className="hidden md:block text-sm font-medium text-black/80 hover:text-forest transition">
                  Minha conta
                </a>
                <SlideButton as="button" type="button" onClick={() => auth.logout()} size="sm" arrowSize={12}
                  variant="outline" className="hidden sm:inline-flex" labelClassName="flex items-center gap-1.5">
                  Sair
                </SlideButton>
              </>
            ) : (
              <SlideButton href="#cliente/login" size="sm" arrowSize={12}
                variant="forest" className="inline-flex" labelClassName="flex items-center gap-1.5"
                trailing={<IChevR size={13}/>}>
                Entrar
              </SlideButton>
            )}
            <button onClick={() => setOpen(true)} aria-label="Menu" className="lg:hidden text-forest"><IMenu size={22}/></button>
          </div>
        </Container>
      </header>

      {/* Mobile drawer */}
      <div className={`fixed inset-0 z-50 lg:hidden transition-opacity ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`} onClick={() => setOpen(false)}>
        <div className="absolute inset-0 bg-forest-900/40 backdrop-blur-sm"></div>
        <aside className={`absolute right-0 top-0 h-full w-80 max-w-[85vw] bg-white p-6 transition-transform ${open ? 'translate-x-0' : 'translate-x-full'}`} onClick={(e) => e.stopPropagation()}>
          <div className="flex items-center justify-between mb-10">
            <img src="assets/logo-agenticx-wordmark.png" alt="AgenticX" className="h-8 w-auto"/>
            <button onClick={() => setOpen(false)} className="text-forest"><IX size={20}/></button>
          </div>
          <nav className="flex flex-col gap-1">
            {nav.map((n, i) => (
              <a key={i} href={n.href} onClick={() => setOpen(false)} className="py-3 text-lg font-medium text-black hover:text-forest border-b border-line">{n.label}</a>
            ))}
          </nav>
          <div className="mt-8 flex flex-col gap-3">
            {isAuthed ? (
              <>
                <a href="#cliente" onClick={() => setOpen(false)} className="text-sm font-medium text-black/70">
                  Minha conta
                </a>
                <SlideButton as="button" type="button" onClick={() => { setOpen(false); auth.logout(); }}>Sair</SlideButton>
              </>
            ) : (
              <SlideButton href="#cliente/login" onClick={() => setOpen(false)} variant="forest" trailing={<IChevR size={13}/>}>
                Entrar
              </SlideButton>
            )}
          </div>
        </aside>
      </div>
    </>
  );
};

// ---------- Hero bento ornament ----------
const HeroBento = () => (
  <div className="grid grid-cols-2 gap-2 reveal" style={{animationDelay:'0.15s'}}>
    {/* TL — satin with up arrows */}
    <div className="satin relative aspect-square rounded-2xl overflow-hidden p-6 flex flex-col justify-between">
      <div className="flex gap-2 text-white/90">
        <IArrowUp size={46} strokeWidth={1.5}/>
        <IArrowUp size={36} strokeWidth={1.5} className="mt-3"/>
      </div>
      <div>
        <div className="text-3xl sm:text-4xl font-medium text-white tracking-tight">12.4k+</div>
        <div className="text-xs text-white/70 mt-1">Tickets resolvidos / semana</div>
      </div>
    </div>

    {/* TR — cream, big left rounding, currencies */}
    <div className="bg-cream relative aspect-square overflow-hidden p-6 flex flex-col justify-between"
         style={{borderTopLeftRadius:'9rem', borderBottomLeftRadius:'9rem', borderTopRightRadius:'1rem', borderBottomRightRadius:'1rem'}}>
      <div className="text-right">
        <div className="text-4xl sm:text-5xl font-medium text-forest tracking-tighter">95+</div>
        <div className="text-sm text-forest/70 mt-1">Idiomas</div>
      </div>
      <div className="self-end">
        <GlobeWire size={72} color="#1C3F3A" stroke={1}/>
      </div>
    </div>

    {/* BL — sage, top-right rounding, users active */}
    <div className="bg-sage relative aspect-square overflow-hidden p-6 flex flex-col justify-between"
         style={{borderTopRightRadius:'7rem', borderTopLeftRadius:'1rem', borderBottomLeftRadius:'1rem', borderBottomRightRadius:'1rem'}}>
      <div className="flex gap-2 text-forest">
        <Sparkle size={26} color="#1C3F3A"/>
        <Sparkle size={18} color="#1C3F3A" className="mt-1"/>
      </div>
      <div>
        <div className="text-sm font-medium text-forest mb-3">Agentes ativos</div>
        <div className="flex items-center gap-2">
          <div className="flex -space-x-2.5">
            {['#1C3F3A','#2F6A62','#546078'].map((c,i) => (
              <div key={i} className="h-8 w-8 rounded-full ring-2 ring-sage" style={{background:c}}></div>
            ))}
          </div>
          <a href="#contact" className="h-8 w-8 grid place-items-center rounded-full bg-forest text-white ml-1 hover:bg-forest-700 transition"><IArrowUR size={15}/></a>
        </div>
      </div>
    </div>

    {/* BR — forest, saving line chart */}
    <div className="bg-forest relative aspect-square rounded-2xl overflow-hidden p-6 flex flex-col justify-between">
      <div className="flex items-start justify-between">
        <div className="text-2xl sm:text-3xl font-medium text-white tracking-tight">80%</div>
        <IArrowUp size={18} className="text-white/80 mt-1"/>
      </div>
      <svg viewBox="0 0 200 70" className="w-full" fill="none">
        <polyline className="draw-line" points="0,60 28,52 52,56 80,38 108,44 140,24 168,30 200,8"
          stroke="#E0EAE8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <div className="text-xs text-white/70">Resolução automática</div>
    </div>
  </div>
);

const Hero = () => (
  <section id="home" data-screen-label="01 Hero" className="relative pt-16 sm:pt-24 pb-20">
    <Container>
      <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <div className="reveal">
          <Eyebrow>Experimente agora</Eyebrow>
          <h1 className="mt-5 text-[3.25rem] leading-[1.04] sm:text-6xl lg:text-[5rem] lg:leading-[1.02] font-medium text-black">
            Mude a forma<br/>
            como você atende<br/>
            seus <span className="font-em text-forest">clientes</span>
          </h1>
          <p className="mt-7 max-w-md text-base sm:text-lg text-slate leading-relaxed">
            Do primeiro contato à resolução, a AgenticX coloca agentes de IA para conversar, qualificar e agendar no WhatsApp — 24 horas por dia.
          </p>

          <div className="mt-9 flex flex-wrap items-center gap-7">
            <SlideButton href="#contact">Começar agora</SlideButton>
            <div className="flex items-center gap-2.5">
              <div className="flex">
                {[0,1,2,3,4].map(i => <IStar key={i} size={15} className="text-forest"/>)}
              </div>
              <div className="text-sm">
                <span className="font-semibold text-black">4.9</span>
                <span className="text-slate"> · de 320+ </span>
                <a href="#" className="text-forest underline underline-offset-2">avaliações</a>
              </div>
            </div>
          </div>
        </div>

        <HeroBento/>
      </div>
    </Container>
  </section>
);

// ---------- AI Cloud marquee ----------
const aiModels = ['Claude Code','Codex','Gemini','DeepSeek','Kimi','Grok'];
const AICloud = () => (
  <section data-screen-label="02 IAs" className="border-y border-line">
    <Container className="py-10">
      <p className="text-center eyebrow mb-7">Conectado às IAs</p>
      <div className="overflow-hidden no-scrollbar [mask-image:linear-gradient(90deg,transparent,black_8%,black_92%,transparent)]">
        <div className="flex marquee-track gap-16 w-max items-center">
          {[...aiModels, ...aiModels, ...aiModels].map((m, i) => (
            <div key={i} className="flex items-center gap-2.5 whitespace-nowrap">
              <Sparkle size={16} color="#1C3F3A"/>
              <span className="text-xl sm:text-2xl font-medium text-black/85 tracking-tight">{m}</span>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// ---------- About / One platform ----------
const About = () => (
  <section id="about" data-screen-label="03 Sobre" className="py-24 sm:py-28">
    <Container>
      <div className="text-center max-w-2xl mx-auto mb-14">
        <Eyebrow>Sobre</Eyebrow>
        <h2 className="mt-4 text-4xl sm:text-5xl font-medium text-black leading-[1.1]">
          Uma plataforma para todo<br className="hidden sm:block"/> o seu <span className="font-em text-forest">atendimento</span>
        </h2>
        <p className="mt-5 text-slate text-lg">Remova o atrito que separa sua empresa de uma conversa bem resolvida.</p>
      </div>

      <div className="grid lg:grid-cols-[26fr_50fr] gap-4">
        {/* Card 1 — forest, bar chart */}
        <div className="feat-card bg-forest rounded-3xl p-8 sm:p-10 flex flex-col justify-between min-h-[22rem] hover:-translate-y-1">
          <h3 className="text-2xl sm:text-3xl font-medium text-white leading-tight">Resolva<br/>mais rápido</h3>
          <div>
            <div className="text-lg font-semibold text-white mb-4">1.2s <span className="text-white/60 text-sm font-normal">resposta média</span></div>
            <div className="flex items-end gap-2 h-28">
              {[30,46,38,62,52,78,96].map((h,i) => (
                <div key={i} className="flex-1 rounded-t" style={{height:`${h}%`, background: i === 6 ? '#E0EAE8' : 'rgba(224,234,232,0.35)'}}></div>
              ))}
            </div>
          </div>
        </div>

        {/* Card 2 — sage, globe, channels */}
        <div className="feat-card relative bg-sage overflow-hidden p-8 sm:p-10 flex flex-col justify-between min-h-[22rem] hover:-translate-y-1"
             style={{borderRadius:'1.5rem', borderBottomLeftRadius:'9rem'}}>
          <div className="relative z-10">
            <h3 className="text-2xl sm:text-3xl font-medium text-forest leading-tight">Atenda em<br/>qualquer canal</h3>
            <p className="mt-3 max-w-xs text-sm text-forest/70">Um único agente respondendo no WhatsApp, Instagram, site e e-mail, com o mesmo contexto.</p>
          </div>
          {/* Globe + channel chips */}
          <div className="relative z-10 flex items-end justify-between">
            <div className="flex flex-col gap-2">
              {[
                {I:IWA, l:'WhatsApp'},
                {I:IChat, l:'Chat do site'},
              ].map((c,i) => {
                const I = c.I;
                return (
                  <div key={i} className="inline-flex items-center gap-2 bg-white rounded-full pl-2.5 pr-4 py-1.5 shadow-sm w-max">
                    <span className="text-forest"><I size={15}/></span>
                    <span className="text-xs font-medium text-black">{c.l}</span>
                  </div>
                );
              })}
            </div>
            <div className="self-end">
              <GlobeWire size={140} color="#1C3F3A" stroke={0.8} className="spin-slow opacity-80" />
            </div>
          </div>
          {/* faint cream ornament */}
          <div className="absolute -right-10 -top-10 w-40 h-40 rounded-full bg-cream/50"></div>
        </div>
      </div>
    </Container>
  </section>
);

// ---------- Values ----------
const values = [
  { I: IBrain, title: 'Contexto real', text: 'O agente entende intenção, histórico e tom — não responde por palavra-chave.' },
  { I: ILayers, title: 'Escala sem fricção', text: 'Cresça o volume de conversas sem crescer o tamanho da sua equipe.' },
  { I: IRoute, title: 'Handoff humano', text: 'Quando precisa, transfere para uma pessoa com todo o contexto da conversa.', warm: true },
];

const Values = () => (
  <section id="features" data-screen-label="04 Valores" className="py-24 sm:py-28">
    <Container>
      <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-end mb-14">
        <div>
          <Eyebrow>Valores</Eyebrow>
          <h2 className="mt-4 text-4xl sm:text-5xl font-medium text-black leading-[1.08]">
            Atendimento que<br/>realmente <span className="font-em text-forest">resolve</span>
          </h2>
        </div>
        <p className="text-slate text-base sm:text-lg lg:pb-2">
          Combina modelos de linguagem de ponta com integrações específicas do seu negócio, para automatizar o que é repetitivo e elevar o que é humano.
        </p>
      </div>

      <div className="grid sm:grid-cols-3 gap-4">
        {values.map((v, i) => {
          const I = v.I;
          return (
            <div key={i} className="value-card rounded-2xl border border-line p-8 min-h-[18rem] flex flex-col justify-between">
              <div className="value-bg" style={{background:'#EBE8D8', borderBottomRightRadius:'8rem', borderTopRightRadius: i === 0 ? '8rem' : '0'}}></div>
              <div className="h-14 w-14 grid place-items-center rounded-full border border-line bg-white text-forest">
                <I size={24}/>
              </div>
              <div>
                <h3 className="text-xl font-medium text-black mb-2">{v.title}</h3>
                <p className="text-sm text-slate leading-relaxed">{v.text}</p>
              </div>
            </div>
          );
        })}
      </div>
    </Container>
  </section>
);

// ---------- Products ----------
const products = [
  { sector:'Saúde', title:'Medicina Minimamente Invasiva', tagline:'OCR de laudos, solicitação automática à operadora e agendamento de sala híbrida — com acompanhamento humano.', image:'assets/product-medicina.png', metric:{k:'87%', v:'mais rápido por procedimento'} },
  { sector:'Energia', title:'Usinas Solares', tagline:'Monitoramento 24/7, diagnóstico via API do fabricante e atendimento proativo ao cliente.', image:'assets/product-solar.png', metric:{k:'200+', v:'usinas monitoradas ao vivo'} },
  { sector:'Pet Care', title:'Pet Shop', tagline:'Agendamento, confirmação e lembretes automáticos de banho, tosa e consulta — com follow-up pós-serviço.', image:'assets/product-petshop.png', metric:{k:'−40%', v:'taxa de faltas'} },
  { sector:'Atendimento', title:'Atendimento Inicial 24/7', tagline:'Triagem multicanal, classificação inteligente e roteamento para humano com todo o contexto.', image:'assets/product-atendimento.png', metric:{k:'80%', v:'resolvido sem humano'} },
];

const Products = () => {
  const [active, setActive] = React.useState(0);
  const p = products[active];
  return (
    <section id="products" data-screen-label="05 Produtos" className="py-24 sm:py-28 bg-[#FAFAF8] border-y border-line">
      <Container>
        <div className="max-w-2xl mb-12">
          <Eyebrow>Produtos</Eyebrow>
          <h2 className="mt-4 text-4xl sm:text-5xl font-medium text-black leading-[1.08]">
            Quatro soluções,<br/>um único <span className="font-em text-forest">agente</span>
          </h2>
          <p className="mt-5 text-slate text-lg">Aplicações verticais da AgenticX, prontas para rodar em cada setor — com fluxos pré-treinados e integrações específicas.</p>
        </div>

        {/* Tabs */}
        <div className="flex flex-wrap gap-2.5 mb-8">
          {products.map((it, i) => (
            <button key={i} onClick={() => setActive(i)}
              className={`px-5 py-2.5 rounded-full text-sm font-medium transition ${
                i === active ? 'bg-forest text-white' : 'bg-white text-black/70 border border-line hover:border-forest hover:text-forest'
              }`}>
              {it.sector}
            </button>
          ))}
        </div>

        {/* Active panel */}
        <div key={active} className="reveal">
          <div className="flex flex-wrap items-end justify-between gap-6 mb-6">
            <div className="max-w-xl">
              <Eyebrow>{p.sector}</Eyebrow>
              <h3 className="mt-2 text-2xl sm:text-3xl font-medium text-black leading-tight">{p.title}</h3>
              <p className="mt-2 text-slate">{p.tagline}</p>
            </div>
            <div className="flex items-end gap-6">
              <div>
                <div className="text-4xl font-medium text-forest tracking-tight">{p.metric.k}</div>
                <div className="text-xs text-slate mt-0.5 max-w-[8rem]">{p.metric.v}</div>
              </div>
              <SlideButton href="#contact" size="px-5 py-3" arrowSize={12}>Saiba mais</SlideButton>
            </div>
          </div>

          <a href={p.image} target="_blank" rel="noopener"
             className="group block relative rounded-2xl overflow-hidden border border-line bg-white aspect-[16/9]">
            <img src={p.image} alt={`${p.title} — fluxo de automação`} loading="lazy"
                 className="absolute inset-0 w-full h-full object-cover"/>
            <span className="absolute bottom-4 right-4 inline-flex items-center gap-1.5 rounded-full bg-white/90 backdrop-blur px-3.5 py-2 text-xs font-medium text-forest shadow-sm opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition">
              Ver em tela cheia <IArrowUR size={13}/>
            </span>
          </a>
        </div>
      </Container>
    </section>
  );
};

// ---------- Stats satin band ----------
const Stats = () => (
  <section data-screen-label="06 Números" className="py-6">
    <Container>
      <div className="satin rounded-[2rem] px-8 sm:px-14 py-14 sm:py-20">
        <div className="grid lg:grid-cols-[1fr_1fr_1.1fr] gap-10 lg:gap-8 items-start">
          <div>
            <div className="text-5xl sm:text-6xl font-medium text-white tracking-tighter">+1.200</div>
            <div className="mt-2 text-sm text-white/70">Empresas conectadas</div>
          </div>
          <div>
            <div className="text-5xl sm:text-6xl font-medium text-white tracking-tighter">80%</div>
            <div className="mt-2 text-sm text-white/70">Tickets automatizados</div>
          </div>
          <div className="lg:text-right lg:pl-8">
            <Eyebrow className="!text-cream">Números</Eyebrow>
            <h3 className="mt-3 text-2xl sm:text-3xl font-medium text-white leading-snug">
              Resultados que escalam<br className="hidden sm:block"/> com o seu negócio
            </h3>
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// ---------- FAQ ----------
const faqs = [
  { q:'Como conecto meu número de WhatsApp?', a:'A conexão é feita via WhatsApp Business API em poucos cliques. Nossa equipe acompanha todo o processo de verificação junto à Meta — normalmente concluído no mesmo dia.' },
  { q:'O agente consegue transferir para um humano?', a:'Sim. Quando a conversa foge do escopo ou o cliente pede, o agente encaminha para sua equipe com todo o histórico e contexto coletado, sem o cliente precisar repetir nada.' },
  { q:'Posso treinar a IA com o conteúdo da minha empresa?', a:'Sim. Você sobe documentos, FAQs, catálogos e políticas, e o agente passa a responder com base nesse conhecimento — sempre dentro dos limites que você define.' },
  { q:'Quais idiomas são suportados?', a:'Mais de 95 idiomas, com detecção automática. O agente identifica o idioma do cliente e responde com fluência nativa, sem configuração adicional.' },
  { q:'Como funciona a cobrança?', a:'Planos mensais ou anuais por volume de conversas e número de canais. Você começa com 14 dias grátis, sem cartão, e só paga ao decidir continuar.' },
];

const FAQItem = ({ item, open, onClick }) => (
  <div className="border-b border-line">
    <button type="button" onClick={onClick} aria-expanded={open} className="w-full flex items-center justify-between gap-6 py-6 text-left">
      <span className="text-xl sm:text-[1.4rem] font-medium text-black">{item.q}</span>
      <span className={`acc-plus shrink-0 text-slate ${open ? 'open' : ''}`}><IPlus size={22}/></span>
    </button>
    <div className={`acc-body ${open ? 'open' : ''}`}>
      <div>
        <p className="pb-6 max-w-xl text-slate leading-relaxed">{item.a}</p>
      </div>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(1);
  return (
    <section id="faq" data-screen-label="07 FAQ" className="py-24 sm:py-28">
      <Container>
        <div className="grid lg:grid-cols-[2.8fr_4.1fr] gap-12 lg:gap-28">
          <div>
            <Eyebrow>FAQ</Eyebrow>
            <h2 className="mt-4 text-4xl sm:text-5xl font-medium text-black leading-[1.08]">
              Perguntas<br/>frequentes
            </h2>
          </div>
          <div>
            {faqs.map((f, i) => (
              <FAQItem key={i} item={f} open={open === i} onClick={() => setOpen(open === i ? -1 : i)}/>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

// ---------- CTA ----------
const CTA = () => (
  <section data-screen-label="08 CTA" className="pb-6">
    <Container>
      <div className="satin-soft relative rounded-[2rem] overflow-hidden px-8 sm:px-14 py-16 sm:py-20">
        <div className="relative z-10 max-w-xl">
          <h2 className="text-4xl sm:text-5xl font-medium text-white leading-[1.08]">
            Mude a forma como<br/>você atende no <span className="font-em text-cream">WhatsApp</span>
          </h2>
          <p className="mt-5 text-white/75 text-lg max-w-md">
            Junte-se a mais de 1.200 empresas que automatizam atendimento com a AgenticX. Em produção numa tarde.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-4">
            <SlideButton href="#contact" variant="white" size="lg">Começar agora</SlideButton>
            <a href="#" className="text-white/90 text-sm font-medium underline underline-offset-4 hover:text-white">Falar com vendas</a>
          </div>
        </div>
        {/* Sparkle ornaments */}
        <div className="hidden sm:block absolute top-12 right-16 text-white"><Sparkle size={64} color="#ffffff"/></div>
        <div className="hidden sm:block absolute top-32 right-44 text-white"><Sparkle size={40} color="#ffffff"/></div>
        {/* curved corner accent */}
        <div className="absolute -bottom-16 -right-16 w-64 h-64 rounded-full bg-white/5"></div>
      </div>
    </Container>
  </section>
);

// ---------- Contact ----------
const Field = ({ label, name, type='text', placeholder, as='input', required }) => {
  const cls = "w-full rounded-xl bg-white ring-1 ring-line px-4 py-3 text-sm text-black placeholder:text-slate/60 focus:outline-none focus:ring-forest";
  return (
    <label className="block">
      <span className="block text-xs font-medium text-slate mb-2">{label}</span>
      {as === 'textarea'
        ? <textarea name={name} rows={5} placeholder={placeholder} className={`${cls} resize-none`} required={required}></textarea>
        : <input name={name} type={type} placeholder={placeholder} className={cls} required={required}/>}
    </label>
  );
};

const Contact = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitting(true);

    const formData = new FormData(e.currentTarget);
    const data = {
      nome: formData.get('nome'),
      email: formData.get('email'),
      mensagem: formData.get('mensagem'),
    };

    console.log("Enviando e-mail de contato para andre@agenticx.com.br:", data);

    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
    }, 1200);
  };

  return (
    <section id="contact" data-screen-label="09 Contato" className="py-24 sm:py-28 bg-[#FAFAF8] border-y border-line">
      <Container>
        <div className="grid lg:grid-cols-[3fr_2fr] gap-10">
          <div className="bg-white rounded-3xl border border-line p-8 sm:p-12">
            <Eyebrow>Contato</Eyebrow>
            <h2 className="mt-4 text-3xl sm:text-4xl font-medium text-black leading-tight">Precisa de ajuda?<br/>Vamos <span className="font-em text-forest">conversar</span></h2>
            <p className="mt-3 text-slate">Teste nossa IA em primeira mão ou preencha o formulário — respondemos em até 6 horas úteis.</p>

            <a href="https://wa.me/5521959326468?text=Ol%C3%A1!%20Gostaria%20de%20saber%20mais%20sobre%20as%20solu%C3%A7%C3%B5es%20de%20atendimento%20inteligente%20da%20AgenticX."
               target="_blank"
               rel="noopener noreferrer"
               className="mt-7 btn-slide group inline-flex bg-forest text-white px-6 py-3.5 text-sm font-medium hover:bg-forest-700">
              <span className="btn-arrow bg-white text-forest"><IWA size={13}/></span>
              <span className="btn-label flex items-center gap-2"><IWA size={17}/> Conversar no WhatsApp</span>
            </a>

            {submitted ? (
              <div className="mt-10 p-6 bg-forest/5 border border-forest/10 rounded-2xl text-center">
                <div className="w-12 h-12 rounded-full bg-forest text-white flex items-center justify-center mx-auto mb-4">
                  <ICheck size={24} />
                </div>
                <h3 className="text-lg font-medium text-black mb-2">Mensagem enviada com sucesso!</h3>
                <p className="text-sm text-slate mb-4">
                  Sua mensagem foi enviada. Um e-mail com os seus dados foi encaminhado para <strong className="text-forest font-semibold">andre@agenticx.com.br</strong>.
                </p>
                <button
                  type="button"
                  onClick={() => setSubmitted(false)}
                  className="text-xs font-semibold text-forest underline underline-offset-4 hover:text-forest-700 transition"
                >
                  Enviar outra mensagem
                </button>
              </div>
            ) : (
              <form className="mt-10 grid sm:grid-cols-2 gap-5" onSubmit={handleSubmit}>
                <Field label="Seu nome" name="nome" placeholder="Como podemos te chamar?" required />
                <Field label="Seu e-mail" name="email" type="email" placeholder="voce@empresa.com" required />
                <div className="sm:col-span-2">
                  <Field label="Sua mensagem" name="mensagem" as="textarea" placeholder="Conte sobre o seu caso de uso…" required />
                </div>
                <div className="sm:col-span-2 flex items-center justify-between gap-4 flex-wrap">
                  <p className="text-xs text-slate">Respondemos em até 6 horas úteis.</p>
                  <SlideButton as="button" type="submit" disabled={submitting}>
                    {submitting ? 'Enviando...' : 'Enviar mensagem'}
                  </SlideButton>
                </div>
              </form>
            )}
          </div>

          <aside className="flex flex-col gap-5">
            <div className="bg-forest rounded-3xl p-8 text-white">
              <h3 className="text-xl font-medium">Receba a newsletter</h3>
              <p className="mt-2 text-sm text-white/70">Dicas de automação de atendimento, 1 vez por semana. Sem spam.</p>
              <div className="mt-5 flex flex-col gap-2">
                <input type="email" placeholder="voce@empresa.com" className="rounded-full bg-white/10 ring-1 ring-white/20 px-5 py-3 text-sm text-white placeholder:text-white/50 focus:outline-none focus:ring-white"/>
                <button className="rounded-full bg-white text-forest px-5 py-3 text-sm font-semibold hover:bg-cream transition">Inscrever-se</button>
              </div>
            </div>
            <div className="bg-white rounded-3xl border border-line p-8">
              <h3 className="text-xl font-medium text-black">Outros canais</h3>
              <ul className="mt-4 space-y-3 text-sm">
                <li className="flex items-center gap-3 text-black"><IPhone size={16} className="text-forest"/> +55 11 4000-0000</li>
                <li className="flex items-center gap-3 text-black"><IMail size={16} className="text-forest"/> contato@agenticx.com</li>
                <li className="flex items-center gap-3 text-black"><IClock size={16} className="text-forest"/> Seg–Sex · 9h às 19h (BRT)</li>
              </ul>
            </div>
          </aside>
        </div>
      </Container>
    </section>
  );
};

// ---------- Footer ----------
const Footer = () => (
  <footer data-screen-label="10 Footer" className="pt-20 bg-white">
    <Container>
      <div className="grid md:grid-cols-12 gap-12 pb-16">
        <div className="md:col-span-5">
          <img src="assets/logo-agenticx-wordmark.png" alt="AgenticX" className="h-11 w-auto"/>
          <p className="mt-5 max-w-xs text-sm text-slate leading-relaxed">
            Capacitando empresas com automação inteligente de WhatsApp. Expanda suporte e vendas sem expandir sua equipe.
          </p>
        </div>
        {[
          {h:'Produto', l:[{t:'Recursos',href:'#features'},{t:'Produtos',href:'#products'},{t:'Preço',href:'#precos'},{t:'Integrações',href:'#'}]},
          {h:'Empresa', l:[{t:'Sobre',href:'#about'},{t:'Blog',href:'#'},{t:'Carreiras',href:'#'},{t:'Imprensa',href:'#'}]},
          {h:'Legal', l:[{t:'Privacidade',href:'#privacidade'},{t:'Termos',href:'#termos'},{t:'LGPD',href:'#lgpd'},{t:'Segurança',href:'#seguranca'}]},
        ].map((col, i) => (
          <div key={i} className="md:col-span-2">
            <h4 className="text-sm font-semibold text-black">{col.h}</h4>
            <ul className="mt-4 space-y-3">
              {col.l.map((l, j) => <li key={j}><a href={l.href} className="text-sm text-slate hover:text-forest transition">{l.t}</a></li>)}
            </ul>
          </div>
        ))}
      </div>

      {/* Big wordmark */}
      <div className="border-t border-line py-10 flex items-end justify-between gap-6">
        <img src="assets/logo-agenticx-wordmark.png" alt="AgenticX" className="h-16 sm:h-24 w-auto"/>
        <div className="flex gap-2 mb-2">
          {['in','X','▶'].map((s, i) => (
            <a key={i} href="#" className="h-9 w-9 grid place-items-center rounded-full border border-line text-slate hover:border-forest hover:text-forest text-xs font-medium transition">{s}</a>
          ))}
        </div>
      </div>
    </Container>

    {/* Bottom strip — forest, like Ascone brand guide */}
    <div className="bg-forest text-white/80 text-xs">
      <Container className="flex flex-col sm:flex-row items-center justify-between gap-3 py-5">
        <span>© 2026 AgenticX. Todos os direitos reservados.</span>
        <span className="flex items-center gap-4">
          <a href="#legal" className="hover:text-white transition">Legal</a>
          <a href="#privacidade" className="hover:text-white transition">Privacidade</a>
          <a href="#termos" className="hover:text-white transition">Termos</a>
        </span>
      </Container>
    </div>
  </footer>
);

Object.assign(window, {
  Container, Eyebrow, SlideButton,
  Header, Hero, AICloud, About, Values, Products, Stats, FAQ, CTA, Contact, Footer,
});