// Phone mockup components - original device frames (not branded)
// Used in hero, feature spotlights

const PhoneFrame = ({ children, color = "#0A0A0A", style = {}, scale = 1 }) => {
  const baseW = 320;
  const baseH = 660;
  return (
    <div style={{
      width: baseW * scale,
      height: baseH * scale,
      position: 'relative',
      ...style,
    }}>
      <div style={{
        position: 'absolute',
        inset: 0,
        background: color,
        borderRadius: 50 * scale,
        padding: 11 * scale,
        boxShadow:
          '0 30px 60px -20px rgba(0,0,0,0.35), ' +
          'inset 0 0 0 2px rgba(255,255,255,0.06), ' +
          'inset 0 -10px 20px rgba(0,0,0,0.3)',
      }}>
        {/* side buttons */}
        <div style={{ position: 'absolute', left: -2, top: 110 * scale, width: 3, height: 30 * scale, background: '#1a1a1a', borderRadius: 2 }} />
        <div style={{ position: 'absolute', left: -2, top: 150 * scale, width: 3, height: 50 * scale, background: '#1a1a1a', borderRadius: 2 }} />
        <div style={{ position: 'absolute', left: -2, top: 210 * scale, width: 3, height: 50 * scale, background: '#1a1a1a', borderRadius: 2 }} />
        <div style={{ position: 'absolute', right: -2, top: 170 * scale, width: 3, height: 80 * scale, background: '#1a1a1a', borderRadius: 2 }} />

        <div style={{
          width: '100%',
          height: '100%',
          background: '#fff',
          borderRadius: 40 * scale,
          overflow: 'hidden',
          position: 'relative',
        }}>
          {/* Dynamic island */}
          <div style={{
            position: 'absolute',
            top: 12 * scale,
            left: '50%',
            transform: 'translateX(-50%)',
            width: 100 * scale,
            height: 28 * scale,
            background: '#000',
            borderRadius: 999,
            zIndex: 20,
          }} />
          {/* Status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 50 * scale,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: `${18 * scale}px ${28 * scale}px 0`,
            fontSize: 13 * scale,
            fontWeight: 700,
            color: '#000',
            zIndex: 19,
            fontFamily: 'Manrope, sans-serif',
          }}>
            <span>9:41</span>
            <div style={{ display: 'flex', gap: 4 * scale, alignItems: 'center' }}>
              <svg width={16 * scale} height={11 * scale} viewBox="0 0 16 11" fill="currentColor"><path d="M1 8h2v2H1zM5 6h2v4H5zM9 4h2v6H9zM13 1h2v9h-2z"/></svg>
              <svg width={14 * scale} height={11 * scale} viewBox="0 0 14 11" fill="currentColor"><path d="M7 2a8 8 0 0 1 5.7 2.3l-1.4 1.4A6 6 0 0 0 7 4a6 6 0 0 0-4.3 1.7L1.3 4.3A8 8 0 0 1 7 2zm0 4a4 4 0 0 1 2.8 1.2l-1.4 1.4A2 2 0 0 0 7 8a2 2 0 0 0-1.4.6L4.2 7.2A4 4 0 0 1 7 6zm0 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>
              <div style={{ width: 22 * scale, height: 10 * scale, border: `${1 * scale}px solid currentColor`, borderRadius: 3, padding: 1, position: 'relative' }}>
                <div style={{ width: '85%', height: '100%', background: 'currentColor', borderRadius: 1 }} />
              </div>
            </div>
          </div>
          {/* content */}
          <div style={{ paddingTop: 50 * scale, height: '100%' }}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ====== Screen contents ====== */

// Home dashboard for personal trainer
const HomeScreen = ({ scale = 1 }) => (
  <div style={{ padding: `${12 * scale}px ${18 * scale}px`, fontFamily: 'Manrope, sans-serif' }}>
    {/* header */}
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 * scale }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 * scale }}>
        <div style={{
          width: 36 * scale, height: 36 * scale, borderRadius: 999,
          background: 'linear-gradient(135deg, #FF6B47, #FF4D2E)',
          display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 800, fontSize: 14 * scale,
        }}>RC</div>
        <div>
          <div style={{ fontSize: 10 * scale, color: '#888', fontWeight: 600 }}>Olá,</div>
          <div style={{ fontSize: 13 * scale, fontWeight: 800, color: '#0A0A0A' }}>Coach Rafael</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 * scale }}>
        <div style={{ width: 32 * scale, height: 32 * scale, borderRadius: 999, background: '#F4F0EC', display: 'grid', placeItems: 'center', position: 'relative' }}>
          <svg width={14 * scale} height={14 * scale} viewBox="0 0 24 24" fill="none" stroke="#222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
          <div style={{ position: 'absolute', top: 2, right: 2, width: 8 * scale, height: 8 * scale, borderRadius: 999, background: '#FF4D2E', border: '2px solid #fff' }} />
        </div>
      </div>
    </div>

    {/* Hero card */}
    <div style={{
      background: 'linear-gradient(135deg, #FF4D2E, #E63A1F)',
      borderRadius: 16 * scale,
      padding: 16 * scale,
      color: '#fff',
      marginBottom: 14 * scale,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ fontSize: 9 * scale, fontWeight: 800, opacity: 0.9, letterSpacing: 1, marginBottom: 4 * scale }}>NESTA SEMANA</div>
      <div style={{ fontSize: 22 * scale, fontWeight: 900, letterSpacing: -0.5, lineHeight: 1.05 }}>R$ 4.280</div>
      <div style={{ fontSize: 11 * scale, opacity: 0.9, marginTop: 2 }}>recebido de 18 alunos</div>
      <div style={{ position: 'absolute', right: -10, bottom: -10, width: 100 * scale, height: 100 * scale, borderRadius: 999, background: 'rgba(255,255,255,0.1)' }} />
      <div style={{ position: 'absolute', right: 20, top: 16, fontSize: 9 * scale, fontWeight: 700, opacity: 0.85 }}>↑ 32%</div>
    </div>

    {/* Quick actions */}
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 * scale, marginBottom: 14 * scale }}>
      <div style={{ background: '#fff', border: '1px solid #EFE9E3', borderRadius: 12 * scale, padding: 10 * scale }}>
        <div style={{ width: 28 * scale, height: 28 * scale, borderRadius: 8, background: '#FFF1ED', display: 'grid', placeItems: 'center', marginBottom: 6 * scale }}>
          <svg width={14 * scale} height={14 * scale} viewBox="0 0 24 24" fill="none" stroke="#FF4D2E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8v8M3 10v4M9 6v12M15 6v12M18 8v8M21 10v4"/></svg>
        </div>
        <div style={{ fontSize: 11 * scale, fontWeight: 800, color: '#0A0A0A' }}>Novo treino</div>
        <div style={{ fontSize: 9 * scale, color: '#888', marginTop: 1 }}>750+ exercícios</div>
      </div>
      <div style={{ background: '#fff', border: '1px solid #EFE9E3', borderRadius: 12 * scale, padding: 10 * scale }}>
        <div style={{ width: 28 * scale, height: 28 * scale, borderRadius: 8, background: '#FFF1ED', display: 'grid', placeItems: 'center', marginBottom: 6 * scale }}>
          <svg width={14 * scale} height={14 * scale} viewBox="0 0 24 24" fill="none" stroke="#FF4D2E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="7" r="4"/><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/></svg>
        </div>
        <div style={{ fontSize: 11 * scale, fontWeight: 800, color: '#0A0A0A' }}>Alunos</div>
        <div style={{ fontSize: 9 * scale, color: '#888', marginTop: 1 }}>18 ativos</div>
      </div>
    </div>

    {/* Section */}
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 * scale }}>
      <div style={{ fontSize: 13 * scale, fontWeight: 800, color: '#0A0A0A' }}>Próximos alunos</div>
      <div style={{ fontSize: 11 * scale, color: '#FF4D2E', fontWeight: 700 }}>Ver tudo</div>
    </div>

    {[
      { n: 'Marina S.', t: 'Hipertrofia · Hoje 18h', p: '#FFE0D5', i: 'MS' },
      { n: 'João P.', t: 'Funcional · Hoje 19h', p: '#E2DAD3', i: 'JP' },
      { n: 'Carla M.', t: 'Emagrec. · Amanhã 7h', p: '#FFE0D5', i: 'CM' },
    ].map((s, i) => (
      <div key={i} style={{
        display: 'flex', alignItems: 'center', gap: 10 * scale,
        padding: 10 * scale,
        background: '#fff',
        border: '1px solid #EFE9E3',
        borderRadius: 12 * scale,
        marginBottom: 6 * scale,
      }}>
        <div style={{
          width: 32 * scale, height: 32 * scale, borderRadius: 999,
          background: s.p, display: 'grid', placeItems: 'center',
          fontSize: 11 * scale, fontWeight: 800, color: '#0A0A0A',
        }}>{s.i}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12 * scale, fontWeight: 800, color: '#0A0A0A' }}>{s.n}</div>
          <div style={{ fontSize: 10 * scale, color: '#888' }}>{s.t}</div>
        </div>
        <div style={{ fontSize: 9 * scale, fontWeight: 700, color: '#FF4D2E', padding: '4px 8px', borderRadius: 999, background: '#FFF1ED' }}>OK</div>
      </div>
    ))}

    {/* Bottom nav */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: '#fff', borderTop: '1px solid #EFE9E3',
      padding: `${10 * scale}px ${20 * scale}px ${20 * scale}px`,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {[
        ['Início', true],
        ['Treinos', false],
        ['Alunos', false],
        ['$', false],
      ].map(([l, a], i) => (
        <div key={i} style={{ textAlign: 'center' }}>
          <div style={{ width: 24 * scale, height: 24 * scale, borderRadius: 8, background: a ? '#FF4D2E' : 'transparent', display: 'grid', placeItems: 'center', margin: '0 auto' }}>
            <div style={{ width: 8 * scale, height: 8 * scale, background: a ? '#fff' : '#888', borderRadius: 2 }} />
          </div>
          <div style={{ fontSize: 9 * scale, color: a ? '#FF4D2E' : '#888', fontWeight: 700, marginTop: 2 }}>{l}</div>
        </div>
      ))}
    </div>
  </div>
);

