// screens-desktop-2.jsx — Auth, Espace client, Pages secondaires, Admin

/* ───────────────── AUTH (login + signup) ───────────────── */
function AuthShell({ tab, children }) {
  return (
    <div className="mv-screen" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <UImage id="photo-1494976388531-d1058494cdd8" w={1000} h={1200} alt="" style={{ filter: 'brightness(0.5) saturate(1.1)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,16,31,0.4), rgba(8,16,31,0.85))' }} />
        <div style={{ position: 'absolute', top: 32, left: 32 }}><Logo /></div>
        <div style={{ position: 'absolute', bottom: 48, left: 48, right: 48 }}>
          <h2 style={{ fontFamily: 'var(--display)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.05 }}>
            Vos chauffeurs,<br/><i style={{ color: 'var(--accent-2)' }}>vos habitudes,</i><br/>en un compte.
          </h2>
          <p style={{ marginTop: 20, color: 'var(--ink-dim)', fontSize: 15, maxWidth: 420 }}>
            Adresses favorites, réservations à venir et factures regroupées. Réservez en deux clics depuis votre espace.
          </p>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48 }}>
        <div style={{ width: '100%', maxWidth: 420 }}>
          <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--surface-2)', borderRadius: 12, marginBottom: 32 }}>
            <button style={{
              flex: 1, height: 36, borderRadius: 8, border: 0, cursor: 'pointer',
              background: tab === 'login' ? 'var(--surface)' : 'transparent',
              color: tab === 'login' ? 'var(--ink)' : 'var(--ink-mute)', fontSize: 13, fontWeight: 500,
            }}>Connexion</button>
            <button style={{
              flex: 1, height: 36, borderRadius: 8, border: 0, cursor: 'pointer',
              background: tab === 'signup' ? 'var(--surface)' : 'transparent',
              color: tab === 'signup' ? 'var(--ink)' : 'var(--ink-mute)', fontSize: 13, fontWeight: 500,
            }}>Inscription</button>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}
function ScreenLogin() {
  return (
    <AuthShell tab="login">
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 40, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>Bon retour.</h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 14, marginTop: 8, marginBottom: 32 }}>Continuez là où vous vous étiez arrêté.</p>
      <label className="mv-label">Email</label>
      <input className="mv-input" defaultValue="camille.renault@gmail.com" style={{ marginBottom: 16 }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <label className="mv-label">Mot de passe</label>
        <a style={{ fontSize: 12, color: 'var(--accent-2)', textDecoration: 'none', cursor: 'pointer' }}>Oublié ?</a>
      </div>
      <div style={{ position: 'relative', marginBottom: 24 }}>
        <input className="mv-input" type="password" defaultValue="••••••••••" style={{ paddingRight: 44 }} />
        <Icon name="eye" size={16} style={{ position: 'absolute', right: 14, top: 16, color: 'var(--ink-mute)', cursor: 'pointer' }} />
      </div>
      <button className="mv-btn mv-btn-primary mv-btn-lg mv-btn-block">Se connecter</button>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0', color: 'var(--ink-mute)', fontSize: 12 }}>
        <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />ou<span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <button className="mv-btn mv-btn-light" style={{ height: 44 }}><Icon name="apple" size={18} /> Apple</button>
        <button className="mv-btn mv-btn-light" style={{ height: 44 }}><Icon name="google" size={18} /> Google</button>
      </div>
      <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-mute)', marginTop: 28 }}>
        Pas encore de compte ? <a style={{ color: 'var(--accent-2)', textDecoration: 'none', cursor: 'pointer' }}>Inscrivez-vous</a>
      </p>
    </AuthShell>
  );
}
function ScreenSignup() {
  return (
    <AuthShell tab="signup">
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 40, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>Créer un compte.</h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 14, marginTop: 8, marginBottom: 28 }}>30 secondes. Premier trajet à −20 % avec le code WELCOME20.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
        <div><label className="mv-label">Prénom</label><input className="mv-input" placeholder="Camille" /></div>
        <div><label className="mv-label">Nom</label><input className="mv-input" placeholder="Renault" /></div>
      </div>
      <label className="mv-label">Email</label>
      <input className="mv-input" placeholder="vous@email.fr" style={{ marginBottom: 16 }} />
      <label className="mv-label">Téléphone mobile</label>
      <input className="mv-input" placeholder="+33 6 ··" style={{ marginBottom: 16 }} />
      <label className="mv-label">Mot de passe</label>
      <input className="mv-input" type="password" placeholder="8 caractères minimum" style={{ marginBottom: 12 }} />
      <div style={{ display: 'flex', gap: 4, marginBottom: 24 }}>
        {[1, 2, 3, 1, 0].map((s, i) => (
          <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: s ? ['', 'var(--bad)', 'var(--warn)', 'var(--ok)'][s] || 'var(--ok)' : 'var(--line-2)' }} />
        ))}
      </div>
      <label style={{ display: 'flex', gap: 10, fontSize: 12, color: 'var(--ink-dim)', lineHeight: 1.5, marginBottom: 24 }}>
        <input type="checkbox" defaultChecked style={{ marginTop: 2 }} />
        <span>J'accepte les <a style={{ color: 'var(--accent-2)' }}>CGU</a> et la <a style={{ color: 'var(--accent-2)' }}>politique de confidentialité</a>.</span>
      </label>
      <button className="mv-btn mv-btn-primary mv-btn-lg mv-btn-block">Créer mon compte</button>
    </AuthShell>
  );
}

