// mobile.jsx — Comissa no celular + frame com identidade do app

const { useState: _ms, useEffect: _me, useRef: _ur } = React;

// ─────────────────────────────────────────────────────────────
// Ícones da tab bar (estilo SF Symbols line, 22px)
// ─────────────────────────────────────────────────────────────
const TabIcon = ({ kind, active = false, size = 22 }) => {
  const sw = active ? 2 : 1.7;
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor',
    strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  if (kind === 'home') return (
    <svg {...props}>
      <path d="M3 11.5L12 3.5l9 8" />
      <path d="M5 10v9.5a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1V10" />
    </svg>
  );
  if (kind === 'vendas') return (
    <svg {...props}>
      <circle cx="12" cy="12" r="9" />
      <path d="M15 8.5h-4.25a2.25 2.25 0 100 4.5h2.5a2.25 2.25 0 110 4.5H9" />
      <path d="M12 6.5v1.5M12 16v1.5" />
    </svg>
  );
  if (kind === 'metas') return (
    <svg {...props}>
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="5" />
      <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none" />
    </svg>
  );
  if (kind === 'perfil') return (
    <svg {...props}>
      <circle cx="12" cy="8.5" r="3.8" />
      <path d="M4.5 20.5c1-3.6 4.2-6 7.5-6s6.5 2.4 7.5 6" />
    </svg>
  );
  return null;
};

// ─────────────────────────────────────────────────────────────
// MobileApp — Comissa no iPhone (tabs Início / Vendas / Metas / Perfil)
// ─────────────────────────────────────────────────────────────
const M_FONT = "'Geist', -apple-system, system-ui, sans-serif";
const M_MONO = "'Geist Mono', ui-monospace, monospace";

const M_VENDAS = [
  { t: 'Rolex Submariner',  c: 'Pedro Marques',  v: 78000,  com: 6260, status: '#059669', day: 'Hoje · 14:32' },
  { t: 'Curso Trading Pro', c: 'Ana Souza',      v: 1997,   com: 599,  status: '#F59E0B', day: 'Hoje · 11:08' },
  { t: 'Honda Civic 2024',  c: 'Vista Verde',    v: 142000, com: 7100, status: '#94A3B4', day: 'Ontem' },
  { t: 'iPhone 16 Pro',     c: 'Mariana R.',     v: 9499,   com: 475,  status: '#059669', day: 'Ontem' },
  { t: 'Apto 2Q Pinheiros', c: 'Família Lima',   v: 580000, com: 17400, status: '#F59E0B', day: '2 dias' },
  { t: 'Curso Inglês',      c: '24 alunos',      v: 47928,  com: 9586, status: '#059669', day: '3 dias' },
];

