// mobile-site.jsx — landing dedicada pra celular.
// Renderizado quando window.useDevice() detecta phone.

const { useState: _mss, useEffect: _mse, useRef: _msr } = React;

// ── Detecção de dispositivo ──────────────────────────────────
function useDevice() {
  const detect = () => {
    if (typeof window === 'undefined') return { isMobile: false, width: 1280 };
    const w = window.innerWidth;
    const ua = navigator.userAgent || '';
    const uaMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
    const coarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
    const isMobile = w < 760 || (uaMobile && w < 1024) || (coarse && w < 900);
    return { isMobile, width: w };
  };
  const [d, setD] = _mss(detect);
  _mse(() => {
    const onR = () => setD(detect());
    window.addEventListener('resize', onR);
    window.addEventListener('orientationchange', onR);
    return () => {
      window.removeEventListener('resize', onR);
      window.removeEventListener('orientationchange', onR);
    };
  }, []);
  return d;
}

// ── NavBar mobile (com intro fade-down) ──────────────────────
function MobileNavBar() {
  return (
    <div className="intro-header" style={{
      padding: '14px 16px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(250,251,252,0.85)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '0.5px solid var(--line)',
      position: 'sticky', top: 0, zIndex: 50,
    }}>
      <Wordmark size={17} />
      <button onClick={() => window.openModal('login')} className="cd-btn cd-btn-ghost" style={{
        padding: '7px 14px', borderRadius: 999,
        background: 'rgba(13,17,23,0.04)', color: 'var(--ink)',
        border: '0.5px solid var(--line)',
        fontWeight: 500, fontSize: 13, letterSpacing: '-0.005em',
        cursor: 'pointer', fontFamily: 'inherit',
      }}>Entrar</button>
    </div>
  );
}

// ── Notificação "venda fechada" flutuante no hero ────────────
const MOBILE_SALE_NOTIFS = [
  { p: 'Curso Inglês',     c: 'Camila R.',     v: 'R$ 1.997',   com: 'R$ 599'  },
  { p: 'iPhone 16 Pro',    c: 'Mariana',       v: 'R$ 9.499',   com: 'R$ 475'  },
  { p: 'Rolex Submariner', c: 'Pedro M.',      v: 'R$ 78.000',  com: 'R$ 6.260'},
  { p: 'Curso Trading',    c: 'Ana Souza',     v: 'R$ 1.997',   com: 'R$ 599'  },
  { p: 'Honda Civic 2024', c: 'Vista Verde',   v: 'R$ 142.000', com: 'R$ 7.100'},
];
function MobileSaleToast() {
  const [i, setI] = _mss(0);
  const [show, setShow] = _mss(false);

  _mse(() => {
    const start = setTimeout(() => setShow(true), 3500);
    const cycle = setInterval(() => {
      setShow(false);
      setTimeout(() => {
        setI((x) => (x + 1) % MOBILE_SALE_NOTIFS.length);
        setShow(true);
      }, 350);
    }, 4200);
    return () => { clearTimeout(start); clearInterval(cycle); };
  }, []);

  const n = MOBILE_SALE_NOTIFS[i];
  return (
    <div style={{
      position: 'relative', height: 76, marginTop: 4,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: '#fff', border: '0.5px solid var(--line)',
        borderRadius: 14, padding: '12px 14px',
        boxShadow: '0 12px 28px -10px rgba(13,17,23,0.18)',
        display: 'flex', alignItems: 'center', gap: 12,
        opacity: show ? 1 : 0,
        transform: show ? 'translateY(0) scale(1)' : 'translateY(-8px) scale(.98)',
        transition: 'opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: 11, flexShrink: 0,
          background: 'linear-gradient(135deg, #2563EB, #38BDF8)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', boxShadow: '0 6px 14px -6px rgba(37,99,235,.55)',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <span style={{
              fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--muted)',
              letterSpacing: '0.04em',
            }}>VENDA FECHOU · AGORA</span>
            <span style={{ position: 'relative', width: 6, height: 6 }}>
              <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: '#059669' }} />
              <span style={{ position: 'absolute', inset: -3, borderRadius: 999, border: '1.5px solid #059669', animation: 'cd-cursor-ripple 1.6s ease-out infinite' }} />
            </span>
          </div>
          <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {n.p} · {n.c}
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>
            {n.v} · comissão <span style={{ color: 'var(--indigo)', fontWeight: 600 }}>{n.com}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Hero mobile (com intro animations) ───────────────────────
function MobileHero() {
  return (
    <section style={{
      padding: '24px 20px 28px',
      display: 'flex', flexDirection: 'column', gap: 16,
      position: 'relative',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: -140, left: '50%', transform: 'translateX(-50%)',
        width: 480, height: 480, borderRadius: 999, pointerEvents: 'none',
        background: 'radial-gradient(closest-side, rgba(37,99,235,0.18), transparent 70%)',
        filter: 'blur(20px)', zIndex: 0,
      }} />

      <div className="intro-eyebrow" style={{ position: 'relative', zIndex: 1 }}>
        <Eyebrow tone="indigo">Hotmart, Kiwify, Asaas e mais 8</Eyebrow>
      </div>

      <h1 style={{
        position: 'relative', zIndex: 1,
        fontSize: 44, lineHeight: 0.96, letterSpacing: '-0.04em',
        fontWeight: 600, margin: 0, color: 'var(--ink)',
      }}>
        <span className="intro-h1-line intro-h1-line-1">Menos</span><br />
        <span className="intro-h1-line intro-h1-line-2">planilha.</span><br />
        <span className="intro-h1-line intro-h1-line-3">
          <span style={{ color: 'var(--indigo)', fontStyle: 'italic', fontWeight: 500 }}>Mais</span>{' '}
          <span>comissão.</span>
        </span>
      </h1>

      <p className="intro-para" style={{
        position: 'relative', zIndex: 1,
        fontSize: 15.5, lineHeight: 1.55, color: 'var(--muted)',
        margin: 0, letterSpacing: '-0.003em',
      }}>
        Venda por link, Pix na mão ou contrato assinado: a comissão sai pronta,
        com meta e follow-up no mesmo painel. Pra quem vende carro, curso,
        relógio qualquer coisa em que <em>fechar</em> é o que importa.
      </p>

      <div className="intro-cta-row" style={{
        position: 'relative', zIndex: 1,
        display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4,
      }}>
        <button onClick={() => window.openModal('signup')} className="cd-cta" style={{
          padding: '14px 22px', borderRadius: 999, border: 0,
          background: 'var(--indigo)', color: '#fff',
          fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em',
          cursor: 'pointer', fontFamily: 'inherit',
          boxShadow: '0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -6px rgba(37,99,235,.55)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Criar minha conta grátis
          <IconArrow size={16} stroke={1.8} />
        </button>
        <button onClick={() => {
          const el = document.getElementById('m-demo');
          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }} className="cd-cta" style={{
          padding: '14px 22px', borderRadius: 999,
          background: 'rgba(13,17,23,0.04)', color: 'var(--ink)',
          border: '0.5px solid var(--line)',
          fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em',
          cursor: 'pointer', fontFamily: 'inherit',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <IconPlay size={11} /> Ver o tour de 90s
        </button>
      </div>

      {/* Microcopy de risco — no mobile isso não existia, e é justamente onde o
          polegar para antes de tocar. Mesmas garantias do desktop. */}
      <div style={{
        position: 'relative', zIndex: 1, marginTop: -2,
        fontSize: 12, color: 'var(--muted-2)', textAlign: 'center',
        letterSpacing: '-0.003em',
      }}>
        14 dias grátis · sem cartão · cancela em um clique
      </div>

      {/* notificação flutuante "venda caiu" */}
      <div className="intro-toast" style={{ position: 'relative', zIndex: 1, marginTop: 10 }}>
        <MobileSaleToast />
      </div>

      {/* mini-stats ao vivo */}
      <MobileHeroStats />
    </section>
  );
}

// ── Stats ao vivo do hero ────────────────────────────────────
function MobileHeroStats() {
  const vendas = window.useDrift({
    start: 4.3, min: 4.05, max: 4.62,
    stepMin: 0.02, stepMax: 0.08, upBias: 0.74, intervalMs: 2000,
  });
  const minutos = window.useDrift({
    start: 23, min: 22, max: 31,
    stepMin: 0.4, stepMax: 1.4, upBias: 0.68, intervalMs: 2400,
  });
  const uptime = window.useDrift({
    start: 99.99, min: 99.92, max: 99.999,
    stepMin: 0.003, stepMax: 0.014, upBias: 0.55, intervalMs: 2800,
  });
  const stats = [
    { v: vendas,  ms: 1700, fmt: (n) => 'R$ ' + n.toFixed(1).replace('.', ',') + 'M', l: 'processados' },
    { v: minutos, ms: 1800, fmt: (n) => Math.round(n) + ' min', l: 'economizados/dia' },
    { v: uptime,  ms: 2000, fmt: (n) => n.toFixed(2).replace('.', ',') + '%', l: 'uptime' },
  ];
  const TN = window.TweenedNumber;
  return (
    <div className="intro-stats-row" style={{
      marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
      borderTop: '0.5px solid var(--line)', paddingTop: 16,
    }}>
      {stats.map((s) => (
        <div key={s.l}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
            <div style={{
              fontSize: 17, fontWeight: 600, letterSpacing: '-0.02em',
              fontVariantNumeric: 'tabular-nums', color: 'var(--ink)',
            }}>
              <TN value={s.v} ms={s.ms} format={s.fmt} />
            </div>
            <span style={{ position: 'relative', display: 'inline-flex', width: 5, height: 5 }}>
              <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: '#059669' }} />
              <span style={{ position: 'absolute', inset: -3, borderRadius: 999, border: '1.5px solid #059669', animation: 'cd-cursor-ripple 1.6s ease-out infinite' }} />
            </span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3, lineHeight: 1.3 }}>{s.l}</div>
        </div>
      ))}
    </div>
  );
}

// ── Marquee de frases "vida de vendedor" ─────────────────────
function MobileTicker() {
  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: '#fff', overflow: 'hidden', padding: '12px 0',
    }}>
      <style>{`@keyframes cd-mq-m{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`}</style>
      <div style={{
        display: 'flex', whiteSpace: 'nowrap', gap: 0,
        animation: 'cd-mq-m 28s linear infinite',
      }}>
        {[...frases, ...frases, ...frases].map((f, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            paddingRight: 26, fontSize: 14, letterSpacing: '-0.005em',
            color: 'var(--ink-2)',
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: 999,
              background: 'var(--indigo)', opacity: .55, marginRight: 10,
            }} />
            {f}
          </span>
        ))}
      </div>
    </div>
  );
}

