/* Sections B: Problema, 9 Agentes, Campaign Builder, MCP */
const {useState:useStateB,useEffect:useEffectB,useRef:useRefB} = React;
const DSB = window.BoraADSDesignSystem_ed15fe;

/* ---- Problema ---- */
function Problema(){
  const {Badge}=DSB;
  const pains=[
    ["Tempo","clock","Planilha de auditoria atualizada no domingo de manhã"],
    ["Risco","eye","Aquela conta que ninguém abre há três semanas"],
    ["CPA ↑","bar","Headlines pinadas, performance estagnada há meses"],
    ["R$ 1,8k","ban","Search terms sem negativa consumindo budget calados"],
    ["ROAS −","target","Performance Max rodando como caixa-preta"],
    ["Atrito","msg","Cliente cobrando relatório, você caçando dado"]
  ];
  return <section className="sec" id="problema">
    <div className="wrap">
      <SectionHead eyebrow="O problema" title="Não é o Google Ads. É o tempo.">
        Você sabe que tem dinheiro vazando na conta. O que você não tem é 40 horas por semana pra puxar relatório de search terms, cruzar com Quality Score, abrir anúncio por anúncio, conferir landing page e ainda explicar pro cliente por que o CPA subiu. Ferramenta estrangeira até existe, mas cobra em dólar, atende em inglês, não emite NF e não tem Pix. <b>Optmyzr, Opteo e Adalysis foram desenhadas pra outro mercado.</b> O gestor brasileiro ficou com a planilha de domingo.
      </SectionHead>
      <div className="pain-grid">
        {pains.map(([k,ic,t],i)=><Reveal key={k} cls="pain" d={i*70}><span className="k">{LI(P[ic],13)}{k}</span><p>{t}</p></Reveal>)}
      </div>
    </div>
  </section>;
}