function MobileHomeView() {
  // valores ao vivo (driftam devagar, tween suave na exibição)
  const comissao = window.useDrift({
    start: 12840, min: 12700, max: 13620,
    stepMin: 8, stepMax: 38, upBias: 0.74, intervalMs: 2200,
  });
  const vendas = window.useDrift({
    start: 12, min: 12, max: 18,
    stepMin: 0.15, stepMax: 0.55, upBias: 0.62, intervalMs: 2800,
  });
  const ticket = window.useDrift({
    start: 6500, min: 6280, max: 6920,
    stepMin: 6, stepMax: 22, upBias: 0.55, intervalMs: 2600,
  });
  const conv = window.useDrift({
    start: 34, min: 32, max: 36,
    stepMin: 0.05, stepMax: 0.22, upBias: 0.5, intervalMs: 3000,
  });

  const META = 16000;
  const pct = Math.min(100, (comissao / META) * 100);
  const falta = Math.max(0, META - comissao);
  const TN = window.TweenedNumber;
  const brl = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR');
  const brlk = (n) => 'R$ ' + (n / 1000).toFixed(1).replace('.', ',') + 'k';

  return (
    <React.Fragment>
      {/* header */}
      <div style={{ padding: '56px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12.5, color: 'rgba(13,17,23,0.55)' }}>Olá, Marina</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 1 }}>Hoje é dia de fechar</div>
          </div>
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: 'linear-gradient(135deg, hsl(22 85% 62%), hsl(340 70% 55%))',
            color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 600, fontSize: 13, border: '2px solid #fff',
            boxShadow: '0 2px 6px rgba(0,0,0,.1)',
          }}>MS</div>
        </div>
      </div>

      {/* card comissão */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{
          borderRadius: 22, padding: 20, color: '#fff', position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, #2563EB 0%, #38BDF8 100%)',
          boxShadow: '0 14px 36px -10px rgba(37,99,235,0.45)',
        }}>
          <div style={{
            position: 'absolute', right: -40, top: -40,
            width: 180, height: 180, borderRadius: 999,
            background: 'radial-gradient(closest-side, rgba(13,17,23,0.25), transparent)',
          }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontSize: 11.5, opacity: .8, letterSpacing: '0.04em' }}>COMISSÃO · MAIO</span>
            <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>
          <div style={{
            fontSize: 38, fontWeight: 700, letterSpacing: '-0.035em', marginTop: 4, lineHeight: 1,
            fontVariantNumeric: 'tabular-nums',
          }}>
            <TN value={comissao} ms={1400} format={brl} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 12 }}>
            <span style={{ padding: '2px 7px', borderRadius: 99, background: 'rgba(13,17,23,0.18)', fontWeight: 500 }}>↑ +24%</span>
            <span style={{ opacity: .75 }}>vs abril</span>
          </div>
          <div style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: .85, marginBottom: 6 }}>
              <span>Meta de 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)',
              }} />
            </div>
            <div style={{ fontSize: 11, opacity: .8, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>
              Faltam <TN value={falta} ms={1400} format={brl} />. Você consegue.
            </div>
          </div>
        </div>
      </div>

      {/* mini KPIs */}
      <div style={{ padding: '14px 20px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[
          { l: 'Vendas', v: vendas, fmt: (n) => Math.round(n).toString(),  d: '+3 hoje' },
          { l: 'Ticket', v: ticket, fmt: brlk,                              d: '+R$ 380' },
          { l: 'Conv.',  v: conv,   fmt: (n) => Math.round(n) + '%',        d: '−2pp' },
        ].map((k) => (
          <div key={k.l} style={{
            background: '#fff', borderRadius: 14, padding: '10px 12px',
            border: '0.5px solid rgba(13,17,23,0.06)',
          }}>
            <div style={{ fontSize: 10.5, color: 'rgba(13,17,23,0.55)' }}>{k.l}</div>
            <div style={{
              fontSize: 16, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 1,
              fontVariantNumeric: 'tabular-nums',
            }}>
              <TN value={k.v} ms={1000} format={k.fmt} />
            </div>
            <div style={{ fontSize: 9.5, color: 'rgba(13,17,23,0.45)', marginTop: 1 }}>{k.d}</div>
          </div>
        ))}
      </div>

      {/* vendas recentes */}
      <div style={{ padding: '18px 20px 28px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>Vendas recentes</div>
          <div style={{ fontSize: 12, color: '#2563EB', fontWeight: 500 }}>Ver tudo</div>
        </div>
        <div style={{ background: '#fff', borderRadius: 16, border: '0.5px solid rgba(13,17,23,0.06)', overflow: 'hidden' }}>
          {M_VENDAS.slice(0, 4).map((v, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.06)' : 'none',
            }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: v.status, 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={{ fontSize: 11.5, color: 'rgba(13,17,23,0.55)', marginTop: 1 }}>{v.c}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '-0.005em', fontFamily: M_MONO }}>
                  R$ {v.v.toLocaleString('pt-BR')}
                </div>
                <div style={{ fontSize: 11, color: '#2563EB', marginTop: 1, fontFamily: M_MONO }}>
                  +R$ {v.com.toLocaleString('pt-BR')}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function MobileVendasView() {
  const [filter, setFilter] = _ms('todas');
  const filtros = [
    { k: 'todas',    l: 'Todas'  },
    { k: 'abertas',  l: 'Abertas'  },
    { k: 'pagas',    l: 'Pagas' },
  ];
  const filtered = filter === 'pagas'
    ? M_VENDAS.filter((v) => v.status === '#059669')
    : filter === 'abertas'
    ? M_VENDAS.filter((v) => v.status !== '#059669')
    : M_VENDAS;
  return (
    <React.Fragment>
      <div style={{ padding: '56px 20px 0' }}>
        <div style={{ fontSize: 12.5, color: 'rgba(13,17,23,0.55)' }}>Suas vendas</div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 1 }}>12 abertas · 8 pagas</div>
      </div>

      {/* busca */}
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: '#fff', border: '0.5px solid rgba(13,17,23,0.06)',
          borderRadius: 12, padding: '10px 12px',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(13,17,23,0.5)" strokeWidth="2" strokeLinecap="round">
            <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
          </svg>
          <input placeholder="Buscar venda, cliente, produto…" style={{
            flex: 1, border: 0, outline: 'none', fontSize: 13, background: 'transparent',
            fontFamily: 'inherit', color: 'inherit',
          }} />
        </div>
      </div>

      {/* filtros */}
      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6 }}>
        {filtros.map((f) => (
          <button key={f.k} onClick={() => setFilter(f.k)} style={{
            padding: '6px 12px', borderRadius: 999,
            background: filter === f.k ? '#FBFCFD' : '#fff',
            color: filter === f.k ? '#fff' : 'rgba(13,17,23,0.65)',
            border: '0.5px solid rgba(13,17,23,0.08)', fontFamily: 'inherit',
            fontSize: 12, fontWeight: 500, cursor: 'pointer',
          }}>{f.l}</button>
        ))}
      </div>

      {/* lista */}
      <div style={{ padding: '14px 20px 28px' }}>
        <div style={{ background: '#fff', borderRadius: 16, border: '0.5px solid rgba(13,17,23,0.06)', overflow: 'hidden' }}>
          {filtered.map((v, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.06)' : 'none',
            }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: v.status, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.t}</div>
                <div style={{ fontSize: 11.5, color: 'rgba(13,17,23,0.55)', marginTop: 1 }}>{v.c} · {v.day}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, fontWeight: 500, fontFamily: M_MONO }}>R$ {v.v.toLocaleString('pt-BR')}</div>
                <div style={{ fontSize: 11, color: '#2563EB', marginTop: 1, fontFamily: M_MONO }}>+R$ {v.com.toLocaleString('pt-BR')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function MobileMetasView() {
  return (
    <React.Fragment>
      <div style={{ padding: '56px 20px 0' }}>
        <div style={{ fontSize: 12.5, color: 'rgba(13,17,23,0.55)' }}>Metas</div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 1 }}>Maio · faltam 11 dias</div>
      </div>

      <div style={{ padding: '18px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
          { l: 'Comissão pessoal', cur: 12840, max: 16000, color: '#2563EB', sub: 'Faltam R$ 3.160' },
          { l: 'Vendas no mês',    cur: 12,    max: 18,    color: '#38BDF8', sub: '+3 hoje', fmt: 'count' },
          { l: 'Ticket médio',     cur: 6500,  max: 7500,  color: 'var(--green-text)', sub: '+R$ 380 vs abr' },
        ].map((m) => {
          const pct = Math.min(100, Math.round((m.cur / m.max) * 100));
          return (
            <div key={m.l} style={{ background: '#fff', borderRadius: 16, padding: 16, border: '0.5px solid rgba(13,17,23,0.06)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{m.l}</div>
                <div style={{ fontSize: 11.5, color: 'rgba(13,17,23,0.55)' }}>{pct}%</div>
              </div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em', fontFamily: M_MONO }}>
                {m.fmt === 'count' ? m.cur : `R$ ${m.cur.toLocaleString('pt-BR')}`}
                <span style={{ fontSize: 12, fontWeight: 500, color: 'rgba(13,17,23,0.4)', marginLeft: 4 }}>
                  / {m.fmt === 'count' ? m.max : `R$ ${m.max.toLocaleString('pt-BR')}`}
                </span>
              </div>
              <div style={{ height: 7, background: 'rgba(13,17,23,0.05)', borderRadius: 99, overflow: 'hidden', marginTop: 10 }}>
                <div style={{ height: '100%', width: pct + '%', background: m.color, borderRadius: 99 }} />
              </div>
              <div style={{ fontSize: 11, color: 'rgba(13,17,23,0.5)', marginTop: 8 }}>{m.sub}</div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: '18px 20px 28px' }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Ranking do time · maio</div>
        <div style={{ background: '#fff', borderRadius: 16, border: '0.5px solid rgba(13,17,23,0.06)', overflow: 'hidden' }}>
          {[
            { p: 1, n: 'Beatriz F.',     v: 18420, you: false, hue: 30  },
            { p: 2, n: 'Você',           v: 12840, you: true,  hue: 14 },
            { p: 3, n: 'Carlos O.',      v: 11280, you: false, hue: 30 },
            { p: 4, n: 'Felipe C.',      v: 9460,  you: false, hue: 42 },
          ].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.06)' : '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: M_MONO }}>R$ {r.v.toLocaleString('pt-BR')}</div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function MobilePerfilView() {
  return (
    <React.Fragment>
      <div style={{ padding: '56px 20px 0', textAlign: 'center' }}>
        <div style={{
          width: 80, height: 80, borderRadius: 999, margin: '0 auto',
          background: 'linear-gradient(135deg, hsl(22 85% 62%), hsl(340 70% 55%))',
          color: '#fff', fontSize: 26, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          border: '3px solid #fff', boxShadow: '0 6px 14px rgba(0,0,0,.1)',
        }}>MS</div>
        <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 10 }}>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: '18px 20px 0', 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: '12px 10px', textAlign: 'center',
            border: '0.5px solid rgba(13,17,23,0.06)',
          }}>
            <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.02em' }}>{s.v}</div>
            <div style={{ fontSize: 10.5, color: 'rgba(13,17,23,0.55)', marginTop: 2 }}>{s.l}</div>
          </div>
        ))}
      </div>

      <div style={{ padding: '18px 20px 28px' }}>
        <div style={{ background: '#fff', borderRadius: 16, border: '0.5px solid rgba(13,17,23,0.06)', overflow: 'hidden' }}>
          {[
            { i: IconGrid, l: 'Configurações da conta', s: 'Nome, email, senha, Face ID' },
            { i: IconBolt, l: 'Notificações',           s: 'Nova venda, meta, follow-up' },
            { i: IconPix, l: 'Pagamento e Pix',        s: 'Como sua comissão cai' },
            { i: IconUsers, l: 'Time Velocittà',         s: '6 vendedores · você é o #2' },
            { i: IconCircle, l: 'Ajuda & contato',         s: 'WhatsApp do suporte' },
            { i: IconArrow, l: 'Sair',              s: 'Encerrar sessão neste celular', danger: true },
          ].map((row, i) => (
            <div key={row.l} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderTop: i ? '0.5px solid rgba(13,17,23,0.06)' : 'none',
              color: row.danger ? '#E11D48' : 'inherit',
            }}>
              <span style={{ width: 28, fontSize: 16, textAlign: 'center' }}><row.i size={17} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{row.l}</div>
                <div style={{ fontSize: 11, color: 'rgba(13,17,23,0.5)', marginTop: 1 }}>{row.s}</div>
              </div>
              <span style={{ color: 'rgba(13,17,23,0.25)', fontSize: 16 }}>›</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, textAlign: 'center', fontSize: 10.5, color: 'rgba(13,17,23,0.4)' }}>
          Comissa · versão 2.4.1
        </div>
      </div>
    </React.Fragment>
  );
}

