// landing-page.jsx — página inteira do Comissa (PT-BR)

const { useEffect: __useEffect, useRef: __useRef, useState: __useState } = React;

// IntersectionObserver reveal — mais presente (distância + leve escala/blur)
function Reveal({ children, delay = 0, y = 42 }) {
  const ref = __useRef(null);
  const [shown, setShown] = __useState(false);
  __useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0) scale(1)' : `translateY(${y}px) scale(.985)`,
      filter: shown ? 'blur(0)' : 'blur(6px)',
      transition: `opacity .75s ease ${delay}ms, transform .9s cubic-bezier(.16,1,.3,1) ${delay}ms, filter .75s ease ${delay}ms`,
      willChange: 'transform, opacity, filter',
    }}>{children}</div>
  );
}

// Barra de progresso de scroll (topo da página)
function ScrollProgress() {
  const [w, setW] = __useState(0);
  __useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const h = document.documentElement.scrollHeight - window.innerHeight;
        setW(h > 0 ? Math.min(1, window.scrollY / h) : 0);
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);
  return (
    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, height: 3, zIndex: 9999, pointerEvents: 'none' }}>
      <div style={{
        height: '100%', width: `${(w * 100).toFixed(2)}%`,
        background: 'linear-gradient(90deg, var(--indigo), var(--cyan))',
        boxShadow: '0 0 14px rgba(37,99,235,0.7)',
        transformOrigin: 'left', transition: 'width .12s linear',
      }} />
    </div>
  );
}

function SectionHeader({ eyebrow, title, sub, align = 'left' }) {
  return (
    <div style={{ maxWidth: 760, textAlign: align, margin: align === 'center' ? '0 auto' : 0, marginBottom: 56 }}>
      {eyebrow && <div style={{ marginBottom: 16, display: 'inline-block' }}><Eyebrow>{eyebrow}</Eyebrow></div>}
      <h2 style={{
        fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.04em',
        fontWeight: 600, margin: 0,
      }}>{title}</h2>
      {sub && <p style={{
        fontSize: 18, lineHeight: 1.5, color: 'var(--muted)',
        margin: '20px 0 0', maxWidth: 620, letterSpacing: '-0.003em',
      }}>{sub}</p>}
    </div>
  );
}

// ── Marquee "vida de vendedor" ───────────────────────────────
function VendedorTicker() {
  const frases = [
    'Bateu a meta? Bebe uma.',
    'Vendi! E agora? Já caiu na conta.',
    'Cliente sumiu há 3 dias. Vai um WhatsApp?',
    'Tua comissão tá ali.',
    'Quanto eu ganhei hoje?',
    'Hoje é dia de fechar.',
    'O time bateu. Gerente paga o churrasco.',
    'Sem planilha. Sem confusão.',
  ];
  return (
    <div style={{
      borderTop: '0.5px solid var(--line)', borderBottom: '0.5px solid var(--line)',
      background: 'var(--surface)', overflow: 'hidden', padding: '14px 0',
    }}>
      <style>{`@keyframes cd-mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`}</style>
      <div style={{
        display: 'flex', whiteSpace: 'nowrap', gap: 0,
        animation: 'cd-mq 38s linear infinite',
      }}>
        {[...frases, ...frases, ...frases, ...frases].map((f, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            paddingRight: 36, fontSize: 18, letterSpacing: '-0.01em',
            color: 'var(--ink-2)',
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: 'var(--indigo)', opacity: .55, marginRight: 14,
            }} />
            {f}
          </span>
        ))}
      </div>
    </div>
  );
}

// ── Strip de logos de clientes ───────────────────────────────
function CustomerStrip() {
  return (
    <div style={{
      padding: '36px 64px 64px',
      borderBottom: '0.5px solid var(--line)',
      // era rgba(13,17,23,0.5) — sobra do tema claro: no escuro virava uma
      // faixa branca com os nomes ilegíveis por cima.
      background: 'rgba(13,17,23,0.015)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32 }}>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', maxWidth: 220, lineHeight: 1.4 }}>
          Vendedores e equipes que vendem todo dia, em todo lugar, usando Comissa.
        </div>
        <div style={{
          flex: 1, display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, alignItems: 'center',
        }}>
          {CUSTOMERS.map((c) => (
            <div key={c.n} style={{
              fontFamily: c.font === 'serif' ? "'Geist', serif" : c.font === 'mono' ? "'Geist Mono', monospace" : "'Geist', sans-serif",
              fontStyle: c.font === 'serif' ? 'italic' : 'normal',
              fontWeight: c.weight, letterSpacing: c.letter,
              fontSize: 21, color: 'var(--ink-2)', opacity: 0.55,
              textAlign: 'center',
              fontVariant: c.smallcaps ? 'small-caps' : 'normal',
              textTransform: c.smallcaps ? 'lowercase' : 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'center',
            }}>
              {c.icon && <span style={{ fontSize: 16 }}>{c.icon}</span>}
              {c.n}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Demo animado ─────────────────────────────────────────────
function ProductDemo() {
  const STEPS = [
    { k: 'create', title: 'Lance uma venda em 5 segundos',  hint: '⌘K, digita "nova venda", pronto.' },
    { k: 'assign', title: 'Comissão calculada na hora',     hint: 'Regras por produto, vendedor e meta. Sem planilha.' },
    { k: 'move',   title: 'Bloqueie tempo pra follow-up',   hint: 'Arrasta pra agenda. O Comissa lembra você.' },
    { k: 'room',   title: 'Veja o time vendendo, ao vivo',  hint: 'Quem fechou, quanto, agora.' },
  ];
  const [step, setStep] = __useState(0);
  const trilho = __useRef(null);
  const [manual, setManual] = __useState(false);

  // As etapas andam com o scroll, não com um cronômetro.
  //
  // Com timer de 2,8s a cena trocava sozinha enquanto o visitante ainda lia a
  // etapa anterior — e trocava também quando ele nem estava olhando. Agora o
  // trilho tem altura de sobra, o painel fica preso no topo e cada trecho de
  // rolagem acende uma etapa: descer é o que faz o dia avançar. Clicar numa
  // etapa continua funcionando e desliga o scroll até o próximo movimento.
  __useEffect(() => {
    if (manual) return;
    const el = trilho.current; if (!el) return;
    let raf = 0;
    const calc = () => {
      const r = el.getBoundingClientRect();
      const curso = Math.max(1, r.height - window.innerHeight * 0.92);
      const p = (-r.top) / curso;
      const i = Math.floor(p * STEPS.length);
      setStep(i < 0 ? 0 : i > STEPS.length - 1 ? STEPS.length - 1 : i);
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(calc); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    calc();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      cancelAnimationFrame(raf);
    };
  }, [manual, STEPS.length]);

  // Volta pro controle por scroll no próximo movimento depois de um clique.
  __useEffect(() => {
    if (!manual) return;
    const volta = () => setManual(false);
    const t = setTimeout(() => window.addEventListener('scroll', volta, { once: true, passive: true }), 1200);
    return () => { clearTimeout(t); window.removeEventListener('scroll', volta); };
  }, [manual]);

  return (
    <div ref={trilho} style={{ position: 'relative', minHeight: `${STEPS.length * 58}vh` }}>
    <div style={{
      position: 'sticky', top: 96,
      display: 'grid', gridTemplateColumns: '340px 1fr', gap: 56,
    }}>
      {/* steps */}
      <div>
        <div className="cd-mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 16 }}>
          Um dia no Comissa
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {STEPS.map((s, idx) => {
            const active = idx === step;
            return (
              <button
                key={s.k}
                onClick={() => { setManual(true); setStep(idx); }}
                style={{
                  textAlign: 'left', padding: '14px 16px',
                  border: '0.5px solid var(--line)', borderRadius: 12,
                  background: active ? 'var(--surface-2)' : 'transparent',
                  cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'flex-start',
                  boxShadow: active ? '0 8px 24px -10px rgba(0,0,0,0.5)' : 'none',
                  transition: 'background .25s, box-shadow .25s, border-color .25s',
                  borderColor: active ? 'var(--line)' : 'transparent',
                }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: active ? 'var(--indigo)' : 'rgba(13,17,23,0.07)',
                  color: active ? '#fff' : 'var(--muted)',
                  fontSize: 11, fontWeight: 600,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, marginTop: 2,
                }}>{idx + 1}</span>
                <span style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{s.title}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>{s.hint}</div>
                </span>
              </button>
            );
          })}
        </div>
        <div style={{ marginTop: 22, height: 3, background: 'var(--line-2)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{
            height: '100%',
            width: `${((step + 1) / STEPS.length) * 100}%`,
            background: 'linear-gradient(90deg, var(--indigo), var(--cyan))',
            transition: 'width .35s ease',
          }} />
        </div>
      </div>

      <div style={{
        position: 'relative', borderRadius: 18, overflow: 'hidden',
        background: 'var(--surface-2)',
        border: '0.5px solid var(--line)',
        boxShadow: '0 30px 60px -30px rgba(13,17,23,0.15)',
        // 520 era a altura da cena mais alta. As outras três deixavam 130px de
        // branco no rodapé do painel, que lia como card quebrado. 420 encosta
        // na cena típica; a mais alta cresce sozinha porque é minHeight.
        minHeight: 420,
      }}>
        <DemoStage step={STEPS[step].k} />
      </div>
    </div>
    </div>
  );
}

function DemoStage({ step }) {
  return (
    <div style={{ position: 'relative', padding: 28, height: '100%' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16,
        fontSize: 11.5, color: 'var(--muted)',
      }}>
        <span style={{ display: 'flex', gap: 5 }}>
          {['#E05252', '#D97706', '#059669'].map((c, i) => (
            <span key={i} style={{ width: 9, height: 9, borderRadius: 999, background: c, opacity: .8 }} />
          ))}
        </span>
        <span style={{ marginLeft: 6 }}>comissa.app · painel</span>
        <span style={{ flex: 1 }} />
        <span className="cd-mono" style={{ fontSize: 10.5 }}>
          {{create: 'CMD + K', assign: 'AUTO', move: 'ARRASTAR', room: 'AO VIVO'}[step]}
        </span>
      </div>

      <div style={{ position: 'relative', height: 420 }}>
        {step === 'create' && <Scene_Create />}
        {step === 'assign' && <Scene_Comissao />}
        {step === 'move'   && <Scene_Agenda />}
        {step === 'room'   && <Scene_Time />}
      </div>
    </div>
  );
}

// Cena 1 — paleta de comando "nova venda"
function Scene_Create() {
  const target = 'Rolex Submariner · Pedro Marques · R$ 78.000';
  const [text, setText] = __useState('');
  // A cena não acabava: digitava e ficava com a paleta aberta pra sempre, sem
  // mostrar o que o Enter produz. Agora ela termina onde importa — a venda
  // caindo no painel, com a comissão já calculada.
  const [pronto, setPronto] = __useState(false);
  __useEffect(() => {
    setText(''); setPronto(false);
    let i = 0;
    const timers = [];
    const t = setInterval(() => {
      i++;
      setText(target.slice(0, i));
      if (i >= target.length) {
        clearInterval(t);
        timers.push(setTimeout(() => setPronto(true), 620));
      }
    }, 30);
    return () => { clearInterval(t); timers.forEach(clearTimeout); };
  }, []);
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <FauxBoard dim={!pronto} highlight={pronto ? 'VND-2415' : undefined} />
      <div style={{
        position: 'absolute', left: '50%', top: 24, transform: 'translateX(-50%)',
        width: 580, background: 'var(--surface)',
        border: '0.5px solid var(--line)', borderRadius: 14,
        boxShadow: '0 24px 60px -20px rgba(13,17,23,0.25)',
        overflow: 'hidden',
        opacity: pronto ? 0 : 1,
        transform: pronto ? 'translateX(-50%) translateY(-14px) scale(.97)' : 'translateX(-50%)',
        transition: 'opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '14px 16px', borderBottom: '0.5px solid var(--line-2)',
        }}>
          <IconSearch size={15} />
          <input value={text} readOnly style={{
            flex: 1, border: 0, outline: 'none', background: 'transparent',
            fontSize: 14, color: 'var(--ink)', fontFamily: 'inherit',
          }} />
          <span style={{
            width: 1.5, height: 18, background: 'var(--indigo)',
            animation: 'cd-cur 0.9s steps(2) infinite',
          }} />
          <style>{`@keyframes cd-cur{0%,49%{opacity:1}50%,100%{opacity:0}}`}</style>
          <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', padding: '3px 7px', borderRadius: 4, border: '0.5px solid var(--line)' }}>↵</span>
        </div>
        <div style={{ padding: '8px 6px' }}>
          {[
            { i: <IconMoney size={13} />,  l: 'Registrar nova venda', s: 'Em "A negociar" · Maio' },
            { i: <IconUsers size={13} />,  l: 'Novo cliente', s: 'no CRM' },
            { i: <IconTarget size={13} />, l: 'Definir meta', s: 'pra maio · R$ 100.000' },
          ].map((r, i) => (
            <div key={r.l} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '8px 12px', borderRadius: 8,
              background: i === 0 ? 'rgba(37,99,235,0.08)' : 'transparent',
              color: i === 0 ? 'var(--indigo)' : 'var(--ink-2)',
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: 6,
                background: i === 0 ? 'var(--indigo)' : 'rgba(13,17,23,0.06)',
                color: i === 0 ? '#fff' : 'var(--muted)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{r.i}</span>
              <span style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{r.l}</div>
                <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{r.s}</div>
              </span>
              {i === 0 && <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)' }}>↵</span>}
            </div>
          ))}
        </div>
      </div>

      {/* O fim da história: a venda no painel e a comissão já feita. */}
      <div style={{
        position: 'absolute', left: 20, bottom: 20, right: 20,
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '13px 16px', borderRadius: 14,
        background: 'var(--surface)',
        border: '0.5px solid rgba(5,150,105,0.30)',
        boxShadow: '0 20px 44px -20px rgba(13,17,23,0.28)',
        opacity: pronto ? 1 : 0,
        transform: pronto ? 'none' : 'translateY(14px)',
        transition: 'opacity .45s ease .1s, transform .55s cubic-bezier(.2,.7,.2,1) .1s',
      }}>
        <span style={{
          width: 30, height: 30, borderRadius: 999, flexShrink: 0,
          background: 'rgba(5,150,105,0.12)', color: 'var(--green-text)',
          display: 'grid', placeItems: 'center',
        }}>
          <IconCheck size={15} stroke={2.5} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>
            Venda registrada e já no seu painel
          </div>
          <div className="cd-mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3 }}>
            VND-2415 · Rolex Submariner · R$ 78.000
          </div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div className="cd-mono" style={{
            fontSize: 15, fontWeight: 600, color: 'var(--green-text)',
            fontVariantNumeric: 'tabular-nums',
          }}>+R$ 2.340</div>
          <div style={{ fontSize: 10.5, color: 'var(--muted-2)', marginTop: 2 }}>comissão 3%</div>
        </div>
      </div>
    </div>
  );
}

// Cena 2 — comissão calculada
function Scene_Comissao() {
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <FauxBoard highlight="VND-2415" />
      <div style={{
        position: 'absolute', right: 24, top: 32,
        background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 12,
        padding: 16, width: 280,
        boxShadow: '0 14px 30px -12px rgba(13,17,23,0.18)',
      }}>
        <div className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', marginBottom: 6, letterSpacing: '0.04em' }}>
          COMISSÃO · VND-2415
        </div>
        <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 14 }}>Rolex Submariner · Pedro M.</div>
        {[
          { l: 'Valor da venda',  v: 'R$ 78.000', s: false },
          { l: 'Regra (relógio)', v: '7%',        s: false },
          { l: 'Bônus meta atingida', v: '+R$ 800', s: false },
        ].map((r, i) => (
          <div key={r.l} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            padding: '7px 0',
            borderTop: i ? '0.5px solid var(--line-2)' : 'none',
            fontSize: 12, color: 'var(--ink-2)',
          }}>
            <span>{r.l}</span>
            <span className="cd-mono" style={{ color: 'var(--ink)', fontWeight: 500 }}>{r.v}</span>
          </div>
        ))}
        <div style={{
          marginTop: 12, padding: '12px 12px',
          background: 'linear-gradient(135deg, rgba(37,99,235,0.08), rgba(56,189,248,0.06))',
          borderRadius: 8,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Sua comissão</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.025em', color: 'var(--indigo)' }}>R$ 6.260</div>
        </div>
        <div style={{
          marginTop: 10, display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11, color: 'var(--muted)',
        }}>
          <IconPix size={12} stroke={1.4} />
          <span>Cai via Pix em até 1 dia útil após o pagamento</span>
        </div>
      </div>
    </div>
  );
}