/* ───────────────── ESPACE CLIENT ───────────────── */
function AccountShell({ active, children }) {
  const items = [
    ['Tableau de bord', 'home'],
    ['Réservations', 'bookings'],
    ['Historique', 'history'],
    ['Adresses favorites', 'addresses'],
    ['Moyens de paiement', 'payments'],
    ['Profil', 'profile'],
    ['Factures', 'invoices'],
    ['Aide', 'help'],
  ];
  return (
    <div className="mv-screen" style={{ display: 'grid', gridTemplateColumns: '240px 1fr' }}>
      <aside style={{ borderRight: '1px solid var(--line)', padding: '24px 16px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '0 8px 24px' }}><Logo /></div>
        <button className="mv-btn mv-btn-primary mv-btn-sm" style={{ margin: '0 8px 16px' }}>
          <Icon name="plus" size={14} /> Nouvelle réservation
        </button>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {items.map(([l, k]) => (
            <a key={k} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8,
              background: active === k ? 'var(--surface-2)' : 'transparent',
              color: active === k ? 'var(--ink)' : 'var(--ink-dim)', fontSize: 13, cursor: 'pointer', textDecoration: 'none',
            }}>
              <span style={{ width: 4, height: 4, borderRadius: '50%', background: active === k ? 'var(--accent)' : 'transparent' }} />
              {l}
            </a>
          ))}
        </nav>
        <div style={{ marginTop: 'auto', padding: '12px 8px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', overflow: 'hidden' }}><UImage id="photo-1573496359142-b8d87734a5a2" w={64} h={64} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13 }}>Camille R.</div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>Membre depuis 2024</div>
          </div>
          <Icon name="settings" size={14} style={{ color: 'var(--ink-mute)' }} />
        </div>
      </aside>
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>{children}</div>
    </div>
  );
}
function AccountHeader({ title, sub }) {
  return (
    <header style={{ padding: '24px 40px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>{title}</h1>
        {sub && <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 4 }}>{sub}</div>}
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 36, height: 36, padding: 0 }}><Icon name="search" size={16} /></button>
        <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 36, height: 36, padding: 0, position: 'relative' }}>
          <Icon name="bell" size={16} />
          <span style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
        </button>
      </div>
    </header>
  );
}