function NovaVendaSheet({ onClose }) {
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 40,
      display: 'flex', alignItems: 'flex-end',
      animation: 'cd-modal-fade .25s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', background: '#F0F4F8',
        borderRadius: '24px 24px 0 0',
        padding: '14px 18px 34px',
        animation: 'cd-modal-pop .35s cubic-bezier(.2,.8,.2,1)',
      }}>
        <div style={{
          width: 36, height: 4, background: 'rgba(13,17,23,0.15)', borderRadius: 999,
          margin: '0 auto 14px',
        }} />
        <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 4 }}>Nova ação</div>
        <div style={{ fontSize: 12, color: 'rgba(13,17,23,0.55)', marginBottom: 14 }}>O que você quer registrar?</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { i: IconMoney, l: 'Nova venda',       s: 'Adicionar venda com comissão' },
            { i: IconUsers, l: 'Novo cliente',     s: 'Cadastrar lead ou cliente' },
            { i: IconClock, l: 'Novo lembrete',    s: 'Follow-up, ligação, reunião' },
            { i: IconTarget, l: 'Atualizar meta',   s: 'Mudar meta de maio' },
          ].map((x) => (
            <button key={x.l} onClick={onClose} style={{
              display: 'flex', alignItems: 'center', gap: 12, width: '100%',
              padding: '12px 14px', background: '#fff', borderRadius: 14,
              border: '0.5px solid rgba(13,17,23,0.06)', cursor: 'pointer',
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              <span style={{ fontSize: 20 }}><x.i size={17} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600 }}>{x.l}</div>
                <div style={{ fontSize: 11.5, color: 'rgba(13,17,23,0.55)', marginTop: 2 }}>{x.s}</div>
              </div>
              <span style={{ color: 'rgba(13,17,23,0.25)', fontSize: 16 }}>›</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

const PHONE_NOTIF_PRODUCTS = [
  { p: 'Rolex Submariner',   c: 'Pedro M.' },
  { p: 'Honda Civic 2024',   c: 'Vista Verde' },
  { p: 'Apto 2Q Pinheiros',  c: 'Família Lima' },
  { p: 'Curso Trading Pro',  c: 'Ana S.' },
  { p: 'iPhone 16 Pro Max',  c: 'Mariana R.' },
  { p: 'MacBook Air M3',     c: 'Lucas O.' },
  { p: 'Yamaha MT-07',       c: 'Caio B.' },
  { p: 'Toyota Corolla XEi', c: 'Renata F.' },
];

function PhoneNotifCard({ note, onDismiss }) {
  const [drag, setDrag] = _ms({ dragging: false, dy: 0 });
  const startY = _ur(0);

  const onPointerDown = (e) => {
    startY.current = e.clientY;
    setDrag({ dragging: true, dy: 0 });
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
  };
  const onPointerMove = (e) => {
    if (!drag.dragging) return;
    const d = e.clientY - startY.current;
    setDrag({ dragging: true, dy: Math.min(0, d) });
  };
  const endDrag = () => {
    if (drag.dy < -28) {
      onDismiss();
    } else {
      setDrag({ dragging: false, dy: 0 });
    }
  };

  return (
    <div
      className="phone-notif-card"
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
      style={{
        position: 'relative',
        background: 'rgba(13,17,23,0.92)',
        backdropFilter: note.fading ? 'blur(8px)' : 'blur(22px)',
        WebkitBackdropFilter: note.fading ? 'blur(8px)' : 'blur(22px)',
        border: '0.5px solid rgba(13,17,23,0.08)',
        borderRadius: 16,
        padding: '11px 30px 11px 13px',
        boxShadow: note.fading
          ? '0 6px 14px -8px rgba(13,17,23,0.1)'
          : '0 12px 28px -12px rgba(13,17,23,0.22)',
        display: 'flex', gap: 10, alignItems: 'flex-start',
        transform: note.fading
          ? `translateY(${drag.dy - 6}px) scale(.96)`
          : `translateY(${drag.dy}px)`,
        opacity: note.fading
          ? 0
          : (drag.dy < 0 ? Math.max(0, 1 + drag.dy / 50) : 1),
        filter: note.fading ? 'blur(3px)' : 'none',
        transition: drag.dragging
          ? 'none'
          : 'transform .55s cubic-bezier(.16,1,.3,1), opacity .55s ease, filter .55s ease, backdrop-filter .55s ease, box-shadow .55s ease',
        pointerEvents: note.fading ? 'none' : 'auto',
        cursor: 'grab',
        touchAction: 'pan-x',
        userSelect: 'none',
      }}
    >
      <button
        type="button"
        aria-label="Fechar notificação"
        onPointerDown={(e) => e.stopPropagation()}
        onClick={onDismiss}
        style={{
          position: 'absolute', top: 6, right: 6,
          width: 20, height: 20, borderRadius: 999,
          background: 'rgba(13,17,23,0.06)',
          border: 0, padding: 0, cursor: 'pointer',
          color: 'rgba(13,17,23,0.55)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'inherit', fontSize: 12, lineHeight: 1,
        }}
      >
        <svg width="9" height="9" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 2l6 6M8 2L2 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      </button>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: 'linear-gradient(135deg, #2563EB, #38BDF8)',
        color: '#fff', flexShrink: 0,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, fontWeight: 700, letterSpacing: '-0.02em',
      }}>C</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(13,17,23,0.7)', letterSpacing: '0.04em' }}>COMISSA</div>
          <div style={{ fontSize: 10, color: 'rgba(13,17,23,0.45)' }}>agora</div>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, color: '#FBFCFD', marginTop: 1, letterSpacing: '-0.005em' }}>
          Vendido! +R$ {note.valor.toLocaleString('pt-BR')}
        </div>
        <div style={{
          fontSize: 11.5, color: 'rgba(13,17,23,0.6)',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>
          {note.produto} · {note.cliente}
        </div>
      </div>
    </div>
  );
}