// Cena 3 — agenda / follow-up
function Scene_Agenda() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 280px', gap: 18 }}>
      <FauxBoard dim />
      <div style={{
        background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 12,
        padding: 12, position: 'relative', overflow: 'hidden',
      }}>
        <div className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 10 }}>
          Hoje · qui, 16 mai
        </div>
        {['9', '10', '11', '12', '13', '14', '15'].map((h) => (
          <div key={h} style={{
            display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8,
            paddingBottom: 28, position: 'relative',
          }}>
            <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted-2)' }}>{h}h</span>
            <span style={{ borderTop: '0.5px solid var(--line-2)' }} />
          </div>
        ))}
        <div style={{
          position: 'absolute', left: 44, right: 12, top: 78, height: 84,
          background: 'linear-gradient(135deg, rgba(37,99,235,0.12), rgba(56,189,248,0.1))',
          border: '1px solid var(--indigo)', borderRadius: 8,
          padding: '8px 10px',
          animation: 'cd-snap 1.4s ease-out',
        }}>
          <style>{`@keyframes cd-snap{0%{transform:translateY(-32px) scale(0.92);opacity:0;border-style:dashed}45%{transform:translateY(0) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1);opacity:1;border-style:solid}}`}</style>
          <div className="cd-mono" style={{ fontSize: 10, color: 'var(--indigo)' }}>FOLLOW-UP · 10h11h30</div>
          <div style={{ fontSize: 13, fontWeight: 500, marginTop: 3, letterSpacing: '-0.005em' }}>Ligar pro Pedro · proposta Rolex</div>
        </div>
      </div>
    </div>
  );
}

