/* Sections C: Como funciona, Segurança, Para quem é */
const {useState:useStateC,useEffect:useEffectC,useRef:useRefC} = React;
const DSC = window.BoraADSDesignSystem_ed15fe;

/* ---- Como funciona: 4 fases + console sincronizado ---- */
const FLOW_DUR=5200;
const FLOW=[
  {
    n:"01",code:"CONNECT",title:"Conecta",
    one:"OAuth oficial. Sem senha. Em 90 segundos.",
    desc:"Você autoriza o Google Ads via OAuth. O boraADS só recebe o escopo de operação de campanha — nunca billing, nunca senha.",
    points:["Conta conectada em ~90s","Sem ver sua senha","Pronto pra rodar o primeiro agente"],
    term:[
      [["c-acc","$ "],["","boraads connect --oauth google-ads"]],
      [["c-pos","✓ "],["","conta 784-120-3956 conectada em 87s"]],
      [["c-dim","  escopo › "],["","campanha · read + mutate (sem billing)"]],
    ],
  },
  {
    n:"02",code:"ANALYZE",title:"Analisa",
    one:"Agente lê a conta via GAQL e devolve propostas tipadas.",
    desc:"Escolhe um agente — a maioria começa pelo Negative Keyword Finder. Ele coleta em read-only, a IA analisa e só sobe o que passa no schema.",
    points:["Coleta GAQL read-only","Schema Zod + IDs reais","Impacto em R$ em cada achado"],
    term:[
      [["c-acc","$ "],["","boraads run negative-keyword-finder"]],
      [["c-dim","  GAQL › "],["","search_term_view · últimos 30 dias"]],
      [["c-warn","⚠ "],["","14 termos sem conversão · R$ 1.240/mês"]],
      [["c-pos","✓ "],["","schema válido · IDs conferidos"]],
    ],
  },
  {
    n:"03",code:"DECIDE",title:"Decide",
    one:"Diff, impacto e risco na sua frente. Nada aplica sozinho.",
    desc:"Cada proposta chega na fila com o que muda, por quê, impacto esperado e nível de risco. Você aprova uma a uma ou em lote com ⌘+Enter.",
    points:["Fila HITL obrigatória","Aprovação unitária ou em lote","Rejeitar mata a proposta"],
    term:[
      [["c-acc","→ "],["","14 propostas na fila · diff + impacto + risco"]],
      [["c-acc","$ "],["","aprovar em lote (⌘+Enter) · 14/14"]],
      [["c-pos","✓ "],["","14/14 aprovadas · 0 rejeitadas"]],
    ],
  },
  {
    n:"04",code:"APPLY",title:"Aplica",
    one:"API oficial do Google. Audit log append-only.",
    desc:"O que você aprovou sobe via Google Ads API, com partial_failure e trava de fila. Cada ação vira evento: antes, depois, quem, quando.",
    points:["Google Ads API oficial","partial_failure + lease","Histórico imutável"],
    term:[
      [["c-pos","✓ "],["","aplicado via Google Ads API · partial_failure ok"]],
      [["c-dim","  audit › "],["","antes/depois · aprovador · timestamp"]],
      [["c-pos","✓ "],["","primeira economia aprovada em 41 min"]],
    ],
  },
];
function ComoFunciona(){
  const [idx,setIdx]=useStateC(0);
  const [paused,setPaused]=useStateC(false);
  const [lines,setLines]=useStateC(0);
  const ref=useRefC(null);
  const phase=FLOW[idx];
  useEffectC(()=>{
    if(paused)return;
    const t=setTimeout(()=>setIdx(i=>(i+1)%FLOW.length),FLOW_DUR);
    return()=>clearTimeout(t);
  },[idx,paused]);
  useEffectC(()=>{
    setLines(0);
    let i=0;const timers=[];
    phase.term.forEach((_,n)=>{
      timers.push(setTimeout(()=>{i=n+1;setLines(i);},280+n*520));
    });
    return()=>timers.forEach(clearTimeout);
  },[idx]);
  return <section className="sec" id="como-funciona">
    <div className="wrap">
      <SectionHead center eyebrow="Como funciona, na prática" title="Da conta conectada à primeira economia aprovada em menos de uma hora.">
        Quatro fases. Uma fila de aprovação no meio. Zero mudança sem o seu OK.
      </SectionHead>
      <div className="flow" ref={ref} onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
        <Reveal cls="flow-rail">
          {FLOW.map((p,i)=>
            <button key={p.n} type="button" className={`flow-phase ${i===idx?"on":""}`} onClick={()=>setIdx(i)} aria-pressed={i===idx}>
              <span className="flow-phase-n">{p.n}</span>
              <span className="flow-phase-meta">
                <span className="flow-phase-code">{p.code}</span>
                <span className="flow-phase-title">{p.title}</span>
              </span>
              {i===idx&&<span className="flow-phase-prog" style={{"--flow-dur":FLOW_DUR+"ms"}}><i key={idx+""+paused}></i></span>}
            </button>)}
        </Reveal>
        <Reveal cls="flow-stage" d={80}>
          <div className="flow-copy" key={"c"+idx}>
            <p className="flow-one">→ {phase.one}</p>
            <p className="flow-desc">{phase.desc}</p>
            <ul className="flow-points">
              {phase.points.map((pt)=><li key={pt}>{LI(P.check,14)}<span>{pt}</span></li>)}
            </ul>
          </div>
          <div className="term flow-term" key={"t"+idx}>
            <div className="term-head"><i></i><i></i><i></i><span className="t">boraads · {phase.code.toLowerCase()}</span></div>
            <div className="term-body">
              {phase.term.slice(0,lines).map((ln,i)=>
                <div key={i} style={{animation:"agIn .25s var(--ease)"}}>{ln.map((seg,j)=><span key={j} className={seg[0]}>{seg[1]}</span>)}</div>)}
              {lines<phase.term.length&&<span className="term-caret"></span>}
            </div>
          </div>
        </Reveal>
        <Reveal cls="flow-foot" d={140}>
          <div className="flow-stat"><em>&lt; 60 min</em><span>até a primeira economia</span></div>
          <div className="flow-stat"><em>100%</em><span>com aprovação humana</span></div>
          <div className="flow-stat"><em>API</em><span>oficial do Google Ads</span></div>
        </Reveal>
      </div>
    </div>
  </section>;
}