function PhoneNotifications({ startDelayMs = 1500, intervalMs = 35000, lifetimeMs = 20000, fadeMs = 600 }) {
  const [notes, setNotes] = _ms([]);

  _me(() => {
    let mounted = true;
    let id = 0;
    let interval = null;
    const timers = new Set();
    const addTimer = (fn, ms) => {
      const t = setTimeout(() => { timers.delete(t); fn(); }, ms);
      timers.add(t);
    };

    const spawn = () => {
      if (!mounted) return;
      id += 1;
      const myId = id;
      const it = PHONE_NOTIF_PRODUCTS[Math.floor(Math.random() * PHONE_NOTIF_PRODUCTS.length)];
      const valor = Math.floor(2 + Math.random() * 78) * 1000 + Math.floor(Math.random() * 999);
      setNotes(n => [{ id: myId, valor, produto: it.p, cliente: it.c, fading: false }, ...n].slice(0, 2));

      // inicia o fade um pouco antes do fim
      addTimer(() => {
        if (!mounted) return;
        setNotes(n => n.map(x => x.id === myId ? { ...x, fading: true } : x));
      }, Math.max(0, lifetimeMs - fadeMs));

      // remove de fato após o tempo de vida
      addTimer(() => {
        if (!mounted) return;
        setNotes(n => n.filter(x => x.id !== myId));
      }, lifetimeMs);
    };

    const startTimer = setTimeout(() => {
      if (!mounted) return;
      spawn();
      interval = setInterval(spawn, intervalMs);
    }, startDelayMs);

    return () => {
      mounted = false;
      clearTimeout(startTimer);
      if (interval) clearInterval(interval);
      timers.forEach(clearTimeout);
    };
  }, [startDelayMs, intervalMs, lifetimeMs, fadeMs]);

  const dismiss = (id) => setNotes(n => n.filter(x => x.id !== id));

  return (
    <div style={{
      position: 'absolute', top: 54, left: 10, right: 10,
      zIndex: 60, pointerEvents: 'none',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      {notes.map(n => (
        <PhoneNotifCard key={n.id} note={n} onDismiss={() => dismiss(n.id)} />
      ))}
    </div>
  );
}

function ComissaMobileApp() {
  const [tab, setTab] = _ms('home');
  const [sheet, setSheet] = _ms(null);

  const view =
    tab === 'home'   ? <MobileHomeView />   :
    tab === 'vendas' ? <MobileVendasView /> :
    tab === 'metas'  ? <MobileMetasView />  :
    tab === 'perfil' ? <MobilePerfilView /> :
    null;

  return (
    <div style={{
      height: '100%', background: '#F0F4F8',
      display: 'flex', flexDirection: 'column',
      fontFamily: M_FONT, color: '#FBFCFD',
      position: 'relative',
    }}>
      <PhoneNotifications />
      <div key={tab} style={{
        flex: 1, minHeight: 0, overflow: 'auto',
        animation: 'cd-tab-in .35s 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)',
      }}>
        {[
          { 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} onClick={() => setSheet('nova')} aria-label="Nova ação" style={{
              flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center',
              border: 0, background: 'transparent', padding: 0, cursor: 'pointer',
            }}>
              <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, transition: 'transform .15s ease',
              }}>
                <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} onClick={() => setTab(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 .2s ease',
            }}>
              <TabIcon kind={b.k} active={tab === b.k} size={22} />
              <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: '-0.005em' }}>{b.l}</span>
            </button>
          )
        ))}
      </div>

      {sheet && <NovaVendaSheet onClose={() => setSheet(null)} />}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ComissaNotif — versão alternativa do iPhone: lock screen
