/* Neurociência (faixa escura) · Framework CREATE (2 variantes) */

function Neuro() {
  return (
    <section className="sec dark" id="neuro">
      <div className="wrap">
        <div className="neuro">
          <div className="reveal">
            <div className="eyebrow eyebrow--ondark"><span className="eyebrow__rule"></span>Fundação metodológica</div>
            <h2>neurociência aplicada<br />ao comportamento humano</h2>
            <p>A maioria das decisões de compra acontece em milissegundos, antes da razão
              entrar em cena. Usamos princípios de neurociência para construir marcas que
              ativam percepção, memória e decisão no momento certo.</p>
            <p>Não é diferencial de pitch. É a base do método. Cada etapa do CREATE é
              informada por como o cérebro realmente processa, conecta e decide.</p>
          </div>
          <div className="reveal d2">
            <div className="neuro__stats">
              <div className="neuro__stat">
                <div className="neuro__num"><em><span data-count="95">0</span>%</em></div>
                <div className="neuro__lbl">das decisões de compra são emocionais, segundo a Harvard Business School</div>
              </div>
              <div className="neuro__rule"></div>
              <div className="neuro__stat">
                <div className="neuro__num"><em><span data-count="7">0</span>s</em></div>
                <div className="neuro__lbl">é o tempo para o cérebro formar uma primeira impressão permanente de uma marca</div>
              </div>
            </div>
            <p className="neuro__foot">Marcas construídas sobre essa base não são apenas bonitas,
              elas ficam. Atraem o cliente certo, repelem o errado e crescem com coerência.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { L: "C", name: "Clareza", t: "Imersão profunda no negócio",
    d: "Diagnóstico estratégico do que impede o crescimento e onde estão as oportunidades reais. Nada é assumido, tudo é investigado." },
  { L: "R", name: "Reconhecer diferenciais", t: "Mapeamento de comportamento via neurociência",
    d: "Identificamos o que gera valor percebido e transforma autenticidade em vantagem competitiva concreta." },
  { L: "E", name: "Estratégia", t: "Posicionamento, PUV e narrativa central",
    d: "Onde a marca mora na mente do cliente. Coerência entre propósito, posicionamento e execução." },
  { L: "A", name: "Articulação", t: "Identidade visual como expressão da estratégia",
    d: "Tom de voz, linguagem e brand book. Tornar visível o que antes era apenas conceito." },
  { L: "T", name: "Transformação", t: "Ativação digital coerente",
    d: "Redes, conteúdo e presença online alinhados ao sistema de marca. Performance real no mercado." },
  { L: "E", name: "Expansão", t: "A marca cresce com o negócio",
    d: "Acompanhamento contínuo: a marca não para num PDF. Escalar o impacto com clareza e propósito." },
];

const OUTCOMES = [
  "Posicionamento que o fundador articula em qualquer contexto",
  "Identidade visual como expressão da estratégia, não o contrário",
  "Narrativa clara para cada público (B2B, B2C, investidores)",
  "Sistema que o time usa sem depender da Patricia para cada peça",
  "Marca que atrai o cliente certo e repele o errado",
];

function CreateHead() {
  return (
    <div className="create__top">
      <div className="create__intro reveal">
        <div className="eyebrow"><span className="eyebrow__rule"></span>Metodologia proprietária</div>
        <div className="create__brand" style={{ marginTop: "18px" }}>
          framework <span className="grad-text">create</span><sup>®</sup>
        </div>
        <p className="lead" style={{ marginTop: "20px" }}>
          A diferença para a maioria das agências: elas começam pelo <b>A</b>, a identidade
          visual. Nós começamos pelo <b>C</b>. E a diferença aparece nos resultados.
        </p>
        <p style={{ marginTop: "14px", color: "var(--text-secondary)", fontSize: "var(--text-sm)" }}>
          Seis estágios em sequência lógica que transformam confusão de posicionamento em
          sistema de marca operacional. Cada etapa tem um resultado de negócio, não só uma entrega.
        </p>
      </div>
      <div className="create__outcomes reveal d2">
        <h4>O que você tem ao final</h4>
        <ul>
          {OUTCOMES.map((o) => (
            <li key={o}><window.Icon.Check /><span>{o}</span></li>
          ))}
        </ul>
      </div>
    </div>
  );
}

/* Variant A — stacked rows */
function CreateA() {
  return (
    <section className="sec band-soft" id="create">
      <div className="wrap">
        <CreateHead />
        <div className="steps reveal">
          {STEPS.map((s, i) => (
            <div className="step" key={i}>
              <div className="step__letter">{s.L}</div>
              <div>
                <div className="step__name">{s.name}</div>
                <div className="step__title">{s.t}</div>
                <div className="step__out">{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Painel de detalhe compartilhado */
function FlowPanel({ s, active, n }) {
  return (
    <div className="flow__panel">
      <div className="flow__index" key={"i" + active}>
        <span className="anim-key">{String(active + 1).padStart(2, "0")}</span>
        <small>de {String(n).padStart(2, "0")}</small>
      </div>
      <div className="flow__detail" key={"d" + active}>
        <div className="n anim-key">{s.L} · {s.name}</div>
        <h3 className="anim-key">{s.t}</h3>
        <p className="anim-key">{s.d}</p>
      </div>
    </div>
  );
}

function FlowRail({ active, onPick, fill }) {
  return (
    <React.Fragment>
      <div className="flow__rail">
        {STEPS.map((st, i) => (
          <button key={i} className="flow__node" aria-selected={i === active}
            onClick={() => onPick(i)}>
            <div className="flow__big">{st.L}</div>
            <div className="flow__name">{st.name}</div>
          </button>
        ))}
      </div>
      <div className="flow__track"><div className="flow__fill" style={{ width: fill + "%" }}></div></div>
    </React.Fragment>
  );
}

/* Variant B — linha do tempo (scroll pinado, com fallback clicável) */
function CreateB() {
  const [active, setActive] = React.useState(0);
  const [prog, setProg] = React.useState(0);
  const [pinned, setPinned] = React.useState(true);
  const wrapRef = React.useRef(null);
  const n = STEPS.length;

  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 860px)");
    const reduced = window.Motion && window.Motion.REDUCED;
    const usePin = !reduced && !mq.matches;
    setPinned(usePin);
    if (!usePin) { setProg(((active + 1) / n) * 100); return; }

    let raf = null;
    const onScroll = () => {
      if (raf != null) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const wrap = wrapRef.current;
        if (!wrap) return;
        const rect = wrap.getBoundingClientRect();
        const total = wrap.offsetHeight - window.innerHeight;
        const scrolled = Math.min(Math.max(-rect.top, 0), Math.max(total, 1));
        const p = total > 0 ? scrolled / total : 0;
        const idx = Math.min(n - 1, Math.floor(p * n + 0.0001));
        setActive(idx);
        setProg(p * 100);
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  const pickScroll = (idx) => {
    const wrap = wrapRef.current;
    if (!wrap || !pinned) { setActive(idx); setProg(((idx + 1) / n) * 100); return; }
    const total = wrap.offsetHeight - window.innerHeight;
    const top = wrap.getBoundingClientRect().top + window.scrollY;
    const targetP = (idx + 0.5) / n;
    window.scrollTo({ top: top + targetP * total, behavior: "smooth" });
  };

  const s = STEPS[active];

  return (
    <section className={"sec band-soft create--pin" + (pinned ? "" : " create--static")} id="create">
      <div className="wrap"><CreateHead /></div>
      {pinned ? (
        <div className="create__scrub" ref={wrapRef} style={{ height: (n * 58) + "vh" }}>
          <div className="create__sticky">
            <div className="wrap">
              <FlowRail active={active} onPick={pickScroll} fill={prog} />
              <FlowPanel s={s} active={active} n={n} />
            </div>
          </div>
        </div>
      ) : (
        <div className="wrap reveal">
          <FlowRail active={active} onPick={(i) => { setActive(i); setProg(((i + 1) / n) * 100); }} fill={prog} />
          <FlowPanel s={s} active={active} n={n} />
        </div>
      )}
    </section>
  );
}

function Create({ variant }) {
  return variant === "A" ? <CreateA /> : <CreateB />;
}

Object.assign(window, { Neuro, Create });