// Bottom-of-page sections: Brands, Premios (dark), Faq, Final CTA, Footer.
// A seção "Creators reais" (prova social) só entra no Ato 3 COM depoimento real
// autorizado (@ verificável + métrica real) — regra dura do doc de copy §2.9.

// Breakpoints únicos da LP (declarados em sections.jsx, que carrega antes).
const BP = window.BP;

// ============================================
// Brands — 6 brand showcase cards
// ============================================
const Brands = () => {
  const ref = useReveal();
  const secRef = React.useRef(null);
  const [ativa, setAtiva] = React.useState(0);

  // Um card por marca que PASSA conforme o scroll (pedido do Pedro): a seção
  // fixa na tela e o progresso do scroll troca os cards. Tom conversacional.
  // Cenas do palco geradas no piapp com a linguagem visual de cada marca
  // (estilo "Studio Clean" da Gocase como sistema do set), sem texto/rótulo.
  const marcas = [
    {
      name: "Gocase",
      logo: "assets/brands/gocase.png",
      accent: "#1A4FA8",
      logoH: 32,
      categoria: "Cases & acessórios",
      linha: "A queridinha: capinhas, garrafas e bags com estampas que sua audiência já ama.",
      cena: "assets/products/cena-gocase.png",
    },
    {
      name: "Barbours",
      logo: "assets/brands/barbours.png",
      accent: "#CC1A2B",
      logoH: 44,
      categoria: "Fragrâncias & cuidado corporal",
      linha: "Cheiro de perfume caro, preço de body splash. Resenha fácil de gravar, fácil de vender.",
      cena: "assets/products/cena-barbours.png",
    },
    {
      name: "Lescent",
      logo: "assets/brands/lescent.png",
      accent: "#C09038",
      logoH: 22,
      categoria: "Perfumaria",
      linha: "Perfume importado de alta fixação sem doer no bolso. Conteúdo de cheiro que converte.",
      cena: "assets/products/cena-lescent.png",
    },
    {
      name: "Rituária",
      logo: "assets/brands/rituaria.png",
      accent: "#1A1A1A",
      logoH: 32,
      categoria: "Dermocosméticos & suplementos",
      linha: "Ingrediente exposto e resultado sem firula. Perfeita pra quem fala com a pele 35+.",
      cena: "assets/products/cena-rituaria.png",
    },
    {
      name: "Kokeshi",
      logo: "assets/brands/kokeshi.png",
      accent: "#C9277A",
      logoH: 26,
      categoria: "Skincare",
      linha: "K-Beauty kawaii, acessível e cheia de personalidade. Vídeo de rotina que o algoritmo ama.",
      cena: "assets/products/cena-kokeshi.png",
    },
    {
      name: "Ápice",
      logo: "assets/brands/apice.png",
      accent: "#5C7B5D",
      logoH: 34,
      categoria: "Cuidados capilares",
      linha: "Vegana, feita pra cachos e ondas. O antes e depois vende sozinho.",
      cena: "assets/products/cena-apice.png",
    },
  ];

  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const el = secRef.current;
        if (!el) return;
        const total = el.offsetHeight - window.innerHeight;
        if (total <= 0) return;
        const p = Math.min(0.999, Math.max(0, -el.getBoundingClientRect().top / total));
        setAtiva(Math.floor(p * marcas.length));
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [marcas.length]);

  const irPara = (i) => {
    const el = secRef.current;
    if (!el) return;
    const total = el.offsetHeight - window.innerHeight;
    window.scrollTo({
      top: el.offsetTop + ((i + 0.5) / marcas.length) * total,
      behavior: "smooth",
    });
  };

  return (
    <section
      className="brands"
      id="marcas"
      ref={secRef}
      style={{ height: `${marcas.length * 70}vh` }}
    >
      <style>{`
        .brands { position: relative; }
        .brands-sticky {
          position: sticky;
          top: 0;
          min-height: 100vh;
          min-height: 100svh;
          display: flex;
          flex-direction: column;
          padding: 96px 0 24px;
          box-sizing: border-box;
        }
        /* Centraliza quando sobra espaço; degrada pro topo sem cortar quando falta */
        .brands-sticky > .container { margin-block: auto; }
        .brands-head { margin-bottom: 28px; max-width: 720px; }
        .brands-head h2 { font-family: var(--display); font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; margin: 16px 0 0; line-height: 1.05; }
        .brands-head h2 .accent { color: var(--gc-blue); }
        .brands-head .sub { margin: 14px 0 0; font-size: 16px; color: var(--ink-3); line-height: 1.55; }

        .show-viewport {
          overflow: hidden;
          border-radius: 24px;
          border: 1px solid var(--line);
          background: white;
          box-shadow: 0 30px 60px -35px rgba(20,12,80,.18);
        }
        .show-track {
          display: flex;
          transition: transform .65s var(--ease-expo);
        }
        .show-card {
          min-width: 100%;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
          height: min(420px, 52vh);
        }
        @media (max-width: ${BP.desktop}px) {
          .show-card { display: flex; flex-direction: column; height: auto; }
        }

        .show-info {
          padding: 40px 44px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 14px;
        }
        @media (max-width: ${BP.desktop}px) { .show-info { padding: 22px 24px; order: 2; } }
        .show-info .logo { align-self: flex-start; object-fit: contain; }
        .show-cat {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .12em;
          text-transform: uppercase;
        }
        .show-info h3 {
          font-family: var(--display);
          font-size: clamp(19px, 2vw, 26px);
          font-weight: 800;
          letter-spacing: -0.02em;
          line-height: 1.25;
          margin: 0;
          color: var(--ink);
          max-width: 400px;
        }
        .show-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
        .show-chips span {
          display: inline-flex; align-items: center; gap: 5px;
          border: 1px solid var(--line);
          border-radius: 999px;
          padding: 6px 12px;
          font-size: 12px; font-weight: 600;
          color: var(--ink-2);
          background: var(--bg);
        }

        /* Palco: cena da marca gerada no piapp */
        .show-palco {
          position: relative;
          overflow: hidden;
        }
        @media (max-width: ${BP.desktop}px) { .show-palco { order: 1; aspect-ratio: 16 / 10; height: auto; } }
        .show-palco img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
        }

        /* Navegação por mini-logos (indicador + atalho de scroll) */
        .show-tabs {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 18px;
          flex-wrap: wrap;
        }
        .show-tab {
          width: 52px; height: 44px;
          border-radius: 12px;
          border: 1.5px solid var(--line);
          background: white;
          display: grid;
          place-items: center;
          padding: 0 8px;
          opacity: .55;
          transition: opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
        }
        .show-tab img { max-width: 100%; max-height: 18px; object-fit: contain; }
        .show-tab:hover { opacity: .85; }
        .show-tab.on {
          opacity: 1;
          border-color: var(--gc-blue);
          transform: translateY(-2px);
        }

        @media (prefers-reduced-motion: reduce) {
          .show-track { transition: none; }
          .show-tab, .show-tab.on { transition: none; transform: none; }
        }
      `}</style>

      <div className="brands-sticky">
        <div className="container">
          <div className="brands-head reveal" ref={ref}>
            <span className="eyebrow">6 Marcas, uma vitrine</span>
            <h2>
              Produtos que <span className="accent">já vendem sozinhos.</span>{" "}
              Imagina com você no vídeo.
            </h2>
            <p className="sub">
              Gocase, Barbours, Lescent, Rituária, Kokeshi e Ápice: as 6 marcas
              do GoGroup, com público fiel, logística pronta e produtos virais.
              Você escolhe a que combina com seu perfil.
            </p>
          </div>

          <div aria-roledescription="carrossel" aria-label="Vitrine das marcas">
            <div className="show-viewport">
              <div className="show-track" style={{ transform: `translateX(-${ativa * 100}%)` }}>
                {marcas.map((m, i) => (
                  <article className="show-card" key={m.name} aria-hidden={ativa !== i}>
                    <div className="show-info">
                      <img className="logo" src={m.logo} alt={m.name} style={{ height: m.logoH }} />
                      <span className="show-cat" style={{ color: m.accent }}>{m.categoria}</span>
                      <h3>{m.linha}</h3>
                      <div className="show-chips">
                        <span><Icon name="percent" size={13} /> Comissão por venda</span>
                        <span><Icon name="gift" size={13} /> Amostra pra quem performa</span>
                      </div>
                    </div>
                    <div className="show-palco">
                      <img src={m.cena} alt={`Universo da marca ${m.name}`} loading="lazy" />
                    </div>
                  </article>
                ))}
              </div>
            </div>

            <div className="show-tabs" role="tablist" aria-label="Escolher marca">
              {marcas.map((m, i) => (
                <button
                  type="button"
                  key={m.name}
                  role="tab"
                  aria-selected={ativa === i}
                  aria-label={m.name}
                  className={"show-tab" + (ativa === i ? " on" : "")}
                  onClick={() => irPara(i)}
                >
                  <img src={m.logo} alt="" />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Brands = Brands;

// ============================================
// Jogo & Prêmios — dark, o pico do funil (§3.7 do design + §2.8 da copy).
// Disclosure progressiva: 3 prêmios-âncora (PIX · Viagem · Porsche) + o resto
// do sistema em chips que expandem. Porsche ganha cena própria com shine
// sweep 1x ao entrar no viewport (não loop), com a mecânica em 1 linha.
// Assinatura de motion: glow dos orbs de fundo respira (4s, dessincronizado).
// ============================================
const Premios = () => {
  const ref = useReveal();
  const porscheRef = useReveal(0.3);
  const [sistemaAberto, setSistemaAberto] = React.useState(false);

  const sistema = [
    { icon: "star", color: "#D4C4FF", title: "XP & Níveis", body: "Suba de nível vendendo, não preenchendo formulário." },
    { icon: "flame", color: "#FFB59B", title: "Sequência", body: "Constância multiplica ganhos. Literalmente: bônus por streak." },
    { icon: "trophy", color: "#FFD75A", title: "Ranking", body: "Dispute com o grupo todo. Top do mês leva prêmio." },
    { icon: "percent", color: "#7EE0A8", title: "Bônus de comissão", body: "Até 30% extra pra quem sobe de tier." },
  ];

  return (
    <section className="premios" id="recompensas">
      <style>{`
        .premios {
          background: linear-gradient(180deg, #14092E 0%, #1B0F4A 100%);
          color: white;
          padding: 96px 0;
          position: relative;
          overflow: hidden;
        }
        .premios::before {
          content:"";
          position:absolute; inset:0;
          background-image:
            radial-gradient(circle at 20% 20%, rgba(255,255,255,.07) 1px, transparent 1px),
            radial-gradient(circle at 80% 60%, rgba(255,255,255,.05) 1px, transparent 1px);
          background-size: 80px 80px, 120px 120px;
          opacity: .5;
          pointer-events: none;
        }
        .premios .orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(70px);
          pointer-events: none;
          animation: orb-breathe 4s ease-in-out infinite alternate;
        }
        .premios .orb-a {
          width: 520px; height: 520px;
          top: -140px; right: -120px;
          background: radial-gradient(circle, rgba(139,92,246,.5), transparent 65%);
        }
        .premios .orb-b {
          width: 440px; height: 440px;
          bottom: -100px; left: -100px;
          background: radial-gradient(circle, rgba(76,93,240,.45), transparent 65%);
          animation-delay: 2s;
        }
        @keyframes orb-breathe {
          from { opacity: .5; }
          to   { opacity: .7; }
        }
        @media (prefers-reduced-motion: reduce) {
          .premios .orb { animation: none; opacity: .6; }
        }

        .premios-inner { position: relative; }
        .premios-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
        .premios-head h2 {
          font-family: var(--display);
          font-size: clamp(34px, 4.4vw, 54px);
          font-weight: 800;
          letter-spacing: -0.03em;
          line-height: 1.05;
          margin: 18px 0 0;
        }
        .premios-head h2 .accent { color: var(--gc-purple-light); }
        .premios-head p {
          margin: 18px auto 0;
          color: rgba(255,255,255,.7);
          font-size: 16px;
          line-height: 1.55;
          max-width: 540px;
        }

        /* 3 prêmios-âncora */
        .premios-ancoras {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        @media (max-width: ${BP.mobile}px) { .premios-ancoras { grid-template-columns: 1fr; } }

        .premio-card {
          background: rgba(255,255,255,.04);
          border: 1px solid rgba(255,255,255,.1);
          border-radius: 22px;
          overflow: hidden;
          transition: transform .25s var(--ease), border-color .25s var(--ease);
        }
        .premio-card:hover { transform: translateY(-4px); border-color: rgba(212,196,255,.35); }
        .premio-img {
          aspect-ratio: 16 / 10;
          overflow: hidden;
          position: relative;
        }
        .premio-img img {
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: center 62%;
        }
        .premio-copy { padding: 20px 24px 24px; }
        .premio-copy h3 {
          font-family: var(--display);
          font-size: 20px; font-weight: 700;
          margin: 0 0 6px;
          letter-spacing: -0.015em;
        }
        .premio-copy p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; margin: 0; }

        /* Porsche: cena própria, shine sweep 1x ao entrar no viewport */
        .premio-porsche {
          margin-top: 16px;
          background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(76,93,240,.14));
          border: 1px solid rgba(212,196,255,.28);
          border-radius: 24px;
          overflow: hidden;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          align-items: center;
        }
        @media (max-width: ${BP.desktop}px) { .premio-porsche { grid-template-columns: 1fr; } }
        .porsche-img {
          position: relative;
          overflow: hidden;
          aspect-ratio: 16 / 11;
        }
        .porsche-img img {
          width: 100%; height: 100%;
          object-fit: cover;
          transform: scale(1.14);
          display: block;
        }
        .porsche-img::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
          transform: translateX(-130%);
          pointer-events: none;
        }
        .premio-porsche.in .porsche-img::after {
          animation: porsche-shine 1.3s var(--ease) .4s 1 both;
        }
        @keyframes porsche-shine {
          from { transform: translateX(-130%); }
          to   { transform: translateX(130%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .premio-porsche.in .porsche-img::after { animation: none; }
        }
        .porsche-copy { padding: 32px 36px; }
        @media (max-width: ${BP.desktop}px) { .porsche-copy { padding: 24px; } }
        .porsche-badge {
          display: inline-flex; align-items: center; gap: 6px;
          background: var(--gc-purple-vip);
          color: white;
          font-size: 11px; font-weight: 700;
          letter-spacing: .1em; text-transform: uppercase;
          padding: 6px 12px; border-radius: 999px;
        }
        .porsche-copy h3 {
          font-family: var(--display);
          font-size: clamp(22px, 2.6vw, 30px);
          font-weight: 800;
          letter-spacing: -0.02em;
          line-height: 1.15;
          margin: 14px 0 10px;
        }
        .porsche-copy .mecanica {
          font-size: 13px;
          color: rgba(255,255,255,.6);
          margin: 0;
        }

        /* O resto do sistema: chips compactos que expandem (disclosure progressiva) */
        .sistema { margin-top: 40px; }
        .sistema-toggle {
          display: flex; align-items: center; gap: 8px;
          margin: 0 auto;
          background: none; border: none;
          color: rgba(255,255,255,.75);
          font-family: var(--body);
          font-size: 14px; font-weight: 600;
          padding: 10px 16px;
          border-radius: 999px;
          transition: color .2s var(--ease), background .2s var(--ease);
        }
        .sistema-toggle:hover { color: white; background: rgba(255,255,255,.06); }
        .sistema-toggle .chev { display: grid; place-items: center; transition: transform .3s var(--ease); }
        .sistema.aberto .sistema-toggle .chev { transform: rotate(90deg); }

        .sistema-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
          margin-top: 18px;
        }
        @media (max-width: ${BP.desktop}px) { .sistema-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: ${BP.mobile}px) { .sistema-grid { grid-template-columns: 1fr; } }

        .sistema-item {
          background: rgba(255,255,255,.04);
          border: 1px solid rgba(255,255,255,.08);
          border-radius: 16px;
          padding: 16px;
          display: flex; flex-direction: column; gap: 6px;
          transition: background .2s var(--ease), border-color .2s var(--ease);
        }
        .sistema-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
        .sistema-item .top { display: flex; align-items: center; gap: 10px; }
        .sistema-item .ico { display: grid; place-items: center; flex-shrink: 0; }
        .sistema-item h4 { font-family: var(--display); font-size: 14px; font-weight: 700; margin: 0; color: white; }
        .sistema-item .body-wrap {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows .45s var(--ease-expo);
        }
        .sistema.aberto .sistema-item .body-wrap { grid-template-rows: 1fr; }
        .sistema-item .body-wrap > p {
          overflow: hidden;
          font-size: 12.5px;
          color: rgba(255,255,255,.6);
          line-height: 1.45;
          margin: 0;
        }
        @media (prefers-reduced-motion: reduce) {
          .sistema-item .body-wrap { transition: none; }
          .sistema-toggle .chev { transition: none; }
        }

        .premios-cta { text-align: center; margin-top: 44px; }
      `}</style>

      <span className="orb orb-a" aria-hidden="true" />
      <span className="orb orb-b" aria-hidden="true" />

      <div className="container premios-inner">
        <div className="premios-head reveal" ref={ref}>
          <span className="eyebrow on-dark">Gamificação</span>
          <h2>
            Vender aqui é um jogo. <span className="accent">Os prêmios são de verdade.</span>
          </h2>
          <p>
            Cada venda te move: XP, níveis, sequência, ranking. E cada marco
            destrava prêmio real, resgatado direto na plataforma.
          </p>
        </div>

        <div className="premios-ancoras reveal-stagger" ref={useReveal()}>
          <div className="premio-card">
            <div className="premio-img">
              <img src="uploads/v3-premio-pix.png" alt="PIX confirmado no celular com moedas" loading="lazy" />
            </div>
            <div className="premio-copy">
              <h3>PIX na conta</h3>
              <p>Resgates caem direto, sem burocracia.</p>
            </div>
          </div>
          <div className="premio-card">
            <div className="premio-img">
              <img src="uploads/v3-premio-viagem.png" alt="Mala de viagem com chapéu e passagem" loading="lazy" />
            </div>
            <div className="premio-copy">
              <h3>Produtos & viagens</h3>
              <p>Kits, experiências e encontros do grupo.</p>
            </div>
          </div>
        </div>

        <div className="premio-porsche reveal" ref={porscheRef}>
          <div className="porsche-img">
            <img src="uploads/v3-premio-porsche.png" alt="Porsche branco em um pódio iluminado" loading="lazy" />
          </div>
          <div className="porsche-copy">
            <span className="porsche-badge"><Icon name="crown" size={12} /> Super VIP</span>
            <h3>O topo do jogo: prêmios que vão até um Porsche.</h3>
            <p className="mecanica">Marco máximo do Super VIP, por GMV acumulado.</p>
          </div>
        </div>

        <div className={"sistema" + (sistemaAberto ? " aberto" : "")}>
          <button
            type="button"
            className="sistema-toggle"
            onClick={() => setSistemaAberto(!sistemaAberto)}
            aria-expanded={sistemaAberto}
          >
            <span className="chev"><Icon name="chevron-right" size={16} /></span>
            {sistemaAberto ? "Esconder o sistema completo" : "Ver o sistema completo do jogo"}
          </button>
          <div className="sistema-grid">
            {sistema.map((s, i) => (
              <div className="sistema-item" key={i}>
                <div className="top">
                  <span className="ico" style={{ color: s.color }}>
                    <Icon name={s.icon} size={18} stroke={2} />
                  </span>
                  <h4>{s.title}</h4>
                </div>
                <div className="body-wrap">
                  <p>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="premios-cta">
          <a className="btn btn-primary" href="/login">
            Ver os prêmios de perto <Icon name="arrow-up-right" size={16} />
          </a>
        </div>
      </div>
    </section>
  );
};
window.Premios = Premios;

// ============================================
// FAQ / Objeções — mata objeções perto da decisão (§3.9 + copy §2.10).
// Accordion via grid-template-rows (nunca height). Ainda no dark.
// ============================================
const Faq = () => {
  const ref = useReveal();
  const [aberta, setAberta] = React.useState(0);
  const faqs = [
    { q: "Preciso pagar algo?", a: "Não. Grátis, sem pegadinha. A gente ganha quando você vende." },
    { q: "Preciso de muitos seguidores?", a: "O TikTok exige 2 mil seguidores pra liberar o TikTok Shop, e o curso te ajuda a chegar lá. A partir daí, método importa mais que audiência: o TikTok entrega vídeo bom pra quem não te segue." },
    { q: "Nunca vendi nada. Consigo?", a: "Sim. O caminho de aprendizado começa do zero absoluto." },
    { q: "Já vendo outras marcas. Posso?", a: "Pode. Seu perfil é seu." },
    { q: "Quanto dá pra ganhar?", a: "Depende do seu ritmo. Comissão por venda + bônus por tier + prêmios por marco. As top do grupo passam de R$ ___/mês.", dado: true },
  ];

  return (
    <section className="faq" id="faq">
      <style>{`
        .faq {
          background: #1B0F4A;
          color: white;
          padding: 32px 0 96px;
        }
        .faq-head { text-align: center; margin-bottom: 40px; }
        .faq-head h2 {
          font-family: var(--display);
          font-size: clamp(28px, 3.6vw, 44px);
          font-weight: 800;
          letter-spacing: -0.025em;
          margin: 0;
        }
        .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

        .faq-item {
          background: rgba(255,255,255,.04);
          border: 1px solid rgba(255,255,255,.1);
          border-radius: 16px;
          overflow: hidden;
          transition: border-color .2s var(--ease);
        }
        .faq-item.aberta { border-color: rgba(212,196,255,.3); }
        .faq-q {
          width: 100%;
          display: flex; align-items: center; justify-content: space-between; gap: 16px;
          background: none; border: none;
          color: white;
          font-family: var(--display);
          font-size: 16px; font-weight: 700;
          text-align: left;
          padding: 18px 20px;
          min-height: 44px;
        }
        .faq-q .chev { display: grid; place-items: center; color: rgba(255,255,255,.5); transition: transform .3s var(--ease); flex-shrink: 0; }
        .faq-item.aberta .faq-q .chev { transform: rotate(90deg); }

        .faq-a {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows .35s var(--ease-expo);
        }
        .faq-item.aberta .faq-a { grid-template-rows: 1fr; }
        .faq-a > div { overflow: hidden; }
        .faq-a p {
          margin: 0;
          padding: 0 20px 18px;
          font-size: 14.5px;
          color: rgba(255,255,255,.7);
          line-height: 1.55;
        }
        @media (prefers-reduced-motion: reduce) {
          .faq-a { transition: none; }
          .faq-q .chev { transition: none; }
        }

        .faq-disclaimer {
          max-width: 720px;
          margin: 28px auto 0;
          text-align: center;
          font-size: 12px;
          color: rgba(255,255,255,.45);
          line-height: 1.5;
        }
      `}</style>

      <div className="container">
        <div className="faq-head reveal" ref={ref}>
          <h2>O que você quer saber antes de entrar.</h2>
        </div>

        <div className="faq-list reveal-stagger" ref={useReveal()}>
          {faqs.map((f, i) => (
            <div className={"faq-item" + (aberta === i ? " aberta" : "")} key={i}>
              <button
                type="button"
                className="faq-q"
                onClick={() => setAberta(aberta === i ? -1 : i)}
                aria-expanded={aberta === i}
              >
                {f.q}
                <span className="chev"><Icon name="chevron-right" size={18} /></span>
              </button>
              <div className="faq-a">
                <div>
                  <p>
                    {f.a}
                    {f.dado && <span className="dado-flag">[DADO]</span>}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <p className="faq-disclaimer">
          Ganhos variam conforme dedicação, conteúdo e desempenho de vendas.
          Comissões pagas por venda realizada.
        </p>
      </div>
    </section>
  );
};
window.Faq = Faq;

// ============================================
// Educação — split assimétrico (§3.5): colagem de 3 fotos reais à esquerda
// (kit unboxing + UGC da tote Gocase + UGC Barbours, pedido do Pedro 02/07),
// lista rica (título + linha, sem cards) à direita.
// O print de playbook real ainda está pendente de coleta.
// ============================================
const Education = () => {
  const ref = useReveal();
  const secRef = React.useRef(null);
  // Deck de fotos scroll-driven (como a vitrine de marcas): a seção fixa e o
  // progresso do scroll traz cada foto pra frente, inteira e sem sobreposição.
  const [frente, setFrente] = React.useState(0);
  // Abaixo de 960px a seção perde o scroll-jacking: altura natural e o deck
  // auto-avança a cada 3,5s (estático com prefers-reduced-motion).
  const mobile = useMediaQuery(`(max-width: ${BP.desktop}px)`);
  const reduced = React.useMemo(
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, []
  );
  const fotos = [
    { src: "uploads/v2-kit-unboxing.png", alt: "Kit de produtos das marcas em unboxing" },
    { src: "uploads/v2-ugc-barbours.png", alt: "Creator gravando conteúdo com produto Barbours" },
    { src: "uploads/v2-ugc-gocase-tote.png", alt: "Creator com a tote da Gocase" },
  ];
  React.useEffect(() => {
    if (mobile) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const el = secRef.current;
        if (!el) return;
        const total = el.offsetHeight - window.innerHeight;
        if (total <= 0) return;
        const p = Math.min(0.999, Math.max(0, -el.getBoundingClientRect().top / total));
        setFrente(Math.floor(p * fotos.length));
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [fotos.length, mobile]);

  React.useEffect(() => {
    if (!mobile || reduced) return;
    const t = setInterval(() => setFrente((f) => (f + 1) % fotos.length), 3500);
    return () => clearInterval(t);
  }, [mobile, reduced, fotos.length]);

  const itens = [
    { title: "Curso gratuito de vendas", body: "Do zero à primeira venda no TikTok Shop, sem pagar nada por isso." },
    { title: "Playbooks de venda", body: "Roteiros e ganchos extraídos dos vídeos que mais converteram no mês." },
    { title: "Aulas e workshops ao vivo", body: "Com o time das marcas e com as top vendedoras do grupo." },
    { title: "Dados do que vende agora", body: "Quais produtos, formatos e sons estão convertendo, semana a semana." },
    { title: "Mentoria dos top creators", body: "Quem já chegou lá mostra o caminho, sem mistério." },
  ];
  return (
    <section
      className="edu"
      id="educacao"
      ref={secRef}
      style={{ height: mobile ? "auto" : `${fotos.length * 70}vh` }}
    >
      <style>{`
        .edu { position: relative; }
        .edu-sticky {
          position: sticky;
          top: 0;
          min-height: 100vh;
          min-height: 100svh;
          display: flex;
          flex-direction: column;
          padding: 88px 0 32px;
          box-sizing: border-box;
        }
        /* Centraliza quando sobra espaço; degrada pro topo sem cortar quando falta */
        .edu-sticky > .container { margin-block: auto; }
        .edu-grid {
          display: grid;
          grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
          gap: 56px;
          align-items: center;
        }
        @media (max-width: ${BP.desktop}px) {
          .edu-grid { grid-template-columns: 1fr; gap: 40px; }
          /* Mobile: sem sticky/scroll-jack — altura natural */
          .edu-sticky { position: static; min-height: 0; padding: 64px 0 32px; }
        }

        .edu-preview { position: relative; justify-self: center; width: 100%; }
        /* Deck rotativo: a foto da frente troca a cada 3,5s (pausa no hover) */
        .edu-deck {
          position: relative;
          width: min(360px, 84vw);
          aspect-ratio: 3.4 / 4;
          margin-inline: auto;
        }
        .edu-deck .foto {
          position: absolute;
          inset: 0;
          margin: auto;
          width: 72%;
          aspect-ratio: 3 / 4;
          object-fit: cover;
          border: 6px solid white;
          border-radius: 16px;
          box-shadow: 0 24px 50px -24px rgba(20,12,80,.35);
          transition: transform .6s var(--ease-expo);
        }
        .edu-deck .pos-0 { transform: none; z-index: 3; }
        .edu-deck .pos-1 {
          transform: translateX(-24%) translateY(4%) rotate(-9deg) scale(.9);
          z-index: 2;
        }
        .edu-deck .pos-2 {
          transform: translateX(24%) translateY(4%) rotate(9deg) scale(.9);
          z-index: 1;
        }
        @media (prefers-reduced-motion: reduce) {
          .edu-deck .foto { transition: none; }
        }

        .edu-head h2 {
          font-family: var(--display);
          font-size: clamp(30px, 3.8vw, 46px);
          font-weight: 800;
          letter-spacing: -0.03em;
          margin: 16px 0 0;
          line-height: 1.08;
        }
        .edu-head h2 .accent { color: var(--gc-blue); }
        .edu-head .sub {
          margin: 16px 0 8px;
          font-size: 16px;
          color: var(--ink-3);
          line-height: 1.55;
          max-width: 560px;
        }

        .edu-lista { margin-top: 24px; }
        .edu-item {
          display: grid;
          grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
          gap: 20px;
          padding: 18px 0;
          border-top: 1px solid var(--line);
          transition: padding-left .25s var(--ease);
        }
        .edu-item:hover { padding-left: 10px; }
        @media (max-width: ${BP.mobile}px) {
          .edu-item { grid-template-columns: 1fr; gap: 4px; }
        }
        .edu-item h3 {
          font-family: var(--display);
          font-size: 18px; font-weight: 700;
          letter-spacing: -0.01em;
          margin: 0;
          line-height: 1.25;
          transition: color .2s var(--ease);
        }
        .edu-item:hover h3 { color: var(--gc-blue); }
        .edu-item p { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0; }
        @media (prefers-reduced-motion: reduce) {
          .edu-item, .edu-item:hover { padding-left: 0; transition: none; }
        }
      `}</style>

      <div className="edu-sticky">
        <div className="container edu-grid">
        <div className="edu-preview reveal" ref={useReveal()}>
          <div className="edu-deck">
            {fotos.map((f, i) => (
              <img
                key={f.src}
                className={"foto pos-" + ((i - frente + fotos.length) % fotos.length)}
                src={f.src}
                alt={f.alt}
                loading="lazy"
              />
            ))}
          </div>
        </div>

        <div className="edu-head reveal" ref={ref}>
          <span className="eyebrow">Aprenda com o top 1</span>
          <h2>
            O que as maiores vendedoras fazem de diferente,{" "}
            <span className="accent">ensinado passo a passo.</span>
          </h2>
          <p className="sub">
            Não é curso gravado em 2023. É o que está funcionando agora,
            atualizado com dados reais de vendas das nossas marcas.
          </p>
          <div className="edu-lista">
            {itens.map((it, i) => (
              <div className="edu-item" key={i}>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
        </div>
      </div>
    </section>
  );
};
window.Education = Education;

// ============================================
// Comunidade no WhatsApp — pertencimento é a promessa central e a comunidade
// vive no WhatsApp (feedback Pedro 02/07). O mock de grupo é ilustrativo
// (tipos de mensagem do dia a dia), nunca depoimento.
// ============================================
const WHATSAPP_GREEN = "#1FAF57";
const WHATSAPP_CHAT_BG = "#EFEAE2";
const WHATSAPP_BUBBLE_OUT = "#DCF8C6";

const Comunidade = () => {
  const ref = useReveal();
  return (
    <section className="comu" id="comunidade">
      <style>{`
        .comu { padding: 16px 0 96px; }
        .comu-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
          gap: 64px;
          align-items: center;
        }
        @media (max-width: ${BP.desktop}px) { .comu-grid { grid-template-columns: 1fr; gap: 36px; } }

        .comu-copy h2 {
          font-family: var(--display);
          font-size: clamp(30px, 3.8vw, 46px);
          font-weight: 800;
          letter-spacing: -0.03em;
          margin: 16px 0 0;
          line-height: 1.08;
        }
        .comu-copy h2 em { color: var(--gc-purple); font-style: italic; }
        .comu-copy .sub {
          margin: 16px 0 0;
          font-size: 16px;
          color: var(--ink-3);
          line-height: 1.55;
          max-width: 520px;
        }
        .comu-checks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .comu-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); font-weight: 500; }

        .comu-chat {
          border-radius: 22px;
          overflow: hidden;
          border: 1px solid var(--line);
          box-shadow: 0 30px 60px -30px rgba(20,12,80,.28);
          max-width: 420px;
          width: 100%;
          justify-self: center;
        }
        .comu-chat-head {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 16px;
          color: white;
        }
        .comu-chat-head .gav {
          width: 38px; height: 38px; border-radius: 50%;
          background: white;
          display: grid; place-items: center;
          overflow: hidden; padding: 6px;
          flex-shrink: 0;
        }
        .comu-chat-head .gav img { width: 100%; height: 100%; object-fit: contain; }
        .comu-chat-head .gt { font-weight: 700; font-size: 15px; line-height: 1.15; }
        .comu-chat-head .gs { font-size: 11.5px; opacity: .85; }

        .comu-chat-body {
          padding: 18px 14px 20px;
          display: flex; flex-direction: column; gap: 10px;
        }
        .comu-msg {
          max-width: 86%;
          background: white;
          border-radius: 12px;
          border-top-left-radius: 4px;
          padding: 9px 12px;
          font-size: 13.5px;
          line-height: 1.45;
          color: var(--ink-2);
          box-shadow: 0 1px 1px rgba(0,0,0,.06);
        }
        .comu-msg .autor { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }
        .comu-msg.out {
          align-self: flex-end;
          border-top-left-radius: 12px;
          border-top-right-radius: 4px;
        }
        .comu-msg .hora { display: block; text-align: right; font-size: 10px; color: var(--ink-4); margin-top: 3px; }
      `}</style>

      <div className="container comu-grid">
        <div className="comu-copy reveal" ref={ref}>
          <span className="eyebrow" style={{ background: "#E3F6E9", color: "#166B38" }}>
            Comunidade no WhatsApp
          </span>
          <h2>Você não vende <em>sozinha</em>.</h2>
          <p className="sub">
            Criou a conta, entrou no grupo: a comunidade da GoCreators vive no
            WhatsApp. Aviso de campanha, produto em alta da semana e dúvida
            respondida na hora, pelo time das marcas e pelas vendedoras que já
            chegaram lá.
          </p>
          <ul className="comu-checks">
            <li><Icon name="check-circle" size={18} style={{ color: WHATSAPP_GREEN }} /> Avisos de campanha e produto em alta</li>
            <li><Icon name="check-circle" size={18} style={{ color: WHATSAPP_GREEN }} /> Time das 6 marcas respondendo</li>
            <li><Icon name="check-circle" size={18} style={{ color: WHATSAPP_GREEN }} /> Top vendedoras na mesma sala que você</li>
          </ul>
        </div>

        <div className="comu-chat reveal" ref={useReveal()} aria-hidden="true">
          <div className="comu-chat-head" style={{ background: WHATSAPP_GREEN }}>
            <span className="gav"><img src="uploads/gocreators-icon-blue.png" alt="" /></span>
            <div>
              <div className="gt">GoCreators · Comunidade</div>
              <div className="gs">grupo oficial das creators</div>
            </div>
          </div>
          <div className="comu-chat-body" style={{ background: WHATSAPP_CHAT_BG }}>
            <div className="comu-msg">
              <div className="autor" style={{ color: WHATSAPP_GREEN }}>GoCreators</div>
              📢 Campanha nova da Kokeshi no ar. Brief e roteiro já estão no app.
              <span className="hora">09:12</span>
            </div>
            <div className="comu-msg">
              <div className="autor" style={{ color: "var(--gc-purple)" }}>Creator</div>
              Meninas, qual produto tá saindo mais essa semana?
              <span className="hora">09:20</span>
            </div>
            <div className="comu-msg out" style={{ background: WHATSAPP_BUBBLE_OUT }}>
              Saiu o top da semana na aba Marcas 👀 corre lá
              <span className="hora">09:21</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Comunidade = Comunidade;

// ============================================
// CTA final — enxuto: kicker + H2 + 1 CTA + trust (§3.10 + copy §2.11).
// O impulso final é clareza, não decoração. Fecha o dark do Ato 3.
// ============================================
const FinalCta = () => {
  const ref = useReveal();
  return (
    <section className="final-cta" id="cta">
      <style>{`
        .final-cta {
          background: linear-gradient(180deg, #1B0F4A 0%, #120A35 100%);
          color: white;
          padding: 64px 0 112px;
          text-align: center;
        }
        .final-cta-box { max-width: 680px; margin: 0 auto; }
        .final-cta .kicker {
          font-family: var(--display);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--gc-purple-light);
        }
        .final-cta h2 {
          font-family: var(--display);
          font-size: clamp(32px, 4.6vw, 56px);
          font-weight: 800;
          letter-spacing: -0.03em;
          line-height: 1.05;
          margin: 18px 0 0;
        }
        .final-cta h2 em { color: var(--gc-purple-light); font-style: italic; }
        .final-cta-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
        .final-cta-actions .micro { font-size: 13px; color: rgba(255,255,255,.6); }
        .final-cta-trust {
          display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
          margin-top: 26px;
          color: rgba(255,255,255,.75); font-size: 13px;
        }
        .final-cta-trust span {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 7px 14px; border-radius: 999px;
          border: 1px solid rgba(255,255,255,.18);
          background: rgba(255,255,255,.05);
        }
      `}</style>

      <div className="container">
        <div className="final-cta-box reveal" ref={ref}>
          <span className="kicker">O ranking deste mês já começou</span>
          <h2>
            Daqui a 3 meses você vai desejar ter começado <em>hoje.</em>
          </h2>
          <div className="final-cta-actions">
            <a className="btn btn-primary" href="/login">
              Criar minha conta grátis <Icon name="arrow-up-right" size={16} />
            </a>
            <span className="micro">Leva 2 minutos. Cancela quando quiser.</span>
          </div>
          <div className="final-cta-trust">
            <span><Icon name="check" size={14} /> 100% grátis</span>
            <span><Icon name="check" size={14} /> Curso e comunidade inclusos</span>
            <span><Icon name="check" size={14} /> Comissão desde a primeira venda</span>
          </div>
        </div>
      </div>
    </section>
  );
};
window.FinalCta = FinalCta;

// ============================================
// Footer completo — continua no dark que fecha o Ato 3.
// Colunas: identidade + navegação + marcas + legal; barra final com
// copyright e o disclaimer de ganhos (copy §4.3).
// ============================================
const Footer = () => (
  <footer className="site-footer">
    <style>{`
      .site-footer {
        background: #120A35;
        padding: 24px 0 40px;
        color: rgba(255,255,255,.65);
      }
      .footer-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: 40px;
        padding: 40px 0 44px;
        border-top: 1px solid rgba(255,255,255,.1);
      }
      @media (max-width: ${BP.desktop}px) {
        .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      }
      @media (max-width: ${BP.mobile}px) {
        .footer-grid { grid-template-columns: 1fr; }
      }
      .footer-sobre p {
        margin: 16px 0 0;
        font-size: 13.5px;
        line-height: 1.6;
        max-width: 300px;
        color: rgba(255,255,255,.6);
      }
      .footer-col h4 {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255,255,255,.45);
        margin: 0 0 14px;
      }
      .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
      .footer-col a, .footer-col li { font-size: 14px; color: rgba(255,255,255,.75); }
      .footer-col a:hover { color: white; }

      .footer-bar {
        border-top: 1px solid rgba(255,255,255,.1);
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
      }
      .footer-copy { font-size: 12px; color: rgba(255,255,255,.4); }
      .footer-disclaimer {
        font-size: 11.5px;
        color: rgba(255,255,255,.35);
        line-height: 1.5;
        max-width: 480px;
      }
    `}</style>
    <div className="container">
      <div className="footer-grid">
        <div className="footer-sobre">
          <Logo size={30} onDark />
          <p>
            Aprenda com quem mais vende, escolha produtos de 6 marcas e
            transforme vídeo em comissão, ranking e prêmios reais. A
            GoCreators é do GoGroup, o grupo dono das 6 marcas.
          </p>
        </div>
        <div className="footer-col">
          <h4>Navegue</h4>
          <ul>
            <li><a href="#como-funciona">Como funciona</a></li>
            <li><a href="#marcas">Marcas</a></li>
            <li><a href="#recompensas">Prêmios</a></li>
            <li><a href="#educacao">Aprenda</a></li>
            <li><a href="#faq">Dúvidas frequentes</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Marcas do GoGroup</h4>
          <ul>
            <li>Gocase</li>
            <li>Barbours</li>
            <li>Lescent</li>
            <li>Rituária</li>
            <li>Kokeshi</li>
            <li>Ápice</li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Comece</h4>
          <ul>
            <li><a href="/login">Criar conta</a></li>
            <li><a href="privacidade.html">Privacidade</a></li>
            <li><a href="termos.html">Termos de uso</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bar">
        <div className="footer-copy">© 2026 GoCreators · by gogroup</div>
        <div className="footer-disclaimer">
          Ganhos variam conforme dedicação, conteúdo e desempenho de vendas.
          Comissões pagas por venda realizada.
        </div>
      </div>
    </div>
  </footer>
);
window.Footer = Footer;