// com notificação de venda
// ─────────────────────────────────────────────────────────────
function ComissaLockScreen() {
  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #EFF6FF 0%, #FBFCFD 60%, #E8F1FE 100%)',
      color: '#fff', fontFamily: "'Geist', -apple-system, sans-serif",
    }}>
      {/* glow */}
      <div style={{
        position: 'absolute', left: '50%', top: '10%', transform: 'translateX(-50%)',
        width: 500, height: 500, borderRadius: 999,
        background: 'radial-gradient(closest-side, rgba(37,99,235,0.45), transparent)',
        filter: 'blur(30px)',
      }} />

      {/* hora */}
      <div style={{ position: 'relative', textAlign: 'center', paddingTop: 90 }}>
        <div style={{ fontSize: 18, fontWeight: 500, opacity: .9, letterSpacing: '0.02em' }}>terça, 13 mai</div>
        <div style={{
          fontSize: 92, fontWeight: 200, letterSpacing: '-0.04em',
          marginTop: 2, lineHeight: 1, fontFamily: '-apple-system, system-ui, sans-serif',
        }}>14:32</div>
      </div>

      {/* notificação */}
      <div style={{
        position: 'absolute', left: 14, right: 14, top: 320,
      }}>
        <div style={{
          background: 'rgba(13,17,23,0.16)',
          backdropFilter: 'blur(28px)',
          WebkitBackdropFilter: 'blur(28px)',
          border: '0.5px solid rgba(13,17,23,0.18)',
          borderRadius: 20, padding: 14,
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 9,
            background: 'linear-gradient(135deg, #2563EB, #38BDF8)',
            color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M3 14c2.2-7 4-7 5 0s2.8 5.5 5-1 4-5.5 5 1 1.7 3 3 1"
                stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
            </svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 2 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.01em' }}>COMISSA</div>
              <div style={{ fontSize: 11, opacity: .6 }}>agora</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em', marginBottom: 2 }}>
              Vendido! +R$ 6.260
            </div>
            <div style={{ fontSize: 13, opacity: .85, lineHeight: 1.35 }}>
              Pedro Marques fechou o Rolex Submariner. Comissão cai via Pix em 1 dia útil.
            </div>
          </div>
        </div>

        {/* notificação 2 */}
        <div style={{
          marginTop: 10,
          background: 'rgba(13,17,23,0.1)',
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          border: '0.5px solid rgba(13,17,23,0.12)',
          borderRadius: 18, padding: '12px 14px',
          display: 'flex', gap: 12, alignItems: 'center',
          transform: 'scale(0.96)', opacity: .8,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 7,
            background: 'rgba(13,17,23,0.18)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16,
          }}><IconTarget size={16} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Falta R$ 3.160 pra meta de maio</div>
            <div style={{ fontSize: 11.5, opacity: .65, marginTop: 1 }}>Você bate fácil até sexta.</div>
          </div>
        </div>
      </div>

      {/* bottom hint */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 56, textAlign: 'center',
        fontSize: 13, opacity: .65, letterSpacing: '-0.005em',
      }}>
        Toque pra abrir o Comissa
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AppIdentity — frame "este é o app": ícone, nome, splash
// ─────────────────────────────────────────────────────────────
function AppIdentityFrame({ width = 720, height = 880 }) {
  return (
    <div style={{
      width, height, position: 'relative', overflow: 'hidden',
      background: 'var(--bg)',
      fontFamily: 'var(--font)',
      padding: 48, boxSizing: 'border-box',
      display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 32,
    }}>
      <GradientField variant="centered" />

      {/* topo */}
      <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Wordmark size={18} />
        <span className="cd-mono" style={{ fontSize: 11, color: 'var(--muted)' }}>identidade · app</span>
      </div>

      {/* centro ícone gigante */}
      <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
        <AppIcon size={196} />
        <div style={{ marginTop: 28, fontSize: 48, fontWeight: 700, letterSpacing: '-0.045em', color: 'var(--ink)' }}>
          Comissa
        </div>
        <div style={{ marginTop: 8, fontSize: 16, color: 'var(--muted)', letterSpacing: '-0.005em', maxWidth: 360, lineHeight: 1.5 }}>
          Painel pra quem vende.<br />
          Carro, curso, relógio, imóvel. Tudo num lugar só.
        </div>

        {/* badges de loja */}
        <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
          {[
            { l1: 'Disponível na', l2: 'App Store' },
            { l1: 'Disponível no', l2: 'Google Play' },
          ].map((b) => (
            <div key={b.l2} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 16px', borderRadius: 12,
              background: '#FBFCFD', color: '#fff',
            }}>
              <span style={{ fontSize: 22, lineHeight: 1 }}>{b.l2 === 'App Store' ? '' : '▶'}</span>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 9, opacity: .7, letterSpacing: '0.04em' }}>{b.l1.toUpperCase()}</div>
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em', marginTop: -1 }}>{b.l2}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* paleta de ícones em vários tamanhos */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div className="cd-mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14 }}>
          Variações de ícone
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          {[120, 84, 60, 44, 32].map((s) => (
            <AppIcon key={s} size={s} />
          ))}
          <span style={{ flex: 1 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <AppIcon size={56} dark />
            <AppIcon size={56} mono />
          </div>
        </div>
      </div>
    </div>
  );
}

// O ícone do app — gradiente roxo→ciano com a marca de onda
function AppIcon({ size = 120, dark = false, mono = false }) {
  const radius = size * 0.22;
  const bg = mono
    ? '#FBFCFD'
    : dark
      ? 'linear-gradient(135deg, #F4F8FB 0%, #E8F1FE 100%)'
      : 'linear-gradient(135deg, #2563EB 0%, #38BDF8 100%)';
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: bg,
      boxShadow: `0 ${size * 0.08}px ${size * 0.18}px -${size * 0.06}px rgba(13,17,23,0.35), 0 1px 0 rgba(255,255,255,0.18) inset`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden', flexShrink: 0,
    }}>
      {/* highlight */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 20%, rgba(13,17,23,0.25), transparent 55%)',
      }} />
      <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" fill="none" style={{ position: 'relative' }}>
        <path d="M3 14c2.2-7 4-7 5 0s2.8 5.5 5-1 4-5.5 5 1 1.7 3 3 1"
          stroke="#fff" strokeWidth={size * 0.024} strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  );
}

Object.assign(window, {
  ComissaMobileApp, ComissaLockScreen, AppIdentityFrame, AppIcon,
});