// screens-mobile.jsx — Mobile screens (used inside <PhoneFrame>)
// 360 × 740 inner area. Each function returns the screen contents only.

function MHeader({ title, back, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 16px 16px' }}>
      {back ? <Icon name="arrowLeft" size={20} /> : <Icon name="menu" size={20} />}
      <span style={{ fontSize: 14, fontWeight: 500 }}>{title}</span>
      {action || <Icon name="bell" size={20} />}
    </div>
  );
}

/* ── Mobile Home ──────────────────────────────────── */
function MScreenHome() {
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', overflowY: 'auto' }}>
      <div style={{ padding: '12px 16px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Logo />
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 36, height: 36, padding: 0 }}><Icon name="user" size={16} /></button>
        </div>
      </div>
      {/* hero image */}
      <div style={{ position: 'relative', height: 280, margin: '0 16px 16px', borderRadius: 18, overflow: 'hidden' }}>
        <UImage id="photo-1492144534655-ae79c964c9d7" w={720} h={560} style={{ filter: 'brightness(0.55)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(8,16,31,0.95) 100%)' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20 }}>
          <span className="mv-badge mv-badge-info" style={{ marginBottom: 12 }}>24/7 · Paris &amp; IDF</span>
          <h1 style={{ fontFamily: 'var(--display)', fontSize: 38, lineHeight: 1, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
            Le luxe d'arriver<br/><i style={{ color: 'var(--accent-2)' }}>à l'heure.</i>
          </h1>
        </div>
      </div>
      {/* Booking widget */}
      <div style={{ margin: '0 16px 16px', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 16, padding: 12 }}>
        <FieldRow icon={<Dot color="var(--accent-2)" />} label="Départ" value="12 rue de Rivoli" />
        <ConnectorLine />
        <FieldRow icon={<Dot ring />} label="Destination" value="CDG, Terminal 2E" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
          <FieldBox icon="cal" label="Date" value="Mar. 14 mai" />
          <FieldBox icon="clock" label="Heure" value="08:30" />
        </div>
        <button className="mv-btn mv-btn-primary mv-btn-block mv-btn-lg" style={{ marginTop: 14 }}>Voir le prix · 62 €</button>
      </div>
      {/* services row */}
      <div style={{ padding: '8px 16px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 14, fontWeight: 500 }}>Nos gammes</span>
        <a style={{ fontSize: 12, color: 'var(--ink-dim)' }}>Tout voir</a>
      </div>
      <div style={{ display: 'flex', gap: 10, padding: '8px 16px 16px', overflowX: 'auto' }}>
        {[
          { t: 'Berline', p: '35 €', img: 'photo-1503376780353-7e6692767b70' },
          { t: 'Van', p: '65 €', img: 'photo-1610465299996-30f240ac2b1c' },
          { t: 'Premium', p: '95 €', img: 'photo-1494976388531-d1058494cdd8' },
        ].map(s => (
          <div key={s.t} style={{ flexShrink: 0, width: 140, borderRadius: 12, overflow: 'hidden', border: '1px solid var(--line)', background: 'var(--surface)' }}>
            <div style={{ height: 80 }}><UImage id={s.img} w={300} h={200} /></div>
            <div style={{ padding: 10 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{s.t}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>dès {s.p}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Reassurance */}
      <div style={{ padding: '8px 16px 24px' }}>
        <div className="mv-card" style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[['shield', 'Prix fixe', 'Sans surprise'], ['bolt', '60 sec', 'Réservation'], ['star', '4,9/5', '12 400 avis'], ['phone', '24/7', 'Concierge']].map(([i, t, s]) => (
            <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent-soft)', color: 'var(--accent-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={i} size={14} />
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{t}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-mute)' }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ── Mobile Booking step (combined typeform-style) ─── */
function MScreenBooking() {
  const times = ['07:30', '08:00', '08:30', '09:00'];
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <MHeader title="Réservation" back action={<span style={{ fontSize: 12, color: 'var(--ink-mute)' }}>2/5</span>} />
      <div style={{ padding: '0 16px 12px', display: 'flex', gap: 4 }}>
        {[1, 1, 0, 0, 0].map((s, i) => <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: s ? 'var(--accent)' : 'var(--line-2)' }} />)}
      </div>
      <div style={{ padding: '12px 20px 20px', flex: 1, overflowY: 'auto' }}>
        <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Étape 2 — Date & heure</div>
        <h2 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: '8px 0 16px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
          Quand <i style={{ color: 'var(--accent-2)' }}>partez-vous ?</i>
        </h2>
        <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: 'var(--accent-soft)', color: 'var(--accent-2)', borderColor: 'transparent' }}><Icon name="bolt" size={12} /> Maintenant</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: 'var(--surface-2)' }}>Plus tard</button>
        </div>
        <div className="mv-card" style={{ padding: 14, marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 500 }}>Mai 2026</span>
            <div style={{ display: 'flex', gap: 4 }}>
              <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 26, height: 26, padding: 0 }}><Icon name="arrowLeft" size={12} /></button>
              <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 26, height: 26, padding: 0 }}><Icon name="arrowRight" size={12} /></button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
            {['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((d, i) => <div key={i} style={{ fontSize: 10, color: 'var(--ink-mute)', textAlign: 'center' }}>{d}</div>)}
            {[11, 12, 13, 14, 15, 16, 17].map(d => {
              const sel = d === 14;
              return <button key={d} style={{ height: 32, borderRadius: 8, border: 0, background: sel ? 'var(--accent)' : 'transparent', color: sel ? '#06101e' : 'var(--ink)', fontSize: 12, fontWeight: sel ? 600 : 400 }}>{d}</button>;
            })}
          </div>
        </div>
        <label className="mv-label">Heure</label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {times.map(t => {
            const sel = t === '08:30';
            return <button key={t} style={{ height: 36, borderRadius: 8, background: sel ? 'var(--accent-soft)' : 'transparent', border: '1px solid ' + (sel ? 'var(--accent)' : 'var(--line)'), color: sel ? 'var(--accent-2)' : 'var(--ink-dim)', fontSize: 12 }}>{t}</button>;
          })}
        </div>
      </div>
      <div style={{ padding: 16, borderTop: '1px solid var(--line)' }}>
        <button className="mv-btn mv-btn-primary mv-btn-block mv-btn-lg">Continuer · 62 € <Icon name="arrowRight" /></button>
      </div>
    </div>
  );
}

/* ── Mobile Confirmation ─────────────────────────── */
function MScreenConfirm() {
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'relative', height: 200 }}>
        <UImage id="photo-1610465299996-30f240ac2b1c" w={720} h={400} style={{ filter: 'brightness(0.55)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent, var(--bg))' }} />
        <div style={{ position: 'absolute', top: 16, left: 16 }}>
          <Icon name="arrowLeft" size={20} />
        </div>
        <div style={{ position: 'absolute', bottom: 16, left: 20 }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'oklch(0.78 0.14 165 / 0.2)', color: 'oklch(0.84 0.14 165)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="check" size={22} />
          </div>
        </div>
      </div>
      <div style={{ padding: '8px 20px', flex: 1, overflowY: 'auto' }}>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 36, margin: '8px 0 8px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
          Réservation<br/><i style={{ color: 'var(--accent-2)' }}>confirmée.</i>
        </h1>
        <p style={{ fontSize: 13, color: 'var(--ink-dim)', marginBottom: 20 }}>Coordonnées du chauffeur 30 min avant le départ.</p>

        <div className="mv-card" style={{ padding: 16, marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Référence</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent-2)' }}>MV-26-5891-CDG</span>
          </div>
          <FieldRow icon={<Dot color="var(--accent-2)" />} label="Départ" value="12 rue de Rivoli" />
          <ConnectorLine />
          <FieldRow icon={<Dot ring />} label="Arrivée" value="CDG · Terminal 2E" />
        </div>

        <div className="mv-card" style={{ padding: 14, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 44, height: 44, borderRadius: '50%', overflow: 'hidden' }}><UImage id="photo-1500648767791-00dcc994a43e" w={88} h={88} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Chauffeur</div>
            <div style={{ fontSize: 14 }}>Marc D. <Stars n={5} size={10} /></div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>Mercedes Classe E · AB-123-CD</div>
          </div>
          <span className="mv-live" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>Affecté</span>
        </div>

        <button className="mv-btn mv-btn-primary mv-btn-block">Voir dans mon espace <Icon name="arrowRight" /></button>
        <button className="mv-btn mv-btn-ghost mv-btn-block" style={{ marginTop: 8 }}><Icon name="cal" size={14} /> Ajouter au calendrier</button>
      </div>
    </div>
  );
}

