/* Sections D: Planos, FAQ, CTA final, Footer */
const {useState:useStateD,useEffect} = React;
const DSD = window.BoraADSDesignSystem_ed15fe;

/* ---- Planos ---- */
const PLANS=[
  {nm:"Studio",who:"Ideal pra gestor solo testar o fluxo com poucas contas.",m:197,y:1970,hot:false,cta:"Começar no Studio",feats:["Até 5 contas Google Ads","50 audits/mês","1 usuário","4 dos 9 agentes","Suporte por e-mail"]},
  {nm:"Squad",who:"Melhor pra agências e times que já operam multi-conta.",m:597,y:5970,hot:true,cta:"Começar no Squad",feats:["Até 20 contas","250 audits/mês","Até 5 usuários","Todos os 9 agentes","PDF white-label","Excedente: R$ 1,50/audit"]},
  {nm:"Agency",who:"Pra operação em escala, com contas e usuários sem teto.",m:1497,y:14970,hot:false,cta:"Começar no Agency",feats:["Contas ilimitadas","1.000 audits/mês","Usuários ilimitados","Todos os 9 agentes","PDF white-label · API","Excedente: R$ 1,00/audit"]}
];
function Planos(){
  const [annual,setAnnual]=useStateD(false);
  const [pColor,setPColor]=useStateD("#9DB7FF");
  const ParticlesComp=window.Particles;
  useEffect(()=>{
    const sync=()=>{
      const t=document.documentElement.dataset.theme||"dark";
      setPColor(t==="light"?"#2F5FCC":"#9DB7FF");
    };
    sync();
    const mo=new MutationObserver(sync);
    mo.observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});
    return()=>mo.disconnect();
  },[]);
  const fmt=n=>n.toLocaleString("pt-BR");
  const Grid=window.AnimatedGridPattern;
  return <section className="sec planos-sec" id="planos">
    {Grid&&<Grid numSquares={30} maxOpacity={0.12} duration={3} repeatDelay={1} className="hero-agp planos-agp"/>}
    <div className="wrap planos-wrap" style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
      <SectionHead center eyebrow="Planos" title="Sem dólar, sem surpresa na fatura.">
        Cobrança via Asaas — Pix, boleto ou cartão. Sem fidelidade, NF-e automática. Todos os planos começam com <b>7 dias de trial grátis, sem cartão</b>. <b>No anual, você paga 10 meses e usa 12.</b>
      </SectionHead>
      <Reveal cls="bill-toggle" d={160}>
        <button type="button" className={annual?"":"on"} onClick={()=>setAnnual(false)}>Mensal</button>
        <button type="button" className={annual?"on":""} onClick={()=>setAnnual(true)}>Anual<span className="save">−2 meses</span></button>
      </Reveal>
      <div className="plans" style={{width:"100%"}}>
        {PLANS.map((p,i)=>{
          const main=annual?Math.round(p.y/12):p.m;
          const note=annual?`R$ ${fmt(p.y)}/ano · paga 10, usa 12`:`ou R$ ${fmt(p.y)}/ano`;
          return (
            <Reveal key={p.nm} cls={`plan ${p.hot?"hot":""}`} d={i*90}>
              {p.hot&&ParticlesComp&&(
                <ParticlesComp className="plan-hot-particles" quantity={48} ease={70} staticity={45} size={0.5} color={pColor} refresh/>
              )}
              {p.hot&&<span className="plan-shine" aria-hidden="true"/>}
              {p.hot&&<span className="pop">Mais popular</span>}
              <div className="plan-body">
                <div className="plan-top">
                  <span className="nm">{p.nm}</span>
                  <div className="price">
                    <span className="cur">R$</span>
                    <span className="amt">{fmt(main)}</span>
                    <span className="per">/mês</span>
                  </div>
                  <p className="who">{p.who}</p>
                  <p className="annual">{note}</p>
                </div>
                {p.hot
                  ? <ShimmerButton size="lg" href="https://app.boraads.com.br/signup" className="shimmer-btn-block plan-cta">{p.cta}</ShimmerButton>
                  : <ShimmerButton variant="secondary" size="lg" href="https://app.boraads.com.br/signup" className="shimmer-btn-block plan-cta">{p.cta}</ShimmerButton>}
                <div className="plan-feats">
                  <div className="plan-feats-label"><span>O que inclui</span></div>
                  <ul>
                    {p.feats.map((f,j)=>(
                      <li key={j}>
                        <span className="plan-check" aria-hidden="true">{LI(P.check,12)}</span>
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
      <Reveal as="p" cls="plans-foot" d={200}>7 dias de trial · sem cartão · cancela quando quiser · enterprise? <a href="/contato">fale com a gente</a></Reveal>
    </div>
  </section>;
}

/* ---- FAQ ---- */
/* [ícone, pergunta, resposta] — ícones vêm do dicionário P (sections-a) */
const FAQS=[
  ["spark","A IA alucina recomendações?","Toda saída de agente passa por três camadas: schema Zod (estrutura), checagem contra os IDs reais da sua conta (existência) e a sua revisão (intenção). Proposta com ID inválido ou métrica inventada é bloqueada antes de chegar ao dashboard. E mesmo o que passa não executa nada — só vira proposta pendente."],
  ["lock","Vocês compartilham meus dados com terceiros?","O modelo de IA processa o contexto da auditoria — dados de campanha agregados, sem dado pessoal de cliente final — apenas pra gerar a análise. Seus dados não treinam modelos, nossos ou de terceiros. O Google só recebe chamada de API quando você aprova uma ação. Tokens de acesso ficam cifrados (AES-256-GCM) e cada organização é isolada por RLS no banco."],
  ["target","O boraADS cria campanhas ou só audita?","Os dois. Os 9 agentes cuidam do que já existe; o Campaign Builder monta campanha de Search do zero — keywords do Keyword Planner, anúncios, negativas iniciais — e publica pausada pra você ligar quando quiser. Performance Max e Shopping estão no roadmap do Builder."],
  ["msg","Posso usar o boraADS de dentro do Claude?","Sim. O boraADS expõe um servidor MCP: você gera uma API key no app, conecta no seu cliente de IA e conversa com suas contas — relatórios, search terms, pacing, leilão. Qualquer ação proposta na conversa cai na fila de aprovação do app antes de tocar na conta."],
  ["cal","Tem desconto no plano anual?","Tem. No anual você paga o equivalente a 10 meses — Studio R$ 1.970, Squad R$ 5.970, Agency R$ 14.970 — com a mesma regra de sempre: sem fidelidade escondida, NF-e automática."]
];
function Faq(){
  const [open,setOpen]=useStateD(0);
  return <section className="sec" id="faq">
    <div className="wrap" style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
      <SectionHead center eyebrow="FAQ" title="Perguntas diretas, respostas diretas."/>
      <div className="faq" style={{width:"100%"}}>
        {FAQS.map(([ic,q,a],i)=>
          <Reveal key={i} cls={`faq-item ${open===i?"open":""}`} d={i*60}>
            <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
              <span className="faq-ic" aria-hidden="true">{LI(P[ic],16)}</span>
              <span className="faq-q-text">{q}</span>
              <span className="faq-plus" aria-hidden="true">{LI(P.plus,15)}</span>
            </button>
            <div className="faq-a">
              <div className="faq-a-in"><p>{a}</p></div>
            </div>
          </Reveal>)}
      </div>
    </div>
  </section>;
}

/* ---- CTA final ---- */
function FinalCta(){
  const Grid=window.AnimatedGridPattern;
  return <section className="final">
    {Grid&&<Grid numSquares={30} maxOpacity={0.12} duration={3} repeatDelay={1} className="hero-agp final-agp"/>}
    <div className="wrap final-in">
      <Reveal as="h2" cls="h2">A auditoria da sua conta pode ser domingo de manhã, na unha. <span style={{color:"var(--acc)"}}>Ou agora.</span></Reveal>
      <Reveal as="p" cls="lead" d={100}>Conecta a conta em 90 segundos, roda o primeiro agente e recebe a fila de propostas com o desperdício em R$ na frente.<br/>O que você aprovar, a gente aplica. O que não, morre na fila.</Reveal>
      <Reveal cls="ctas" d={200}>
        <ShimmerButton size="lg" href="https://app.boraads.com.br/signup" iconRight={LI(P.arrow)}>Começar trial de 7 dias</ShimmerButton>
        <ShimmerButton variant="secondary" size="lg" href="#planos">Ver planos</ShimmerButton>
      </Reveal>
      <Reveal as="p" cls="sub" d={280}>Sem cartão · OAuth oficial do Google · Primeiro relatório em menos de 1 hora</Reveal>
    </div>
  </section>;
}

/* ---- Footer ---- */
function LpFooter(){
  const [theme,setTheme]=useStateD(()=>document.documentElement.dataset.theme||"dark");
  useEffect(()=>{
    const sync=()=>setTheme(document.documentElement.dataset.theme||"dark");
    sync();
    const mo=new MutationObserver(sync);
    mo.observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});
    return()=>mo.disconnect();
  },[]);
  const logo=theme==="light"?"/lp/assets/boraads-logo-light.svg":"/lp/assets/boraads-logo-dark.svg";
  return <footer className="lp-foot">
    <div className="wrap" style={{display:"flex",alignItems:"center",gap:24,flexWrap:"wrap",width:"100%"}}>
      <a href="/"><img src={logo} alt="boraADS"/></a>
      <p className="tag">Gestão de Google Ads com IA, feita por brasileiros pro mercado brasileiro. Co-piloto, não piloto automático.</p>
      <div className="links"><a href="/blog">Blog</a><a href="/privacidade">Privacidade</a><a href="/termos">Termos</a><span style={{color:"var(--fg-3)",fontSize:12.5}}>© 2026 boraADS</span></div>
    </div>
  </footer>;
}

Object.assign(window,{Planos,Faq,FinalCta,LpFooter});