/* Campaign Builder — animação de criação (port do design Animação de criação de campanha) */
(function () {
  const { useState, useEffect, useRef, useMemo } = React;
  const LI = window.LI;
  const P = window.P;
  const URL = "cliente.com.br/promo";
  const BUDGET = 50;
  const SCENES = [
    { id: "idle", dur: 1.4 },
    { id: "landing", dur: 2.8 },
    { id: "keywords", dur: 3.0 },
    { id: "ads", dur: 3.0 },
    { id: "neg", dur: 2.4 },
    { id: "budget", dur: 2.4 },
    { id: "publish", dur: 2.8 },
    { id: "reset", dur: 1.4 },
  ];
  const TOTAL = SCENES.reduce((a, s) => a + s.dur, 0);
  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
  const win = (p, s, e) => clamp((p - s) / (e - s), 0, 1);
  const STEP_META = [
    { label: "Landing page", meta: `${URL} · fit 84%` },
    { label: "Keywords (Keyword Planner)", meta: "26 termos · 4 grupos por intenção" },
    { label: "Anúncios RSA", meta: "12 headlines · 8 descrições" },
    { label: "Negativas iniciais", meta: "18 termos bloqueados" },
    { label: "Orçamento e lances", meta: `R$ ${BUDGET}/dia · maximizar conversões` },
  ];
  const KW = [
    ["comprar tênis de corrida", "1.9k", "EXACT"],
    ["tênis para corrida", "2.4k", "PHRASE"],
    ["tênis running masculino", "880", "EXACT"],
    ["melhor tênis de corrida", "1.3k", "PHRASE"],
    ["tênis corrida promoção", "510", "EXACT"],
    ["loja de tênis de corrida", "390", "PHRASE"],
  ];
  const KGROUPS = [["Marca", 6], ["Genérico", 9], ["Concorrente", 5], ["Long-tail", 6]];
  const HEADS = [
    "Tênis de corrida oficiais",
    "Frete grátis acima de R$199",
    "Modelos leves pra maratona",
    "Promo: até 30% OFF hoje",
    "Troca fácil em 30 dias",
  ];
  const NEG = ["grátis", "download", "torrent", "usado", "aluguel", "conserto", "emprego", "curso", "pdf", "réplica", "atacado", "reclame aqui"];

  function sceneAt(t) {
    let acc = 0;
    for (let i = 0; i < SCENES.length; i++) {
      const s = SCENES[i];
      if (t < acc + s.dur) return { i, id: s.id, p: (t - acc) / s.dur, local: t - acc };
      acc += s.dur;
    }
    return { i: 0, id: "idle", p: 0, local: 0 };
  }

  function rowsFor(id, p) {
    if (id === "idle") return [0, 0, 0, 0, 0];
    if (id === "landing") return [1 + clamp((p - 0.5) / 0.33, 0, 1), clamp((p - 0.82) / 0.18, 0, 1), 0, 0, 0];
    if (id === "keywords") return [2, 1 + clamp((p - 0.52) / 0.32, 0, 1), clamp((p - 0.86) / 0.14, 0, 1), 0, 0];
    if (id === "ads") return [2, 2, 1 + clamp((p - 0.5) / 0.34, 0, 1), clamp((p - 0.86) / 0.14, 0, 1), 0];
    if (id === "neg") return [2, 2, 2, 1 + clamp((p - 0.5) / 0.34, 0, 1), clamp((p - 0.86) / 0.14, 0, 1)];
    if (id === "budget") return [2, 2, 2, 2, 1 + clamp((p - 0.5) / 0.42, 0, 1)];
    if (id === "publish") return [2, 2, 2, 2, 2];
    if (id === "reset") {
      const fade = clamp((p - 0.18) / 0.55, 0, 1);
      const v = 2 * (1 - fade);
      return [v, v, v, v, v];
    }
    return [0, 0, 0, 0, 0];
  }

  function fillFor(id, p) {
    if (id === "idle") return 0;
    if (id === "landing") return win(p, 0.12, 0.86);
    if (id === "keywords") return 1 + win(p, 0.12, 0.86);
    if (id === "ads") return 2 + win(p, 0.12, 0.86);
    if (id === "neg") return 3 + win(p, 0.12, 0.86);
    if (id === "budget") return 4 + win(p, 0.12, 0.9);
    if (id === "publish") return 5;
    if (id === "reset") return 5 * (1 - clamp((p - 0.18) / 0.6, 0, 1));
    return 0;
  }

  function Chip({ children, tone }) {
    return <span className={`cb-chip cb-chip-${tone || "mute"}`}>{children}</span>;
  }

  function ScoreRing({ value }) {
    const size = 72;
    const r = (size - 8) / 2;
    const circ = 2 * Math.PI * r;
    const frac = clamp(value / 100, 0, 1);
    return (
      <div className="cb-ring" style={{ width: size, height: size }}>
        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--bg-4, #222A3D)" strokeWidth="5" />
          <circle
            cx={size / 2}
            cy={size / 2}
            r={r}
            fill="none"
            stroke="var(--acc)"
            strokeWidth="5"
            strokeLinecap="round"
            strokeDasharray={circ}
            strokeDashoffset={circ * (1 - frac)}
            transform={`rotate(-90 ${size / 2} ${size / 2})`}
          />
        </svg>
        <span>{Math.round(value)}%</span>
      </div>
    );
  }

  function PaneHead({ eye, title, sub }) {
    return (
      <div className="cb-pane-head">
        <div className="cb-eye">{eye}</div>
        <div className="cb-pane-title">{title}</div>
        {sub ? <div className="cb-pane-sub">{sub}</div> : null}
      </div>
    );
  }

  function IdlePane({ pulse }) {
    const ph = pulse * Math.PI * 2;
    return (
      <div className="cb-idle">
        <div className="cb-idle-orb" style={{ transform: `scale(${1 + (0.5 + 0.5 * Math.sin(ph * 2)) * 0.12})` }}>
          <div className="cb-idle-icon">{LI(P.spark, 28)}</div>
        </div>
        <div className="cb-eye">Agente · Campaign Builder</div>
        <div className="cb-idle-title">Montando sua campanha de Search</div>
        <div className="cb-idle-dots">
          {[0, 1, 2].map((i) => (
            <i key={i} style={{ opacity: 0.25 + 0.75 * (0.5 + 0.5 * Math.sin(ph * 3 - i * 0.9)) }} />
          ))}
        </div>
      </div>
    );
  }

  function LandingPane({ p }) {
    const typeT = win(p, 0.06, 0.34);
    const typed = URL.slice(0, Math.round(URL.length * typeT));
    const caret = typeT > 0 && typeT < 1;
    const scanT = win(p, 0.3, 0.66);
    const resT = win(p, 0.58, 0.95);
    const fit = 84 * win(p, 0.62, 0.96);
    const blocks = [
      { y: 8, h: 14, w: "42%" },
      { y: 30, h: 44, w: "100%" },
      { y: 84, h: 8, w: "88%" },
      { y: 98, h: 8, w: "72%" },
      { y: 114, h: 18, w: "38%" },
    ];
    return (
      <div className="cb-pane">
        <PaneHead eye="Etapa 1 · Landing page" title="Lendo sua landing page de verdade" sub="Produto, oferta e CTA reais. Nada de volume inventado." />
        <div className={`cb-url ${caret ? "is-focus" : ""}`}>
          {LI(P.search, 14)}
          <span className="mono">{typed || "URL da landing page"}</span>
          {caret ? <span className="cb-caret" /> : null}
          <span style={{ flex: 1 }} />
          <Chip tone={resT > 0.4 ? "pos" : "acc"}>{resT > 0.4 ? "lida" : "lendo…"}</Chip>
        </div>
        <div className="cb-land-grid">
          <div className="cb-scan-box">
            <div className="cb-scan-inner">
              {blocks.map((b, i) => (
                <div
                  key={i}
                  className="cb-scan-block"
                  style={{
                    top: b.y,
                    width: b.w,
                    height: b.h,
                    opacity: 0.35 + 0.65 * clamp((scanT * 140 - b.y) / 30, 0, 1),
                  }}
                />
              ))}
              {scanT > 0 && scanT < 1 ? <div className="cb-scan-line" style={{ top: scanT * 140 }} /> : null}
            </div>
            <div className="cb-scan-foot mono" style={{ opacity: resT }}>{">"} conteúdo extraído · produto, oferta, CTA</div>
          </div>
          <div className="cb-fit" style={{ opacity: resT, transform: `translateY(${(1 - resT) * 10}px)` }}>
            <ScoreRing value={fit} />
            <div className="cb-eye">fit da landing</div>
            <div className="cb-fit-chips">
              <Chip>produto: tênis</Chip>
              <Chip>oferta: −30%</Chip>
              <Chip>CTA: comprar</Chip>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function KeywordsPane({ p }) {
    const total = Math.round(26 * win(p, 0.12, 0.8));
    return (
      <div className="cb-pane">
        <PaneHead eye="Etapa 2 · Keywords" title="Puxando do Keyword Planner oficial" sub="Agrupadas por intenção. Só EXACT e PHRASE." />
        <div className="cb-kw-grid">
          <div className="cb-kw-list">
            <div className="cb-kw-head">
              <span>termo · volume/mês</span>
              <span className="acc">{total} termos</span>
            </div>
            {KW.map((k, i) => {
              const t = win(p, 0.14 + i * 0.09, 0.14 + i * 0.09 + 0.14);
              return (
                <div key={i} className="cb-kw-row" style={{ opacity: t, transform: `translateY(${(1 - t) * 6}px)` }}>
                  <span className="mono term">{k[0]}</span>
                  <span className="mono vol">{k[1]}</span>
                  <Chip tone={k[2] === "EXACT" ? "acc" : "mute"}>{k[2]}</Chip>
                </div>
              );
            })}
          </div>
          <div className="cb-kw-groups">
            <div className="cb-eye">4 grupos por intenção</div>
            {KGROUPS.map((g, i) => {
              const t = win(p, 0.35 + i * 0.1, 0.35 + i * 0.1 + 0.2);
              return (
                <div key={i} className="cb-group" style={{ opacity: clamp(t * 1.4, 0, 1), transform: `translateY(${(1 - t) * 8}px)` }}>
                  <span>{g[0]}</span>
                  <span className="acc mono">{Math.round(g[1] * t)}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  function AdsPane({ p }) {
    return (
      <div className="cb-pane">
        <PaneHead eye="Etapa 3 · Anúncios RSA" title="Escrevendo os anúncios" sub="12 headlines · 8 descrições, dentro do limite." />
        <div className="cb-ads-grid">
          <div className="cb-heads">
            <div className="cb-eye">Headlines</div>
            {HEADS.map((h, i) => {
              const start = 0.12 + i * 0.11;
              const t = win(p, start, start + 0.16);
              const shown = h.slice(0, Math.round(h.length * t));
              const done = t > 0.98;
              return (
                <div key={i} className={`cb-head-row ${t > 0 && !done ? "typing" : ""} ${done ? "done" : ""}`} style={{ opacity: t > 0 ? 1 : 0.35 }}>
                  <span className="mono idx">H{i + 1}</span>
                  <span className="txt">
                    {shown}
                    {t > 0 && !done ? <i className="cb-caret" /> : null}
                  </span>
                  <span className={`mono len ${done ? "ok" : ""}`}>{shown.length}/30</span>
                  {done ? LI(P.check, 12) : null}
                </div>
              );
            })}
            <div className="cb-heads-more" style={{ opacity: win(p, 0.7, 0.9) }}>
              <Chip>+7 headlines</Chip>
              <Chip>8 descrições</Chip>
            </div>
          </div>
          <div className="cb-ad-preview">
            <div className="cb-eye">Prévia do anúncio</div>
            <div className="cb-ad-card">
              <div className="cb-ad-top mono">
                <b>Patrocinado</b>
                <span>{URL}</span>
              </div>
              <div className="cb-ad-title" style={{ opacity: win(p, 0.2, 0.4) }}>
                {HEADS[0]} | {HEADS[3]}
              </div>
              <div className="cb-ad-desc" style={{ opacity: win(p, 0.5, 0.72) }}>
                Modelos leves e oficiais com frete grátis. Troca fácil em 30 dias. Aproveite a promoção.
              </div>
            </div>
            <div style={{ opacity: win(p, 0.75, 0.92) }}>
              <Chip tone="pos">dentro do limite</Chip>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function NegPane({ p }) {
    const count = Math.round(18 * win(p, 0.1, 0.82));
    return (
      <div className="cb-pane">
        <PaneHead eye="Etapa 4 · Negativas iniciais" title="Bloqueando o desperdício clássico" sub="Antes do primeiro clique, não depois da fatura." />
        <div className="cb-neg-count">
          {LI(P.ban, 14)}
          <span className="mono">
            <b>{count}</b> termos bloqueados
          </span>
        </div>
        <div className="cb-neg-wrap">
          {NEG.map((n, i) => {
            const t = win(p, 0.12 + i * 0.05, 0.12 + i * 0.05 + 0.12);
            return (
              <span key={i} className="cb-neg-chip" style={{ opacity: t, transform: `translateY(${(1 - t) * 6}px)` }}>
                {LI(P.ban, 11)}
                {n}
              </span>
            );
          })}
        </div>
      </div>
    );
  }

  function BudgetPane({ p }) {
    const val = Math.round(BUDGET * win(p, 0.1, 0.5));
    return (
      <div className="cb-pane">
        <PaneHead eye="Etapa 5 · Orçamento e lances" title="Orçamento e lances" sub="Você revisa cada etapa antes de publicar." />
        <div className="cb-budget-grid">
          <div className="cb-budget-main">
            <div className="cb-budget-card">
              <div className="cb-eye">Orçamento diário</div>
              <div className="cb-budget-val mono">
                R$ {val}
                <small>/dia</small>
              </div>
            </div>
            <div className="cb-budget-row" style={{ opacity: win(p, 0.35, 0.6) }}>
              {LI(P.target, 15)}
              <div>
                <div className="cb-eye">Estratégia de lances</div>
                <div className="cb-budget-strat">Maximizar conversões</div>
              </div>
              <Chip tone="acc">automático</Chip>
            </div>
            <div className="cb-budget-row" style={{ opacity: win(p, 0.5, 0.72) }}>
              <span style={{ flex: 1 }}>Guardrails de gasto</span>
              <span className="mono pos">ativos</span>
              <span className="cb-toggle on" />
            </div>
          </div>
          <div className="cb-proj" style={{ opacity: win(p, 0.42, 0.7) }}>
            <div className="cb-eye">Projeção (estimativa)</div>
            <div className="cb-spark">
              <svg viewBox="0 0 120 40" preserveAspectRatio="none">
                <path
                  d="M0 28 L12 30 L24 24 L36 26 L48 18 L60 20 L72 12 L84 14 L96 8 L108 10 L120 6"
                  fill="none"
                  stroke="var(--acc)"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeDasharray="160"
                  strokeDashoffset={160 * (1 - win(p, 0.5, 0.95))}
                />
              </svg>
            </div>
            <div className="cb-proj-val mono">
              ~{Math.round(48 * win(p, 0.5, 0.95))} cliques<small>/dia</small>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function ReviewPane({ published }) {
    const recap = [
      ["Landing page", `${URL} · fit 84%`],
      ["Keywords", "26 termos · 4 grupos"],
      ["Anúncios RSA", "12 headlines · 8 descrições"],
      ["Negativas", "18 termos bloqueados"],
      ["Orçamento", `R$ ${BUDGET}/dia · max. conversões`],
    ];
    return (
      <div className="cb-pane">
        <PaneHead eye="Tudo pronto" title="Campanha de Search pronta" sub="5 etapas revisadas. Grupos, keywords e anúncios prontos." />
        <div className="cb-recap">
          {recap.map((r, i) => (
            <div key={i} className="cb-recap-item">
              <span className="cb-recap-check">{LI(P.check, 12)}</span>
              <div>
                <div className="lab">{r[0]}</div>
                <div className="meta mono">{r[1]}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="cb-publish-row">
          <div className={`cb-publish-btn ${published ? "is-paused" : ""}`}>
            {published ? LI(P.lock, 14) : LI(P.spark, 14)}
            {published ? "Publicada · pausada" : "Publicar campanha"}
          </div>
          <span className="mono">sobe pausada no Google Ads · quem liga é você</span>
        </div>
      </div>
    );
  }

  function StepRow({ label, meta, s, pulse }) {
    const checkO = clamp(s - 1, 0, 1);
    const activeAmt = clamp(1 - Math.abs(s - 1) / 0.55, 0, 1);
    const metaO = clamp((s - 1.25) / 0.6, 0, 1);
    const pu = 0.5 + 0.5 * Math.sin(pulse * 2 * Math.PI);
    return (
      <div className="cb-step" style={{ ["--active"]: activeAmt }}>
        <div className="cb-step-bg" />
        <div className="cb-step-dot">
          <span className="idle" style={{ opacity: 1 - Math.max(checkO, activeAmt) }} />
          <span className="active" style={{ opacity: activeAmt, transform: `scale(${1 + pu * 0.2})` }} />
          <span className="done" style={{ opacity: checkO, transform: `scale(${0.5 + 0.5 * checkO})` }}>
            {LI(P.check, 10)}
          </span>
        </div>
        <div className="cb-step-txt">
          <div className="lab" style={{ color: s > 0.5 ? "var(--fg-0)" : "var(--fg-2)" }}>
            {label}
          </div>
          <div className="meta mono" style={{ opacity: metaO }}>
            {meta}
          </div>
        </div>
      </div>
    );
  }

  function ProgressBar({ fill }) {
    return (
      <div className="cb-progress">
        {[0, 1, 2, 3, 4].map((i) => {
          const f = clamp(fill - i, 0, 1);
          return (
            <div key={i} className="cb-progress-seg">
              <div style={{ width: `${f * 100}%` }} />
            </div>
          );
        })}
      </div>
    );
  }

  function Content({ id, p, pulse }) {
    if (id === "idle") return <IdlePane pulse={pulse} />;
    if (id === "landing") return <LandingPane p={p} />;
    if (id === "keywords") return <KeywordsPane p={p} />;
    if (id === "ads") return <AdsPane p={p} />;
    if (id === "neg") return <NegPane p={p} />;
    if (id === "budget") return <BudgetPane p={p} />;
    if (id === "publish") return <ReviewPane published={p > 0.46} />;
    if (id === "reset") {
      const x = win(p, 0.15, 0.68);
      return (
        <div className="cb-reset">
          <div style={{ opacity: 1 - x }}>
            <ReviewPane published />
          </div>
          <div style={{ opacity: x }}>
            <IdlePane pulse={pulse} />
          </div>
        </div>
      );
    }
    return null;
  }

  function BuilderAnim() {
    const wrapRef = useRef(null);
    const [clock, setClock] = useState({ id: "idle", p: 0, local: 0, i: 0 });
    const reduced = useMemo(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);

    useEffect(() => {
      if (reduced) {
        setClock({ id: "publish", p: 1, local: 2.8, i: 6 });
        return;
      }
      const el = wrapRef.current;
      if (!el) return;
      let raf = 0;
      let start = 0;
      let running = false;
      const tick = (now) => {
        if (!running) return;
        if (!start) start = now;
        const t = ((now - start) / 1000) % TOTAL;
        setClock(sceneAt(t));
        raf = requestAnimationFrame(tick);
      };
      const io = new IntersectionObserver(
        ([e]) => {
          if (e.isIntersecting && !running) {
            running = true;
            start = 0;
            raf = requestAnimationFrame(tick);
          }
        },
        { threshold: 0.25 }
      );
      io.observe(el);
      return () => {
        running = false;
        cancelAnimationFrame(raf);
        io.disconnect();
      };
    }, [reduced]);

    const { id, p, local } = clock;
    const rows = rowsFor(id, p);
    const fill = fillFor(id, p);
    const published = (id === "publish" && p > 0.46) || (id === "reset" && p < 0.5);
    const toast = id === "publish" ? win(p, 0.52, 0.8) : id === "reset" ? 1 - win(p, 0, 0.32) : 0;
    const footHot = id === "publish" ? clamp(1 - Math.abs(p - 0.56) / 0.2, 0, 1) : 0;

    return (
      <div className="cb-shell" ref={wrapRef} aria-label="Demonstração do Campaign Builder">
        <div className="cb-glow" aria-hidden="true" />
        <div className="cb-frame">
          <div className="cb-head">
            <div className="cb-head-l">
              {LI(P.spark, 14)}
              <span>Campaign Builder</span>
              <span className="dim">·</span>
              <span className="dim">nova campanha de Search</span>
            </div>
            <span className={`cb-badge ${published ? "warn" : "warn"}`}>
              {published ? "pausada" : "rascunho"}
            </span>
          </div>
          <ProgressBar fill={fill} />
          <div className="cb-body">
            <aside className="cb-rail">
              {STEP_META.map((st, i) => (
                <StepRow key={i} label={st.label} meta={st.meta} s={rows[i]} pulse={local} />
              ))}
            </aside>
            <div className="cb-main">
              <Content id={id} p={p} pulse={local} />
            </div>
          </div>
          <div className="cb-foot">
            {LI(P.lock, 12)}
            <span>publica</span>
            <b style={{ transform: `scale(${1 + footHot * 0.06})`, textShadow: footHot > 0.02 ? `0 0 ${footHot * 12}px var(--warn)` : "none" }}>pausada</b>
            <span className="dim">·</span>
            <span>quem liga é você</span>
          </div>
          {toast > 0.01 ? (
            <div className="cb-toast" style={{ opacity: toast, transform: `translateX(${(1 - toast) * 18}px)` }}>
              <span className="cb-toast-ico">{LI(P.check, 13)}</span>
              <div>
                <div className="t">Campanha publicada</div>
                <div className="s mono">Pausada no Google Ads.</div>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    );
  }

  window.BuilderAnim = BuilderAnim;
})();