function ScreenAccountDashboard() {
  return (
    <AccountShell active="home">
      <AccountHeader title="Bonjour, Camille." sub="Mardi 12 mai 2026 · 1 trajet à venir" />
      <div style={{ padding: 40, overflowY: 'auto', flex: 1 }}>
        {/* Hero next trip */}
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden', marginBottom: 24, background: 'linear-gradient(135deg, var(--surface), var(--surface-2))' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr' }}>
            <div style={{ padding: 28 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <span className="mv-badge mv-badge-info"><span className="mv-live">Confirmé · dans 2 jours</span></span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)' }}>MV-26-5891-CDG</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8 }}>
                <Dot color="var(--accent-2)" />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16 }}>12 rue de Rivoli, Paris 4e</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>Mardi 14 mai · 08:30</div>
                </div>
              </div>
              <ConnectorLine />
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Dot ring />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16 }}>Aéroport CDG, T2E</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>Arrivée estimée 09:12 · 32 km</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
                <button className="mv-btn mv-btn-primary mv-btn-sm">Voir les détails <Icon name="arrowRight" size={14} /></button>
                <button className="mv-btn mv-btn-ghost mv-btn-sm">Modifier</button>
                <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ color: 'var(--ink-mute)' }}>Annuler</button>
              </div>
            </div>
            <div className="mv-map" style={{ position: 'relative', minHeight: 240 }}>
              <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
                <g stroke="rgba(255,255,255,0.08)" strokeWidth="1.5" fill="none">
                  <path d="M0 200 L 140 200 L 140 120 L 320 120" />
                  <path d="M60 0 L 60 260 L 280 260" />
                  <path d="M0 80 L 220 80 L 220 220 L 400 220" />
                </g>
                <path d="M 50 240 Q 130 240 160 180 T 280 100 Q 340 70 400 60" stroke="oklch(0.86 0.12 248)" strokeWidth="3" fill="none" />
                <circle cx="50" cy="240" r="6" fill="oklch(0.86 0.12 248)" />
                <circle cx="400" cy="60" r="8" fill="white" stroke="oklch(0.72 0.16 248)" strokeWidth="3" />
              </svg>
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }}>
          {[
            { k: 'Trajets', v: '47', s: '+8 ce trim.' },
            { k: 'Distance', v: '1 240', u: 'km', s: 'Paris ↔ Marseille' },
            { k: 'Économies', v: '124', u: '€', s: 'avec WELCOME20' },
            { k: 'Note moyenne', v: '4,98', u: '/5', s: 'donnée par chauffeurs' },
          ].map(s => (
            <div key={s.k} className="mv-card" style={{ padding: 18 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.k}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 36, marginTop: 8 }}>{s.v}<span style={{ fontSize: 16, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>{s.u}</span></div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 4 }}>{s.s}</div>
            </div>
          ))}
        </div>

        {/* Quick rebook */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <h2 style={{ fontFamily: 'var(--display)', fontSize: 24, margin: 0, fontWeight: 400 }}>Re-réservation rapide</h2>
          <a style={{ fontSize: 13, color: 'var(--ink-dim)', cursor: 'pointer' }}>Voir l'historique →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {[
            ['Maison → Bureau', '12 rue de Rivoli → 23 Tour First, La Défense', '32 €', 'Lun-Ven 8h'],
            ['Bureau → Maison', 'Tour First → 12 rue de Rivoli', '34 €', 'Vendredi 19h'],
            ['Aéroport CDG', '12 rue de Rivoli → CDG T2E', '62 €', 'Mensuel'],
          ].map(([t, s, p, freq]) => (
            <button key={t} className="mv-card" style={{ textAlign: 'left', cursor: 'pointer', background: 'var(--surface)', border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontSize: 15, fontWeight: 500 }}>{t}</span>
                <span style={{ fontFamily: 'var(--display)', fontSize: 18 }}>{p}</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 6, lineHeight: 1.4 }}>{s}</div>
              <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mv-badge" style={{ height: 22, fontSize: 10 }}>{freq}</span>
                <span style={{ fontSize: 12, color: 'var(--accent-2)' }}>Re-réserver →</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </AccountShell>
  );
}