// ── Marcas de clientes (grid 3×2) ────────────────────────────
function MobileCustomerStrip() {
  return (
    <div style={{
      padding: '24px 20px',
      borderBottom: '0.5px solid var(--line)',
      background: 'var(--surface-2)',
    }}>
      <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 14, lineHeight: 1.4 }}>
        Vendedores e equipes que vendem todo dia, em todo lugar, usando Comissa.
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 12, 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: 14.5, color: 'var(--ink-2)', opacity: 0.6,
            textAlign: 'center',
            fontVariant: c.smallcaps ? 'small-caps' : 'normal',
            textTransform: c.smallcaps ? 'lowercase' : 'none',
            display: 'inline-flex', alignItems: 'center', gap: 4, justifyContent: 'center',
          }}>
            {c.icon && <span style={{ fontSize: 12 }}>{c.icon}</span>}
            {c.n}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Face ID scan (overlay animado) ───────────────────────────
function FaceIDScan({ phase }) {
  // phase: 'scan' | 'done'
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 30,
      background: 'rgba(13,17,23,0.72)',
      backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      animation: 'cd-modal-fade .3s ease',
    }}>
      <style>{`
        @keyframes m-faceid-scan {
          0%   { top: 18%; opacity: 0; }
          10%  { opacity: 1; }
          50%  { top: 82%; opacity: 1; }
          60%  { top: 82%; opacity: 0; }
          61%  { top: 18%; opacity: 0; }
          70%  { opacity: 1; }
          100% { top: 82%; opacity: 1; }
        }
        @keyframes m-faceid-frame {
          0%, 100% { transform: scale(1); }
          50%      { transform: scale(1.04); }
        }
        @keyframes m-faceid-check-draw {
          to { stroke-dashoffset: 0; }
        }
      `}</style>

      <div style={{
        position: 'relative', width: 108, height: 108,
        animation: phase === 'scan' ? 'm-faceid-frame 1.6s ease-in-out infinite' : 'none',
      }}>
        {/* moldura cantos */}
        {[
          { top: 0, left: 0, borderTop: 2, borderLeft: 2, borderTopLeftRadius: 18 },
          { top: 0, right: 0, borderTop: 2, borderRight: 2, borderTopRightRadius: 18 },
          { bottom: 0, left: 0, borderBottom: 2, borderLeft: 2, borderBottomLeftRadius: 18 },
          { bottom: 0, right: 0, borderBottom: 2, borderRight: 2, borderBottomRightRadius: 18 },
        ].map((c, i) => (
          <span key={i} style={{
            position: 'absolute', width: 22, height: 22,
            borderColor: phase === 'done' ? '#059669' : '#A5C9FF',
            borderStyle: 'solid',
            borderTopWidth: c.borderTop || 0, borderLeftWidth: c.borderLeft || 0,
            borderBottomWidth: c.borderBottom || 0, borderRightWidth: c.borderRight || 0,
            borderTopLeftRadius: c.borderTopLeftRadius || 0,
            borderTopRightRadius: c.borderTopRightRadius || 0,
            borderBottomLeftRadius: c.borderBottomLeftRadius || 0,
            borderBottomRightRadius: c.borderBottomRightRadius || 0,
            top: c.top, left: c.left, right: c.right, bottom: c.bottom,
            transition: 'border-color .3s ease',
          }} />
        ))}

        {/* ícone do rosto */}
        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.2"
             style={{ position: 'absolute', inset: 12, opacity: 0.85 }}>
          <circle cx="9" cy="10" r="0.8" fill="#fff" />
          <circle cx="15" cy="10" r="0.8" fill="#fff" />
          <path d="M9.5 15c1 0.6 4 0.6 5 0" strokeLinecap="round" />
          <path d="M12 8v4" strokeLinecap="round" />
        </svg>

        {/* linha de scan */}
        {phase === 'scan' && (
          <span style={{
            position: 'absolute', left: 4, right: 4, height: 2,
            background: 'linear-gradient(90deg, transparent, #A5C9FF, transparent)',
            boxShadow: '0 0 12px #A5C9FF',
            borderRadius: 2,
            animation: 'm-faceid-scan 1.6s ease-in-out infinite',
          }} />
        )}

        {/* check no fim */}
        {phase === 'done' && (
          <svg viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="3"
               strokeLinecap="round" strokeLinejoin="round"
               style={{ position: 'absolute', inset: '20%', filter: 'drop-shadow(0 0 12px rgba(5,150,105,0.6))' }}>
            <path d="M4 12l5 5L20 6" strokeDasharray="30" strokeDashoffset="30"
                  style={{ animation: 'm-faceid-check-draw .4s ease-out forwards' }} />
          </svg>
        )}
      </div>

      <div style={{
        marginTop: 22, fontSize: 13, fontFamily: 'var(--mono)',
        color: phase === 'done' ? '#059669' : 'rgba(13,17,23,0.85)',
        letterSpacing: '0.08em', transition: 'color .25s ease',
      }}>
        {phase === 'done' ? 'AUTENTICADO' : 'OLHE PARA O IPHONE'}
      </div>
    </div>
  );
}

// ── Preview views (versão limpa pro showcase) ────────────────
const PV_FONT = "'Geist', -apple-system, system-ui, sans-serif";
const PV_MONO = "'Geist Mono', ui-monospace, monospace";