// Cena 4 — time online (ranking ao vivo)
function Scene_Time() {
  const time = [
    { n: 'Marina S.',  v: 32400, m: 0.86, hue: 14 },
    { n: 'João P.',    v: 28700, m: 0.72, hue: 30 },
    { n: 'Carla O.',   v: 19200, m: 0.48, hue: 42 },
    { n: 'Bruno T.',   v: 14300, m: 0.36, hue: 30 },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <FauxBoard dim />
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
        background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 18,
        padding: 22, width: 420,
        boxShadow: '0 24px 60px -20px rgba(13,17,23,0.25)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: '#059669',
            boxShadow: '0 0 0 0 rgba(5,150,105,.7)',
            animation: 'cd-pulse 1.6s ease-out infinite',
          }} />
          <style>{`@keyframes cd-pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.6)}100%{box-shadow:0 0 0 14px rgba(5,150,105,0)}}`}</style>
          <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--green-text)', letterSpacing: '0.06em' }}>AO VIVO · TIME VENDAS · MAIO</span>
        </div>
        {time.map((p, i) => (
          <div key={p.n} style={{
            display: 'grid', gridTemplateColumns: '20px 32px 1fr 96px', gap: 10,
            alignItems: 'center', padding: '8px 0',
            borderTop: i ? '0.5px solid var(--line-2)' : 'none',
          }}>
            <span className="cd-mono" style={{ fontSize: 11, color: i === 0 ? 'var(--indigo)' : 'var(--muted)', fontWeight: 500 }}>#{i + 1}</span>
            <Avatar initials={p.n.split(' ').map(x => x[0]).join('')} hue={p.hue} size={28} />
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>{p.n}</div>
              <div style={{ height: 3, background: 'var(--line-2)', borderRadius: 99, marginTop: 5, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${p.m * 100}%`, background: i === 0 ? 'linear-gradient(90deg, var(--indigo), var(--cyan))' : 'var(--ink-2)' }} />
              </div>
            </div>
            <div className="cd-mono" style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500, textAlign: 'right' }}>R$ {p.v.toLocaleString('pt-BR')}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Background board nas cenas — versão de vendas
function FauxBoard({ dim, highlight }) {
  const rows = [
    { id: 'VND-2417', t: 'Curso Trading Pro · Ana Souza',        state: 'todo',   who: 'JS', tag: 'curso',   valor: 'R$ 1.997' },
    { id: 'VND-2415', t: 'Rolex Submariner · Pedro Marques',     state: 'todo',   who: 'MS', tag: 'relogio', valor: 'R$ 78.000' },
    { id: 'VND-2412', t: 'Honda Civic · Loja Vista Verde',       state: 'doing',  who: 'CO', tag: 'carro',   valor: 'R$ 142k' },
    { id: 'VND-2402', t: 'Apto 2Q · Família Lima',               state: 'doing',  who: 'FC', tag: 'imovel',  valor: 'R$ 580k' },
    { id: 'VND-2381', t: 'iPhone 16 Pro · Mariana R.',           state: 'review', who: 'JS', tag: 'eletro',  valor: 'R$ 9,5k' },
  ];
  const stateAccent = { todo: '#94A3B4', doing: '#F59E0B', review: '#059669' };
  return (
    <div style={{
      background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 12,
      overflow: 'hidden', opacity: dim ? 0.6 : 1, filter: dim ? 'saturate(0.85)' : 'none',
      height: '100%',
    }}>
      <div style={{
        padding: '10px 14px', borderBottom: '0.5px solid var(--line-2)',
        fontSize: 12, fontWeight: 600, letterSpacing: '-0.005em',
      }}>Minhas vendas <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', fontWeight: 400, marginLeft: 6 }}>{rows.length} abertas</span></div>
      {rows.map((r) => {
        const tag = TAG_COLORS[r.tag] || TAG_COLORS.curso;
        const isHi = highlight && r.id === highlight;
        return (
          <div key={r.id} style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px',
            borderBottom: '0.5px solid var(--line-2)',
            background: isHi ? 'rgba(37,99,235,0.14)' : 'var(--surface)',
            position: 'relative',
          }}>
            <span style={{ width: 11, height: 11, borderRadius: 999,
              border: `2px solid ${stateAccent[r.state]}`,
              background: `radial-gradient(circle, ${stateAccent[r.state]} 0 35%, transparent 38%)` }} />
            <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', minWidth: 64 }}>{r.id}</span>
            <span style={{ flex: 1, fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.t}</span>
            <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 4, background: tag.bg, color: tag.fg, fontWeight: 500 }}>{r.tag}</span>
            <span className="cd-mono" style={{ fontSize: 11, color: 'var(--ink-2)', minWidth: 72, textAlign: 'right' }}>{r.valor}</span>
            <Avatar initials={r.who} hue={(r.who.charCodeAt(0) * 13) % 360} size={20} />
            {isHi && (
              <span style={{
                position: 'absolute', left: -3, top: 0, bottom: 0, width: 3,
                background: 'var(--indigo)', borderRadius: 2,
              }} />
            )}
          </div>
        );
      })}
    </div>
  );
}

// ── Ranking da equipe (era VirtualOffice) ────────────────────
function RankingEquipe() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '500px 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <Eyebrow>Equipe</Eyebrow>
        <h2 style={{
          fontSize: 52, lineHeight: 1.0, letterSpacing: '-0.04em',
          fontWeight: 600, margin: '16px 0 20px',
        }}>
          Quem vende mais?<br />
          <span style={{ color: 'var(--muted)' }}>Todo mundo sabe.</span>
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--muted)', margin: 0, letterSpacing: '-0.003em' }}>
          Ranking ao vivo, comissão de cada um, progresso pra meta da equipe.
          A competição saudável que faz o time vender, sem grupo de WhatsApp pra cobrar.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0' }}>
          {[
            { i: <IconTarget size={15} />, l: 'Metas individuais e da equipe, em tempo real' },
            { i: <IconMoney size={15} />,  l: 'Comissão de cada vendedor, transparente' },
            { i: <IconStar size={15} />,   l: 'Bônus por meta batida, calculado automágico' },
            { i: <IconUsers size={15} />,  l: 'Visão do gerente: pipeline de todo o time' },
          ].map((x) => (
            <li key={x.l} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '10px 0', borderTop: '0.5px solid var(--line)' }}>
              <span style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'var(--indigo-soft)', color: 'var(--indigo)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{x.i}</span>
              <span style={{ fontSize: 14.5, color: 'var(--ink-2)' }}>{x.l}</span>
            </li>
          ))}
        </ul>
      </div>

      <PodiumViz />
    </div>
  );
}

function PodiumViz() {
  const podium = [
    { n: 'Marina',  ini: 'MS', hue: 14, v: 'R$ 32,4k', m: 86, pos: 1 },
    { n: 'João',    ini: 'JP', hue: 30, v: 'R$ 28,7k', m: 72, pos: 2 },
    { n: 'Carla',   ini: 'CO', hue: 42, v: 'R$ 19,2k', m: 48, pos: 3 },
  ];
  const heights = { 1: 200, 2: 150, 3: 110 };
  const order = [2, 1, 3]; // visual order: silver, gold, bronze
  const barDelay = { 1: 156, 2: 0, 3: 312 };
  const avatarDelay = { 1: 936, 2: 780, 3: 1092 };

  const rootRef = __useRef(null);
  const [play, setPlay] = __useState(false);
  __useEffect(() => {
    const el = rootRef.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setPlay(true); io.unobserve(el); } });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={rootRef} style={{
      position: 'relative', height: 460,
      background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 24,
      boxShadow: '0 30px 60px -30px rgba(13,17,23,0.15)',
      padding: 32, overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Ranking · Maio</div>
        <div className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)' }}>AO VIVO</div>
      </div>

      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 32px 32px' }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          gap: 16, height: 280,
        }}>
          {order.map((pos) => {
            const p = podium.find(x => x.pos === pos);
            const isFirst = pos === 1;
            const fallStart = -360;
            return (
              <div key={pos} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '0 0 110px' }}>
                <div style={{
                  marginBottom: 10, position: 'relative',
                  transform: play ? 'translateY(0)' : `translateY(${fallStart}px)`,
                  opacity: play ? 1 : 0,
                  transition: `transform 1.105s cubic-bezier(.34,1.56,.4,1) ${avatarDelay[pos]}ms, opacity .455s ease ${avatarDelay[pos]}ms`,
                  willChange: 'transform',
                }}>
                  {isFirst && (
                    <span style={{
                      position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
                      fontSize: 22,
                    }}><IconStar size={12} /></span>
                  )}
                  <Avatar initials={p.ini} hue={p.hue} size={isFirst ? 56 : 44} />
                </div>
                <div style={{
                  fontSize: 13, fontWeight: 500,
                  opacity: play ? 1 : 0,
                  transition: `opacity .52s ease ${avatarDelay[pos] + 325}ms`,
                }}>{p.n}</div>
                <div className="cd-mono" style={{
                  fontSize: 11, color: 'var(--muted)', marginBottom: 8,
                  opacity: play ? 1 : 0,
                  transition: `opacity .52s ease ${avatarDelay[pos] + 390}ms`,
                }}>{p.v}</div>
                <div style={{
                  width: 88, height: play ? heights[pos] : 0,
                  background: isFirst
                    ? 'linear-gradient(180deg, #2563EB, #38BDF8)'
                    : 'linear-gradient(180deg, rgba(13,17,23,0.18), rgba(13,17,23,0.06))',
                  border: isFirst ? 'none' : '1px solid rgba(13,17,23,0.10)',
                  borderBottom: 'none',
                  borderRadius: '12px 12px 0 0',
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'flex-start',
                  padding: '14px 0', color: '#fff',
                  boxShadow: isFirst ? '0 -6px 26px -6px rgba(37,99,235,0.6)' : '0 -6px 16px -10px rgba(0,0,0,0.5)',
                  transition: `height 1.17s cubic-bezier(.2,.7,.2,1) ${barDelay[pos]}ms`,
                  overflow: 'hidden',
                  transformOrigin: 'bottom',
                }}>
                  <div style={{
                    fontSize: 28, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.04em',
                    opacity: play ? 1 : 0,
                    transition: `opacity .455s ease ${barDelay[pos] + 780}ms`,
                  }}>{pos}</div>
                  <div className="cd-mono" style={{
                    fontSize: 9.5, opacity: play ? .7 : 0, marginTop: 4, letterSpacing: '0.06em',
                    transition: `opacity .455s ease ${barDelay[pos] + 910}ms`,
                  }}>{p.m}% META</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ── Feature grid (em PT, niche de vendas) ────────────────────
function FeatureGrid() {
  const cells = [
    {
      title: 'Comissão inteligente',
      sub: 'Regras por produto, vendedor, faixa de meta e bônus. O Comissa calcula tudo na hora. Você só confere o número final.',
      icon: <IconMoney size={18} />,
      preview: <ComissaoPreview />,
      span: 2,
    },
    {
      title: 'Lembretes que não falham',
      sub: 'Cliente sumiu, follow-up agendado, comissão a cair. O Comissa cutuca você no momento certo.',
      icon: <IconClock size={18} />,
      preview: <LembretesPreview />,
      span: 1,
    },
    {
      title: 'Integrações que importam',
      sub: 'Pix, Hotmart, Kiwify, Mercado Pago, Asaas, Pagar.me. Pluga e pronto.',
      icon: <IconRoute size={18} />,
      preview: <IntegrationsPreview />,
      span: 1,
    },
    {
      title: 'Relatórios ao vivo',
      sub: 'Gráficos, exportação pra PDF, e os números que importam pro fechamento do mês.',
      icon: <IconDoc size={18} />,
      preview: <RelatoriosPreview />,
      span: 2,
    },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {cells.map((c) => (
        <div key={c.title} style={{
          gridColumn: `span ${c.span}`,
          background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 18,
          padding: 24, position: 'relative', overflow: 'hidden',
          minHeight: 320,
        }}>
          <div style={{
            display: 'inline-flex', width: 36, height: 36, borderRadius: 10,
            background: 'var(--indigo-soft)', color: 'var(--indigo)',
            alignItems: 'center', justifyContent: 'center', marginBottom: 14,
          }}>{c.icon}</div>
          <h3 style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 }}>{c.title}</h3>
          <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--muted)', margin: '6px 0 16px', maxWidth: 400 }}>{c.sub}</p>
          {c.preview}
        </div>
      ))}
    </div>
  );
}

function ComissaoPreview() {
  return (
    <div style={{ marginTop: 14 }}>
      <div className="cd-mono" style={{
        fontSize: 11.5, color: 'var(--ink-2)',
        background: 'var(--surface-2)', border: '0.5px solid var(--line)',
        borderRadius: 10, padding: '12px 14px', lineHeight: 1.7,
      }}>
        <span style={{ color: 'var(--muted)' }}>regra</span>{' '}
        <span style={{ color: 'var(--indigo)', background: 'rgba(37,99,235,0.08)', padding: '1px 4px', borderRadius: 3 }}>relógio</span>{' '}
        <span style={{ color: 'var(--muted)' }}>=</span> 7%
        <span style={{ color: 'var(--muted)' }}> + bônus </span>
        <span style={{ color: '#E11D48', background: 'rgba(244,63,94,0.08)', padding: '1px 4px', borderRadius: 3 }}>meta &gt; 80%</span>
        <span style={{ color: 'var(--muted)' }}> = </span>
        <span style={{ color: '#166534', background: 'rgba(5,150,105,0.08)', padding: '1px 4px', borderRadius: 3 }}>+ R$ 800</span>
      </div>
      {/* mini barra dividida composição da comissão */}
      <div style={{ marginTop: 18 }}>
        <div style={{ fontSize: 11.5, color: 'var(--muted)', marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
          <span>Comissão deste mês</span>
          <span className="cd-mono" style={{ color: 'var(--ink)', fontWeight: 500 }}>R$ 12.840</span>
        </div>
        <div style={{ height: 14, borderRadius: 7, overflow: 'hidden', display: 'flex' }}>
          {[
            { c: '#2563EB', w: 48, l: 'Relógio' },
            { c: '#38BDF8', w: 26, l: 'Curso' },
            { c: '#F59E0B', w: 14, l: 'Carro' },
            { c: '#059669', w: 8,  l: 'Bônus' },
            { c: '#E5E7EB', w: 4,  l: 'Outros' },
          ].map((b) => (
            <div key={b.l} style={{ width: `${b.w}%`, background: b.c }} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
          {[
            { c: '#2563EB', l: 'Relógio · R$ 6.240' },
            { c: '#38BDF8', l: 'Curso · R$ 3.340' },
            { c: '#F59E0B', l: 'Carro · R$ 1.800' },
            { c: '#059669', l: 'Bônus · R$ 980' },
            { c: '#E5E7EB', l: 'Outros · R$ 480' },
          ].map((b) => (
            <span key={b.l} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--muted)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: b.c }} />
              {b.l}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function LembretesPreview() {
  const itens = [
    {
      icon: <IconWhats size={13} />, tone: '#25D366', bg: 'rgba(37,211,102,0.10)',
      t: 'Ana Souza sumiu há 3 dias', s: 'Mandar Whats lembrando do orçamento.', when: 'agora',
    },
    {
      icon: <IconClock size={13} />, tone: '#F59E0B', bg: 'rgba(245,158,11,0.12)',
      t: 'Reunião com Pedro · Rolex', s: 'Confirmar entrega amanhã, 14:00.', when: '1 d',
    },
    {
      icon: <IconMoney size={13} />, tone: '#059669', bg: 'rgba(5,150,105,0.12)',
      t: 'Comissão de R$ 5.460', s: 'Cai no Pix em 2 dias úteis.', when: '2 d',
    },
  ];
  return (
    <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {itens.map((x, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'flex-start', gap: 10,
          padding: '10px 12px', borderRadius: 10,
          background: 'var(--surface-2)', border: '0.5px solid var(--line)',
          position: 'relative', overflow: 'hidden',
        }}>
          <span style={{
            width: 26, height: 26, borderRadius: 7, flexShrink: 0,
            background: x.bg, color: x.tone,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>{x.icon}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, letterSpacing: '-0.005em', lineHeight: 1.3 }}>{x.t}</div>
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2, lineHeight: 1.4 }}>{x.s}</div>
          </div>
          <span className="cd-mono" style={{
            fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
            background: 'var(--surface)', border: '0.5px solid var(--line)',
            color: 'var(--muted)', letterSpacing: '0.04em', flexShrink: 0,
          }}>{x.when}</span>
        </div>
      ))}
    </div>
  );
}

function IntegrationsPreview() {
  const integrations = [
    { n: 'Pix',           b: 'pix' },
    { n: 'Mercado Pago',  b: 'mercadopago' },
    { n: 'Hotmart',       b: 'hotmart' },
    { n: 'Kiwify',        b: 'kiwify' },
    { n: 'Asaas',         b: 'asaas' },
  ];
  return (
    <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
      {integrations.map((x) => (
        <div key={x.n} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '7px 10px', borderRadius: 8,
          background: 'var(--surface-2)', border: '0.5px solid var(--line)',
        }}>
          <BrandLogo brand={x.b} size={22} />
          <span style={{ fontSize: 11.5, color: 'var(--ink-2)' }}>{x.n}</span>
          <span style={{ flex: 1 }} />
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#059669' }} />
        </div>
      ))}
    </div>
  );
}

function RelatoriosPreview() {
  // mini chart de vendas por dia (cada barra clicável)
  const data = [
    { d: 1,  h: 22, v: 2400,  n: 1 },
    { d: 2,  h: 38, v: 4180,  n: 2 },
    { d: 3,  h: 28, v: 3080,  n: 2 },
    { d: 4,  h: 54, v: 5940,  n: 3 },
    { d: 5,  h: 46, v: 5060,  n: 2 },
    { d: 6,  h: 62, v: 6820,  n: 4 },
    { d: 7,  h: 40, v: 4400,  n: 2 },
    { d: 8,  h: 70, v: 7700,  n: 4 },
    { d: 9,  h: 58, v: 6380,  n: 3 },
    { d: 10, h: 88, v: 9680,  n: 5 },
    { d: 11, h: 76, v: 8360,  n: 4 },
    { d: 12, h: 92, v: 10120, n: 6 },
    { d: 13, h: 80, v: 8800,  n: 5 },
  ];
  const [sel, setSel] = __useState(data.length - 1); // último dia selecionado por padrão
  const [hover, setHover] = __useState(null);
  const active = hover != null ? hover : sel;
  const cur = data[active];

  return (
    <div style={{ marginTop: 14, background: 'var(--surface-2)', border: '0.5px solid var(--line)', borderRadius: 12, padding: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em' }}>Vendas por dia · maio</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)' }}>R$ 78,4k</span>
          <span className="cd-mono" style={{
            fontSize: 9.5, padding: '3px 6px', borderRadius: 5,
            background: 'rgba(5,150,105,0.12)', color: 'var(--green-text)', whiteSpace: 'nowrap',
          }}>↑ +24% vs abr</span>
        </div>
      </div>

      <div style={{ position: 'relative', height: 100 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: '100%' }}>
          {data.map((b, i) => {
            const isActive = i === active;
            const isSel = i === sel;
            return (
              <button
                key={b.d}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                onClick={() => setSel(i)}
                aria-label={`Dia ${b.d}: R$ ${b.v.toLocaleString('pt-BR')}`}
                style={{
                  flex: 1, height: `${b.h}%`, padding: 0,
                  border: 0, cursor: 'pointer',
                  background: isActive
                    ? 'linear-gradient(180deg, #2563EB, #38BDF8)'
                    : `rgba(37,99,235,${0.18 + (i / data.length) * 0.5})`,
                  borderRadius: '4px 4px 0 0',
                  outline: isSel && !hover ? '2px solid var(--indigo)' : 'none',
                  outlineOffset: 2,
                  boxShadow: isActive ? '0 6px 16px -6px rgba(37,99,235,.5)' : 'none',
                  transform: isActive ? 'translateY(-2px)' : 'none',
                  transition: 'transform .15s ease, box-shadow .15s ease, background .15s ease',
                  position: 'relative',
                }}
              />
            );
          })}
        </div>

        {/* tooltip sobre a barra ativa */}
        {cur && (
          <div style={{
            position: 'absolute', bottom: '100%', marginBottom: 6,
            left: `${((active + 0.5) / data.length) * 100}%`,
            transform: 'translateX(-50%)',
            background: 'var(--surface-2)', color: 'var(--ink)',
            border: '0.5px solid var(--line)',
            padding: '6px 9px', borderRadius: 7,
            fontSize: 11, lineHeight: 1.3, whiteSpace: 'nowrap',
            boxShadow: '0 6px 14px -4px rgba(0,0,0,.5)',
            pointerEvents: 'none',
            fontFamily: "'Geist Mono', ui-monospace, monospace",
          }}>
            Dia {cur.d} · R$ {cur.v.toLocaleString('pt-BR')}
            <span style={{
              position: 'absolute', bottom: -3, left: '50%', transform: 'translateX(-50%) rotate(45deg)',
              width: 6, height: 6, background: '#FBFCFD',
            }} />
          </div>
        )}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
        {['1', '4', '7', '10', '13', '16'].map((d) => (
          <span key={d} className="cd-mono" style={{ fontSize: 10, color: 'var(--muted-2)' }}>{d}</span>
        ))}
      </div>

      {/* detalhe da barra clicada */}
      <div style={{
        marginTop: 12, padding: '10px 12px',
        background: 'var(--surface)', borderRadius: 8,
        border: '0.5px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
      }}>
        <div>
          <div style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.04em' }}>{`${String(cur.d).padStart(2,'0')} · MAIO`}</div>
          <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 1 }}>
            R$ {cur.v.toLocaleString('pt-BR')}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10.5, color: 'var(--muted)' }}>{cur.n} vendas</div>
          <div style={{ fontSize: 10.5, color: 'var(--indigo)', marginTop: 1, fontFamily: "'Geist Mono', ui-monospace, monospace" }}>
            +R$ {Math.round(cur.v * 0.07).toLocaleString('pt-BR')} comissão
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Depoimentos ──────────────────────────────────────────────
function Quotes() {
  const quotes = [
    {
      q: 'Larguei a planilha no primeiro dia. Minha comissão tava sempre uns R$ 500 errada. Agora bate certinho.',
      n: 'Patrícia Almeida', r: 'Vendedora de imóveis · Habita+', hue: 8,
    },
    {
      q: 'Os atalhos são obscenamente bons. Lanço uma venda mais rápido do que respondo no WhatsApp.',
      n: 'João Vitor Souza', r: 'Vendedor de carros · Velocittà', hue: 30,
    },
    {
      q: 'A gente vende curso, e o Comissa puxa do Hotmart direto. Comissão dos meus afiliados sai no mesmo dia.',
      n: 'Eliana Ferreira', r: 'Infoprodutora · Mestria', hue: 30,
    },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {quotes.map((q, i) => (
        <figure key={i} style={{
          margin: 0, background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 18,
          padding: 24,
        }}>
          <div style={{ display: 'flex', gap: 1, marginBottom: 16 }}>
            {[0,1,2,3,4].map((s) => (
              <IconStar key={s} size={13} fill="#F59E0B" stroke={0} />
            ))}
          </div>
          <blockquote style={{
            margin: 0, fontSize: 16, lineHeight: 1.5,
            letterSpacing: '-0.005em', color: 'var(--ink)',
          }}>“{q.q}”</blockquote>
          <figcaption style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 20 }}>
            <Avatar initials={q.n.split(' ').map(x => x[0]).join('')} hue={q.hue} size={32} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{q.n}</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{q.r}</div>
            </div>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

// ── Tabela de preços compacta ────────────────────────────────
function PricingMini() {
  // Os planos aqui espelham os do app (i18n.js → plan_*). Mudou lá, muda aqui.
  const plans = [
    {
      n: 'Comissa Base', p: 'Grátis', s: 'por 14 dias', d: 'Pra começar sem custo',
      f: ['Até 3 links de pagamento rastreáveis', 'Até 50 cadastros de compradores', 'Até 4 produtos cadastrados', 'Dashboard de comissões (mês atual)'],
      cta: 'Começar grátis', tone: 'ghost',
      onClick: () => window.openModal('signup'),
    },
    {
      n: 'Comissa Pro', p: 'R$ 47,90', s: '/mês', d: 'Pra quem vende todo dia',
      f: ['Até 25 links de pagamento rastreáveis', 'Cadastro de compradores ilimitado', 'Até 15 produtos cadastrados', 'Previsão de recebimento por plataforma', 'Histórico completo de comissões'],
      cta: 'Testar 14 dias grátis', tone: 'primary', highlight: true,
      onClick: () => window.openModal('signup'),
    },
    {
      n: 'Comissa Max', p: 'R$ 97,90', s: '/mês', d: 'Pra times e operações maiores',
      f: ['Links e produtos ilimitados', 'Alerta de produto parado', 'Exportação CSV/PDF', 'Suporte via WhatsApp', 'Tudo do Comissa Pro'],
      cta: 'Falar com a gente', tone: 'ghost',
      onClick: () => window.openModal('contact'),
    },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {plans.map((p) => (
        <div key={p.n} style={{
          background: p.highlight
            ? 'linear-gradient(165deg, #F0F7FF 0%, #FFFFFF 100%)'
            : 'var(--surface)',
          // O card destacado é claro (o gradiente acima já dizia isso), mas a
          // tinta tinha ficado em '#fff' de quando ele era escuro: nome, preço
          // e rótulo do botão saíam brancos sobre branco. O plano mais vendido
          // era o único ilegível da tabela.
          color: 'var(--ink)',
          border: p.highlight ? '1px solid rgba(96,165,250,0.5)' : '0.5px solid var(--line)',
          boxShadow: p.highlight ? '0 30px 70px -30px rgba(37,99,235,0.55)' : '0 20px 50px -35px rgba(0,0,0,0.6)',
          borderRadius: 18, padding: 26, position: 'relative',
        }}>
          {p.highlight && (
            <span style={{
              position: 'absolute', top: -12, left: 24,
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--indigo)', color: '#fff',
              fontSize: 11, fontWeight: 500, letterSpacing: '-0.005em',
            }}>Mais escolhido</span>
          )}
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 6 }}>{p.n}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
            <span className="cd-mono" style={{
              fontSize: 38, fontWeight: 500, letterSpacing: '-0.035em',
              fontVariantNumeric: 'tabular-nums',
            }}>{p.p}</span>
            {p.s && <span style={{ fontSize: 13, color: 'var(--muted)' }}>{p.s}</span>}
          </div>
          <div style={{ fontSize: 13, color: p.highlight ? 'rgba(13,17,23,0.6)' : 'var(--muted)', marginBottom: 20 }}>{p.d}</div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, marginBottom: 22 }}>
            {p.f.map((x) => (
              <li key={x} style={{
                display: 'flex', gap: 8, alignItems: 'flex-start', padding: '6px 0',
                fontSize: 13, color: p.highlight ? 'rgba(13,17,23,0.85)' : 'var(--ink-2)',
              }}>
                {/* #A5C9FF é o azul claro pra fundo escuro — sobre o card
                    claro o check sumia. O acento serve os dois casos. */}
                <span style={{ marginTop: 4, color: 'var(--indigo)' }}>
                  <IconCheck size={12} stroke={2.2} />
                </span>
                {x}
              </li>
            ))}
          </ul>
          <button className="cd-cta" onClick={p.onClick} style={{
            width: '100%', padding: '11px 14px', borderRadius: 999,
            border: '0.5px solid',
            borderColor: p.highlight ? 'var(--indigo)' : 'var(--line)',
            // O plano em destaque leva o único botão preenchido da tabela: ele
            // é a ação que a seção recomenda, e agora parece uma.
            background: p.highlight ? 'var(--indigo)' : 'rgba(13,17,23,0.05)',
            color: p.highlight ? '#fff' : 'var(--ink)',
            fontWeight: p.highlight ? 600 : 500, fontSize: 14, cursor: 'pointer',
          }}>{p.cta}</button>
        </div>
      ))}
    </div>
  );
}

// ── Depois do fechamento: contrato + parcelas ────────────────
// Duas colunas. À esquerda o contrato caminhando pelos estados reais do
// produto (modelo → campos → pendência → enviado); à direita as parcelas de
// boleto baixando uma a uma.
//
// A animação é um passo a cada 2.2s, com `prefers-reduced-motion` respeitado —
// quem pediu menos movimento vê o estado final parado, não uma tela quebrada.
function PosVendaShowcase() {
  // Os passos agora carregam o VALOR que entrou em cada um, não só o rótulo da
  // etapa. "Campos detectados: nome · CPF · CRM" não mostra nada; ver o CRM
  // sendo preenchido e o contrato travando porque faltou é o que explica o
  // produto. Os placeholders saem do próprio modelo da empresa.
  const PASSOS = [
    { l: 'Seu modelo, do seu jeito',  d: 'contrato-clinica.docx · fonte e cláusulas intactas' },
    { l: 'Placeholders encontrados',  d: '{{nome}} {{cpf}} {{crm}} {{valor}} {{data}}' },
    { l: 'Faltou o CRM da cliente',   d: 'o envio trava até você completar', alerta: true },
    { l: 'Preenchido e assinado',     d: 'Ana Beatriz · CRM 118.442 · há 2 min', ok: true },
  ];
  // A lista sozinha (paga/atrasada/aberta) não dizia o que o Comissa FAZ, que
  // era a reclamação. Cada linha passa a carregar a consequência, e a comissão
  // aparece por parcela: é ela que o vendedor quer saber, não o status do
  // boleto. `proxima` marca o cursor de próxima em aberto, que é o que a aba
  // Parcelas usa de verdade no app.
  // As SEIS parcelas, não quatro. O card dizia "6x" e listava 4: quem lê fica
  // com a impressão de que o resto não existe ou que o Comissa perde o fio no
  // meio do plano — que é justo o medo de quem vende parcelado.
  const PARCELAS = [
    { n: 1, st: 'paga' },
    { n: 2, st: 'paga' },
    { n: 3, st: 'atrasada' },
    { n: 4, st: 'aberta' },
    { n: 5, st: 'aberta' },
    { n: 6, st: 'aberta' },
  ];

  // Três frases, não quatro parágrafos. O card das parcelas já mostra o
  // mecanismo; aqui ficam só as respostas que ele não consegue dar sozinho.
  const COMO_FUNCIONA = [
    {
      t: 'A comissão segue o dinheiro',
      d: 'Boleto pago, R$ 75 liberados. Nada de comissão cheia na assinatura pra ser estornada se o cliente parar no meio.',
    },
    {
      t: 'A baixa é automática',
      d: 'Quem avisa o pagamento é a plataforma de cobrança. Reenvio de webhook não paga duas vezes nem pula parcela.',
    },
    {
      t: 'Atrasou, fica à vista',
      d: 'A parcela vencida acende em vermelho, a cobrança é reenviada e a comissão dela volta no dia em que o boleto é pago.',
    },
  ];

  const [passo, setPasso] = __useState(0);
  __useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setPasso(PASSOS.length - 1);
      return;
    }
    const t = setInterval(() => setPasso((v) => (v + 1) % PASSOS.length), 2200);
    return () => clearInterval(t);
  }, []);

  const card = {
    background: 'var(--surface)', border: '0.5px solid var(--line)',
    borderRadius: 18, padding: 24, minHeight: 300,
  };
  const eyebrow = {
    fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em',
    textTransform: 'uppercase', color: 'var(--muted-2)', marginBottom: 18,
  };

  return (
    <div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'start' }}>
      <style>{`
        @keyframes cd-pv-in { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }
        @keyframes cd-pv-fill { from { width: 0 } }
        @media (prefers-reduced-motion: reduce) {
          .cd-pv-step, .cd-pv-bar { animation: none !important; }
        }
      `}</style>

      {/* ── Contrato ── */}
      <div style={card}>
        <div style={eyebrow}>Contrato</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {PASSOS.map((p, i) => {
            const feito = i <= passo;
            const atual = i === passo;
            const cor = p.alerta ? '#D97706' : p.ok ? '#059669' : 'var(--indigo)';
            return (
              <div key={p.l} className="cd-pv-step" style={{
                display: 'flex', gap: 14, alignItems: 'flex-start',
                padding: '11px 0', opacity: feito ? 1 : 0.32,
                transition: 'opacity .5s ease',
              }}>
                {/* trilho + marcador */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '0 0 18px' }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999, flex: '0 0 18px',
                    display: 'grid', placeItems: 'center',
                    background: feito ? cor : 'transparent',
                    border: feito ? 0 : '0.5px solid var(--line)',
                    color: 'var(--on-ink)',
                    transform: atual ? 'scale(1.12)' : 'scale(1)',
                    transition: 'background .45s ease, transform .45s cubic-bezier(.2,.7,.2,1)',
                  }}>
                    {feito && <IconCheck size={10} stroke={3} />}
                  </span>
                  {i < PASSOS.length - 1 && (
                    <span style={{
                      width: '0.5px', flex: 1, minHeight: 18, marginTop: 4,
                      background: i < passo ? cor : 'var(--line)',
                      transition: 'background .5s ease',
                    }} />
                  )}
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>{p.l}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>{p.d}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{
          marginTop: 18, paddingTop: 16, borderTop: '0.5px solid var(--line-2)',
          fontSize: 12, color: 'var(--muted)', lineHeight: 1.55,
        }}>
          O Comissa não escreve contrato. Ele lê os <code className="cd-mono" style={{
            fontSize: 11, padding: '1px 5px', borderRadius: 5,
            background: 'var(--surface-2)', border: '0.5px solid var(--line-2)',
          }}>{'{{campos}}'}</code> do seu modelo, puxa os dados do cliente que já
          estão na venda e devolve <strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>o
          seu documento</strong> pronto pra assinar. Campo obrigatório em branco segura o envio,
          em vez de mandar contrato furado pro cliente.
        </div>
      </div>

      {/* ── Parcelas ──
          Era uma lista de seis linhas com data, status, nota e valor — quatro
          informações por parcela, 24 no total, pra contar uma história de uma
          frase. Agora são seis quadradinhos: verde pago, vermelho atrasado,
          vazio a vencer. Dá pra entender o plano inteiro num relance, e o que
          o vendedor quer saber (quanto já é dele) está logo abaixo em três
          números. */}
      <div style={card}>
        <div style={eyebrow}>Parcelas do boleto</div>

        <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: -8, marginBottom: 18 }}>
          Venda de <strong style={{ fontWeight: 600 }}>R$ 4.500 em 6x</strong>, comissão de 10%.
          <span style={{ color: 'var(--muted)' }}> Cada boleto pago libera R$ 75 pra você.</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
          {PARCELAS.map((p) => {
            const paga = p.st === 'paga';
            const atrasada = p.st === 'atrasada';
            return (
              <div key={p.n} style={{
                borderRadius: 12, padding: '14px 0 12px', textAlign: 'center',
                background: paga ? 'rgba(5,150,105,0.10)' : atrasada ? 'rgba(225,29,72,0.09)' : 'var(--surface-2)',
                border: `0.5px solid ${paga ? 'rgba(5,150,105,0.34)' : atrasada ? 'rgba(225,29,72,0.34)' : 'var(--line-2)'}`,
              }}>
                <div className="cd-mono" style={{
                  fontSize: 11, color: 'var(--muted-2)', letterSpacing: '0.04em',
                }}>{p.n}/6</div>
                <div style={{
                  fontSize: 12.5, fontWeight: 600, marginTop: 5,
                  color: paga ? 'var(--green-text)' : atrasada ? 'var(--rose-text)' : 'var(--muted-2)',
                }}>{paga ? '+R$ 75' : atrasada ? 'retida' : 'R$ 75'}</div>
                <div style={{ fontSize: 10, color: 'var(--muted-2)', marginTop: 4 }}>
                  {paga ? 'paga' : atrasada ? 'atrasada' : 'a vencer'}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {[
            { l: 'já é seu', v: 'R$ 150', c: 'var(--green-text)' },
            { l: 'retido no atraso', v: 'R$ 75', c: 'var(--rose-text)' },
            { l: 'a receber', v: 'R$ 225', c: 'var(--indigo-text)' },
          ].map((x) => (
            <div key={x.l} style={{
              padding: '11px 12px', borderRadius: 10,
              background: 'var(--surface-2)', border: '0.5px solid var(--line-2)',
            }}>
              <div className="cd-mono" style={{
                fontSize: 16, fontWeight: 600, color: x.c,
                fontVariantNumeric: 'tabular-nums',
              }}>{x.v}</div>
              <div style={{
                fontSize: 10, color: 'var(--muted-2)', marginTop: 3,
                letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>{x.l}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 18, paddingTop: 14, borderTop: '0.5px solid var(--line-2)',
          fontSize: 12, color: 'var(--muted-2)', lineHeight: 1.55,
        }}>
          Vale pra boleto e Pix parcelado. Cartão parcelado cai inteiro pela plataforma,
          então ali a comissão sai de uma vez.
        </div>
      </div>
    </div>

    {/* A explicação saiu de dentro do card e virou faixa própria: era lá que
        cabiam três bullets curtos, e três bullets curtos não explicam um
        mecanismo de pagamento. Aqui cabe a resposta pra pergunta que o
        vendedor realmente faz — "quando esse dinheiro fica meu?". */}
    <div style={{
      marginTop: 16, padding: '26px 28px 28px', borderRadius: 18,
      background: 'var(--surface)', border: '0.5px solid var(--line)',
    }}>
      <div style={{ maxWidth: 640, marginBottom: 22 }}>
        <div style={eyebrow}>Como a parcela vira comissão</div>
        <h3 style={{
          margin: 0, fontSize: 24, fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.15, color: 'var(--ink)',
        }}>
          Venda parcelada é comissão parcelada — e você vê cada pedaço chegando.
        </h3>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
        {COMO_FUNCIONA.map((x, i) => (
          <div key={x.t}>
            <div className="cd-mono" style={{
              fontSize: 11, color: 'var(--indigo)', letterSpacing: '0.08em',
              fontVariantNumeric: 'tabular-nums', marginBottom: 9,
            }}>{String(i + 1).padStart(2, '0')}</div>
            <div style={{
              fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.015em',
              color: 'var(--ink)', lineHeight: 1.3,
            }}>{x.t}</div>
            <p style={{
              margin: '8px 0 0', fontSize: 13, lineHeight: 1.55, color: 'var(--muted)',
            }}>{x.d}</p>
          </div>
        ))}
      </div>
    </div>
    </div>
  );
}

// ── CTA final ────────────────────────────────────────────────
function CyclingWord({ words, interval = 2400 }) {
  const [i, setI] = __useState(0);
  const [phase, setPhase] = __useState('in'); // 'in' | 'out'
  __useEffect(() => {
    const t1 = setTimeout(() => setPhase('out'), interval - 450);
    const t2 = setTimeout(() => {
      setI((v) => (v + 1) % words.length);
      setPhase('in');
    }, interval);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [i, interval, words.length]);

  return (
    <span style={{
      display: 'inline-block',
      background: 'linear-gradient(110deg, #93C5FD, #A5C9FF)',
      WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
      fontStyle: 'italic', fontWeight: 500,
      opacity: phase === 'in' ? 1 : 0,
      transform: phase === 'in' ? 'translateY(0)' : 'translateY(-14px)',
      filter: phase === 'in' ? 'blur(0)' : 'blur(4px)',
      transition: 'opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease',
      whiteSpace: 'nowrap',
    }}>{words[i]}</span>
  );
}

// Vídeo decorativo que só baixa/toca quando chega perto da viewport — mantém
// os ~10 MB fora do carregamento inicial (não deixa o site mais lento) e mostra
// um poster nítido enquanto o vídeo ainda não começou (paint instantâneo).
function AmbientVideo({ src, poster, style, opacity = 0.32 }) {
  const ref = __useRef(null);
  const [load, setLoad] = __useState(false);
  __useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setLoad(true); io.disconnect(); } });
    }, { rootMargin: '300px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  // Toca assim que o primeiro frame estiver pronto — evita o play() falhar por
  // ainda não ter dados (autoplay mudo é sempre permitido).
  const handleReady = (e) => { const p = e.currentTarget.play(); if (p && p.catch) p.catch(() => {}); };
  return (
    <video
      ref={ref}
      src={load ? src : undefined}
      poster={poster}
      autoPlay muted loop playsInline
      preload="none"
      aria-hidden="true"
      onCanPlay={handleReady}
      onLoadedData={handleReady}
      style={{ ...style, opacity }}
    />
  );
}

function FinalCTA() {
  const words = ['Vender.', 'Lucrar.', 'Comissar.', 'Crescer.', 'Bater meta.', 'Faturar.', 'Receber direito.'];
  return (
    <div style={{
      position: 'relative',
      borderRadius: 28, padding: '80px 32px',
      // Esta faixa é o único bloco escuro da página, e é de propósito: depois
      // de treze seções claras, o fecho muda de fundo pra marcar que a leitura
      // acabou e o que resta é decidir. O vídeo ambiente atrás é um orbe
      // escuro — sobre gradiente claro ele não aparecia.
      // (Estava claro com `color: '#fff'`: título, parágrafo, os dois botões e
      // a linha de garantia saíam brancos sobre branco.)
      background: 'linear-gradient(135deg, #0D1117 0%, #131C2B 60%, #16233A 100%)',
      color: '#fff', textAlign: 'center', overflow: 'hidden',
    }}>
      {/* vídeo ambiente (orbe cinematográfico gerado no Higgsfield) — lazy:
          só carrega quando entra na viewport, com poster nítido no lugar. */}
      <AmbientVideo
        src="assets/hero-dark-v2.mp4"
        poster="assets/hero-dark-b.png"
        opacity={0.32}
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', pointerEvents: 'none',
        }}
      />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(800px 300px at 50% -10%, rgba(37,99,235,0.45), transparent 60%), radial-gradient(600px 300px at 30% 120%, rgba(56,189,248,0.3), transparent 60%)',
      }} />
      {/* O mesmo globo do topo fechando a página: mesmo raio grande, mesma
          altura relativa. Antes ele vinha com 198 de raio numa caixa de 680 e
          lia como outro gráfico, não como o planeta da abertura. Sobre fundo
          escuro as linhas dos países aparecem inteiras — é onde o mapa fica
          mais legível. */}
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: -200, width: 1120, height: 900,
        transform: 'translateX(-50%)', zIndex: 0, pointerEvents: 'none', opacity: .95,
      }}>
        <Planet radius={272} spawnEveryMs={900} />
      </div>
      <PingsDeVenda variante="escuro" startDelayMs={1200} intervalMs={2100} />
      <div style={{ position: 'relative' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 14px 6px 12px',
          fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.04em',
          color: '#fff',
          background: 'rgba(255,255,255,0.10)',
          border: '0.5px solid rgba(255,255,255,0.25)',
          borderRadius: 999,
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          textTransform: 'uppercase',
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999,
            background: '#A5C9FF',
            animation: 'cd-dot-pulse-cyan 2.4s ease-out infinite',
          }} />
          14 dias grátis, sem cartão
        </span>
        <h2 style={{
          fontSize: 76, lineHeight: 0.95, letterSpacing: '-0.045em',
          fontWeight: 600, margin: '24px 0 20px',
        }}>
          Pare de calcular<br />
          comissão na mão.<br />
          Comece a <CyclingWord words={words} />
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', margin: '0 0 36px', maxWidth: 520, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
          Dois minutos pra configurar. Importe vendas de planilha, Hotmart, Kiwify ou Mercado Pago em um clique.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button className="cd-cta" onClick={() => window.openModal('signup')} style={{
            padding: '14px 24px', borderRadius: 999, border: 0, cursor: 'pointer',
            background: '#fff', color: 'var(--ink)', fontWeight: 600, fontSize: 15,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>Criar conta grátis <IconArrow size={15} stroke={1.8} /></button>
          <button className="cd-cta" onClick={() => window.openModal('contact')} style={{
            padding: '14px 24px', borderRadius: 999,
            background: 'rgba(255,255,255,0.10)', color: '#fff', fontSize: 15,
            border: '0.5px solid rgba(255,255,255,0.28)', cursor: 'pointer', fontWeight: 500,
          }}>Falar com a gente</button>
        </div>
        <div style={{ marginTop: 18, fontSize: 12.5, color: 'rgba(255,255,255,0.65)' }}>
          Sem cartão de crédito · Cancela quando quiser · LGPD
        </div>
      </div>
    </div>
  );
}

// ── Footer ───────────────────────────────────────────────────
function Footer() {
  const top = () => window.scrollTo({ top: 0, behavior: 'smooth' });
  const sec = (id) => () => window.scrollToId(id);

  const cols = [
    { h: 'Produto', l: [
      { l: 'Vendas',     a: top },
      { l: 'Comissões',  a: top },
      { l: 'Metas',      a: top },
      { l: 'Clientes',   a: sec('quotes') },
      // "Relatórios" apontava pra #novidades, que não existe mais. Sem seção
      // própria pra ele, vai pro topo como os três primeiros — âncora morta
      // rola pra lugar nenhum e parece link quebrado.
      { l: 'Relatórios', a: top },
      { l: 'Pós-venda',  a: sec('pos-venda') },
    ]},
    { h: 'Empresa', l: [
      { l: 'Sobre',             a: () => window.openModal('sobre') },
      { l: 'Manifesto',         a: () => window.openModal('sobre') },
      { l: 'Clientes',          a: sec('quotes') },
    ]},
  ];

  return (
    <div style={{ padding: '64px 64px 32px', borderTop: '0.5px solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 48, marginBottom: 56 }}>
        <div>
          <a href="#hero" onClick={(e) => { e.preventDefault(); top(); }} style={{ cursor: 'pointer', display: 'inline-block' }}>
            <Wordmark size={20} />
          </a>
          <p style={{ fontSize: 13, color: 'var(--muted)', maxWidth: 280, marginTop: 16, lineHeight: 1.5 }}>
            Um painel pra quem vende. Feito no Brasil, em Curitiba e São Paulo.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            {[
              { i: <IconWhats size={16} />,  a: () => window.toast('@comissa.app no WhatsApp') },
              { i: <IconUsers size={16} />,  a: () => window.openModal('contact') },
              { i: <IconLayers size={16} />, a: () => window.openModal('sobre') },
            ].map((x, k) => (
              <button key={k} onClick={x.a} className="cd-btn" style={{
                width: 30, height: 30, borderRadius: 8, background: 'var(--surface)',
                border: '0.5px solid var(--line)', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center', color: 'var(--muted)',
                cursor: 'pointer', padding: 0,
              }}>{x.i}</button>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div className="cd-mono" style={{ fontSize: 11, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14 }}>{c.h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.l.map((x) => (
                <li key={x.l}>
                  <a href="#" onClick={(e) => { e.preventDefault(); x.a(); }}
                     className="cd-link" style={{
                       fontSize: 13.5, color: 'var(--ink-2)', cursor: 'pointer',
                       padding: '2px 0', borderRadius: 4,
                     }}>{x.l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: 'var(--muted)', paddingTop: 24,
        borderTop: '0.5px solid var(--line)',
      }}>
        <span>© 2026 Comissa Tecnologia Ltda · CNPJ 00.000.000/0001-00</span>
        <span className="cd-mono">v3.1.4 · tudo operando · 99,99% uptime</span>
      </div>
    </div>
  );
}

// ── Showcase do app móvel ────────────────────────────────────
// iPhone com 3 telas: lock screen (notificação), login, dashboard.
// Cliente clica → vai pra próxima. Traz a sensação de "é seguro
// e simples baixar no celular".
function MobilePhoneLogin({ onLogin, busy }) {
  const [email, setEmail] = __useState('');
  const [pwd, setPwd] = __useState('');
  return (
    <div style={{
      height: '100%', padding: '70px 26px 30px',
      display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(180deg, #FAFBFC 0%, #EAF2FE 100%)',
      fontFamily: '-apple-system, system-ui, sans-serif',
    }}>
      <div style={{
        marginTop: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 72, height: 72, borderRadius: 18,
          background: 'linear-gradient(135deg, #2563EB, #38BDF8)',
          boxShadow: '0 12px 28px -8px rgba(37,99,235,.55)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M3 14c2.2-7 4-7 5 0s2.8 5.5 5-1 4-5.5 5 1 1.7 3 3 1"
                  stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: '#FBFCFD' }}>Comissa</div>
        <div style={{ fontSize: 14, color: '#5B6672', textAlign: 'center', maxWidth: 260, lineHeight: 1.4 }}>
          Entre pra ver suas comissões em tempo real.
        </div>
      </div>

      <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email"
               type="email" autoComplete="email"
               style={{
                 height: 48, borderRadius: 14, border: '0.5px solid rgba(13,17,23,0.14)',
                 background: 'var(--surface)', padding: '0 14px', fontSize: 15, outline: 'none',
                 fontFamily: 'inherit',
               }} />
        <input value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="Senha"
               type="password" autoComplete="current-password"
               style={{
                 height: 48, borderRadius: 14, border: '0.5px solid rgba(13,17,23,0.14)',
                 background: 'var(--surface)', padding: '0 14px', fontSize: 15, outline: 'none',
                 fontFamily: 'inherit',
               }} />
        <button onClick={onLogin} disabled={busy} style={{
          height: 48, borderRadius: 14, border: 0,
          // Estava com o valor de `--bg` e texto branco — o botão de entrar
          // ficava sem rótulo visível. É o CTA do formulário: fundo do acento.
          background: busy ? 'var(--muted)' : 'var(--indigo)', color: '#fff',
          fontSize: 15, fontWeight: 600, cursor: busy ? 'wait' : 'pointer',
          marginTop: 4,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontFamily: 'inherit',
        }}>
          {busy ? (
            <span style={{
              width: 16, height: 16, borderRadius: 999,
              border: '2px solid rgba(13,17,23,.4)', borderTopColor: '#fff',
              animation: 'cd-spin .8s linear infinite',
            }} />
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              <rect x="5" y="11" width="14" height="10" rx="2"/>
              <path d="M8 11V8a4 4 0 0 1 8 0v3"/>
            </svg>
          )}
          {busy ? 'Entrando…' : 'Entrar com Face ID'}
        </button>
      </div>

      <div style={{
        marginTop: 18, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ flex: 1, height: 0.5, background: 'rgba(13,17,23,0.14)' }} />
        <span style={{ fontSize: 11, color: '#7C8896', letterSpacing: '0.05em' }}>OU</span>
        <div style={{ flex: 1, height: 0.5, background: 'rgba(13,17,23,0.14)' }} />
      </div>

      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <button onClick={onLogin} style={{
          height: 44, borderRadius: 12, border: '0.5px solid rgba(13,17,23,0.14)',
          background: 'var(--surface)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          fontSize: 14, fontWeight: 500, color: '#FBFCFD', fontFamily: 'inherit',
        }}>
          <BrandLogo brand="google" size={18} /> Entrar com Google
        </button>
        <button onClick={onLogin} style={{
          height: 44, borderRadius: 12, border: 0,
          background: '#000', color: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          fontSize: 14, fontWeight: 500, fontFamily: 'inherit',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.564 12.7c-.028-2.9 2.367-4.31 2.477-4.376-1.354-1.978-3.456-2.247-4.196-2.27-1.776-.18-3.475 1.05-4.377 1.05-.92 0-2.302-1.03-3.789-1-1.946.028-3.766 1.135-4.766 2.881-2.061 3.566-.526 8.806 1.466 11.687.976 1.41 2.122 2.99 3.62 2.93 1.467-.06 2.018-.943 3.788-.943 1.766 0 2.273.943 3.789.91 1.572-.028 2.566-1.428 3.51-2.85 1.124-1.626 1.572-3.226 1.6-3.31-.034-.014-3.075-1.182-3.122-4.71zM14.65 4.32c.794-.964 1.328-2.298 1.181-3.626-1.146.047-2.523.764-3.345 1.728-.74.855-1.385 2.225-1.21 3.526 1.275.097 2.58-.65 3.374-1.629z" />
          </svg>
          Entrar com Apple
        </button>
      </div>

      <div style={{ flex: 1 }} />
      <div style={{
        marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        fontSize: 11, color: '#7C8896',
      }}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>
        </svg>
        Conexão criptografada · LGPD
      </div>
    </div>
  );
}

function MobileShowcase() {
  const [view, setView] = __useState('login'); // 'lock' | 'login' | 'app'
  const [busy, setBusy] = __useState(false);

  const doLogin = () => {
    if (busy) return;
    setBusy(true);
    setTimeout(() => { setBusy(false); setView('app'); }, 900);
  };
  const back = () => setView('login');

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 40,
      alignItems: 'center', maxWidth: 1100, margin: '0 auto',
    }}>
      {/* esquerda bullets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {[
          { i: IconCheck, t: 'Login com Face ID & senha forte', s: 'A mesma criptografia de banco. Senhas zero salvas em texto puro.' },
          { i: IconBolt, t: 'Notificação de venda na lock screen', s: 'Cliente fechou? Cai no seu Apple Watch ou Android antes mesmo do WhatsApp.' },
          { i: IconScreen, t: 'Funciona offline', s: 'Lança a venda no carro do cliente. Sincroniza quando voltar a internet.' },
        ].map((b) => (
          <div key={b.t} style={{ display: 'flex', gap: 12 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--surface)', border: '0.5px solid var(--line)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, color: 'var(--ink-2)',
            }}><b.i size={17} /></div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em' }}>{b.t}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5, marginTop: 2 }}>{b.s}</div>
            </div>
          </div>
        ))}

        <div style={{
          marginTop: 6, padding: '14px 16px',
          background: 'linear-gradient(135deg, rgba(37,99,235,0.08), rgba(56,189,248,0.06))',
          border: '0.5px solid var(--line)', borderRadius: 14,
          fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5,
        }}>
          <div style={{ fontWeight: 600, marginBottom: 2 }}>Toque no celular ao lado pra entrar →</div>
          <span style={{ color: 'var(--muted)' }}>Mostra como fica logo após o Face ID.</span>
        </div>
      </div>

      {/* centro iPhone */}
      <div style={{ position: 'relative' }}>
        {/* botão "voltar ao login" quando estiver no app */}
        {view === 'app' && (
          <button onClick={back} className="cd-cta" style={{
            position: 'absolute', top: -42, left: '50%', transform: 'translateX(-50%)',
            background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 999,
            padding: '6px 14px', fontSize: 12, fontWeight: 500, color: 'var(--ink-2)',
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
            zIndex: 10,
          }}>
            ← Ver tela de login
          </button>
        )}
        <IOSDevice width={340} height={738}>
          <div style={{
            position: 'relative', height: '100%', width: '100%',
          }}>
            {/* Cross-fade entre as telas.
                `inert` na tela apagada, além do `pointerEvents: none`: opacidade
                zero esconde do olho mas NÃO tira do foco por teclado nem da
                árvore de acessibilidade. Sem isso, tabulando pela página você
                caía dentro do mockup e ouvia "Entrar com Google" de um
                formulário de login que não existe. */}
            <div
              inert={view === 'login' ? undefined : ''}
              style={{
                position: 'absolute', inset: 0,
                opacity: view === 'login' ? 1 : 0,
                transform: view === 'login' ? 'scale(1)' : 'scale(.98)',
                transition: 'opacity .4s ease, transform .4s ease',
                pointerEvents: view === 'login' ? 'auto' : 'none',
              }}>
              <MobilePhoneLogin onLogin={doLogin} busy={busy} />
            </div>
            <div
              inert={view === 'app' ? undefined : ''}
              style={{
                position: 'absolute', inset: 0,
                opacity: view === 'app' ? 1 : 0,
                transform: view === 'app' ? 'scale(1)' : 'scale(1.02)',
                transition: 'opacity .4s ease, transform .4s ease',
                pointerEvents: view === 'app' ? 'auto' : 'none',
              }}>
              <ComissaMobileApp />
            </div>
            {/* "ENTRANDO…" overlay */}
            {busy && (
              <div style={{
                position: 'absolute', inset: 0, zIndex: 30,
                background: 'rgba(250,251,252,.7)', backdropFilter: 'blur(4px)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  background: '#FBFCFD', color: '#fff',
                  padding: '12px 22px', borderRadius: 999,
                  fontSize: 13.5, fontWeight: 500, fontFamily: '-apple-system, system-ui',
                }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: 999,
                    border: '2px solid rgba(13,17,23,.4)', borderTopColor: '#fff',
                    animation: 'cd-spin .8s linear infinite',
                  }} />
                  Autenticando com Face ID…
                </div>
              </div>
            )}
          </div>
        </IOSDevice>
      </div>

      {/* direita selos de segurança */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
          { t: 'TLS 1.3', s: 'Todo tráfego criptografado ponta a ponta.' },
          { t: 'Tokens curtos', s: 'Sessão expira sozinha em inatividade.' },
          { t: '2FA opcional', s: 'TOTP, SMS ou chave de hardware.' },
          { t: 'Backup automático', s: 'Seus dados no seu time, replicados em SP & MG.' },
        ].map((s) => (
          <div key={s.t} style={{
            padding: '12px 14px',
            background: 'var(--surface)', border: '0.5px solid var(--line)',
            borderRadius: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <span style={{
                width: 18, height: 18, borderRadius: 5,
                background: 'rgba(5,150,105,0.14)', color: 'var(--green-text)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 12.5l5 5L20 6.5" />
                </svg>
              </span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{s.t}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.45 }}>{s.s}</div>
          </div>
        ))}
        <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
          <button className="cd-cta" onClick={() => window.toast('Em breve · iOS')} style={{
            flex: 1, padding: '10px 12px', borderRadius: 999,
            background: '#FBFCFD', color: '#fff', border: 0,
            fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
             App Store
          </button>
          <button className="cd-cta" onClick={() => window.toast('Em breve · Android')} style={{
            flex: 1, padding: '10px 12px', borderRadius: 999,
            background: 'var(--surface)', color: 'var(--ink)', border: '0.5px solid var(--line)',
            fontSize: 12.5, fontWeight: 500, cursor: 'pointer',
          }}>
            Google Play
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Página inteira ───────────────────────────────────────────
// ── Pra quem é — os três perfis do Comissa ──────────────────────
function PerfisSection() {
  const perfis = [
    {
      // Ícone SVG no lugar do emoji: emoji renderiza diferente em cada SO
      // (Apple, Windows e Android desenham o mesmo caractere de três jeitos),
      // então nunca combina com o resto do desenho. O set de Icon* já existe
      // em components.jsx e herda cor de `currentColor`.
      // `perfil` é o que decide pra qual app o CTA do card manda
      // (ver app-urls.js). Os três aqui são os mesmos três do modal.
      perfil: 'autonomo',
      cta: 'Testar como autônomo',
      icon: IconBolt,
      title: 'Vendedor autônomo',
      sub: 'MEI, afiliado, infoprodutor. Vende no Hotmart, Kiwify, Eduzz, Braip ou Guru. Registra manual ou por link rastreável, e a venda confirmada cai direto no painel.',
      chips: ['Vende um a um', 'Tráfego pago'],
      bullets: [
        'ROI por produto pra quem roda anúncio',
        'Previsão de quando cada plataforma paga',
        'Não conhece o comprador? O funil conhece.',
      ],
    },
    {
      perfil: 'comissionado',
      cta: 'Entrar com código da empresa',
      icon: IconUsers,
      title: 'Vendedor de empresa',
      sub: 'Entra pelo link único que a empresa manda. Já cai vinculado à conta dela, sem cadastro chato. Vê o que é teu: a receber, pago e histórico.',
      chips: ['Link único de acesso'],
      bullets: [
        'Comissões a receber e pagas, separadas',
        'Histórico de toda venda atribuída a você',
        'Sincroniza em tempo real com a empresa',
      ],
    },
    {
      perfil: 'empresa',
      cta: 'Abrir painel da empresa',
      icon: IconLayers,
      title: 'Empresa',
      sub: 'O painel de quem paga: top vendedores, produtos atribuídos, comissões na ordem que você escolher, e um link de acesso pra cada vendedor do time.',
      chips: ['Comissa Empresa'],
      bullets: [
        'Faturamento total por produto/curso',
        'Filtra comissões por vendedor, valor e prazo',
        'Vê na hora o que o vendedor registrou',
      ],
    },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {perfis.map((p) => (
        <div key={p.title} style={{
          background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 18,
          padding: 24, display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 12, color: 'var(--indigo)',
            background: 'var(--indigo-soft)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}><p.icon size={19} /></div>
          <div>
            <h3 style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 }}>{p.title}</h3>
            <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
              {p.chips.map((c) => (
                <span key={c} className="cd-mono" style={{
                  fontSize: 10, letterSpacing: '0.05em', textTransform: 'uppercase',
                  padding: '3px 9px', borderRadius: 999,
                  background: 'var(--indigo-soft)', color: 'var(--indigo)',
                  border: '0.5px solid rgba(37,99,235,0.22)', fontWeight: 600,
                }}>{c}</span>
              ))}
            </div>
          </div>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--muted)', margin: 0 }}>{p.sub}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 'auto' }}>
            {p.bullets.map((b) => (
              <div key={b} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: 'var(--ink-2)' }}>
                <span style={{ color: 'var(--green-text)', display: 'inline-flex', marginTop: 2 }}><IconCheck size={12} stroke={2.6} /></span>
                <span style={{ lineHeight: 1.45 }}>{b}</span>
              </div>
            ))}
          </div>
          <PerfilCTA perfil={p.perfil} label={p.cta} />
        </div>
      ))}
    </div>
  );
}

// CTA do card de perfil: leva direto pro cadastro do app daquele perfil, sem
// passar pelo modal. Quem já se reconheceu no cartão não precisa escolher
// duas vezes.
function PerfilCTA({ perfil, label }) {
  const [indo, setIndo] = __useState(false);
  const [hover, setHover] = __useState(false);
  return (
    <button
      type="button"
      className="cd-btn"
      disabled={indo}
      onClick={() => { setIndo(true); window.irParaApp(perfil); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        marginTop: 4, width: '100%',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        padding: '11px 14px', borderRadius: 12,
        background: hover && !indo ? 'var(--indigo)' : 'var(--indigo-soft)',
        color: hover && !indo ? '#fff' : 'var(--indigo-text)',
        border: '0.5px solid rgba(37,99,235,0.28)',
        fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
        cursor: indo ? 'wait' : 'pointer',
      }}
    >
      {indo ? (
        <span style={{
          width: 13, height: 13, borderRadius: 999,
          border: '2px solid rgba(37,99,235,.25)', borderTopColor: 'var(--indigo)',
          animation: 'cd-spin .8s linear infinite',
        }} />
      ) : null}
      {indo ? 'Abrindo…' : label}
      {!indo && <IconArrow size={13} stroke={1.9} />}
    </button>
  );
}

// ── Novo no Comissa — recursos recém-lançados ───────────────────
function NovidadeMiniRow({ left, right, accent }) {
  return (
    <div className="cd-mono" style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '7px 10px', borderRadius: 8, fontSize: 11,
      background: 'var(--surface-2)', border: '0.5px solid var(--line)',
    }}>
      <span style={{ color: 'var(--ink-2)' }}>{left}</span>
      <span style={{ color: accent || 'var(--indigo)', fontWeight: 600 }}>{right}</span>
    </div>
  );
}

function NovidadesSection() {
  const cards = [
    {
      icon: IconClock,
      title: 'Previsão de recebimento',
      sub: 'Cada plataforma paga num prazo. O Comissa calcula sozinho quando cada valor cai na conta e coloca no calendário.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <NovidadeMiniRow left="Hotmart · D+30" right="cai 03 ago" />
          <NovidadeMiniRow left="Kiwify · D+14" right="cai 18 jul" />
          <NovidadeMiniRow left="Eduzz · D+21" right="cai 25 jul" />
        </div>
      ),
    },
    {
      icon: IconTarget,
      title: 'Score de produto',
      sub: 'Volume, ticket médio, conversão do link e tendência das últimas 2 semanas viram um score automático por produto.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <NovidadeMiniRow left="Mentoria Pro" right="score 87 ↑" accent="var(--green-text)" />
          <NovidadeMiniRow left="Curso Base" right="score 61 →" accent="var(--amber-text)" />
          <NovidadeMiniRow left="E-book Intro" right="score 34 ↓" accent="var(--rose-text)" />
        </div>
      ),
    },
    {
      icon: IconGrid,
      title: 'Vagas por produto',
      sub: 'Defina o limite de vagas da turma. Barra de progresso, aviso nas últimas 5 e o link fecha sozinho quando esgota, e reabre se uma venda cair.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ height: 8, borderRadius: 999, background: 'var(--surface-2)', overflow: 'hidden' }}>
            <div style={{ width: '90%', height: '100%', borderRadius: 999, background: 'linear-gradient(90deg, var(--indigo), var(--indigo-2))' }} />
          </div>
          <NovidadeMiniRow left="45 de 50 vendidas" right="restam 5" accent="var(--amber-text)" />
        </div>
      ),
    },
    {
      icon: IconRoute,
      title: 'Link rastreável',
      sub: 'Sem acesso ao gateway? Gera teu link com nome da oferta e plataforma, e acompanha clique e conversão por oferta.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <NovidadeMiniRow left="comissa.link/hotmart/curso-avancado" right="ativo" accent="var(--green-text)" />
          <NovidadeMiniRow left="238 cliques · 12 conversões" right="5,0%" />
        </div>
      ),
    },
    {
      icon: IconCircle,
      title: 'Cidade pelo DDD',
      sub: 'O telefone do cliente vira cidade no mapa. Brasil por DDD, LATAM e Espanha por código de país. Descobre de onde a venda tá vindo.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <NovidadeMiniRow left="+55 (17) 98123-4567" right="S. J. do Rio Preto · SP" />
          <NovidadeMiniRow left="+52 (55) 4411-2233" right="Cidade do México" />
        </div>
      ),
    },
    {
      icon: IconBolt,
      title: 'Diagnóstico do dia',
      sub: 'Abre o app e já sabe: quanto entrou ontem, o que vem essa semana e qual produto precisa de atenção.',
      preview: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <NovidadeMiniRow left="Ontem" right="+R$ 1.240" accent="var(--green-text)" />
          <NovidadeMiniRow left="Previsto na semana" right="R$ 4.320" />
          <NovidadeMiniRow left="E-book Intro parado há 6 dias" right="parado" accent="var(--amber-text)" />
        </div>
      ),
    },
  ];
  // Eram 6 cards idênticos numa grade 3x2, que é o formato de "feature grid"
  // que toda landing tem. Vira changelog, que é o que "saiu do forno" quer
  // dizer de verdade: cada item ganha data de entrega e o primeiro ocupa duas
  // colunas. A assimetria é o que tira o ar de template, e a data é o que
  // transforma a lista numa prova de que o produto anda.
  const MES = ['jul', 'jul', 'jul', 'jun', 'jun', 'jun'];

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 16, alignItems: 'stretch',
    }}>
      <style>{`
        .cd-nov { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
        .cd-nov:hover { transform: translateY(-3px); border-color: rgba(37,99,235,0.32) !important;
                        box-shadow: 0 20px 44px -26px rgba(13,17,23,0.32); }
        @media (prefers-reduced-motion: reduce) { .cd-nov:hover { transform: none; } }
      `}</style>
      {cards.map((c, i) => (
        <div key={c.title} className="cd-nov" style={{
          gridColumn: i === 0 ? 'span 2' : 'span 1',
          position: 'relative', overflow: 'hidden',
          background: 'var(--surface)', border: '0.5px solid var(--line)', borderRadius: 18,
          padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <span aria-hidden style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 2,
            background: 'linear-gradient(90deg, var(--indigo), var(--cyan))',
            opacity: i === 0 ? 1 : 0.45,
          }} />

          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 10, color: 'var(--indigo)',
              background: 'var(--indigo-soft)', flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}><c.icon size={16} /></div>
            <h3 style={{ fontSize: 16.5, fontWeight: 600, letterSpacing: '-0.015em', margin: 0, flex: 1 }}>{c.title}</h3>
            <span className="cd-mono" style={{
              fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              padding: '3px 8px', borderRadius: 999, flexShrink: 0,
              background: 'var(--indigo-soft)', color: 'var(--indigo)',
              border: '0.5px solid rgba(37,99,235,0.20)', fontWeight: 600,
            }}>{MES[i]}</span>
          </div>

          <p style={{
            fontSize: 13, lineHeight: 1.5, color: 'var(--muted)', margin: 0,
            maxWidth: i === 0 ? 560 : 'none',
          }}>{c.sub}</p>

          <div style={{
            marginTop: 'auto', paddingTop: 14,
            borderTop: '0.5px solid var(--line-2)',
          }}>{c.preview}</div>
        </div>
      ))}
    </div>
  );
}

function LandingPage({ width = 1280, heroVariant = 'A' }) {
  const Hero = heroVariant === 'B' ? HeroB : heroVariant === 'C' ? HeroC : HeroA;
  return (
    <div className="cd" style={{ width, background: 'var(--bg)' }}>
      {/* `ScrollProgress` (barra de progresso fixa no topo) removida a pedido:
          era movimento constante no canto superior durante a leitura inteira,
          e a página já sinaliza avanço pelos próprios blocos. O componente
          segue definido acima caso se queira retomar. */}
      {/* 900 era altura de tema escuro, onde o vazio ao redor do painel fazia
          parte do clima. No claro esse vazio é só branco. Depois foi pra 840:
          em 800 o hero cortava a própria linha de métricas no rodapé dele.

          O `id="hero"` existe porque o wordmark da navegação e o do rodapé
          apontam pra `#hero` — sem ele os dois eram âncoras mortas, que só
          não quebravam porque o onClick chamava scrollTo por fora. */}
      <div id="hero">
        <Hero width={width} height={960} />
      </div>

      {/* A faixa de plataformas ("Integrações nativas" + os 12 logos) saiu a
          pedido. Ela chegou a subir pro topo, entre o hero e a narrativa, e
          agora não é mais chamada em lugar nenhum — `PlataformasStrip` segue
          definida em narrative.jsx caso se queira retomar. */}

      {/* ── Narrativa: dor → diagnóstico → virada → jornada ───────────
          Os quatro blocos abaixo vêm de narrative.jsx e existem pra guiar a
          leitura antes de mostrar produto: o leitor precisa reconhecer o
          problema dele antes de olhar print de painel. O fundo escurece na
          dor (#F1F5F9) e reacende no --bg-2 com glow índigo na virada — a
          troca é sentida antes de ser lida. */}
      <AgitacaoSection />
      <ProblemaDiagnostico />
      <DiferenciadorSection />
      <JornadaSection />

      {/* `VendedorTicker` (marquee de frases correndo) removido a pedido:
          fugia do tom do resto da página. O componente segue no arquivo caso
          se queira retomar. */}
      {/* CustomerStrip desceu pra junto dos depoimentos, antes do preço. */}

      {/* As duas interfaces — vende o produto pela cara dele, antes do tour.
          A mídia de cada lado sai de APP_MEDIA (app-media.jsx). */}
      <section id="interfaces" style={{ padding: '80px 64px 90px', position: 'relative', scrollMarginTop: 24 }}>
        <Reveal>
          {/* O subtítulo antigo enumerava os quatro passos que os cards logo
              abaixo já enumeram — o leitor lia a mesma lista duas vezes e a
              segunda não acrescentava nada. Agora ele carrega só o que a cena
              não mostra sozinha: quando cada lado vê o número, e o que isso
              elimina no dia de pagar. */}
          <SectionHeader
            eyebrow="As duas pontas"
            title="Um número só. Ninguém tem a própria versão."
            sub="Ele registra a venda e vê a comissão no ato. Ela cai no seu painel no segundo seguinte, já somada ao total do ciclo. No dia de pagar não há duas contas pra bater — só uma pra confirmar."
          />
        </Reveal>
        <Reveal delay={80}><InterfacesSection /></Reveal>
      </section>

      {/* Demo */}
      <section id="demo" style={{ padding: '84px 64px', position: 'relative', scrollMarginTop: 24 }}>
        {/* "Ver o time vendendo ao vivo" só existe no app da empresa. Sem dizer
            isso no rótulo, o vendedor autônomo assiste à demo, assina, e
            descobre depois que aquela tela não é dele. Promessa que o plano não
            entrega é churn no primeiro dia. */}
        <Reveal>
          <SectionHeader
            eyebrow="Comissa Empresa · demo de 90 seg"
            title="Um painel, todo o jogo."
            sub="Um dia inteiro passando pelo Comissa: nova venda, comissão na hora, follow-up agendado e o time vendendo ao vivo. O ranking ao vivo é do painel da empresa; quem vende vê a própria comissão no app dele."
          />
        </Reveal>
        <Reveal delay={80}><ProductDemo /></Reveal>
      </section>

      {/* Depois do fechamento — contrato + parcelas.
          Substituiu a seção "O Comissa cabe na palma da mão" (app nativo), que
          saiu porque ainda não há app pra lançar. Anotado no vault como
          "Adição futura ao site". Estas duas coisas, ao contrário, já existem
          no produto. */}
      <section id="pos-venda" style={{ padding: '40px 64px 84px', position: 'relative', scrollMarginTop: 24 }}>
        <Reveal>
          <SectionHeader
            eyebrow="Depois do fechamento"
            title="O contrato sai pronto. A comissão pinga a cada boleto pago."
            sub="As duas partes chatas do pós-venda: preencher documento e acompanhar parcela. O Comissa preenche o seu modelo com os dados do cliente e libera a sua fatia a cada parcela que o cliente paga."
          />
        </Reveal>
        <Reveal delay={80}><PosVendaShowcase /></Reveal>
      </section>

      {/* Feature grid */}
      {/* A seção "Como funciona" (FeatureGrid) saiu daqui. Ela custava 1.339px
          e repetia, em card, o que a Jornada já mostra em 3 passos e o "Saiu do
          forno" já detalha: comissão automática, lembrete, integração,
          relatório. Terceira vez que o visitante lê a mesma promessa é onde ele
          para de ler. O componente FeatureGrid segue no arquivo, caso queira
          retomar em outro lugar. */}

      {/* Pra quem é os três perfis */}
      <section id="perfis" style={{ padding: '30px 64px 84px', position: 'relative', scrollMarginTop: 24 }}>
        <Reveal>
          <SectionHeader
            eyebrow="Pra quem é"
            title="Se alguém te deve comissão, o Comissa é pra você."
            sub="Autônomo, vendedor de empresa ou a empresa inteira. Cada um entra pelo seu lado e vê só o que mexe no próprio bolso."
          />
        </Reveal>
        <Reveal delay={80}><PerfisSection /></Reveal>

        {/* "E na sua área / A comissão muda de nome" saiu. A intenção era boa
            (perfil = COMO usa, segmento = QUAL dor traz), mas o Arthur leu a
            seção e não entendeu o que ela era. Distinção que só o autor enxerga
            não é distinção, é ruído: os 3 perfis logo acima já respondem "isso
            é pra mim?", que é a única pergunta que esse ponto da página precisa
            responder. SegmentosSection segue em narrative.jsx. */}
      </section>

      {/* "O que entrou este mês" saiu a pedido do Arthur. Era uma lista de
          novidades num ponto da página onde o leitor já entendeu o produto e
          está indo pro preço — changelog não fecha venda, e datar a página
          ("este mês") ainda obriga a manter a seção viva pra ela não envelhecer
          sozinha. NovidadesSection segue no arquivo, é só voltar a chamar. */}

      {/* O Ranking da equipe (716px) saiu. O painel da empresa na seção das
          duas pontas já mostra ranking ao vivo, e ali ele prova o argumento
          principal; aqui era só uma segunda vitrine da mesma coisa, num ponto
          onde o visitante já devia estar indo pro preço. RankingEquipe segue
          no arquivo. */}

      {/* Prova social concentrada, logo antes do preço.
          O CustomerStrip estava lá em cima, solto entre o marquee e as duas
          interfaces, onde o Arthur achou que não fazia sentido: prova social
          antes de o leitor entender o produto não convence ninguém. Junto com
          os depoimentos, e imediatamente antes da tabela, ela faz o trabalho
          que prova social existe pra fazer, que é derrubar a última dúvida na
          hora de decidir. */}
      <section id="quotes" style={{ padding: '90px 64px 70px', scrollMarginTop: 24 }}>
        <Reveal>
          <SectionHeader
            eyebrow="Quem vende com a gente"
            title="Carro, curso, relógio, imóvel. Tudo num só painel."
          />
        </Reveal>
        <Reveal delay={80}><Quotes /></Reveal>
        <div style={{ marginTop: 48 }}><Reveal delay={120}><CustomerStrip /></Reveal></div>
      </section>

      {/* Preços */}
      <section id="pricing" style={{ padding: '0 64px 84px', scrollMarginTop: 24 }}>
        <Reveal>
          <SectionHeader
            eyebrow="Preços"
            title="Custa menos que uma comissão perdida."
            sub="Comece grátis, sem cartão. Cresça quando faturar. Sem fidelidade e sem letrinha miúda."
          />
        </Reveal>
        <Reveal delay={80}><PricingMini /></Reveal>
        {/* Sem "de R$X por R$Y": ancoragem de desconto é padrão de curso.
            Aqui o enquadramento é custo por dia contra o custo de errar. */}
        <Reveal delay={120}><CustoDiario /></Reveal>
      </section>

      {/* Garantia tira o risco antes de cobrar, não depois */}
      <section id="garantia" style={{ padding: '0 64px 72px', scrollMarginTop: 24 }}>
        <Reveal><GarantiaSection /></Reveal>
      </section>

      {/* CTA final */}
      <section id="cta" style={{ padding: '0 32px 96px', scrollMarginTop: 24 }}>
        <Reveal><FinalCTA /></Reveal>
      </section>

      {/* FAQ — o último bloco do site, logo antes do rodapé.
          Estava antes do CTA, no meio do caminho de quem já tinha decidido:
          quem chega no preço convencido não quer ler sete objeções antes de
          achar o botão. Aqui ele atende quem ainda tem dúvida, sem atrapalhar
          quem não tem. */}
      <section id="faq" style={{ padding: '0 64px 96px', scrollMarginTop: 24 }}>
        <Reveal>
          <SectionHeader
            eyebrow="Perguntas"
            title="O que perguntam antes de assinar."
            sub="As objeções reais de quem vai configurar isso hoje à noite — não as que ficam bonitas na página."
          />
        </Reveal>
        <Reveal delay={80}><FaqSection /></Reveal>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, {
  Reveal, SectionHeader, VendedorTicker, CustomerStrip, ProductDemo, PosVendaShowcase,
  RankingEquipe, PodiumViz, FeatureGrid, Quotes, PricingMini,
  FinalCTA, Footer, LandingPage,
});