function ScreenHistory() {
  const trips = [
    { d: '14 mai 2026', t: '08:30', from: '12 rue de Rivoli', to: 'CDG T2E', driver: 'Marc D.', car: 'Berline', price: '49,60 €', status: 'pending', label: 'Confirmé' },
    { d: '7 mai 2026', t: '19:15', from: 'Tour First, La Défense', to: '12 rue de Rivoli', driver: 'Inès L.', car: 'Berline', price: '34,00 €', status: 'completed', label: 'Terminé' },
    { d: '2 mai 2026', t: '07:45', from: '12 rue de Rivoli', to: 'CDG T2E', driver: 'Karim B.', car: 'Berline', price: '58,00 €', status: 'completed', label: 'Terminé' },
    { d: '28 avr. 2026', t: '21:00', from: 'Hôtel Le Bristol', to: 'Gare de Lyon', driver: 'Sofia M.', car: 'Premium', price: '78,00 €', status: 'completed', label: 'Terminé' },
    { d: '24 avr. 2026', t: '16:30', from: 'CDG T2E', to: '12 rue de Rivoli', driver: 'Marc D.', car: 'Berline', price: '62,00 €', status: 'completed', label: 'Terminé' },
    { d: '17 avr. 2026', t: '09:00', from: '12 rue de Rivoli', to: 'Orly Sud', driver: 'Karim B.', car: 'Van', price: '94,00 €', status: 'cancelled', label: 'Annulé' },
  ];
  return (
    <AccountShell active="history">
      <AccountHeader title="Historique des trajets" sub="47 trajets · 1 240 km parcourus avec monvtc" />
      <div style={{ padding: 40, overflowY: 'auto', flex: 1 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: 'var(--surface-2)' }}>Tous</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm">Terminés</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm">Annulés</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ marginLeft: 'auto' }}><Icon name="filter" size={14} /> Filtrer</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="download" size={14} /> Exporter</button>
        </div>
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '120px 1.6fr 1fr 100px 110px 110px 60px', padding: '14px 20px', fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid var(--line)' }}>
            <span>Date</span><span>Trajet</span><span>Chauffeur</span><span>Véhicule</span><span>Statut</span><span style={{ textAlign: 'right' }}>Montant</span><span></span>
          </div>
          {trips.map((tr, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 1.6fr 1fr 100px 110px 110px 60px',
              padding: '16px 20px', alignItems: 'center', fontSize: 13,
              borderBottom: i < trips.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div>
                <div>{tr.d}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>{tr.t}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-2)' }} />
                  <span style={{ width: 1, height: 16, background: 'var(--line-2)' }} />
                  <span style={{ width: 6, height: 6, borderRadius: '50%', border: '1.5px solid var(--accent-2)' }} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tr.from}</div>
                  <div style={{ color: 'var(--ink-dim)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 4 }}>{tr.to}</div>
                </div>
              </div>
              <div>{tr.driver}</div>
              <div style={{ color: 'var(--ink-dim)' }}>{tr.car}</div>
              <div><Status kind={tr.status} label={tr.label} /></div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 18, textAlign: 'right' }}>{tr.price}</div>
              <div style={{ textAlign: 'right' }}><button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 28, height: 28, padding: 0, fontSize: 16 }}>⋯</button></div>
            </div>
          ))}
        </div>
      </div>
    </AccountShell>
  );
}