/* ---- 9 Agentes ---- */
const AGENTS=[
  {n:"01",code:"AA",name:"Account Auditor",one:"o raio-x da conta",icon:"bar",tone:"acc",desc:"Varre a estrutura inteira: campanhas, grupos, keywords, extensões, conversões. Devolve um score de saúde e a lista priorizada do que consertar primeiro.",sample:[["c-dim","GAQL"," campaign, ad_group, quality_score …"],["","32 findings"," · 6 críticos · score da conta 61/100"],["add","+ proposta:"," reativar rastreamento de conversão quebrado"]]},
  {n:"02",code:"NK",name:"Negative Keyword Finder",one:"estanca a sangria",icon:"ban",tone:"acc",desc:"Cruza search terms reais com conversões e intenção. Cada termo irrelevante vira proposta de negativa com o custo mensal que ele estava queimando.",sample:[["c-dim","GAQL"," search_term_view · últimos 30 dias"],["del",'− "curso gratuito"'," · R$ 412/mês · 0 conversões"],["add","+ 14 negativas"," · impacto projetado R$ 1.240/mês"]]},
  {n:"03",code:"AC",name:"Ad Copy Analyst",one:"anúncios que competem no leilão",icon:"file",tone:"info",desc:"Pontua cada RSA: headlines pinadas, ad strength, repetição, CTA fraco. Propõe variações novas dentro do limite de caracteres.",sample:[["","18 RSAs analisados"," · ad strength médio: “average”"],["del","− H1 pinada"," travando rotação há 4 meses"],["add","+ 6 headlines novas"," · score 7 → 9"]]},
  {n:"04",code:"KR",name:"Keyword Research",one:"acha termo que ninguém cobriu",icon:"search",tone:"info",desc:"Busca cauda longa e termos órfãos a partir do Keyword Planner oficial. O único agente que funciona sem histórico na conta.",sample:[["c-dim","Keyword Planner"," · volume real, nada inventado"],["","26 keywords novas"," · 8 de alta intenção"],["add","+ grupo sugerido:"," “conserto macbook zona sul”"]]},
  {n:"05",code:"LP",name:"Landing Page Analyzer",one:"onde a conversão morre",icon:"panel",tone:"muted",desc:"Faz fetch e parse da sua landing page de verdade: promessa vs. anúncio, CTA, velocidade, formulário. Aponta onde o clique pago se perde.",sample:[["c-dim","fetch"," https://cliente.com.br/promo"],["c-warn","fit anúncio ↔ página: 62%"," · CTA abaixo da dobra"],["add","+ 4 correções"," priorizadas por impacto"]]},
  {n:"06",code:"CI",name:"Competitive Intelligence",one:"onde você perde o leilão — e por quê",icon:"swords",tone:"muted",desc:"Cruza auction insights por campanha: quem toma sua impression share, quando e em qual dispositivo. Devolve os gaps acionáveis.",sample:[["c-dim","GAQL"," auction_insight · 90 dias"],["c-warn","IS perdida por budget: 31%"," na campanha Search"],["add","+ 5 gaps"," vs. os 3 maiores concorrentes"]]},
  {n:"07",code:"PM",name:"PMAX Advisor",one:"abre a caixa-preta",icon:"target",tone:"acc",desc:"Decompõe a Performance Max: asset groups, sinais de audiência, placements, canibalização com Search. O que o Google não mostra, ele mostra.",sample:[["","3 asset groups"," · 1 sem sinal de audiência"],["del","− 6 placements de app"," · R$ 890 · 0 conv"],["add","+ 9 recomendações"," com risco classificado"]]},
  {n:"08",code:"SA",name:"Shopping Auditor",one:"caça SKU zumbi",icon:"cart",tone:"info",desc:"Audita feed e campanhas de Shopping: produto reprovado, título fraco, SKU gastando sem vender. ROAS por produto, não por média.",sample:[["c-dim","feed"," 1.284 SKUs · 41 reprovados"],["del","− 17 SKUs zumbis"," gastando R$ 610/mês"],["add","+ ROAS 2,3 → 4,1"," projetado no grupo"]]},
  {n:"09",code:"WA",name:"Weekly Audit",one:"o relatório que você manda pro cliente",icon:"cal",tone:"muted",desc:"Consolida a semana da conta em um resumo executivo: o que mudou, o que foi aprovado, o que vem. Pronto pra encaminhar, com PDF white-label.",sample:[["c-dim","resumo"," 2026-W29 · Clínica Vitalle"],["","CPA −12%"," · 21 propostas aplicadas"],["add","+ PDF"," com a sua marca, não a nossa"]]}
];
const AG_DUR=5200;
function Agentes(){
  const {AgentAvatar,Badge}=DSB;
  const [idx,setIdx]=useStateB(0);
  const [paused,setPaused]=useStateB(false);
  useEffectB(()=>{
    if(paused)return;
    const t=setTimeout(()=>setIdx(i=>(i+1)%AGENTS.length),AG_DUR);
    return()=>clearTimeout(t);
  },[idx,paused]);
  const a=AGENTS[idx];
  return <section className="sec" id="agentes">
    <div className="wrap">
      <SectionHead center eyebrow="Os 9 agentes" title="Uma equipe de especialistas de IA. Cada um faz uma coisa — bem feita.">
        Cada agente lê dados reais da sua conta via GAQL, analisa com prompt especializado e devolve propostas tipadas — com impacto estimado e nível de risco. Escolha um pra ver o que ele entrega.
      </SectionHead>
      <div className="agents-showcase" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
        <Reveal cls="agents-rail">
          {AGENTS.map((ag,i)=>
            <button key={ag.n} type="button" className={`agents-chip ${i===idx?"on":""}`} onClick={()=>setIdx(i)} aria-pressed={i===idx} aria-label={ag.name}>
              <span className="agents-chip-icon" aria-hidden="true">{LI(P[ag.icon],16)}</span>
              <span className="agents-chip-name">{ag.name}</span>
              {i===idx&&<span className="agents-chip-prog" style={{"--ag-dur":AG_DUR+"ms"}}><i key={idx+""+paused}></i></span>}
            </button>)}
        </Reveal>
        <Reveal cls="agents-panel" d={80}>
          <div className="agents-panel-glow" aria-hidden="true"></div>
          <div className="agent-detail" key={idx}>
            <div className="agents-panel-top">
              <div className="agent-head">
                <AgentAvatar code={a.code} tone={a.tone} size={48} icon={LI(P[a.icon],22)} pulse/>
                <div>
                  <div className="t">{a.name}</div>
                  <div className="s">agente {a.n}/09 · read-only por padrão</div>
                </div>
              </div>
              <Badge variant="acc" pulse>analisando</Badge>
            </div>
            <div className="agents-panel-body">
              <div className="agents-panel-copy">
                <p className="agent-one">→ {a.one}</p>
                <p className="agent-desc">{a.desc}</p>
                <p className="agents-panel-note">impacto potencial projetado (estimativa do agente) · nada executa sem aprovação</p>
              </div>
              <div className="agent-sample">
                <div className="agent-sample-label">saída tipada</div>
                {a.sample.map((r,i)=><div className="row" key={i}><span className={r[0]}>{r[1]}</span><span className="agent-sample-rest">{r[2]}</span></div>)}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>;
}