/* ---- Segurança — feature grid com hover (Aceternity-style) ---- */
function SegFeature({title,description,icon,index}){
  const top=index<3;
  return <div className={`seg-feature ${top?"seg-feature-top":"seg-feature-bot"} ${index%3===0?"seg-feature-l":""}`}>
    <div className="seg-feature-wash" aria-hidden="true"></div>
    <div className="seg-feature-icon">{icon}</div>
    <div className="seg-feature-title">
      <span className="seg-feature-bar" aria-hidden="true"></span>
      <span className="seg-feature-name">{title}</span>
    </div>
    <p className="seg-feature-desc">{description}</p>
  </div>;
}
function Seguranca(){
  const features=[
    {ic:"shield",title:"Human-in-the-loop obrigatório",description:"Agentes são read-only por padrão. Geram propostas, não executam. Execução só após aprovação humana explícita — sempre."},
    {ic:"layers",title:"Validação dupla antes do dashboard",description:"Toda saída passa por schema Zod e checagem de IDs reais da conta. Campo ou métrica inventada: bloqueado antes de você ver."},
    {ic:"zap",title:"Execução atômica com trava",description:"Cada mutação roda isolada, com partial_failure e fila com lease: nada aplica duas vezes, nada quebra em cadeia."},
    {ic:"file",title:"Audit log append-only",description:"Toda aplicação registrada: antes, depois, aprovador, timestamp. Ninguém edita o histórico — nem a gente."},
    {ic:"ban",title:"Sem acesso a billing",description:"O boraADS não toca em método de pagamento nem estrutura administrativa da conta Google. Só operação de campanha."},
    {ic:"lock",title:"Dados isolados e cifrados",description:"Multi-tenant com RLS, tokens AES-256-GCM, LGPD em mente. Seus dados de campanha nunca treinam modelo — nosso ou de terceiros."},
  ];
  return <section className="sec" id="seguranca">
    <div className="wrap">
      <SectionHead center eyebrow="A parte que ninguém te conta" title="Por que deixar IA na sua conta? Porque aqui ela não tem a chave.">
        A desconfiança de quem ouve "IA no meu Google Ads" é justa. O boraADS foi arquitetado pra falhar em segurança — cada camada bloqueia antes da execução.
      </SectionHead>
      <Reveal cls="seg-features" d={100}>
        {features.map((f,i)=>
          <SegFeature key={f.title} index={i} title={f.title} description={f.description} icon={LI(P[f.ic],22)}/>)}
      </Reveal>
    </div>
  </section>;
}

/* ---- Para quem é ---- */
function ParaQuem(){
  const personas=[
    ["users","Agências","Dispara os agentes na carteira inteira e recebe a fila priorizada por impacto em R$. O sócio revisa em uma tela o que o time propôs em dez contas."],
    ["user","Gestores solo / freelancers","O operacional pesado sai da sua segunda-feira. Sobra o que o cliente paga de verdade: estratégia e relacionamento."],
    ["home","Times in-house","Um analista pleno disponível a qualquer hora, pelo preço de algumas horas de freela."],
    ["store","E-commerce","Shopping Auditor e PMAX Advisor pra quem vive de feed, asset group e ROAS — sem precisar virar especialista em Performance Max."]
  ];
  return <section className="sec" id="para-quem">
    <div className="wrap">
      <SectionHead title="Feito pra quem opera — de 1 a 50 contas."/>
      <div className="persona-grid">
        {personas.map(([ic,t,d],i)=><Reveal key={t} cls="persona" d={i*80}><p className="t">{LI(P[ic],16)}{t}</p><p>{d}</p></Reveal>)}
      </div>
    </div>
  </section>;
}

Object.assign(window,{ComoFunciona,Seguranca,ParaQuem});