function ScreenProfile() {
  return (
    <AccountShell active="profile">
      <AccountHeader title="Profil" sub="Informations personnelles, préférences de trajet et adresses" />
      <div style={{ padding: 40, overflowY: 'auto', flex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
        <div className="mv-card" style={{ padding: 28 }}>
          <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: '0 0 4px', fontWeight: 400 }}>Identité</h3>
          <p style={{ color: 'var(--ink-mute)', fontSize: 13, margin: '0 0 24px' }}>Vos coordonnées et informations bancaires.</p>

          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', overflow: 'hidden' }}><UImage id="photo-1573496359142-b8d87734a5a2" w={128} h={128} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 500 }}>Camille Renault</div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4 }}>Compte vérifié · Particulier</div>
            </div>
            <button className="mv-btn mv-btn-ghost mv-btn-sm">Changer</button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div><label className="mv-label">Prénom</label><input className="mv-input" defaultValue="Camille" /></div>
            <div><label className="mv-label">Nom</label><input className="mv-input" defaultValue="Renault" /></div>
            <div><label className="mv-label">Email</label><input className="mv-input" defaultValue="camille.renault@gmail.com" /></div>
            <div><label className="mv-label">Téléphone</label><input className="mv-input" defaultValue="+33 6 12 34 56 78" /></div>
            <div style={{ gridColumn: '1 / -1' }}><label className="mv-label">Adresse de facturation</label><input className="mv-input" defaultValue="12 rue de Rivoli, 75004 Paris" /></div>
          </div>
          <div style={{ marginTop: 24, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
            <button className="mv-btn mv-btn-ghost">Annuler</button>
            <button className="mv-btn mv-btn-primary">Enregistrer</button>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="mv-card" style={{ padding: 20 }}>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 20, margin: '0 0 16px', fontWeight: 400 }}>Adresses favorites</h3>
            {[
              ['Maison', '12 rue de Rivoli, 75004 Paris', 'pin'],
              ['Bureau', 'Tour First, La Défense', 'pin'],
              ['Belle-mère', '4 avenue Foch, Boulogne', 'pin'],
            ].map(([n, a]) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--line)' }}>
                <Icon name="pin" size={14} style={{ color: 'var(--accent-2)' }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13 }}>{n}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a}</div>
                </div>
                <Icon name="edit" size={14} style={{ color: 'var(--ink-mute)' }} />
              </div>
            ))}
            <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ borderStyle: 'dashed', width: '100%', marginTop: 12 }}><Icon name="plus" size={12} /> Ajouter</button>
          </div>

          <div className="mv-card" style={{ padding: 20 }}>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 20, margin: '0 0 16px', fontWeight: 400 }}>Préférences</h3>
            {[
              ['Véhicule par défaut', 'Berline'],
              ['Température', '21 °C'],
              ['Discussion', 'Calme'],
              ['Eau & boissons', 'Oui'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px solid var(--line)', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-dim)' }}>{k}</span>
                <span>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </AccountShell>
  );
}

