// design-system.jsx — System screen + design tokens display

function ScreenSystem() {
  const colors = [
    ['Background', '--bg'],
    ['Surface', '--surface'],
    ['Surface 2', '--surface-2'],
    ['Surface 3', '--surface-3'],
    ['Ink', '--ink'],
    ['Ink dim', '--ink-dim'],
    ['Ink mute', '--ink-mute'],
    ['Accent', '--accent'],
    ['Accent 2', '--accent-2'],
    ['Accent soft', '--accent-soft'],
  ];
  return (
    <div className="mv-screen" style={{ padding: 40, overflowY: 'auto' }}>
      <div style={{ marginBottom: 32 }}>
        <Logo />
      </div>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.02em', margin: 0 }}>
        Système de <i style={{ color: 'var(--accent-2)' }}>design.</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginTop: 12, marginBottom: 40, maxWidth: 600 }}>
        Une base sobre, profonde, lisible. L'accent porte la promesse de service ; le reste s'efface.
      </p>

      {/* Type */}
      <div style={{ marginBottom: 48 }}>
        <SectionLabel n="01" t="Typographie" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="mv-card" style={{ padding: 28 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Display · Instrument Serif</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 72, lineHeight: 1, marginTop: 12 }}>Aa Æ <i style={{ color: 'var(--accent-2)' }}>l'heure</i></div>
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ink-mute)' }}>32 / 40 / 48 / 56 / 64 / 72 / 88 px · regular + italic</div>
          </div>
          <div className="mv-card" style={{ padding: 28 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Sans · Geist</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 28, marginTop: 12, lineHeight: 1.4 }}>Réservez en moins de 60 secondes.</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14, marginTop: 8, color: 'var(--ink-dim)' }}>Le tarif est fixe, calculé à la réservation. Aucun frais caché.</div>
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ink-mute)' }}>11 / 12 / 13 / 14 / 15 / 16 / 18 / 22 / 28 px · 400, 500, 600</div>
          </div>
        </div>
      </div>

      {/* Color */}
      <div style={{ marginBottom: 48 }}>
        <SectionLabel n="02" t="Couleurs" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {colors.map(([n, v]) => (
            <div key={n} className="mv-card" style={{ padding: 14 }}>
              <div style={{ height: 80, borderRadius: 8, background: `var(${v})`, marginBottom: 10, border: '1px solid var(--line)' }} />
              <div style={{ fontSize: 12, fontWeight: 500 }}>{n}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', marginTop: 2 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Components */}
      <div style={{ marginBottom: 48 }}>
        <SectionLabel n="03" t="Composants" />
        <div className="mv-card" style={{ padding: 28 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>Boutons</div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 24 }}>
            <button className="mv-btn mv-btn-primary mv-btn-lg">Réserver maintenant</button>
            <button className="mv-btn mv-btn-primary">Continuer</button>
            <button className="mv-btn mv-btn-ghost">Annuler</button>
            <button className="mv-btn mv-btn-light">Apple</button>
            <button className="mv-btn mv-btn-primary mv-btn-sm">Petit</button>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>Badges de statut</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
            <Status kind="confirmed" />
            <Status kind="pending" />
            <Status kind="enroute" />
            <Status kind="completed" />
            <Status kind="cancelled" />
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16 }}>Champs</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div><label className="mv-label">Email</label><input className="mv-input" placeholder="vous@email.fr" /></div>
            <div><label className="mv-label">Sélection</label><select className="mv-input"><option>Berline</option></select></div>
          </div>
        </div>
      </div>
    </div>
  );
}
function SectionLabel({ n, t }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent-2)' }}>{n}</span>
      <span style={{ fontSize: 18, fontFamily: 'var(--display)' }}>{t}</span>
      <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
    </div>
  );
}
Object.assign(window, { ScreenSystem });