// "Encontre seu personal" — discovery screen
const DiscoveryScreen = ({ scale = 1 }) => (
  <div style={{ padding: `${12 * scale}px ${18 * scale}px`, fontFamily: 'Manrope, sans-serif', height: '100%', position: 'relative' }}>
    <div style={{ marginBottom: 12 * scale }}>
      <div style={{ fontSize: 10 * scale, color: '#888', fontWeight: 600 }}>Você está aparecendo para</div>
      <div style={{ fontSize: 22 * scale, fontWeight: 900, color: '#0A0A0A', letterSpacing: -0.5, lineHeight: 1.05 }}>12 novos alunos</div>
      <div style={{ fontSize: 11 * scale, color: '#FF4D2E', fontWeight: 700, marginTop: 2 }}>● ao vivo · São Paulo, SP</div>
    </div>

    {/* Filter chips */}
    <div style={{ display: 'flex', gap: 6 * scale, marginBottom: 14 * scale, overflow: 'hidden' }}>
      {['Hipertrofia', 'Emagrec.', '+18', 'Online'].map((c, i) => (
        <div key={i} style={{
          padding: `${5 * scale}px ${10 * scale}px`,
          borderRadius: 999,
          fontSize: 10 * scale,
          fontWeight: 700,
          background: i === 0 ? '#0A0A0A' : '#F4F0EC',
          color: i === 0 ? '#fff' : '#444',
        }}>{c}</div>
      ))}
    </div>

    {/* Match cards */}
    {[
      { n: 'Beatriz L.', goal: 'Hipertrofia · 3x/semana', m: '98%', i: 'BL' },
      { n: 'Felipe A.', goal: 'Emagrecimento · Online', m: '94%', i: 'FA' },
      { n: 'Tatiana R.', goal: 'Funcional · Manhã', m: '91%', i: 'TR' },
    ].map((s, i) => (
      <div key={i} style={{
        background: '#fff',
        border: '1px solid #EFE9E3',
        borderRadius: 14 * scale,
        padding: 12 * scale,
        marginBottom: 8 * scale,
        display: 'flex',
        alignItems: 'center',
        gap: 10 * scale,
        position: 'relative',
      }}>
        <div style={{
          width: 44 * scale, height: 44 * scale, borderRadius: 12,
          background: 'linear-gradient(135deg, #FFE0D5, #FFF1ED)',
          display: 'grid', placeItems: 'center',
          fontSize: 14 * scale, fontWeight: 900, color: '#FF4D2E',
        }}>{s.i}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12 * scale, fontWeight: 800, color: '#0A0A0A' }}>{s.n}</div>
          <div style={{ fontSize: 10 * scale, color: '#666' }}>{s.goal}</div>
          <div style={{ marginTop: 4 * scale, display: 'flex', gap: 4 * scale, alignItems: 'center' }}>
            <div style={{ height: 4 * scale, width: 60 * scale, background: '#F4F0EC', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: s.m, height: '100%', background: '#FF4D2E' }} />
            </div>
            <div style={{ fontSize: 9 * scale, fontWeight: 800, color: '#FF4D2E' }}>{s.m} match</div>
          </div>
        </div>
        <div style={{
          padding: `${6 * scale}px ${10 * scale}px`,
          background: '#FF4D2E', color: '#fff',
          borderRadius: 999, fontSize: 10 * scale, fontWeight: 800,
        }}>Conectar</div>
      </div>
    ))}

    {/* Floating stat */}
    <div style={{
      position: 'absolute',
      bottom: 30 * scale,
      left: 18 * scale,
      right: 18 * scale,
      background: '#0A0A0A',
      color: '#fff',
      borderRadius: 14 * scale,
      padding: 14 * scale,
      display: 'flex',
      alignItems: 'center',
      gap: 12 * scale,
    }}>
      <div style={{
        fontFamily: 'Archivo, sans-serif',
        fontWeight: 900,
        fontSize: 30 * scale,
        color: '#FF4D2E',
        letterSpacing: -1,
        lineHeight: 1,
      }}>+8</div>
      <div>
        <div style={{ fontSize: 12 * scale, fontWeight: 800 }}>alunos esta semana</div>
        <div style={{ fontSize: 10 * scale, opacity: 0.7 }}>vindos pelo "Encontre seu Personal"</div>
      </div>
    </div>
  </div>
);