/* ───────────────── FAQ + CONTACT ───────────────── */
function ScreenFAQ() {
  const cats = ['Réservation', 'Paiement', 'Annulation', 'Bagages', 'Aéroport', 'Entreprise'];
  const qs = [
    { q: 'Comment réserver un trajet ?', a: 'Saisissez votre itinéraire dans le formulaire d\'accueil, choisissez date, heure et véhicule, puis confirmez. La réservation prend en moyenne 60 secondes.', open: true },
    { q: 'Quel est le délai d\'annulation gratuite ?', a: 'Vous pouvez annuler gratuitement jusqu\'à 1 heure avant la prise en charge. Au-delà, des frais peuvent s\'appliquer.' },
    { q: 'Le prix affiché est-il le prix final ?', a: 'Oui. Le tarif est fixe, calculé à la réservation. Aucun frais caché, même en cas de trafic dense.' },
    { q: 'Comment ajouter un siège bébé ?', a: 'Lors de la réservation, étape « Coordonnées », activez l\'option « Siège bébé » ou « Booster enfant ». C\'est gratuit.' },
    { q: 'Que se passe-t-il si mon vol est en retard ?', a: 'Nous suivons votre vol en temps réel via le numéro fourni. Le chauffeur ajuste sa prise en charge automatiquement.' },
    { q: 'Comment obtenir une facture entreprise ?', a: 'Renseignez votre TVA et raison sociale dans Profil → Facturation. Les factures se génèrent automatiquement après chaque trajet.' },
  ];
  return (
    <div className="mv-screen" style={{ overflowY: 'auto' }}>
      <SiteHeader active="help" />
      <section style={{ padding: '64px 56px 32px', textAlign: 'center', background: 'radial-gradient(60% 80% at 50% 0%, var(--accent-soft), transparent)' }}>
        <span className="mv-badge mv-badge-info" style={{ marginBottom: 20 }}>Centre d'aide</span>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 64, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
          Comment <i style={{ color: 'var(--accent-2)' }}>vous aider ?</i>
        </h1>
        <div style={{ position: 'relative', maxWidth: 540, margin: '32px auto 0' }}>
          <Icon name="search" size={16} style={{ position: 'absolute', left: 18, top: 18, color: 'var(--ink-mute)' }} />
          <input className="mv-input" style={{ height: 52, paddingLeft: 48, fontSize: 15, background: 'var(--surface)' }} placeholder="Rechercher une question…" />
        </div>
      </section>
      <section style={{ padding: '40px 56px', display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
        {cats.map((c, i) => (
          <button key={c} className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: i === 0 ? 'var(--accent-soft)' : 'var(--surface)', color: i === 0 ? 'var(--accent-2)' : 'var(--ink-dim)', borderColor: i === 0 ? 'transparent' : 'var(--line)' }}>{c}</button>
        ))}
      </section>
      <section style={{ padding: '0 56px 80px', maxWidth: 880, margin: '0 auto', width: '100%' }}>
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden' }}>
          {qs.map((it, i) => (
            <div key={i} style={{ borderBottom: i < qs.length - 1 ? '1px solid var(--line)' : 'none', padding: '20px 24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{it.q}</span>
                <Icon name={it.open ? 'chevronDown' : 'chevronRight'} size={16} style={{ color: 'var(--ink-mute)' }} />
              </div>
              {it.open && <p style={{ marginTop: 12, fontSize: 14, color: 'var(--ink-dim)', lineHeight: 1.6, maxWidth: 700 }}>{it.a}</p>}
            </div>
          ))}
        </div>
      </section>
      <SiteFooter />
    </div>
  );
}

function ScreenContact() {
  return (
    <div className="mv-screen" style={{ overflowY: 'auto' }}>
      <SiteHeader active="help" />
      <section style={{ padding: '56px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <span className="mv-badge mv-badge-info" style={{ marginBottom: 20 }}>Contact</span>
          <h1 style={{ fontFamily: 'var(--display)', fontSize: 64, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            Une question,<br/>une <i style={{ color: 'var(--accent-2)' }}>urgence ?</i>
          </h1>
          <p style={{ marginTop: 24, fontSize: 16, color: 'var(--ink-dim)', maxWidth: 460, lineHeight: 1.6 }}>
            Notre concierge répond 24/7. Pour les demandes événementielles ou entreprise, prenez rendez-vous directement avec un chargé de compte.
          </p>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['phone', '+33 1 86 65 12 40', '24h/24, 7j/7 — réponse immédiate'],
              ['msg', 'Messagerie instantanée', 'Réponse moyenne en 90 secondes'],
              ['mail', 'concierge@monvtc.fr', 'Sous 4h ouvrées'],
            ].map(([ic, l, s]) => (
              <div key={l} className="mv-card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={ic} size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15 }}>{l}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>{s}</div>
                </div>
                <Icon name="arrowRight" size={14} style={{ color: 'var(--ink-mute)' }} />
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, padding: 20, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12 }}>
            <div style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Adresse</div>
            <div style={{ fontSize: 14 }}>monvtc SAS</div>
            <div style={{ fontSize: 14, color: 'var(--ink-dim)' }}>27 rue du Faubourg Saint-Honoré, 75008 Paris</div>
          </div>
        </div>

        <div className="mv-card" style={{ padding: 32 }}>
          <h3 style={{ fontFamily: 'var(--display)', fontSize: 28, margin: '0 0 8px', fontWeight: 400 }}>Écrivez-nous</h3>
          <p style={{ color: 'var(--ink-mute)', fontSize: 13, margin: '0 0 24px' }}>Réponse sous 4h ouvrées.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div><label className="mv-label">Prénom</label><input className="mv-input" /></div>
            <div><label className="mv-label">Nom</label><input className="mv-input" /></div>
          </div>
          <div style={{ marginTop: 14 }}><label className="mv-label">Email</label><input className="mv-input" /></div>
          <div style={{ marginTop: 14 }}>
            <label className="mv-label">Sujet</label>
            <select className="mv-input" defaultValue="info">
              <option>Demande d'information</option>
              <option>Réservation existante</option>
              <option>Demande entreprise / événementiel</option>
              <option>Réclamation</option>
            </select>
          </div>
          <div style={{ marginTop: 14 }}>
            <label className="mv-label">Message</label>
            <textarea className="mv-input" style={{ height: 140, padding: 14, resize: 'none' }} placeholder="Décrivez votre demande…" />
          </div>
          <button className="mv-btn mv-btn-primary mv-btn-block mv-btn-lg" style={{ marginTop: 20 }}>Envoyer le message</button>
        </div>
      </section>
      <SiteFooter />
    </div>
  );
}

/* ───────────────── ADMIN — Gestion réservations ───────────────── */
function ScreenAdmin() {
  const rows = [
    { ref: 'MV-26-5891', client: 'Camille Renault', from: '12 rue de Rivoli', to: 'CDG T2E', dt: '14 mai · 08:30', driver: 'Marc D.', amount: '49,60 €', status: 'confirmed', label: 'Confirmé' },
    { ref: 'MV-26-5887', client: 'Antoine Decroix', from: 'Tour First', to: 'Hôtel Le Bristol', dt: '14 mai · 09:00', driver: 'En recherche', amount: '38,00 €', status: 'pending', label: 'À affecter' },
    { ref: 'MV-26-5882', client: 'Léa Marchand', from: 'Hôtel Le Bristol', to: 'Opéra Bastille', dt: '14 mai · 09:15', driver: 'Inès L.', amount: '24,00 €', status: 'enroute', label: 'En route' },
    { ref: 'MV-26-5879', client: 'Soufiane Allali', from: 'Gare du Nord', to: '34 rue de Charonne', dt: '14 mai · 10:30', driver: 'Karim B.', amount: '32,00 €', status: 'confirmed', label: 'Confirmé' },
    { ref: 'MV-26-5874', client: 'M & Mme Aubert', from: 'Versailles', to: 'CDG T2F', dt: '14 mai · 11:00', driver: 'Sofia M.', amount: '128,00 €', status: 'confirmed', label: 'Confirmé · Premium' },
    { ref: 'MV-26-5870', client: 'Valérie Henry', from: 'Aéroport Orly', to: '7 rue Cler, Paris 7e', dt: '14 mai · 12:45', driver: 'Marc D.', amount: '64,00 €', status: 'pending', label: 'En attente' },
    { ref: 'MV-26-5868', client: 'Patrick Dubois', from: 'Disneyland Hôtel', to: 'CDG T1', dt: '14 mai · 14:00', driver: 'En recherche', amount: '88,00 €', status: 'pending', label: 'À affecter' },
    { ref: 'MV-26-5851', client: 'Ines Fonseca', from: 'Sciences Po', to: '12 rue de Rivoli', dt: '13 mai · 18:30', driver: 'Inès L.', amount: '21,00 €', status: 'completed', label: 'Terminé' },
  ];
  return (
    <div className="mv-screen" style={{ display: 'grid', gridTemplateColumns: '230px 1fr' }}>
      <aside style={{ borderRight: '1px solid var(--line)', padding: 20, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '0 8px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Logo />
            <span style={{ fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'var(--accent-soft)', color: 'var(--accent-2)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Admin</span>
          </div>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[
            ['Aujourd\'hui', 'today', true, '7'],
            ['À affecter', 'unassigned', false, '3'],
            ['Réservations', 'all', false],
            ['Chauffeurs', 'drivers', false, '12'],
            ['Clients', 'clients', false],
            ['Flotte', 'fleet', false],
            ['Facturation', 'billing', false],
            ['Réglages', 'settings', false],
          ].map(([l, k, sel, badge]) => (
            <a key={k} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8,
              background: sel ? 'var(--surface-2)' : 'transparent',
              color: sel ? 'var(--ink)' : 'var(--ink-dim)', fontSize: 13, cursor: 'pointer',
            }}>
              <span style={{ width: 4, height: 4, borderRadius: '50%', background: sel ? 'var(--accent)' : 'transparent' }} />
              <span style={{ flex: 1 }}>{l}</span>
              {badge && <span style={{ fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'var(--surface-3)', color: 'var(--ink-dim)' }}>{badge}</span>}
            </a>
          ))}
        </nav>
      </aside>

      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <header style={{ padding: '20px 32px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h1 style={{ fontFamily: 'var(--display)', fontSize: 26, margin: 0, fontWeight: 400 }}>Réservations · Mardi 14 mai</h1>
            <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}><span className="mv-live">7 trajets en cours</span> · 32 prévus</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="filter" size={14} /> Filtres</button>
            <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="download" size={14} /> Export CSV</button>
            <button className="mv-btn mv-btn-primary mv-btn-sm"><Icon name="plus" size={14} /> Nouvelle</button>
          </div>
        </header>

        {/* KPI strip */}
        <div style={{ padding: '20px 32px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, borderBottom: '1px solid var(--line)' }}>
          {[
            ['Trajets aujourd\'hui', '32', '+5 vs hier', 'ok'],
            ['CA jour', '2 184 €', '+12 %', 'ok'],
            ['Note moyenne', '4,92', 'sur 18 retours', ''],
            ['Taux d\'affectation', '94 %', '3 à compléter', 'warn'],
            ['Annulations', '1', '< 3 % cible', 'ok'],
          ].map(([k, v, d, t]) => (
            <div key={k} style={{ padding: 14, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 28, marginTop: 6 }}>{v}</div>
              <div style={{ fontSize: 11, color: t === 'ok' ? 'oklch(0.84 0.14 165)' : t === 'warn' ? 'oklch(0.86 0.14 75)' : 'var(--ink-mute)', marginTop: 4 }}>{d}</div>
            </div>
          ))}
        </div>

        {/* Table */}
        <div style={{ padding: '24px 32px 32px', overflowY: 'auto', flex: 1 }}>
          <div className="mv-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '110px 1.2fr 1.6fr 110px 1fr 110px 130px 60px', padding: '12px 18px', fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid var(--line)', background: 'var(--surface-2)' }}>
              <span>Réf.</span><span>Client</span><span>Trajet</span><span>Quand</span><span>Chauffeur</span><span style={{ textAlign: 'right' }}>Montant</span><span>Statut</span><span></span>
            </div>
            {rows.map((r, i) => (
              <div key={r.ref} style={{
                display: 'grid', gridTemplateColumns: '110px 1.2fr 1.6fr 110px 1fr 110px 130px 60px',
                padding: '14px 18px', alignItems: 'center', fontSize: 13,
                borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
                background: i === 1 ? 'oklch(0.86 0.14 75 / 0.06)' : 'transparent',
              }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)' }}>{r.ref}</span>
                <span>{r.client}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.from}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 2 }}>→ {r.to}</div>
                </div>
                <span style={{ color: 'var(--ink-dim)' }}>{r.dt}</span>
                <span style={{ color: r.driver === 'En recherche' ? 'oklch(0.86 0.14 75)' : 'var(--ink)' }}>{r.driver}</span>
                <span style={{ fontFamily: 'var(--display)', fontSize: 16, textAlign: 'right' }}>{r.amount}</span>
                <span><Status kind={r.status} label={r.label} /></span>
                <span style={{ textAlign: 'right' }}><button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 28, height: 28, padding: 0, fontSize: 16 }}>⋯</button></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLogin, ScreenSignup, ScreenAccountDashboard, ScreenHistory, ScreenProfile, ScreenFAQ, ScreenContact, ScreenAdmin });