/* ---- Campaign Builder ---- */
function Builder(){
  const Anim=window.BuilderAnim;
  return <section className="sec" id="builder">
    <div className="wrap">
      <SectionHead eyebrow="Campaign Builder" title="Auditar é metade. A outra metade é montar campanha certa desde o dia zero."/>
      <div className="split builder-split" style={{marginTop:36}}>
        <Reveal dir="l">
          <p className="lead">Conta nova ou produto sem campanha? O Campaign Builder monta uma <b>campanha de Search completa</b> num wizard guiado: lê sua landing page de verdade, puxa ideias do <b>Keyword Planner oficial do Google</b> (nada de volume inventado), agrupa keywords por intenção, escreve os anúncios dentro do limite de caracteres e já propõe as <b>negativas iniciais</b> — o desperdício clássico bloqueado antes do primeiro clique.</p>
          <p className="lead" style={{marginTop:14}}>Você revisa cada etapa — keywords, copies, orçamento — e quando publica, <b>a campanha sobe pausada</b> no Google Ads. Grupos, keywords e anúncios prontos; quem liga é você.</p>
          <ul className="bullets">
            <li>{LI(P.check)}<span>Só <b>EXACT e PHRASE</b> nas keywords positivas — broad match em conta nova é doação</span></li>
            <li>{LI(P.check)}<span><b>Diagnóstico de estratégia incluso:</b> por que N grupos, risco de budget, qualidade da conversão</span></li>
            <li>{LI(P.check)}<span>Rascunho editável com autosave — <span className="mono" style={{fontSize:12}}>rascunho → revisão → publicada (pausada)</span></span></li>
            <li>{LI(P.check)}<span>Performance Max e Shopping: <b>em seguida</b></span></li>
          </ul>
          <div style={{marginTop:28}}><ShimmerButton size="lg" href="https://app.boraads.com.br/signup" iconRight={LI(P.arrow)}>Montar minha primeira campanha</ShimmerButton></div>
        </Reveal>
        <Reveal dir="r" d={120} cls="builder-anim-wrap">
          {Anim ? <Anim/> : null}
        </Reveal>
      </div>
    </div>
  </section>;
}