function PreviewHome() {
  const comissao = window.useDrift({
    start: 12840, min: 12700, max: 13620,
    stepMin: 8, stepMax: 38, upBias: 0.74, intervalMs: 2200,
  });
  const TN = window.TweenedNumber;
  const META = 16000;
  const pct = Math.min(100, (comissao / META) * 100);
  const falta = Math.max(0, META - comissao);
  const brl = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR');

  // mini sparkline (últimos 7 dias)
  const spark = [120, 180, 90, 260, 200, 340, 410];
  const sparkMax = Math.max(...spark);
  const sparkPath = spark.map((v, i) => {
    const x = (i / (spark.length - 1)) * 100;
    const y = 32 - (v / sparkMax) * 28;
    return `${i === 0 ? 'M' : 'L'}${x},${y}`;
  }).join(' ');
  const lastY = 32 - (spark[spark.length - 1] / sparkMax) * 28;

  const sales = [
    { t: 'iPhone 16 Pro',    c: 'Mariana R.', v: 9499,  com: 475,  d: 'agora', dot: '#059669' },
    { t: 'Curso Trading Pro', c: 'Ana Souza',  v: 1997,  com: 599,  d: '2h',    dot: '#F59E0B' },
    { t: 'Rolex Submariner', c: 'Pedro M.',   v: 78000, com: 6260, d: 'hoje',  dot: '#059669' },
  ];

  return (
    <React.Fragment>
      {/* header */}
      <div style={{
        padding: '54px 22px 0',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12,
      }}>
        <div>
          <div style={{ fontSize: 12, color: 'rgba(13,17,23,0.5)' }}>Olá, Marina</div>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginTop: 2 }}>
            Bom dia
          </div>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '6px 10px', borderRadius: 999,
          background: '#fff', border: '0.5px solid rgba(13,17,23,0.08)',
          fontSize: 11, fontWeight: 500, marginTop: 6,
          boxShadow: '0 4px 12px -6px rgba(245,158,11,0.4)',
        }}>
          <IconBolt size={12} />
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>9 dias</span>
        </div>
      </div>

      {/* hero commission card */}
      <div style={{ padding: '20px 18px 0' }}>
        <div style={{
          borderRadius: 24, padding: '20px 22px 22px', color: '#fff',
          position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, #2563EB 0%, #38BDF8 100%)',
          boxShadow: '0 18px 40px -12px rgba(37,99,235,0.45)',
        }}>
          {/* glow circles */}
          <div style={{
            position: 'absolute', right: -50, top: -50,
            width: 200, height: 200, borderRadius: 999,
            background: 'radial-gradient(closest-side, rgba(13,17,23,0.28), transparent)',
            pointerEvents: 'none',
          }} />
          <div style={{
            position: 'absolute', left: -30, bottom: -60,
            width: 160, height: 160, borderRadius: 999,
            background: 'radial-gradient(closest-side, rgba(13,17,23,0.12), transparent)',
            pointerEvents: 'none',
          }} />

          {/* top label row */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
            fontSize: 11, letterSpacing: '0.05em', position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: .85 }}>
              COMISSÃO · MAIO
              <span style={{ position: 'relative', display: 'inline-flex', width: 6, height: 6 }}>
                <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: '#A7F3D0' }} />
                <span style={{ position: 'absolute', inset: -3, borderRadius: 999, border: '1.5px solid #A7F3D0', animation: 'cd-cursor-ripple 1.6s ease-out infinite' }} />
              </span>
            </div>
            <span style={{
              padding: '3px 8px', borderRadius: 999,
              background: 'rgba(13,17,23,0.18)',
              fontSize: 10, fontWeight: 600, letterSpacing: '0.02em',
              display: 'inline-flex', alignItems: 'center', gap: 3,
            }}>
              <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="#A7F3D0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M2 8l4-4 4 4" />
              </svg>
              18% vs abr
            </span>
          </div>

          {/* value + sparkline row */}
          <div style={{
            marginTop: 10, display: 'flex', alignItems: 'flex-end',
            justifyContent: 'space-between', gap: 14, position: 'relative',
          }}>
            <div style={{
              fontSize: 40, fontWeight: 700, letterSpacing: '-0.04em',
              lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>
              <TN value={comissao} ms={1400} format={brl} />
            </div>
            <svg width="86" height="34" viewBox="0 0 100 34" style={{ flexShrink: 0, marginBottom: 2 }}>
              <defs>
                <linearGradient id="pv-spark" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(13,17,23,0.55)" />
                  <stop offset="100%" stopColor="rgba(13,17,23,0)" />
                </linearGradient>
              </defs>
              <path d={sparkPath + ` L100,34 L0,34 Z`} fill="url(#pv-spark)" />
              <path d={sparkPath} fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              <circle cx="100" cy={lastY} r="3.2" fill="#fff" stroke="rgba(37,99,235,0.3)" strokeWidth="0.8" />
            </svg>
          </div>

          {/* progress */}
          <div style={{ marginTop: 18, position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: .85, marginBottom: 6 }}>
              <span>Meta R$ 16.000</span>
              <span style={{ fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>
                <TN value={pct} ms={1100} format={(n) => Math.round(n) + '%'} />
              </span>
            </div>
            <div style={{ height: 6, background: 'rgba(13,17,23,0.22)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{
                width: pct + '%', height: '100%', background: '#fff',
                transition: 'width 1.2s cubic-bezier(.2,.7,.2,1)',
                boxShadow: '0 0 12px rgba(255,255,255,0.6)',
              }} />
            </div>
            <div style={{ fontSize: 11.5, opacity: .8, marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>
              Faltam <TN value={falta} ms={1400} format={brl} />. Tu consegue.
            </div>
          </div>
        </div>
      </div>

      {/* quick stats row */}
      <div style={{
        padding: '14px 18px 0',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
      }}>
        {[
          { l: 'HOJE',     v: 'R$ 1.674', sub: '4 vendas',   c: '#059669' },
          { l: 'PIPELINE', v: '8',        sub: 'em aberto',  c: '#2563EB' },
          { l: 'BÔNUS',    v: '80%',      sub: 'pra travar', c: '#F59E0B' },
        ].map((s) => (
          <div key={s.l} style={{
            background: '#fff', borderRadius: 14, padding: '11px 10px 10px',
            border: '0.5px solid rgba(13,17,23,0.06)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 10, right: 10, height: 2,
              borderRadius: 99, background: s.c,
            }} />
            <div style={{
              fontSize: 9.5, color: 'rgba(13,17,23,0.5)',
              letterSpacing: '0.06em', fontWeight: 600,
            }}>{s.l}</div>
            <div style={{
              fontSize: 15, fontWeight: 700, letterSpacing: '-0.02em',
              marginTop: 3, fontVariantNumeric: 'tabular-nums',
            }}>{s.v}</div>
            <div style={{ fontSize: 10, color: 'rgba(13,17,23,0.5)', marginTop: 1 }}>{s.sub}</div>
          </div>
        ))}
      </div>

      {/* últimas vendas */}
      <div style={{ padding: '20px 22px 28px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 10,
        }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em' }}>
            Últimas vendas
          </div>
          <div style={{ fontSize: 11, color: '#2563EB', fontWeight: 500 }}>Ver todas ›</div>
        </div>
        <div style={{
          background: '#fff', borderRadius: 16, overflow: 'hidden',
          border: '0.5px solid rgba(13,17,23,0.06)',
          boxShadow: '0 8px 24px -16px rgba(13,17,23,0.12)',
        }}>
          {sales.map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.05)' : 'none',
            }}>
              <span style={{ width: 9, height: 9, borderRadius: 999, background: s.dot, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{s.t}</div>
                <div style={{ fontSize: 11, color: 'rgba(13,17,23,0.55)', marginTop: 1 }}>{s.c} · {s.d}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, fontFamily: PV_MONO }}>
                  R$ {s.v.toLocaleString('pt-BR')}
                </div>
                <div style={{ fontSize: 10.5, color: '#2563EB', marginTop: 1, fontFamily: PV_MONO }}>
                  +R$ {s.com.toLocaleString('pt-BR')}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function PreviewVendas() {
  const [filter, setFilter] = _mss('todas');

  // status: 'pago' (caiu na conta), 'pendente' (faturado, comissão libera depois), 'analise'
  const sales = [
    { t: 'iPhone 16 Pro',     c: 'Mariana R.',    v: 9499,   com: 475,  d: 'agora',  group: 'HOJE',  status: 'pago'     },
    { t: 'Curso Trading Pro', c: 'Ana Souza',     v: 1997,   com: 599,  d: '2h',     group: 'HOJE',  status: 'pendente' },
    { t: 'Rolex Submariner',  c: 'Pedro Marques', v: 78000,  com: 6260, d: '4h',     group: 'HOJE',  status: 'pendente' },
    { t: 'Honda Civic 2024',  c: 'Vista Verde',   v: 142000, com: 7100, d: 'ontem',  group: 'ONTEM', status: 'analise'  },
    { t: 'iPhone 15 128GB',   c: 'Lucas P.',      v: 6299,   com: 315,  d: 'ontem',  group: 'ONTEM', status: 'pago'     },
  ];

  const STATUS = {
    pago:     { l: 'Pago',      bg: 'rgba(5,150,105,0.12)',  fg: '#059669', dot: '#059669' },
    pendente: { l: 'Pendente',  bg: 'rgba(245,158,11,0.12)',  fg: '#B45309', dot: '#F59E0B' },
    analise:  { l: 'Em análise',bg: 'rgba(148,163,184,0.18)', fg: '#475569', dot: '#94A3B4' },
  };

  const filtered = sales.filter((s) =>
    filter === 'todas' ? true :
    filter === 'pagas' ? s.status === 'pago' :
    s.status !== 'pago'
  );

  const totalVolume   = sales.reduce((a, s) => a + s.v,   0);
  const totalComissao = sales.reduce((a, s) => a + s.com, 0);
  const countPagas    = sales.filter(s => s.status === 'pago').length;
  const countPend     = sales.length - countPagas;

  // agrupa por dia (HOJE/ONTEM)
  const groups = [];
  filtered.forEach((s) => {
    const last = groups[groups.length - 1];
    if (last && last.label === s.group) last.items.push(s);
    else groups.push({ label: s.group, items: [s] });
  });

  const brl = (n) => 'R$ ' + n.toLocaleString('pt-BR');

  return (
    <React.Fragment>
      {/* header */}
      <div style={{ padding: '54px 22px 0' }}>
        <div style={{ fontSize: 12, color: 'rgba(13,17,23,0.5)', letterSpacing: '0.02em' }}>VENDAS · MAIO</div>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginTop: 2 }}>
          {sales.length} vendas <span style={{ color: 'rgba(13,17,23,0.4)', fontWeight: 500 }}>· {countPagas} pagas</span>
        </div>
      </div>

      {/* resumo do mês */}
      <div style={{ padding: '18px 18px 0' }}>
        <div style={{
          background: '#fff', borderRadius: 16, padding: '14px 16px',
          border: '0.5px solid rgba(13,17,23,0.06)',
          display: 'grid', gridTemplateColumns: '1fr 1px 1fr', gap: 12,
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 10, color: 'rgba(13,17,23,0.5)', letterSpacing: '0.06em', fontWeight: 600 }}>VOLUME</div>
            <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 2, fontFamily: PV_MONO }}>
              {brl(totalVolume)}
            </div>
            <div style={{ fontSize: 10.5, color: 'rgba(13,17,23,0.5)', marginTop: 1 }}>em vendas</div>
          </div>
          <div style={{ width: 1, height: 36, background: 'rgba(13,17,23,0.08)' }} />
          <div>
            <div style={{ fontSize: 10, color: 'rgba(13,17,23,0.5)', letterSpacing: '0.06em', fontWeight: 600 }}>COMISSÃO</div>
            <div style={{
              fontSize: 17, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 2,
              fontFamily: PV_MONO, color: '#2563EB',
            }}>
              +{brl(totalComissao)}
            </div>
            <div style={{ fontSize: 10.5, color: 'rgba(13,17,23,0.5)', marginTop: 1 }}>sua parte</div>
          </div>
        </div>
      </div>

      {/* filtros */}
      <div style={{
        padding: '14px 18px 4px',
        display: 'flex', gap: 6,
      }}>
        {[
          { k: 'todas',     l: 'Todas',     n: sales.length },
          { k: 'pagas',     l: 'Pagas',     n: countPagas   },
          { k: 'pendentes', l: 'Pendentes', n: countPend    },
        ].map((f) => {
          const active = filter === f.k;
          return (
            <button key={f.k} type="button" onClick={() => setFilter(f.k)} style={{
              flex: 1, padding: '8px 4px', borderRadius: 999,
              border: '0.5px solid ' + (active ? 'transparent' : 'rgba(13,17,23,0.1)'),
              background: active ? '#FBFCFD' : '#fff',
              color: active ? '#fff' : 'rgba(13,17,23,0.7)',
              fontSize: 11.5, fontWeight: 500, fontFamily: 'inherit',
              cursor: 'pointer', letterSpacing: '-0.005em',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              transition: 'background-color .2s ease, color .2s ease',
              WebkitTapHighlightColor: 'transparent',
            }}>
              {f.l}
              <span style={{
                fontSize: 10, fontFamily: PV_MONO,
                opacity: active ? .7 : .55,
                fontVariantNumeric: 'tabular-nums',
              }}>{f.n}</span>
            </button>
          );
        })}
      </div>

      {/* lista agrupada por dia */}
      <div style={{ padding: '14px 18px 28px' }}>
        {groups.length === 0 && (
          <div style={{
            padding: '24px 16px', textAlign: 'center',
            color: 'rgba(13,17,23,0.5)', fontSize: 12.5,
            background: '#fff', borderRadius: 16,
            border: '0.5px dashed rgba(13,17,23,0.12)',
          }}>
            Nada por aqui ainda.
          </div>
        )}
        {groups.map((g, gi) => {
          const groupTotal = g.items.reduce((a, s) => a + s.com, 0);
          return (
            <div key={g.label} style={{ marginTop: gi ? 14 : 0 }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                padding: '0 4px 8px',
              }}>
                <div style={{
                  fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
                  color: 'rgba(13,17,23,0.5)',
                }}>{g.label}</div>
                <div style={{
                  fontSize: 10.5, color: '#2563EB', fontFamily: PV_MONO, fontWeight: 500,
                }}>+{brl(groupTotal)}</div>
              </div>
              <div style={{
                background: '#fff', borderRadius: 16, overflow: 'hidden',
                border: '0.5px solid rgba(13,17,23,0.06)',
                boxShadow: '0 8px 24px -16px rgba(13,17,23,0.12)',
              }}>
                {g.items.map((v, i) => {
                  const st = STATUS[v.status];
                  return (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 11,
                      padding: '12px 14px',
                      borderTop: i ? '0.5px solid rgba(13,17,23,0.05)' : 'none',
                    }}>
                      <span style={{ width: 8, height: 8, borderRadius: 999, background: st.dot, flexShrink: 0 }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{
                          fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em',
                          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                        }}>{v.t}</div>
                        <div style={{
                          display: 'flex', alignItems: 'center', gap: 6,
                          marginTop: 3,
                        }}>
                          <span style={{
                            fontSize: 9.5, fontWeight: 600, letterSpacing: '0.02em',
                            padding: '2px 6px', borderRadius: 999,
                            background: st.bg, color: st.fg,
                          }}>{st.l}</span>
                          <span style={{ fontSize: 11, color: 'rgba(13,17,23,0.55)' }}>
                            {v.c} · {v.d}
                          </span>
                        </div>
                      </div>
                      <div style={{ textAlign: 'right', flexShrink: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500, fontFamily: PV_MONO, fontVariantNumeric: 'tabular-nums' }}>
                          {brl(v.v)}
                        </div>
                        <div style={{
                          fontSize: 10.5, marginTop: 2, fontFamily: PV_MONO,
                          color: '#2563EB', fontVariantNumeric: 'tabular-nums',
                        }}>
                          +{brl(v.com)}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}

        {/* legenda das cores */}
        <div style={{
          marginTop: 14, padding: '10px 12px',
          background: 'rgba(13,17,23,0.03)', borderRadius: 12,
          display: 'flex', gap: 12, flexWrap: 'wrap',
          fontSize: 10.5, color: 'rgba(13,17,23,0.6)',
        }}>
          {[
            { l: 'Pago',       c: '#059669', sub: 'comissão na conta' },
            { l: 'Pendente',   c: '#F59E0B', sub: 'libera em 30 dias' },
            { l: 'Em análise', c: '#94A3B4', sub: 'aguardando aprovar' },
          ].map((x) => (
            <span key={x.l} style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: x.c }} />
              <span style={{ fontWeight: 500, color: 'rgba(13,17,23,0.75)' }}>{x.l}</span>
              <span style={{ opacity: .7 }}>· {x.sub}</span>
            </span>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function PreviewMetas() {
  const pct = 80;
  const R = 88; const C = 2 * Math.PI * R;
  return (
    <React.Fragment>
      <div style={{ padding: '54px 22px 0' }}>
        <div style={{ fontSize: 12, color: 'rgba(13,17,23,0.5)' }}>Metas · maio</div>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginTop: 2 }}>
          Faltam 11 dias
        </div>
      </div>

      <div style={{
        padding: '28px 18px 0',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{ position: 'relative', width: 220, height: 220 }}>
          <svg width="220" height="220" viewBox="0 0 220 220">
            <defs>
              <linearGradient id="pv-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#2563EB" />
                <stop offset="100%" stopColor="#38BDF8" />
              </linearGradient>
            </defs>
            <circle cx="110" cy="110" r={R} fill="none"
                    stroke="rgba(13,17,23,0.06)" strokeWidth="14" />
            <circle cx="110" cy="110" r={R} fill="none"
                    stroke="url(#pv-grad)" strokeWidth="14" strokeLinecap="round"
                    strokeDasharray={C}
                    strokeDashoffset={C - (C * pct / 100)}
                    transform="rotate(-90 110 110)"
                    style={{ transition: 'stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)' }} />
          </svg>
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{
              fontSize: 44, fontWeight: 700, letterSpacing: '-0.04em',
              lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>{pct}%</div>
            <div style={{ fontSize: 11, color: 'rgba(13,17,23,0.55)', marginTop: 4 }}>da meta de maio</div>
          </div>
        </div>
        <div style={{ marginTop: 14, fontSize: 13, color: 'rgba(13,17,23,0.6)', textAlign: 'center' }}>
          Faltam <span style={{ color: 'var(--ink)', fontWeight: 600, fontFamily: PV_MONO }}>R$ 3.160</span> pro bônus
        </div>
      </div>

      <div style={{ padding: '22px 22px 28px' }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>Ranking do time</div>
        <div style={{
          background: '#fff', borderRadius: 16, overflow: 'hidden',
          border: '0.5px solid rgba(13,17,23,0.06)',
        }}>
          {[
            { p: 1, n: 'Beatriz F.', v: 'R$ 18.420', hue: 30,  you: false },
            { p: 2, n: 'Você',        v: 'R$ 12.840', hue: 14, you: true  },
            { p: 3, n: 'Carlos O.',   v: 'R$ 11.280', hue: 30, you: false },
          ].map((r, i) => (
            <div key={r.n} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '11px 14px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.05)' : 'none',
              background: r.you ? 'rgba(37,99,235,0.06)' : '#fff',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 999,
                background: r.p === 1 ? '#F59E0B' : 'rgba(13,17,23,0.06)',
                color: r.p === 1 ? '#fff' : 'rgba(13,17,23,0.5)',
                fontSize: 11, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{r.p}</span>
              <span style={{
                width: 26, height: 26, borderRadius: 999, flexShrink: 0,
                background: `linear-gradient(135deg, hsl(${r.hue} 70% 70%), hsl(${r.hue + 40} 70% 55%))`,
                color: '#fff', fontSize: 10.5, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                border: '1.5px solid #fff',
              }}>{r.n.split(' ').map(s => s[0]).join('').slice(0, 2)}</span>
              <div style={{ flex: 1, fontSize: 13, fontWeight: r.you ? 600 : 500, color: r.you ? '#2563EB' : 'inherit' }}>{r.n}</div>
              <div style={{ fontSize: 12, fontFamily: PV_MONO }}>{r.v}</div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function PreviewPerfil() {
  return (
    <React.Fragment>
      <div style={{ padding: '60px 22px 0', textAlign: 'center' }}>
        <div style={{
          width: 88, height: 88, borderRadius: 999, margin: '0 auto',
          background: 'linear-gradient(135deg, hsl(22 85% 62%), hsl(340 70% 55%))',
          color: '#fff', fontSize: 30, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          border: '3px solid #fff', boxShadow: '0 8px 18px rgba(0,0,0,.12)',
        }}>MS</div>
        <div style={{ fontSize: 21, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 14 }}>Marina Souza</div>
        <div style={{ fontSize: 12.5, color: 'rgba(13,17,23,0.55)', marginTop: 2 }}>Vendedora · time Velocittà</div>
      </div>

      <div style={{ padding: '24px 18px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {[
            { l: 'Vendas',   v: '147' },
            { l: 'Clientes', v: '62'  },
            { l: 'Streak',   v: '9 d' },
          ].map((s) => (
            <div key={s.l} style={{
              background: '#fff', borderRadius: 14, padding: '14px 8px', textAlign: 'center',
              border: '0.5px solid rgba(13,17,23,0.06)',
            }}>
              <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.025em' }}>{s.v}</div>
              <div style={{ fontSize: 10.5, color: 'rgba(13,17,23,0.55)', marginTop: 3 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '22px 22px 28px' }}>
        <div style={{
          background: '#fff', borderRadius: 16, overflow: 'hidden',
          border: '0.5px solid rgba(13,17,23,0.06)',
        }}>
          {[
            { i: IconGrid, l: 'Conta' },
            { i: IconBolt, l: 'Notificações' },
            { i: IconPix, l: 'Pagamento e Pix' },
            { i: IconCircle, l: 'Ajuda' },
          ].map((row, i) => (
            <div key={row.l} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '13px 16px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.05)' : 'none',
            }}>
              <span style={{ width: 22, fontSize: 16, textAlign: 'center' }}><row.i size={17} /></span>
              <div style={{ flex: 1, fontSize: 13.5, fontWeight: 500 }}>{row.l}</div>
              <span style={{ color: 'rgba(13,17,23,0.25)', fontSize: 16 }}>›</span>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

// ── App auto-tour (cicla pelas abas como um vídeo) ───────────
const M_TABS = [
  { k: 'home',   l: 'Início', View: PreviewHome   },
  { k: 'vendas', l: 'Vendas', View: PreviewVendas },
  { k: 'metas',  l: 'Metas',  View: PreviewMetas  },
  { k: 'perfil', l: 'Perfil', View: PreviewPerfil },
];
function MobileAppAutoTour() {
  const [idx, setIdx] = _mss(0);
  const [poke, setPoke] = _mss(false);

  const goTab = (k) => {
    const newIdx = M_TABS.findIndex((t) => t.k === k);
    if (newIdx === -1 || newIdx === idx) return;
    setIdx(newIdx);
    setPoke(true);
    setTimeout(() => setPoke(false), 400);
  };

  const tab = M_TABS[idx].k;
  const View = M_TABS[idx].View;

  return (
    <div style={{
      height: '100%', background: '#F0F4F8',
      display: 'flex', flexDirection: 'column',
      fontFamily: "'Geist', -apple-system, system-ui, sans-serif",
      color: '#FBFCFD', position: 'relative',
    }}>
      <PhoneNotifications startDelayMs={1200} intervalMs={7000} lifetimeMs={5000} fadeMs={700} />
      <div key={tab} style={{
        flex: 1, minHeight: 0, overflow: 'auto',
        animation: 'cd-tab-in .2s cubic-bezier(.2,.8,.2,1)',
      }}>
        <View />
      </div>

      <div style={{
        padding: '12px 14px 28px', display: 'flex', gap: 4,
        background: 'rgba(13,17,23,0.85)',
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        borderTop: '0.5px solid rgba(13,17,23,0.06)',
        position: 'relative',
      }}>
        {[
          { k: 'home',   l: 'Início' },
          { k: 'vendas', l: 'Vendas' },
          { k: 'fab',    fab: true },
          { k: 'metas',  l: 'Metas'  },
          { k: 'perfil', l: 'Perfil' },
        ].map((b) => (
          b.fab ? (
            <button key={b.k} type="button" aria-label="Nova ação"
                    style={{
              flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center',
              border: 0, background: 'transparent', padding: 0, cursor: 'pointer',
              WebkitTapHighlightColor: 'transparent',
            }}>
              <span style={{
                width: 46, height: 46, borderRadius: 999,
                background: 'linear-gradient(135deg, #2563EB, #38BDF8)', color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 8px 20px -6px rgba(37,99,235,0.55)', marginTop: -12,
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
                  <path d="M12 5v14M5 12h14"/>
                </svg>
              </span>
            </button>
          ) : (
            <button key={b.k} type="button" onClick={() => goTab(b.k)} style={{
              flex: 1, display: 'flex', flexDirection: 'column',
              alignItems: 'center', gap: 2, padding: '2px 0',
              border: 0, background: 'transparent', cursor: 'pointer',
              color: tab === b.k ? '#2563EB' : 'rgba(13,17,23,0.45)',
              fontFamily: 'inherit',
              transition: 'color .15s ease',
              position: 'relative', touchAction: 'manipulation',
              WebkitTapHighlightColor: 'transparent',
            }}>
              <span className={tab === b.k && poke ? 'cd-spot cd-poked' : 'cd-spot'} style={{
                borderRadius: 8, padding: '4px 8px',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <TabIcon kind={b.k} active={tab === b.k} size={22} />
              </span>
              <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: '-0.005em' }}>{b.l}</span>
            </button>
          )
        ))}
      </div>
    </div>
  );
}

// ── App showcase — login interativo → Face ID → app livre ───
function MobileAppShowcase() {
  // 'login' (esperando clique) → 'scan' (Face ID animando) → 'app' (livre)
  const [stage, setStage] = _mss('login');

  _mse(() => {
    if (stage !== 'scan') return;
    const t = setTimeout(() => setStage('app'), 1500);
    return () => clearTimeout(t);
  }, [stage]);

  const doLogin = () => {
    if (stage === 'login') setStage('scan');
  };

  const view = stage === 'app' ? 'app' : 'login';
  const busy = stage === 'scan' ? 'scan' : false;

  return (
    <section id="m-demo" style={{
      padding: '40px 16px 24px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
      background: 'linear-gradient(180deg, transparent, rgba(234,242,254,0.5) 30%, rgba(234,242,254,0.5) 70%, transparent)',
    }}>
      <div style={{ textAlign: 'center', maxWidth: 360 }}>
        <Eyebrow>No bolso · iOS & Android</Eyebrow>
        <h2 style={{
          fontSize: 30, lineHeight: 1.02, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 8px',
        }}>O Comissa cabe na palma da mão.</h2>
        <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--muted)', margin: 0 }}>
          {stage === 'login'
            ? 'Toca em "Entrar" pra logar. Depois é livre pra navegar.'
            : 'Tá dentro. Toca onde quiser, sem roteiro, sem restrição.'}
        </p>
      </div>

      <div style={{ position: 'relative', filter: 'drop-shadow(0 30px 60px -25px rgba(13,17,23,0.45))' }}>
        <IOSDevice width={280} height={608}>
          <div style={{ position: 'relative', height: '100%', width: '100%' }}>
            {/* login */}
            <div style={{
              position: 'absolute', inset: 0,
              opacity: view === 'login' ? 1 : 0,
              transform: view === 'login' ? 'scale(1)' : 'scale(.98)',
              transition: 'opacity .45s ease, transform .45s ease',
              pointerEvents: view === 'login' ? 'auto' : 'none',
            }}>
              <MobilePhoneLogin onLogin={doLogin} busy={busy} />
            </div>
            {/* app */}
            <div style={{
              position: 'absolute', inset: 0,
              opacity: view === 'app' ? 1 : 0,
              transform: view === 'app' ? 'scale(1)' : 'scale(1.02)',
              transition: 'opacity .45s ease, transform .45s ease',
              pointerEvents: view === 'app' ? 'auto' : 'none',
            }}>
              <MobileAppAutoTour />
            </div>
            {busy && <FaceIDScan phase="scan" />}
          </div>
        </IOSDevice>
      </div>

      {/* dica sutil */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 12px', borderRadius: 999,
        background: 'rgba(13,17,23,0.04)', color: 'var(--muted)',
        fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.04em',
      }}>
        <span style={{
          width: 5, height: 5, borderRadius: 999,
          background: stage === 'app' ? '#059669' : '#A5C9FF',
          animation: stage === 'app' ? 'none' : 'cd-dot-pulse-cyan 2.4s ease-out infinite',
        }} />
        {stage === 'app' ? 'INTERATIVO · TOCA AONDE QUISER' : 'TOQUE EM ENTRAR PRA COMEÇAR'}
      </div>

      {/* bullets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', marginTop: 4 }}>
        {[
          { i: IconCheck, t: 'Login com Face ID & senha forte', s: 'Criptografia de banco. Senha zero salva em texto puro.' },
          { i: IconBolt, t: 'Notificação na lock screen', s: 'Cliente fechou? Cai no Apple Watch ou Android antes do WhatsApp.' },
          { i: IconScreen, t: 'Funciona offline', s: 'Lança a venda no carro do cliente. Sincroniza depois.' },
        ].map((b) => (
          <div key={b.t} style={{ display: 'flex', gap: 12, padding: '0 6px' }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: '#fff', border: '0.5px solid var(--line)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, flexShrink: 0,
            }}><b.i size={17} /></div>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.015em' }}>{b.t}</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.45, marginTop: 1 }}>{b.s}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Features compactas ───────────────────────────────────────
function MobileFeatures() {
  const items = [
    // Estava tudo em "tu/teu", a três telas de distância das seções que dizem
    // "você" — e a mesma frase existe em "você" no desktop. Não é sotaque, é a
    // página falando com duas pessoas diferentes.
    { i: IconBolt, t: 'Comissão calculada na hora', s: 'Cliente pagou? O seu valor já aparece. Sem planilha, sem dúvida, sem o gerente "esquecer".' },
    { i: IconBolt, t: 'Notificação na lock screen', s: 'A venda fechou? Cai no seu celular antes do WhatsApp tocar.' },
    { i: IconTarget, t: 'Meta ao vivo', s: 'Veja quanto falta pro bônus em tempo real, sem precisar conferir no fim do mês.' },
    { i: IconClock, t: 'Follow-up automático', s: 'Cliente sumiu? O Comissa te lembra de mandar mensagem antes que ele esqueça de você.' },
    { i: IconUsers, t: 'Time vendendo junto', s: 'Ranking ao vivo, meta da equipe, churrasco do gerente quando bate.' },
  ];
  return (
    <section style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>O que ele faz</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>O que você fazia na planilha, agora acontece sozinho.</h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((b, idx) => (
          <Reveal key={b.t} delay={idx * 60}>
            <div style={{
              display: 'flex', gap: 14, padding: '16px 16px',
              background: '#fff', borderRadius: 16,
              border: '0.5px solid var(--line)',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12, flexShrink: 0,
                background: 'var(--surface-2)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20,
              }}><b.i size={17} /></div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 3 }}>{b.t}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 }}>{b.s}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Pra quem é — os três perfis (mobile) ─────────────────────────
function MobilePerfis() {
  const perfis = [
    {
      // `perfil` decide pra qual app o CTA manda (ver app-urls.js).
      perfil: 'autonomo', cta: 'Testar como autônomo',
      i: IconBolt, t: 'Vendedor autônomo',
      s: 'MEI, afiliado, infoprodutor. Hotmart, Kiwify, Eduzz, Braip, Guru. Registra manual ou por link rastreável e a venda confirmada cai no painel. Vende um a um ou roda tráfego pago com ROI por produto.',
    },
    {
      perfil: 'comissionado', cta: 'Entrar com código da empresa',
      i: IconUsers, t: 'Vendedor de empresa',
      s: 'Entra pelo link único que a empresa manda, já vinculado. Vê comissão a receber, pagas e o histórico do que é seu, em tempo real com o painel da empresa.',
    },
    {
      perfil: 'empresa', cta: 'Abrir painel da empresa',
      i: IconLayers, t: 'Empresa',
      s: 'Top vendedores, produtos atribuídos, pagar comissão na ordem que quiser, prazo de cada uma, faturamento por produto e um link de acesso pra cada vendedor.',
    },
  ];
  return (
    <section style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>Pra quem é</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>Três jeitos de usar o Comissa.</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {perfis.map((b, idx) => (
          <Reveal key={b.t} delay={idx * 60}>
            <div style={{
              display: 'flex', gap: 14, padding: '16px 16px',
              background: '#fff', borderRadius: 16,
              border: '0.5px solid var(--line)',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12, flexShrink: 0,
                background: 'var(--surface-2)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20,
              }}><b.i size={17} /></div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 3 }}>{b.t}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 }}>{b.s}</div>
                <MobilePerfilCTA perfil={b.perfil} label={b.cta} />
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// CTA do card de perfil no mobile: manda direto pro cadastro do app daquele
// perfil, sem passar pelo modal de escolha.
function MobilePerfilCTA({ perfil, label }) {
  const [indo, setIndo] = _mss(false);
  return (
    <button
      type="button"
      className="cd-btn"
      disabled={indo}
      onClick={() => { setIndo(true); window.irParaApp(perfil); }}
      style={{
        marginTop: 12, width: '100%',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        padding: '10px 12px', borderRadius: 11,
        background: 'var(--indigo-soft)', color: 'var(--indigo-text)',
        border: '0.5px solid rgba(37,99,235,0.28)',
        fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit',
        cursor: indo ? 'wait' : 'pointer',
      }}
    >
      {indo ? 'Abrindo…' : label}
      {!indo && <IconArrow size={12} stroke={1.9} />}
    </button>
  );
}

// ── Novo no Comissa (mobile) ─────────────────────────────────────
function MobileNovidades() {
  const items = [
    { i: IconClock, t: 'Previsão de recebimento', s: 'Hotmart D+30, Kiwify D+14… O Comissa calcula quando cada valor cai na conta e mostra no calendário.' },
    { i: IconTarget, t: 'Score de produto', s: 'Volume, ticket médio, conversão do link e tendência de 2 semanas viram um score automático por produto.' },
    { i: IconGrid, t: 'Vagas por produto', s: 'Limite de vagas com barra de progresso, aviso nas últimas 5 e link que fecha sozinho quando esgota.' },
    { i: IconRoute, t: 'Link rastreável', s: 'Sem acesso ao gateway? Gera o seu link por oferta e acompanha clique e conversão.' },
    { i: IconCircle, t: 'Cidade pelo DDD', s: 'O telefone do cliente vira cidade no mapa. Brasil por DDD, LATAM e Espanha por código de país.' },
    { i: IconSearch, t: 'Diagnóstico do dia', s: 'Quanto entrou ontem, o que vem essa semana e qual produto precisa de atenção, logo na entrada.' },
  ];
  return (
    <section style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>Novo no Comissa</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>Saiu do forno.</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((b, idx) => (
          <Reveal key={b.t} delay={idx * 60}>
            <div style={{
              display: 'flex', gap: 14, padding: '16px 16px',
              background: '#fff', borderRadius: 16,
              border: '0.5px solid var(--line)',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12, flexShrink: 0,
                background: 'var(--surface-2)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20,
              }}><b.i size={17} /></div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 3 }}>{b.t}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 }}>{b.s}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Ranking equipe — pódium nativo mobile (sem scale, sem corte) ─
function MobilePodium() {
  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: 140, 2: 104, 3: 76 };
  const order = [2, 1, 3];
  const barDelay = { 1: 150, 2: 0, 3: 300 };
  const avDelay  = { 1: 880, 2: 740, 3: 1020 };

  const rootRef = _msr(null);
  const [play, setPlay] = _mss(false);
  _mse(() => {
    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',
      background: '#fff', border: '0.5px solid var(--line)', borderRadius: 22,
      boxShadow: '0 24px 50px -28px rgba(13,17,23,0.18)',
      padding: '18px 14px 20px', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px' }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Ranking · Maio</div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--muted)',
          letterSpacing: '0.08em', display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: 999, background: '#059669',
            animation: 'cd-cursor-ripple 1.6s ease-out infinite',
          }} />
          AO VIVO
        </div>
      </div>

      <div style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        gap: 10, marginTop: 20, height: 200, padding: '0 4px',
      }}>
        {order.map((pos) => {
          const p = podium.find(x => x.pos === pos);
          const isFirst = pos === 1;
          return (
            <div key={pos} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              flex: '1 1 0', minWidth: 0,
            }}>
              <div style={{
                marginBottom: 8, position: 'relative',
                transform: play ? 'translateY(0)' : 'translateY(-260px)',
                opacity: play ? 1 : 0,
                transition: `transform 1.05s cubic-bezier(.34,1.56,.4,1) ${avDelay[pos]}ms, opacity .45s ease ${avDelay[pos]}ms`,
                willChange: 'transform',
              }}>
                {isFirst && (
                  <span style={{
                    position: 'absolute', top: -18, left: '50%',
                    transform: 'translateX(-50%)', fontSize: 18,
                  }}><IconStar size={11} /></span>
                )}
                <Avatar initials={p.ini} hue={p.hue} size={isFirst ? 44 : 36} />
              </div>
              <div style={{
                fontSize: 12, fontWeight: 500, letterSpacing: '-0.005em',
                opacity: play ? 1 : 0,
                transition: `opacity .5s ease ${avDelay[pos] + 320}ms`,
              }}>{p.n}</div>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)',
                marginBottom: 6,
                opacity: play ? 1 : 0,
                transition: `opacity .5s ease ${avDelay[pos] + 380}ms`,
              }}>{p.v}</div>
              <div style={{
                width: '100%', maxWidth: 72, height: play ? heights[pos] : 0,
                background: isFirst
                  ? 'linear-gradient(180deg, #2563EB, #38BDF8)'
                  : 'linear-gradient(180deg, rgba(13,17,23,0.85), rgba(13,17,23,0.65))',
                borderRadius: '10px 10px 0 0',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'flex-start',
                padding: '10px 0', color: '#fff',
                boxShadow: '0 -6px 14px -8px rgba(13,17,23,0.3)',
                transition: `height 1.1s cubic-bezier(.2,.7,.2,1) ${barDelay[pos]}ms`,
                overflow: 'hidden',
              }}>
                <div style={{
                  fontSize: 22, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.04em',
                  opacity: play ? 1 : 0,
                  transition: `opacity .45s ease ${barDelay[pos] + 740}ms`,
                }}>{pos}</div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 8.5, marginTop: 3,
                  opacity: play ? .75 : 0, letterSpacing: '0.06em',
                  transition: `opacity .45s ease ${barDelay[pos] + 880}ms`,
                }}>{p.m}%</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function MobileRanking() {
  return (
    <section style={{
      padding: '40px 16px',
      background: 'linear-gradient(180deg, transparent, rgba(234,242,254,0.5) 50%, transparent)',
      borderTop: '0.5px solid var(--line)',
      borderBottom: '0.5px solid var(--line)',
    }}>
      <div style={{ padding: '0 4px', marginBottom: 18 }}>
        <Eyebrow>Equipe</Eyebrow>
        <h2 style={{
          fontSize: 30, lineHeight: 1.0, letterSpacing: '-0.035em',
          fontWeight: 600, margin: '12px 0 10px',
        }}>
          Quem vende mais?<br />
          <span style={{ color: 'var(--muted)' }}>Todo mundo sabe.</span>
        </h2>
        <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--muted)', margin: 0 }}>
          Ranking ao vivo, comissão de cada um, progresso pra meta da equipe.
        </p>
      </div>

      <Reveal>
        <MobilePodium />
      </Reveal>

      <ul style={{ listStyle: 'none', padding: 0, margin: '18px 4px 0' }}>
        {[
          { i: <IconTarget size={13} />, l: 'Metas individuais e da equipe' },
          { i: <IconMoney size={13} />,  l: 'Comissão de cada vendedor, transparente' },
          { i: <IconStar size={13} />,   l: 'Bônus por meta batida, calculado automágico' },
          { i: <IconUsers size={13} />,  l: 'Visão do gerente: pipeline do time' },
        ].map((x) => (
          <li key={x.l} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '10px 0', borderTop: '0.5px solid var(--line)' }}>
            <span style={{
              width: 24, height: 24, borderRadius: 7,
              background: 'var(--indigo-soft)', color: 'var(--indigo)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>{x.i}</span>
            <span style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>{x.l}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ── Depoimentos (stacked) ────────────────────────────────────
function MobileQuotes() {
  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 (
    <section style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>Quem vende com a gente</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>Carro, curso, relógio, imóvel. Tudo num só painel.</h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {quotes.map((q, i) => (
          <Reveal key={i} delay={i * 80}>
            <figure style={{
              margin: 0, background: '#fff', border: '0.5px solid var(--line)', borderRadius: 16,
              padding: 20,
            }}>
              <div style={{ display: 'flex', gap: 1, marginBottom: 12 }}>
                {[0,1,2,3,4].map((s) => (<IconStar key={s} size={12} fill="#F59E0B" stroke={0} />))}
              </div>
              <blockquote style={{
                margin: 0, fontSize: 14.5, lineHeight: 1.5,
                letterSpacing: '-0.005em', color: 'var(--ink)',
              }}>“{q.q}”</blockquote>
              <figcaption style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 16 }}>
                <Avatar initials={q.n.split(' ').map(x => x[0]).join('')} hue={q.hue} size={28} />
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{q.n}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>{q.r}</div>
                </div>
              </figcaption>
            </figure>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Antes vs Agora ───────────────────────────────────────────
function MobileBeforeAfter() {
  const [side, setSide] = _mss('antes');
  _mse(() => {
    const t = setInterval(() => setSide((s) => (s === 'antes' ? 'agora' : 'antes')), 3600);
    return () => clearInterval(t);
  }, []);

  const blocks = {
    antes: {
      title: 'Domingo de noite',
      sub: 'fechando a planilha',
      bg: 'linear-gradient(160deg, #FFF4E2 0%, #FFE9C9 100%)',
      accent: '#F59E0B',
      lines: [
        { i: IconGrid, t: '"Quanto eu vendi mesmo?"', s: 'rolando o Excel pra cima e pra baixo' },
        { i: IconCmd, t: 'Calculadora aberta', s: '7% de 12.480 vezes 3... 4... ' },
        { i: IconCircle, t: '"O gerente errou de novo"', s: '"essa venda da Marina foi minha"' },
        { i: IconClock, t: '23h47', s: 'amanhã tem reunião 8h' },
      ],
    },
    agora: {
      title: 'Domingo de noite',
      sub: 'com o Comissa',
      bg: 'linear-gradient(160deg, #EFF6FF 0%, #DCE9FB 100%)',
      accent: '#A5C9FF',
      lines: [
        { i: IconBolt, t: 'Push: "+R$ 599 caiu agora"', s: 'cliente fechou via Pix, comissão na conta' },
        { i: IconTarget, t: 'Meta do mês: 87%', s: 'falta R$ 2.080 pro bônus' },
        { i: IconUsers, t: 'Ranking ao vivo do time', s: 'Marina lidera com R$ 32k' },
        { i: IconLayers, t: '23h47', s: 'tô no sofá. tudo certo.' },
      ],
    },
  };

  const b = blocks[side];

  return (
    <section style={{ padding: '40px 16px 8px' }}>
      <div style={{ padding: '0 4px', marginBottom: 18 }}>
        <Eyebrow>Antes vs Agora</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>O fim de semana que <span style={{ color: 'var(--indigo)', fontStyle: 'italic', fontWeight: 500 }}>volta a ser seu</span>.</h2>
        <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>
          Toque pra trocar entre os dois, ou deixa rodar.
        </p>
      </div>

      {/* toggle */}
      <div style={{
        display: 'flex', gap: 4, padding: 4,
        background: 'rgba(13,17,23,0.04)', borderRadius: 999,
        border: '0.5px solid var(--line)', marginBottom: 14,
      }}>
        {['antes', 'agora'].map((k) => (
          <button key={k} onClick={() => setSide(k)} className="cd-cta" style={{
            flex: 1, padding: '9px 12px', borderRadius: 999, border: 0,
            background: side === k ? 'var(--ink)' : 'transparent',
            // `--ink` é claro no tema escuro: a tinta por cima tem que ser
            // `--on-ink`, não `#fff`, senão o botão ativo fica ilegível.
            color: side === k ? 'var(--on-ink)' : 'var(--muted)',
            fontWeight: 500, fontSize: 13, letterSpacing: '-0.005em',
            cursor: 'pointer', fontFamily: 'inherit',
            textTransform: 'capitalize',
            transition: 'background-color .25s ease, color .25s ease',
          }}>{k}</button>
        ))}
      </div>

      {/* card animado */}
      <div key={side} style={{
        position: 'relative', borderRadius: 22, overflow: 'hidden',
        background: b.bg, color: '#fff',
        padding: '22px 20px 24px',
        boxShadow: '0 20px 40px -20px rgba(0,0,0,0.4)',
        animation: 'intro-fade-up 500ms cubic-bezier(.2,.7,.2,1) both',
      }}>
        <div aria-hidden style={{
          position: 'absolute', right: -60, top: -60,
          width: 220, height: 220, borderRadius: 999,
          background: `radial-gradient(closest-side, ${b.accent}33, transparent 70%)`,
          filter: 'blur(12px)', pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{
            fontSize: 11, fontFamily: 'var(--mono)',
            letterSpacing: '0.08em', color: b.accent,
            textTransform: 'uppercase', marginBottom: 4,
          }}>{b.sub}</div>
          <div style={{
            fontSize: 22, fontWeight: 600, letterSpacing: '-0.025em',
            marginBottom: 18,
          }}>{b.title}</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {b.lines.map((l, i) => (
              <div key={l.t} style={{
                display: 'flex', gap: 12,
                opacity: 0, transform: 'translateY(8px)',
                animation: `intro-fade-up 500ms cubic-bezier(.2,.7,.2,1) ${i * 90 + 180}ms both`,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 9, flexShrink: 0,
                  background: 'rgba(13,17,23,0.08)',
                  border: '0.5px solid rgba(13,17,23,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16,
                }}><l.i size={17} /></div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em' }}>{l.t}</div>
                  <div style={{ fontSize: 12, color: 'rgba(13,17,23,0.6)', marginTop: 1 }}>{l.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Pricing stack ────────────────────────────────────────────
function MobilePricing() {
  // Espelha os planos do app (i18n.js → plan_*), igual ao desktop.
  const plans = [
    {
      n: 'Comissa Base', p: 'Grátis', s: 'por 14 dias', d: 'Pra começar sem custo',
      f: ['Até 3 links rastreáveis', 'Até 50 compradores', 'Até 4 produtos', 'Dashboard do mês atual'],
      cta: 'Começar grátis', onClick: () => window.openModal('signup'),
    },
    {
      n: 'Comissa Pro', p: 'R$ 47,90', s: '/mês', d: 'Pra quem vende todo dia',
      f: ['Até 25 links rastreáveis', 'Compradores ilimitados', 'Até 15 produtos', 'Previsão de recebimento', 'Histórico completo'],
      cta: 'Testar 14 dias grátis', highlight: true, onClick: () => window.openModal('signup'),
    },
    {
      n: 'Comissa Max', p: 'R$ 97,90', s: '/mês', d: 'Times e operações maiores',
      f: ['Links e produtos ilimitados', 'Alerta de produto parado', 'Exportação CSV/PDF', 'Suporte via WhatsApp'],
      cta: 'Falar com a gente', onClick: () => window.openModal('contact'),
    },
  ];
  return (
    <section style={{ padding: '32px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>Preços</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 6px',
        }}>Começa de graça. Cresce quando faturar.</h2>
        <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>
          Sem fidelidade. Sem letrinha miúda.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {plans.map((p, i) => (
          <Reveal key={p.n} delay={i * 60}>
            <div style={{
              // era '#fff' com texto var(--ink): branco sobre branco no tema
              // escuro. Agora segue o mesmo tratamento do card do desktop.
              background: p.highlight
                ? 'linear-gradient(165deg, #F0F7FF 0%, #FFFFFF 100%)'
                : 'var(--surface)',
              color: 'var(--ink)',
              border: p.highlight ? '1px solid rgba(96,165,250,0.5)' : '0.5px solid var(--line)',
              boxShadow: p.highlight ? '0 24px 50px -30px rgba(37,99,235,0.55)' : 'none',
              borderRadius: 18, padding: 22, position: 'relative',
            }}>
              {p.highlight && (
                <span style={{
                  position: 'absolute', top: -10, left: 20,
                  padding: '3px 9px', borderRadius: 999,
                  background: 'var(--indigo)', color: '#fff',
                  fontSize: 10.5, fontWeight: 500, letterSpacing: '-0.005em',
                }}>Mais escolhido</span>
              )}
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4, opacity: p.highlight ? 0.7 : 1 }}>{p.n}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                <span className="cd-mono" style={{
                  fontSize: 33, fontWeight: 500, letterSpacing: '-0.035em',
                  fontVariantNumeric: 'tabular-nums',
                }}>{p.p}</span>
                {p.s && <span style={{ fontSize: 13, color: p.highlight ? 'rgba(13,17,23,0.55)' : 'var(--muted)' }}>{p.s}</span>}
              </div>
              <div style={{ fontSize: 13, color: p.highlight ? 'rgba(13,17,23,0.6)' : 'var(--muted)', marginBottom: 16 }}>{p.d}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, marginBottom: 18 }}>
                {p.f.map((x) => (
                  <li key={x} style={{
                    display: 'flex', gap: 8, alignItems: 'flex-start', padding: '5px 0',
                    fontSize: 13, color: p.highlight ? 'rgba(13,17,23,0.85)' : 'var(--ink-2)',
                  }}>
                    <span style={{ marginTop: 4, color: p.highlight ? '#A5C9FF' : 'var(--indigo)' }}>
                      <IconCheck size={12} stroke={2.2} />
                    </span>
                    {x}
                  </li>
                ))}
              </ul>
              <button onClick={p.onClick} className="cd-cta" style={{
                width: '100%', padding: '12px 14px', borderRadius: 999,
                border: '0.5px solid',
                borderColor: p.highlight ? 'rgba(13,17,23,0.18)' : 'var(--line)',
                background: p.highlight ? '#fff' : 'rgba(13,17,23,0.05)',
                color: p.highlight ? '#FBFCFD' : 'var(--ink)',
                fontWeight: 500, fontSize: 14, cursor: 'pointer', fontFamily: 'inherit',
              }}>{p.cta}</button>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ── Palavra ciclando (igual desktop CyclingWord) ─────────────
function MobileCyclingWord({ words, interval = 2400 }) {
  const [i, setI] = _mss(0);
  const [phase, setPhase] = _mss('in');
  _mse(() => {
    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(-12px)',
      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>
  );
}

// ── CTA final ────────────────────────────────────────────────
function MobileFinalCTA() {
  const words = ['Vender.', 'Lucrar.', 'Comissar.', 'Crescer.', 'Bater meta.', 'Faturar.', 'Receber direito.'];
  return (
    <section style={{ padding: '36px 16px 24px' }}>
      <Reveal>
        <div style={{
          background: 'linear-gradient(135deg, #FBFCFD 0%, #F4F8FB 70%, #DCE9FB 100%)',
          color: '#fff', borderRadius: 22, padding: '36px 22px',
          position: 'relative', overflow: 'hidden', textAlign: 'center',
        }}>
          <div aria-hidden style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'radial-gradient(420px 200px at 50% -10%, rgba(37,99,235,0.5), transparent 60%), radial-gradient(360px 200px at 30% 120%, rgba(56,189,248,0.35), transparent 60%)',
          }} />
          <div style={{ position: 'relative' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '5px 12px 5px 10px', borderRadius: 999,
              background: 'rgba(13,17,23,0.1)', border: '0.5px solid rgba(13,17,23,0.22)',
              fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.04em',
              color: '#fff', marginBottom: 18, textTransform: 'uppercase',
              backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
            }}>
              <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: 36, lineHeight: 1.0, letterSpacing: '-0.035em',
              fontWeight: 600, margin: '0 0 16px',
            }}>
              Pare de calcular<br />
              comissão na mão.<br />
              Comece a <MobileCyclingWord words={words} />
            </h2>
            <p style={{
              fontSize: 14.5, lineHeight: 1.5, margin: '0 0 22px',
              color: 'rgba(13,17,23,0.65)',
            }}>
              Dois minutos pra configurar. Importe vendas de planilha, Hotmart, Kiwify ou Mercado Pago em um clique.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button onClick={() => window.openModal('signup')} className="cd-cta" style={{
                padding: '14px 22px', borderRadius: 999, border: 0,
                background: '#fff', color: '#FBFCFD',
                fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em',
                cursor: 'pointer', fontFamily: 'inherit',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                Criar conta grátis
                <IconArrow size={16} stroke={1.8} />
              </button>
              <button onClick={() => window.openModal('login')} className="cd-cta" style={{
                padding: '14px 22px', borderRadius: 999,
                background: 'rgba(13,17,23,0.06)', color: '#fff',
                border: '0.5px solid rgba(13,17,23,0.18)',
                fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em',
                cursor: 'pointer', fontFamily: 'inherit',
              }}>
                Já tenho conta
              </button>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Footer compacto ──────────────────────────────────────────
function MobileFooter() {
  return (
    <footer style={{
      padding: '24px 20px 32px',
      borderTop: '0.5px solid var(--line)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <Wordmark size={16} />
      <p style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.5, margin: 0 }}>
        O painel pra vendedor parar de calcular comissão na mão.
      </p>
      <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--muted)' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); window.openModal('contact'); }} style={{ color: 'inherit' }}>Contato</a>
        <span>·</span>
        <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit' }}>Termos</a>
        <span>·</span>
        <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit' }}>Privacidade</a>
      </div>
      <div style={{ fontSize: 11, color: 'var(--muted-2)', marginTop: 4 }}>
        © {new Date().getFullYear()} Comissa
      </div>
    </footer>
  );
}

// ── Composição final ─────────────────────────────────────────
// ── As duas pontas (mobile) ──────────────────────────────────
// O desktop conta isso com dois painéis lado a lado e uma linha atravessando
// o vão. No celular não existe "lado a lado", e encolher as duas capturas pra
// 355px de largura entrega texto de 5px — a tela viraria enfeite ilegível.
// Então aqui a cena é o ARGUMENTO, não o screenshot: o formulário que se
// preenche sozinho em cima, a linha descendo, e a empresa avisada embaixo.
// Mesmo relógio do desktop (`useRelayVenda`), então é literalmente a mesma
// venda atravessando.
function MobDuasPontas() {
  const { venda, fase } = useRelayVenda();
  const registrado = fase >= 4;
  const chegou = fase >= 5;

  const cartao = {
    background: '#fff', borderRadius: 16, padding: 16,
    border: '0.5px solid var(--line)',
  };

  return (
    <section id="m-pontas" style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>As duas pontas</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 8px',
        }}>Um número só. Ninguém tem a própria versão.</h2>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--muted)', margin: 0 }}>
          Você registra a venda. No segundo seguinte ela já está no total que a empresa
          vai pagar, com o mesmo valor e a mesma conta por trás.
        </p>
      </div>

      <Reveal>
        <div style={{ ...cartao, border: '1px solid rgba(37,99,235,0.28)' }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 10, marginBottom: 13,
          }}>
            <span style={{ fontSize: 13.5, fontWeight: 600 }}>Nova venda</span>
            <span className="cd-mono" style={{
              fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--indigo)',
            }}>do link</span>
          </div>

          <div style={{ display: 'grid', gap: 7 }}>
            {[
              ['Produto', venda ? venda.produto : '—'],
              ['Valor', venda ? venda.bruto : '—'],
              ['Comissão', venda ? `${venda.taxa} · ${venda.com}` : '—'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{
                  fontSize: 9.5, color: 'var(--muted-2)', width: 58, flexShrink: 0,
                  letterSpacing: '0.05em', textTransform: 'uppercase',
                }}>{k}</span>
                <span className="cd-mono" style={{
                  flex: 1, minWidth: 0, fontSize: 11.5, color: 'var(--ink-2)',
                  background: 'var(--surface-2)', borderRadius: 7, padding: '6px 9px',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{v}</span>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 12, borderRadius: 10, padding: '10px 0', textAlign: 'center',
            fontSize: 13, fontWeight: 600,
            background: fase >= 3 ? 'var(--indigo)' : 'var(--indigo-soft)',
            color: fase >= 3 ? '#fff' : 'var(--indigo-text)',
            transition: 'background .3s ease, color .3s ease',
          }}>
            {registrado ? 'Venda registrada' : 'Registrar venda'}
          </div>
        </div>
      </Reveal>

      {/* A linha, na vertical: no celular o dado desce, não atravessa. */}
      <div aria-hidden style={{
        height: 58, display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', gap: 7,
      }}>
        <div style={{
          position: 'relative', width: 2, flex: 1, borderRadius: 2,
          background: 'linear-gradient(180deg, rgba(37,99,235,.45), rgba(5,150,105,.45))',
          opacity: fase >= 3 ? 1 : 0.25, transition: 'opacity .35s ease',
        }}>
          <span style={{
            position: 'absolute', left: -4, top: chegou ? 'calc(100% - 10px)' : 0,
            width: 10, height: 10, borderRadius: 999,
            background: chegou ? '#059669' : 'var(--indigo)',
            boxShadow: `0 0 0 4px ${chegou ? 'rgba(5,150,105,.18)' : 'rgba(37,99,235,.18)'}`,
            opacity: fase >= 3 ? 1 : 0,
            transition: 'top .9s cubic-bezier(.4,.1,.2,1), background .5s ease, box-shadow .5s ease, opacity .3s ease',
          }} />
        </div>
        <span className="cd-mono" style={{
          fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--muted-2)', opacity: fase >= 3 ? 1 : 0, transition: 'opacity .35s ease',
        }}>a mesma venda</span>
      </div>

      <Reveal delay={80}>
        <div style={{ ...cartao, border: '1px solid rgba(5,150,105,0.28)' }}>
          <div className="cd-mono" style={{
            fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--green-text)', marginBottom: 12,
          }}>Comissa Empresa · notificações</div>

          <div style={{
            display: 'flex', alignItems: 'center', gap: 11,
            opacity: chegou ? 1 : 0.25,
            transform: chegou ? 'none' : 'translateY(-6px)',
            transition: 'opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1)',
          }}>
            <span style={{
              width: 32, height: 32, borderRadius: 999, flexShrink: 0,
              background: 'rgba(5,150,105,0.12)', color: 'var(--green-text)',
              display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
            }}>AS</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3 }}>
                Arthur vendeu {venda ? venda.produto : ''}
              </div>
              <div className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 3 }}>
                {venda ? `${venda.bruto} · a pagar ${venda.com}` : ''}
              </div>
            </div>
          </div>

          <div style={{
            marginTop: 13, paddingTop: 12, borderTop: '0.5px solid var(--line-2)',
            fontSize: 12.5, lineHeight: 1.5, color: 'var(--muted)',
          }}>
            Já entrou no total do ciclo. Ninguém digitou de novo, e nenhum dos dois lados
            precisa conferir a planilha do outro.
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Depois do fechamento: parcelas de boleto (mobile) ────────
// Não existia no celular. O visitante que vende parcelado — corretor, carro,
// imóvel, curso em 6x — chegava no preço sem nunca ter lido a resposta da
// única pergunta dele: "quando essa comissão fica minha?".
function MobParcelas() {
  const PARCELAS = [
    { n: '1/6', quando: '10/06', st: 'paga',     com: '+R$ 75' },
    { n: '2/6', quando: '10/07', st: 'paga',     com: '+R$ 75' },
    { n: '3/6', quando: '10/08', st: 'atrasada', com: 'retida' },
    { n: '4/6', quando: '10/09', st: 'aberta',   com: 'a receber' },
    { n: '5/6', quando: '10/10', st: 'aberta',   com: 'a receber' },
    { n: '6/6', quando: '10/11', st: 'aberta',   com: 'a receber' },
  ];
  const COMO = [
    ['O plano nasce da venda', 'Você marca 6x no boleto e o Comissa cria as seis parcelas com data e valor. Você não digita nenhuma.'],
    ['A comissão segue o dinheiro', 'Cada parcela paga libera a sua fatia dela. Nada de comissão cheia na assinatura pra ser estornada se o cliente parar no meio.'],
    ['A baixa não duplica', 'Quem avisa o pagamento é a plataforma de cobrança, e cada parcela é única por venda e número.'],
    ['Atrasou? Fica visível', 'A parcela vencida entra em vermelho, a cobrança é reenviada e a comissão fica retida até o boleto ser pago.'],
  ];
  const cor = (st) => st === 'paga' ? 'var(--green-text)' : st === 'atrasada' ? 'var(--rose-text)' : 'var(--indigo-text)';

  return (
    <section id="m-pos-venda" style={{ padding: '40px 20px 20px' }}>
      <div style={{ marginBottom: 22 }}>
        <Eyebrow>Depois do fechamento</Eyebrow>
        <h2 style={{
          fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.03em',
          fontWeight: 600, margin: '12px 0 8px',
        }}>A venda fecha. O resto anda sozinho.</h2>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--muted)', margin: 0 }}>
          Venda parcelada é comissão parcelada — e você vê cada pedaço chegando.
        </p>
      </div>

      <Reveal>
        <div style={{
          background: '#fff', borderRadius: 16, padding: 16,
          border: '0.5px solid var(--line)',
        }}>
          <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--muted)', marginBottom: 14 }}>
            Venda de <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>R$ 4.500 em 6x no
            boleto</strong>, comissão de 10% — R$ 450 no total, R$ 75 por parcela paga.
          </div>

          <div style={{ display: 'grid', gap: 6 }}>
            {PARCELAS.map((p) => (
              <div key={p.n} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 11px', borderRadius: 10,
                background: p.st === 'atrasada' ? 'rgba(224,82,82,0.07)' : 'var(--surface-2)',
                border: `0.5px solid ${p.st === 'atrasada' ? 'rgba(224,82,82,0.28)' : 'var(--line-2)'}`,
              }}>
                <span className="cd-mono" style={{ fontSize: 11, color: 'var(--muted-2)', width: 26 }}>{p.n}</span>
                <span style={{ fontSize: 12.5, fontWeight: 500, flex: 1 }}>R$ 750,00</span>
                <span className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted-2)' }}>{p.quando}</span>
                <span style={{
                  fontSize: 11, fontWeight: 600, minWidth: 58, textAlign: 'right',
                  color: cor(p.st),
                }}>{p.com}</span>
              </div>
            ))}
          </div>

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

          <div style={{
            marginTop: 13, paddingTop: 12, borderTop: '0.5px solid var(--line-2)',
            fontSize: 11.5, lineHeight: 1.5, color: 'var(--muted-2)',
          }}>
            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>
      </Reveal>

      <div style={{ display: 'grid', gap: 10, marginTop: 10 }}>
        {COMO.map(([t, d], i) => (
          <Reveal key={t} delay={60 + i * 60}>
            <div style={{
              display: 'flex', gap: 13, padding: '15px 16px',
              background: '#fff', borderRadius: 16, border: '0.5px solid var(--line)',
            }}>
              <span className="cd-mono" style={{
                fontSize: 11, color: 'var(--indigo)', flexShrink: 0, paddingTop: 2,
                fontVariantNumeric: 'tabular-nums',
              }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.015em' }}>{t}</div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--muted)', marginTop: 4 }}>{d}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function MobileSite() {
  return (
    <div className="cd" style={{
      width: '100%', minHeight: '100vh', background: 'var(--bg)',
      overflowX: 'hidden',
    }}>
      <MobileNavBar />
      <MobileHero />

      {/* A faixa de plataformas saiu a pedido, junto com a do desktop.
          `MobPlataformas` segue definida em narrative.jsx. */}

      {/* Narrativa (narrative.jsx) — a mesma do desktop, em coluna:
          dor → diagnóstico → virada → jornada → plataformas. */}
      <MobAgitacao />
      <MobProblemaDiagnostico />
      <MobDiferenciador />
      <MobJornada />

      <MobileTicker />
      <MobileCustomerStrip />

      {/* As duas pontas entram aqui, mesma posição do desktop: depois das
          plataformas e da prova social, antes do tour do app. */}
      <MobDuasPontas />

      <MobileAppShowcase />

      {/* Pós-venda / parcelas: não existia no celular. */}
      <MobParcelas />

      <MobileFeatures />
      <MobilePerfis />
      <MobileNovidades />
      <MobileRanking />
      <MobileQuotes />
      <MobileBeforeAfter />
      <MobilePricing />
      <MobGarantiaFaq />
      <MobileFinalCTA />
      <MobileFooter />
    </div>
  );
}

Object.assign(window, { useDevice, MobileSite });