/* ── Mobile Espace client ────────────────────────── */
function MScreenAccount() {
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 20px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>Bonjour</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 26, marginTop: 2, fontWeight: 400 }}>Camille R.</div>
          </div>
          <div style={{ width: 44, height: 44, borderRadius: '50%', overflow: 'hidden', border: '2px solid var(--accent-soft)' }}>
            <UImage id="photo-1573496359142-b8d87734a5a2" w={88} h={88} />
          </div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 80px' }}>
        {/* Next trip card */}
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden', marginBottom: 16, background: 'linear-gradient(135deg, var(--surface), var(--surface-2))' }}>
          <div className="mv-map" style={{ height: 110, position: 'relative' }}>
            <svg width="100%" height="100%" viewBox="0 0 360 120" preserveAspectRatio="xMidYMid slice">
              <path d="M 30 90 Q 100 90 140 60 T 280 30" stroke="oklch(0.86 0.12 248)" strokeWidth="3" fill="none" />
              <circle cx="30" cy="90" r="6" fill="oklch(0.86 0.12 248)" />
              <circle cx="280" cy="30" r="7" fill="white" stroke="oklch(0.72 0.16 248)" strokeWidth="3" />
            </svg>
            <span className="mv-badge mv-badge-info" style={{ position: 'absolute', top: 12, left: 12 }}>Confirmé · dans 2j</span>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontSize: 13 }}>12 rue de Rivoli → CDG T2E</div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 4 }}>Mardi 14 mai · 08:30 · 49,60 €</div>
            <button className="mv-btn mv-btn-ghost mv-btn-sm mv-btn-block" style={{ marginTop: 12 }}>Voir les détails →</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
          {[
            ['cal', 'Réserver', 'Nouveau trajet'],
            ['heart', 'Favoris', '3 adresses'],
            ['cards', 'Paiement', 'Visa · 4242'],
            ['user', 'Profil', 'Préférences'],
          ].map(([i, t, s]) => (
            <button key={t} className="mv-card" style={{ padding: 14, textAlign: 'left', background: 'var(--surface)', cursor: 'pointer' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent-soft)', color: 'var(--accent-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
                <Icon name={i} size={16} />
              </div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{t}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>{s}</div>
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span style={{ fontSize: 14, fontWeight: 500 }}>Trajets récents</span>
          <a style={{ fontSize: 12, color: 'var(--ink-dim)' }}>Tout voir</a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            ['7 mai', '19:15', 'Tour First → Rivoli', '34,00 €'],
            ['2 mai', '07:45', 'Rivoli → CDG T2E', '58,00 €'],
            ['28 avr.', '21:00', 'Le Bristol → Gare Lyon', '78,00 €'],
          ].map(([d, t, r, p]) => (
            <div key={r} className="mv-card" style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-dim)' }}>
                <Icon name="car" size={16} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13 }}>{r}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>{d} · {t}</div>
              </div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 16 }}>{p}</div>
            </div>
          ))}
        </div>
      </div>
      {/* tab bar */}
      <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, padding: 8, background: 'rgba(14,24,48,0.85)', backdropFilter: 'blur(16px)', border: '1px solid var(--line-2)', borderRadius: 18, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
        {[['user', 'Compte', true], ['cal', 'Réserver', false], ['cards', 'Trajets', false], ['settings', 'Réglages', false]].map(([i, l, sel]) => (
          <button key={l} style={{ padding: '8px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, background: sel ? 'var(--accent-soft)' : 'transparent', borderRadius: 12, border: 0, color: sel ? 'var(--accent-2)' : 'var(--ink-mute)', cursor: 'pointer' }}>
            <Icon name={i} size={16} />
            <span style={{ fontSize: 10 }}>{l}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ── Mobile Login ────────────────────────────────── */
function MScreenLogin() {
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'relative', height: 200 }}>
        <UImage id="photo-1494976388531-d1058494cdd8" w={720} h={400} style={{ filter: 'brightness(0.5)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent, var(--bg))' }} />
        <div style={{ position: 'absolute', top: 12, left: 16 }}><Logo /></div>
      </div>
      <div style={{ padding: '0 20px 20px', flex: 1, marginTop: -20, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 38, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
          Bon <i style={{ color: 'var(--accent-2)' }}>retour.</i>
        </h1>
        <p style={{ color: 'var(--ink-dim)', fontSize: 13, marginTop: 6, marginBottom: 20 }}>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: 12 }} />
        <label className="mv-label">Mot de passe</label>
        <input className="mv-input" type="password" defaultValue="••••••••••" style={{ marginBottom: 16 }} />
        <button className="mv-btn mv-btn-primary mv-btn-block mv-btn-lg">Se connecter</button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0 16px', color: 'var(--ink-mute)', fontSize: 11 }}>
          <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"><Icon name="apple" size={16} /> Apple</button>
          <button className="mv-btn mv-btn-light"><Icon name="google" size={16} /> Google</button>
        </div>
        <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-mute)', marginTop: 20 }}>
          Pas encore de compte ? <a style={{ color: 'var(--accent-2)' }}>Inscrivez-vous</a>
        </p>
      </div>
    </div>
  );
}

/* ── Mobile FAQ ─────────────────────────────────── */
function MScreenFAQ() {
  const qs = [
    { q: 'Comment réserver un trajet ?', open: true, a: 'Saisissez votre itinéraire, choisissez date et véhicule, puis confirmez. ≈ 60s.' },
    { q: 'Délai d\'annulation gratuite ?' },
    { q: 'Le prix affiché est-il final ?' },
    { q: 'Comment ajouter un siège bébé ?' },
    { q: 'Si mon vol est en retard ?' },
    { q: 'Facture entreprise ?' },
  ];
  return (
    <div className="mv-screen" style={{ background: 'var(--bg)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <MHeader title="Aide" back action={<Icon name="search" size={20} />} />
      <div style={{ padding: '4px 20px', flex: 1, overflowY: 'auto' }}>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: '4px 0 16px', fontWeight: 400, letterSpacing: '-0.02em' }}>
          Comment <i style={{ color: 'var(--accent-2)' }}>vous aider ?</i>
        </h1>
        <div style={{ position: 'relative', marginBottom: 16 }}>
          <Icon name="search" size={14} style={{ position: 'absolute', left: 14, top: 17, color: 'var(--ink-mute)' }} />
          <input className="mv-input" style={{ paddingLeft: 38, fontSize: 13 }} placeholder="Rechercher…" />
        </div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 16, overflowX: 'auto' }}>
          {['Réservation', 'Paiement', 'Annulation', 'Bagages'].map((c, i) => (
            <button key={c} className="mv-btn mv-btn-ghost mv-btn-sm" style={{ flexShrink: 0, 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>
          ))}
        </div>
        <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: '14px 16px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 13, fontWeight: it.open ? 500 : 400, paddingRight: 8 }}>{it.q}</span>
                <Icon name={it.open ? 'chevronDown' : 'chevronRight'} size={14} style={{ color: 'var(--ink-mute)' }} />
              </div>
              {it.open && <p style={{ marginTop: 10, fontSize: 12, color: 'var(--ink-dim)', lineHeight: 1.55 }}>{it.a}</p>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MScreenHome, MScreenBooking, MScreenConfirm, MScreenAccount, MScreenLogin, MScreenFAQ });