/* ---- MCP ---- */
const LLM_LOGOS=[
  {src:"/lp/assets/llms/anthropic.svg",name:"Claude"},
  {src:"/lp/assets/llms/openai.svg",name:"OpenAI"},
  {src:"/lp/assets/llms/googlegemini.svg",name:"Gemini"},
  {src:"/lp/assets/llms/meta.svg",name:"Llama"},
  {src:"/lp/assets/llms/mistralai.svg",name:"Mistral"},
  {src:"/lp/assets/llms/perplexity.svg",name:"Perplexity"},
  {src:"/lp/assets/llms/x.svg",name:"Grok"},
  {src:"/lp/assets/llms/huggingface.svg",name:"Hugging Face"},
  {src:"/lp/assets/llms/ollama.svg",name:"Ollama"},
];
function LlmMarquee(){
  const items=[...LLM_LOGOS,...LLM_LOGOS];
  return <div className="llm-marquee" aria-label="Clientes de IA compatíveis via MCP">
    <div className="llm-track">
      {items.map((l,i)=>
        <div className="llm-item" key={i} aria-hidden={i>=LLM_LOGOS.length}>
          <img src={l.src} alt="" width="22" height="22" loading="lazy"/>
          <span>{l.name}</span>
        </div>)}
    </div>
  </div>;
}
const MCP_SCRIPT=[
  {t:"u",txt:"Como foi a semana da Clínica Vitalle? Onde estou desperdiçando?"},
  {t:"a",tool:"boraads · get_performance_report + search_terms",txt:"CPA caiu 8% na semana. Achei R$ 412/mês em search terms sem conversão na campanha Search. Quer que eu proponha as negativas?"},
  {t:"u",txt:"Propõe. E ajusta o budget da campanha de marca pra R$ 30/dia."},
  {t:"route",txt:"2 propostas criadas → caíram na sua fila de aprovação no app, com diff, impacto e risco. Nada executou no chat."},
];
function McpChat(){
  const [done,setDone]=useStateB([]);
  const [draft,setDraft]=useStateB("");
  const [stream,setStream]=useStateB("");
  const [streamTool,setStreamTool]=useStateB("");
  const [streaming,setStreaming]=useStateB(false);
  const [enterOn,setEnterOn]=useStateB(false);
  const [thinking,setThinking]=useStateB(false);
  const logRef=useRefB(null);
  const wrapRef=useRefB(null);
  const alive=useRefB(true);
  const wait=(ms)=>new Promise((r)=>setTimeout(r,ms));
  useEffectB(()=>{
    alive.current=true;
    const el=wrapRef.current;if(!el)return;
    let running=false;
    const typeUser=async(txt)=>{
      setDraft("");
      for(let i=1;i<=txt.length;i++){
        if(!alive.current)return;
        setDraft(txt.slice(0,i));
        await wait(18+Math.random()*28);
      }
      setEnterOn(true);
      await wait(220);
      setEnterOn(false);
      setDone((d)=>[...d,{t:"u",txt}]);
      setDraft("");
      await wait(380);
    };
    const typeAssistant=async(msg)=>{
      setThinking(true);
      await wait(700);
      if(!alive.current)return;
      setThinking(false);
      setStreaming(true);
      setStreamTool(msg.tool||"");
      setStream("");
      for(let i=1;i<=msg.txt.length;i++){
        if(!alive.current)return;
        setStream(msg.txt.slice(0,i));
        await wait(10+Math.random()*16);
      }
      setDone((d)=>[...d,{t:"a",tool:msg.tool,txt:msg.txt}]);
      setStreaming(false);
      setStream("");
      setStreamTool("");
      await wait(500);
    };
    const showRoute=async(txt)=>{
      await wait(450);
      if(!alive.current)return;
      setDone((d)=>[...d,{t:"route",txt}]);
      await wait(2200);
    };
    const loop=async()=>{
      if(running)return;running=true;
      while(alive.current){
        setDone([]);setDraft("");setStream("");setStreaming(false);setThinking(false);
        for(const msg of MCP_SCRIPT){
          if(!alive.current)return;
          if(msg.t==="u") await typeUser(msg.txt);
          else if(msg.t==="a") await typeAssistant(msg);
          else await showRoute(msg.txt);
        }
        await wait(1600);
      }
    };
    const io=new IntersectionObserver(([e])=>{
      if(e.isIntersecting){io.disconnect();loop();}
    },{threshold:.35});
    io.observe(el);
    return()=>{alive.current=false;io.disconnect();};
  },[]);
  useEffectB(()=>{
    const box=logRef.current;if(box) box.scrollTop=box.scrollHeight;
  },[done,draft,stream,thinking]);
  return <div className="panel mcp-chat" ref={wrapRef}>
    <div className="panel-head">{LI(P.msg,13)}<span>Claude · conectado ao boraADS via MCP</span><span className="mono" style={{marginLeft:"auto",color:"var(--pos)"}}>● 40+ ferramentas</span></div>
    <div className="mcp-chat-body">
      <div className="chat mcp-chat-log" ref={logRef}>
        {done.map((m,i)=> m.t==="route"
          ? <div key={i} className="msg-route" style={{animation:"agIn .35s var(--ease)"}}>{LI(P.shield,16)}<span>{m.txt}</span></div>
          : <div key={i} className={`msg ${m.t}`} style={{animation:"agIn .3s var(--ease)"}}>{m.tool&&<span className="tool">⌁ {m.tool}</span>}{m.txt}</div>)}
        {thinking&&<div className="msg a mcp-thinking"><span className="tool">⌁ boraads · pensando</span><span className="mcp-dots"><i/><i/><i/></span></div>}
        {streaming&&<div className="msg a">{streamTool&&<span className="tool">⌁ {streamTool}</span>}{stream}<span className="mcp-stream-caret"/></div>}
      </div>
      <div className={`mcp-composer ${enterOn?"is-enter":""}`}>
        <div className="mcp-composer-in">
          <span className="mcp-composer-text">{draft||<span className="mcp-ph">Pergunte sobre suas contas…</span>}</span>
          <span className={`mcp-caret ${draft||streaming||thinking?"":"idle"}`}/>
        </div>
        <span className={`mcp-enter ${enterOn?"on":""}`} aria-hidden="true">⏎</span>
      </div>
    </div>
  </div>;
}
function Mcp(){
  return <section className="sec" id="mcp">
    <div className="wrap">
      <SectionHead eyebrow="Servidor MCP" title="Traga sua própria IA. O controle continua aqui."/>
      <Reveal cls="llm-marquee-wrap" d={80}>
        <p className="llm-marquee-label">Funciona com os principais clientes de IA via MCP</p>
        <LlmMarquee/>
      </Reveal>
      <div className="split" style={{marginTop:36}}>
        <Reveal dir="l"><McpChat/></Reveal>
        <Reveal dir="r" d={120}>
          <p className="lead">O boraADS tem um <b>servidor MCP remoto</b> — o protocolo aberto que conecta ferramentas a assistentes de IA. Na prática: você conversa com o <b>Claude</b> (ou qualquer cliente MCP) sobre suas contas e o assistente opera com mais de 40 ferramentas do boraADS: relatórios de performance, search terms, pacing de verba, dados de leilão, GAQL direto.</p>
          <p className="lead" style={{marginTop:14}}>E quando a conversa gera uma ação — negativar termo, ajustar budget, pausar anúncio — <b>a proposta não executa no chat</b>. Ela cai na sua fila de aprovação no app, com diff, impacto e risco, como qualquer outra. <b>A IA é sua. O freio é nosso.</b></p>
          <ul className="bullets">
            <li>{LI(P.check)}<span>Funciona com Claude e qualquer cliente compatível com MCP</span></li>
            <li>{LI(P.check)}<span>API keys por organização, com escopo por conta e revogação a qualquer momento</span></li>
            <li>{LI(P.check)}<span>Toda proposta vinda do chat fica registrada — quem pediu, quando, o que mudaria</span></li>
            <li>{LI(P.check)}<span>40+ ferramentas: leitura de dados, relatórios, propostas e rascunhos de campanha</span></li>
          </ul>
          <div style={{marginTop:28}}><ShimmerButton variant="secondary" size="lg" href="https://app.boraads.com.br/signup" icon={LI(P.key)}>Conectar meu assistente</ShimmerButton></div>
        </Reveal>
      </div>
    </div>
  </section>;
}

Object.assign(window,{Problema,Agentes,Builder,Mcp});