// Workout builder screen
const WorkoutBuilderScreen = ({ scale = 1 }) => (
  <div style={{ padding: `${10 * scale}px ${16 * scale}px`, fontFamily: 'Manrope, sans-serif', height: '100%' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 * scale }}>
      <div>
        <div style={{ fontSize: 9 * scale, color: '#888', fontWeight: 700, letterSpacing: 0.5 }}>NOVO TREINO</div>
        <div style={{ fontSize: 16 * scale, fontWeight: 900, color: '#0A0A0A', letterSpacing: -0.3 }}>Marina S. — Treino A</div>
      </div>
      <div style={{
        background: '#FF4D2E', color: '#fff',
        padding: `${5 * scale}px ${10 * scale}px`,
        borderRadius: 999, fontSize: 10 * scale, fontWeight: 800,
      }}>Salvar</div>
    </div>

    {/* Search bar */}
    <div style={{
      background: '#F4F0EC', borderRadius: 10 * scale,
      padding: `${8 * scale}px ${12 * scale}px`,
      display: 'flex', alignItems: 'center', gap: 8 * scale,
      marginBottom: 10 * scale,
    }}>
      <svg width={12 * scale} height={12 * scale} viewBox="0 0 24 24" fill="none" stroke="#888" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      <div style={{ fontSize: 11 * scale, color: '#888' }}>Buscar entre 750+ exercícios…</div>
    </div>

    {/* Categories */}
    <div style={{ display: 'flex', gap: 6 * scale, marginBottom: 12 * scale, overflowX: 'hidden' }}>
      {['Peito', 'Costas', 'Pernas', 'Ombro', 'Braço'].map((c, i) => (
        <div key={i} style={{
          padding: `${4 * scale}px ${10 * scale}px`,
          borderRadius: 999,
          fontSize: 10 * scale,
          fontWeight: 700,
          background: i === 0 ? '#FF4D2E' : '#fff',
          color: i === 0 ? '#fff' : '#444',
          border: i === 0 ? 'none' : '1px solid #EFE9E3',
          whiteSpace: 'nowrap',
        }}>{c}</div>
      ))}
    </div>

    {/* Exercise list */}
    {[
      { n: 'Supino reto', s: '4x10', w: '60kg', sel: true },
      { n: 'Supino inclinado', s: '4x12', w: '50kg', sel: true },
      { n: 'Crucifixo halter', s: '3x12', w: '14kg', sel: true },
      { n: 'Crossover polia', s: '3x15', w: '20kg', sel: false },
    ].map((e, i) => (
      <div key={i} style={{
        display: 'flex', alignItems: 'center', gap: 10 * scale,
        padding: 10 * scale,
        background: e.sel ? '#FFF1ED' : '#fff',
        border: `1px solid ${e.sel ? '#FFE0D5' : '#EFE9E3'}`,
        borderRadius: 12 * scale,
        marginBottom: 6 * scale,
      }}>
        <div style={{
          width: 36 * scale, height: 36 * scale, borderRadius: 8,
          background: '#0A0A0A', display: 'grid', placeItems: 'center',
          flexShrink: 0, position: 'relative',
        }}>
          <svg width={12 * scale} height={12 * scale} viewBox="0 0 24 24" fill="#FF4D2E" stroke="none"><path d="m6 4 14 8L6 20V4Z"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12 * scale, fontWeight: 800, color: '#0A0A0A' }}>{e.n}</div>
          <div style={{ display: 'flex', gap: 6 * scale, marginTop: 2 }}>
            <div style={{ fontSize: 10 * scale, color: '#666', fontWeight: 600 }}>{e.s}</div>
            <div style={{ fontSize: 10 * scale, color: '#FF4D2E', fontWeight: 700 }}>{e.w}</div>
          </div>
        </div>
        <div style={{
          width: 22 * scale, height: 22 * scale, borderRadius: 999,
          background: e.sel ? '#FF4D2E' : 'transparent',
          border: e.sel ? 'none' : '1.5px solid #BDB4AE',
          display: 'grid', placeItems: 'center',
        }}>
          {e.sel && <svg width={12 * scale} height={12 * scale} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round"><path d="m20 6-11 11L4 12"/></svg>}
        </div>
      </div>
    ))}

    <div style={{
      position: 'absolute', bottom: 20 * scale, left: 16 * scale, right: 16 * scale,
      background: '#0A0A0A', color: '#fff',
      padding: `${12 * scale}px ${16 * scale}px`,
      borderRadius: 14 * scale,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div>
        <div style={{ fontSize: 10 * scale, opacity: 0.7 }}>Tempo gasto</div>
        <div style={{ fontFamily: 'Archivo, sans-serif', fontSize: 18 * scale, fontWeight: 900, letterSpacing: -0.5 }}>4:32</div>
      </div>
      <div style={{
        background: '#FF4D2E', color: '#fff',
        padding: `${8 * scale}px ${14 * scale}px`,
        borderRadius: 999, fontSize: 11 * scale, fontWeight: 800,
      }}>Enviar para aluno →</div>
    </div>
  </div>
);

// Finance screen
const FinanceScreen = ({ scale = 1 }) => (
  <div style={{ padding: `${12 * scale}px ${18 * scale}px`, fontFamily: 'Manrope, sans-serif' }}>
    <div style={{ marginBottom: 14 * scale }}>
      <div style={{ fontSize: 10 * scale, color: '#888', fontWeight: 600 }}>Receita do mês</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 * scale }}>
        <div style={{ fontFamily: 'Archivo, sans-serif', fontSize: 32 * scale, fontWeight: 900, color: '#0A0A0A', letterSpacing: -1 }}>R$ 12.840</div>
        <div style={{ fontSize: 11 * scale, color: '#FF4D2E', fontWeight: 800 }}>↑ 24%</div>
      </div>
    </div>

    {/* Bar chart */}
    <div style={{
      background: '#0A0A0A', borderRadius: 16 * scale,
      padding: 14 * scale, marginBottom: 12 * scale,
    }}>
      <div style={{ color: '#fff', fontSize: 11 * scale, fontWeight: 700, marginBottom: 12 * scale }}>Últimos 6 meses</div>
      <div style={{ display: 'flex', alignItems: 'end', gap: 6 * scale, height: 90 * scale }}>
        {[40, 55, 48, 70, 85, 95].map((h, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 * scale }}>
            <div style={{
              width: '100%',
              height: `${h}%`,
              background: i === 5 ? '#FF4D2E' : 'rgba(255,255,255,0.18)',
              borderRadius: 4,
            }} />
            <div style={{ fontSize: 8 * scale, color: 'rgba(255,255,255,0.6)', fontWeight: 700 }}>{['Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov'][i]}</div>
          </div>
        ))}
      </div>
    </div>

    {/* Payments list */}
    <div style={{ fontSize: 12 * scale, fontWeight: 800, color: '#0A0A0A', marginBottom: 8 * scale }}>Pagamentos recentes</div>
    {[
      { n: 'Marina Silva', v: '+R$ 280', s: 'pago', d: 'Hoje' },
      { n: 'João Pereira', v: '+R$ 350', s: 'pago', d: 'Hoje' },
      { n: 'Lucas Costa', v: 'R$ 280', s: 'pendente', d: '2 dias' },
      { n: 'Carla Mendes', v: '+R$ 420', s: 'pago', d: 'Ontem' },
    ].map((p, i) => (
      <div key={i} style={{
        display: 'flex', alignItems: 'center',
        padding: `${10 * scale}px ${12 * scale}px`,
        background: '#fff',
        border: '1px solid #EFE9E3',
        borderRadius: 12 * scale,
        marginBottom: 6 * scale,
      }}>
        <div style={{
          width: 8 * scale, height: 8 * scale, borderRadius: 999,
          background: p.s === 'pago' ? '#22C55E' : '#FF4D2E',
          marginRight: 10 * scale,
        }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12 * scale, fontWeight: 800, color: '#0A0A0A' }}>{p.n}</div>
          <div style={{ fontSize: 10 * scale, color: '#888' }}>{p.d}</div>
        </div>
        <div style={{
          fontFamily: 'Archivo, sans-serif',
          fontWeight: 900,
          fontSize: 14 * scale,
          color: p.s === 'pago' ? '#0A0A0A' : '#888',
          letterSpacing: -0.3,
        }}>{p.v}</div>
      </div>
    ))}
  </div>
);

Object.assign(window, { PhoneFrame, HomeScreen, DiscoveryScreen, WorkoutBuilderScreen, FinanceScreen });