// screens-desktop-1.jsx — Homepage, Booking flow, Confirmation
// Renders inside design-canvas artboards (1280×800).

/* ───────────────── HOMEPAGE ───────────────── */
function ScreenHome() {
  return (
    <div className="mv-screen" style={{ overflowY: 'auto' }}>
      <SiteHeader active="home" />

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: 620, padding: '64px 56px 80px' }}>
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0 }}>
          <UImage id="photo-1492144534655-ae79c964c9d7" w={1600} h={900} alt="" style={{ filter: 'brightness(0.45) saturate(1.1)' }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(90deg, rgba(8,16,31,0.95) 0%, rgba(8,16,31,0.7) 45%, rgba(8,16,31,0.4) 100%)',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, transparent 60%, var(--bg) 100%)',
          }} />
        </div>

        <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'start' }}>
          <div>
            <span className="mv-badge mv-badge-info" style={{ marginBottom: 24 }}>Disponible 24/7 · Paris &amp; IDF</span>
            <h1 style={{
              fontFamily: 'var(--display)', fontSize: 88, lineHeight: 0.95, margin: 0,
              letterSpacing: '-0.02em', fontWeight: 400,
            }}>
              Le luxe<br/>
              d'arriver <i style={{ color: 'var(--accent-2)' }}>à l'heure.</i>
            </h1>
            <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.55, color: 'var(--ink-dim)', maxWidth: 460 }}>
              Réservez un chauffeur privé en moins de 60&nbsp;secondes. Prix fixe, véhicules récents, chauffeurs formés. Sans frais cachés.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, alignItems: 'center' }}>
              <button className="mv-btn mv-btn-primary mv-btn-lg">Réserver maintenant <Icon name="arrowRight" /></button>
              <button className="mv-btn mv-btn-ghost mv-btn-lg">Demander un devis</button>
            </div>
            <div style={{ display: 'flex', gap: 32, marginTop: 48, alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>4,9<span style={{ color: 'var(--ink-mute)', fontSize: 18 }}>/5</span></div>
                <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>+ 12 400 avis vérifiés</div>
              </div>
              <div style={{ width: 1, height: 32, background: 'var(--line)' }} />
              <div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>60<span style={{ color: 'var(--ink-mute)', fontSize: 18 }}>s</span></div>
                <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>réservation moyenne</div>
              </div>
              <div style={{ width: 1, height: 32, background: 'var(--line)' }} />
              <div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>320</div>
                <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>chauffeurs partenaires</div>
              </div>
            </div>
          </div>

          {/* Booking widget */}
          <BookingWidget />
        </div>
      </section>

      {/* SERVICES */}
      <section style={{ padding: '80px 56px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <span className="mv-badge" style={{ marginBottom: 16 }}>Nos services</span>
            <h2 style={{ fontFamily: 'var(--display)', fontSize: 56, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
              Une flotte adaptée à <i style={{ color: 'var(--accent-2)' }}>chaque trajet.</i>
            </h2>
          </div>
          <a style={{ color: 'var(--ink-dim)', fontSize: 14, textDecoration: 'none', cursor: 'pointer' }}>Voir toutes les options →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { tier: 'Berline', price: 'dès 35 €', desc: 'Mercedes Classe E ou équivalent. Idéale pour 1 à 3 passagers, trajets ville et aéroport.', img: 'photo-1503376780353-7e6692767b70', icon: 'car', tag: 'Le plus réservé' },
            { tier: 'Van', price: 'dès 65 €', desc: 'Mercedes Classe V. Jusqu\'à 7 passagers, espace bagages généreux, trajets en groupe.', img: 'photo-1610465299996-30f240ac2b1c', icon: 'van' },
            { tier: 'Premium', price: 'dès 95 €', desc: 'Mercedes Classe S, BMW Série 7. Confort exécutif, hôtesse possible, événementiel.', img: 'photo-1494976388531-d1058494cdd8', icon: 'sparkle', tag: 'Premium' },
          ].map(s => (
            <div key={s.tier} className="mv-card" style={{ padding: 0, overflow: 'hidden', position: 'relative' }}>
              <div style={{ height: 220, position: 'relative' }}>
                <UImage id={s.img} w={600} h={400} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(8,16,31,0.85) 100%)' }} />
                {s.tag && <span style={{ position: 'absolute', top: 16, left: 16 }} className="mv-badge mv-badge-info">{s.tag}</span>}
              </div>
              <div style={{ padding: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: 0, fontWeight: 400 }}>{s.tier}</h3>
                  <span style={{ color: 'var(--ink-dim)', fontSize: 13 }}>{s.price}</span>
                </div>
                <p style={{ color: 'var(--ink-dim)', fontSize: 13, lineHeight: 1.55, margin: '0 0 20px' }}>{s.desc}</p>
                <a style={{ color: 'var(--accent-2)', fontSize: 13, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
                  Choisir cette gamme <Icon name="arrowRight" size={12} />
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* REASSURANCE */}
      <section style={{ padding: '40px 56px 80px' }}>
        <div className="mv-card" style={{ padding: 48, background: 'var(--surface)', borderRadius: 20 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              { ico: 'shield', t: 'Prix fixe garanti', d: 'Le tarif annoncé est définitif. Aucun supplément, aucune surprise.' },
              { ico: 'bolt', t: 'Réservation 60s', d: 'Trajet immédiat ou planifié à la minute près, jusqu\'à 6 mois à l\'avance.' },
              { ico: 'star', t: 'Chauffeurs sélectionnés', d: 'Carte VTC, formation continue, note minimale 4,8/5 maintenue.' },
              { ico: 'phone', t: 'Concierge 24/7', d: 'Une équipe joignable instantanément, par téléphone ou messagerie.' },
            ].map((b, i) => (
              <div key={i}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, background: 'var(--accent-soft)',
                  color: 'var(--accent-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16,
                }}>
                  <Icon name={b.ico} size={20} />
                </div>
                <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 6 }}>{b.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-dim)', lineHeight: 1.5 }}>{b.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: '40px 56px 96px' }}>
        <div style={{ marginBottom: 40 }}>
          <span className="mv-badge" style={{ marginBottom: 16 }}>Avis clients</span>
          <h2 style={{ fontFamily: 'var(--display)', fontSize: 56, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', maxWidth: 700 }}>
            12&nbsp;400 trajets notés <i style={{ color: 'var(--accent-2)' }}>4,9&nbsp;sur 5.</i>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { n: 'Camille R.', r: 'Cliente régulière', q: 'Service irréprochable depuis 2 ans. Mes rendez-vous client se passent sans stress, le chauffeur attend toujours en bas.', av: 'photo-1573496359142-b8d87734a5a2' },
            { n: 'Antoine D.', r: 'Voyage d\'affaires', q: 'CDG → La Défense en 35 min un mardi à 8h. Le chauffeur connaissait déjà mon arrêt et le code de l\'immeuble. Bluffant.', av: 'photo-1500648767791-00dcc994a43e' },
            { n: 'Léa M.', r: 'Mariage Le Bristol', q: 'On a réservé 4 véhicules pour les invités VIP. Coordination parfaite, chauffeurs en costume, fleurs prévues. Une équipe à la hauteur.', av: 'photo-1544005313-94ddf0286df2' },
          ].map((t, i) => (
            <div key={i} className="mv-card" style={{ padding: 28 }}>
              <Stars n={5} size={14} />
              <p style={{ margin: '20px 0 24px', fontSize: 15, lineHeight: 1.55, color: 'var(--ink)' }}>« {t.q} »</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', overflow: 'hidden' }}>
                  <UImage id={t.av} w={120} h={120} />
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{t.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA BAND */}
      <section style={{ padding: '0 56px 96px' }}>
        <div style={{
          padding: '64px 56px', borderRadius: 24,
          background: 'linear-gradient(135deg, var(--surface-2), var(--surface-3))',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -40, top: -40, width: 320, height: 320, borderRadius: '50%', background: 'var(--accent-soft)', filter: 'blur(40px)' }} />
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 48 }}>
            <div>
              <h2 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', maxWidth: 580 }}>
                Programmez votre prochain trajet en <i style={{ color: 'var(--accent-2)' }}>moins d'une minute.</i>
              </h2>
              <p style={{ marginTop: 16, color: 'var(--ink-dim)', fontSize: 16 }}>Pas d'application à télécharger. Premier trajet ? Code <b style={{ color: 'var(--ink)' }}>WELCOME20</b> pour −20 %.</p>
            </div>
            <button className="mv-btn mv-btn-primary mv-btn-lg" style={{ flexShrink: 0 }}>Commencer une réservation <Icon name="arrowRight" /></button>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

/* ── Reusable booking widget for hero ───────────────── */
function BookingWidget() {
  return (
    <div className="mv-card" style={{
      background: 'rgba(14, 24, 48, 0.85)',
      backdropFilter: 'blur(16px)',
      borderRadius: 20, padding: 8,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--line-2)',
    }}>
      <div style={{ display: 'flex', gap: 4, padding: 4 }}>
        {['Trajet', 'Mise à disposition', 'Aéroport'].map((t, i) => (
          <button key={t} className="mv-btn mv-btn-sm" style={{
            background: i === 0 ? 'var(--surface-3)' : 'transparent',
            color: i === 0 ? 'var(--ink)' : 'var(--ink-dim)',
            flex: 1, height: 36, fontSize: 13,
          }}>{t}</button>
        ))}
      </div>
      <div style={{ padding: '8px 16px 16px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        <FieldRow icon={<Dot color="var(--accent-2)" />} label="Départ" value="12 rue de Rivoli, Paris 4e" />
        <ConnectorLine />
        <FieldRow icon={<Dot ring />} label="Destination" value="Aéroport Charles de Gaulle, T2E" />
        <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>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, padding: '0 4px' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Estimation</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 28, lineHeight: 1, marginTop: 4 }}>62 € <span style={{ fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>· prix fixe</span></div>
          </div>
          <button className="mv-btn mv-btn-primary">Continuer <Icon name="arrowRight" /></button>
        </div>
      </div>
    </div>
  );
}
function Dot({ color = 'var(--ink-dim)', ring }) {
  return <span style={{
    width: 10, height: 10, borderRadius: '50%',
    background: ring ? 'transparent' : color,
    border: ring ? '2px solid var(--accent-2)' : 'none',
    flexShrink: 0,
  }}/>;
}
function ConnectorLine() {
  return (
    <div style={{ height: 16, paddingLeft: 17, position: 'relative' }}>
      <div style={{ width: 1, height: '100%', background: 'var(--line-2)', backgroundImage: 'linear-gradient(to bottom, var(--line-2) 60%, transparent 60%)', backgroundSize: '1px 6px' }} />
    </div>
  );
}
function FieldRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 4px' }}>
      {icon}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{label}</div>
        <div style={{ fontSize: 14, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>
      </div>
    </div>
  );
}
function FieldBox({ icon, label, value }) {
  return (
    <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)', borderRadius: 10, padding: '10px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink-mute)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
        <Icon name={icon} size={12} /> {label}
      </div>
      <div style={{ fontSize: 14, marginTop: 4 }}>{value}</div>
    </div>
  );
}

/* ───────────────── BOOKING FLOW ─────────────────
   One screen per step, Typeform-like: large question, single focused input.
*/
function BookingShell({ stepIdx, total, children, footer }) {
  const labels = ['Itinéraire', 'Date & heure', 'Véhicule', 'Coordonnées', 'Récapitulatif'];
  return (
    <div className="mv-screen" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', height: '100%' }}>
      {/* Left: form */}
      <div style={{ display: 'flex', flexDirection: 'column', padding: '32px 56px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
          <Logo />
          <button style={{ background: 'transparent', border: 0, color: 'var(--ink-dim)', cursor: 'pointer', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Quitter ✕
          </button>
        </div>
        {/* Stepper */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 32 }}>
          {labels.map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 3, borderRadius: 2,
              background: i <= stepIdx ? 'var(--accent)' : 'var(--line-2)',
              transition: 'background 0.3s',
            }} />
          ))}
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
          Étape {stepIdx + 1} sur {total} · {labels[stepIdx]}
        </div>
        <div style={{ flex: 1 }}>{children}</div>
        {footer || (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 32 }}>
            <button className="mv-btn mv-btn-ghost"><Icon name="arrowLeft" /> Précédent</button>
            <button className="mv-btn mv-btn-primary mv-btn-lg">Continuer <Icon name="arrowRight" /></button>
          </div>
        )}
      </div>
      {/* Right: contextual map / illustration */}
      <div className="mv-map" style={{ position: 'relative' }}>
        <BookingMapPanel stepIdx={stepIdx} />
      </div>
    </div>
  );
}

function BookingMapPanel({ stepIdx }) {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 32 }}>
      {/* Stylised map route */}
      <svg width="100%" height="100%" viewBox="0 0 600 700" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <linearGradient id="rt" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="oklch(0.86 0.12 248)" />
            <stop offset="1" stopColor="oklch(0.72 0.16 248)" />
          </linearGradient>
        </defs>
        {/* faint grid roads */}
        <g stroke="rgba(255,255,255,0.06)" strokeWidth="1">
          {Array.from({ length: 12 }).map((_, i) => <line key={'h' + i} x1="0" x2="600" y1={i * 60} y2={i * 60} />)}
          {Array.from({ length: 11 }).map((_, i) => <line key={'v' + i} y1="0" y2="700" x1={i * 60} x2={i * 60} />)}
        </g>
        <g stroke="rgba(255,255,255,0.12)" strokeWidth="2" fill="none">
          <path d="M0 320 L 240 320 L 240 220 L 460 220 L 460 100 L 600 100" />
          <path d="M0 480 L 180 480 L 180 600 L 420 600 L 420 540 L 600 540" />
          <path d="M120 0 L 120 200 L 320 200 L 320 360 L 540 360 L 540 700" />
        </g>
        {/* primary route */}
        <path d="M 80 540 Q 200 540 240 460 T 360 320 Q 420 240 520 200" stroke="url(#rt)" strokeWidth="4" fill="none" strokeLinecap="round" strokeDasharray={stepIdx === 0 ? '6 6' : '0'} />
        {/* origin */}
        <g transform="translate(80,540)">
          <circle r="14" fill="oklch(0.72 0.16 248 / 0.25)" />
          <circle r="7" fill="oklch(0.86 0.12 248)" />
        </g>
        {/* dest */}
        <g transform="translate(520,200)">
          <circle r="14" fill="oklch(0.86 0.12 248 / 0.25)" />
          <circle r="9" fill="white" stroke="oklch(0.72 0.16 248)" strokeWidth="3" />
        </g>
      </svg>

      {/* Trip info card */}
      <div style={{
        position: 'absolute', bottom: 32, left: 32, right: 32,
        background: 'rgba(14, 24, 48, 0.85)', backdropFilter: 'blur(16px)',
        border: '1px solid var(--line-2)', borderRadius: 16, padding: 20,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16,
      }}>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Distance</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, marginTop: 4 }}>32,4 <span style={{ fontSize: 13, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>km</span></div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Durée</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, marginTop: 4 }}>42 <span style={{ fontSize: 13, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>min</span></div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Estimation</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, marginTop: 4, color: 'var(--accent-2)' }}>62 €</div>
        </div>
      </div>
    </div>
  );
}

function ScreenBookingStep1() {
  return (
    <BookingShell stepIdx={0} total={5}>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: '24px 0 12px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Quel est votre <i style={{ color: 'var(--accent-2)' }}>itinéraire ?</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginBottom: 32 }}>Adresse précise, hôtel, gare ou aéroport. Nous calculons un prix fixe à la seconde.</p>

      <label className="mv-label">Point de départ</label>
      <div style={{ position: 'relative', marginBottom: 16 }}>
        <Icon name="pin" size={16} style={{ position: 'absolute', left: 14, top: 16, color: 'var(--accent-2)' }} />
        <input className="mv-input" defaultValue="12 rue de Rivoli, 75004 Paris" style={{ paddingLeft: 40 }} />
      </div>

      <label className="mv-label">Destination</label>
      <div style={{ position: 'relative' }}>
        <Icon name="pin" size={16} style={{ position: 'absolute', left: 14, top: 16, color: 'var(--ink-mute)' }} />
        <input className="mv-input" defaultValue="Aéroport Paris-CDG, Terminal 2E" style={{ paddingLeft: 40 }} />
        {/* autocomplete dropdown */}
        <div style={{
          position: 'absolute', top: 56, left: 0, right: 0,
          background: 'var(--surface)', border: '1px solid var(--line-2)', borderRadius: 12,
          boxShadow: '0 20px 40px -10px rgba(0,0,0,0.5)', overflow: 'hidden', zIndex: 5,
        }}>
          {[
            ['Aéroport Paris-Charles de Gaulle', 'Terminal 2E · Roissy-en-France', true],
            ['Aéroport Paris-Charles de Gaulle', 'Terminal 1 · Roissy-en-France'],
            ['Aéroport Paris-Orly', 'ORY · Orly'],
            ['Gare du Nord', '18 rue de Dunkerque, 75010 Paris'],
          ].map(([t, s, hi], i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px',
              background: hi ? 'var(--accent-soft)' : 'transparent',
              borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
            }}>
              <Icon name="pin" size={14} style={{ color: hi ? 'var(--accent-2)' : 'var(--ink-mute)' }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14 }}>{t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>{s}</div>
              </div>
              {hi && <Icon name="check" size={14} style={{ color: 'var(--accent-2)' }} />}
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 144, display: 'flex', gap: 8 }}>
        <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ borderStyle: 'dashed' }}><Icon name="plus" size={14} /> Ajouter un arrêt</button>
        <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="heart" size={14} /> Mes adresses favorites</button>
      </div>
    </BookingShell>
  );
}

function ScreenBookingStep2() {
  const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
  const dates = [11, 12, 13, 14, 15, 16, 17];
  const times = ['07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30'];
  return (
    <BookingShell stepIdx={1} total={5}>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: '24px 0 12px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Quand <i style={{ color: 'var(--accent-2)' }}>partez-vous ?</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginBottom: 32 }}>Réservez immédiatement ou jusqu'à 6 mois à l'avance. Annulation gratuite jusqu'à 1h avant.</p>

      <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
        <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={14} /> Maintenant (≈ 6 min)
        </button>
        <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: 'var(--surface-2)' }}>Plus tard</button>
      </div>

      <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 14, padding: 20, marginBottom: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Mai 2026</div>
          <div style={{ display: 'flex', gap: 4 }}>
            <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 32, height: 32, padding: 0 }}><Icon name="arrowLeft" size={14} /></button>
            <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ width: 32, height: 32, padding: 0 }}><Icon name="arrowRight" size={14} /></button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
          {days.map(d => <div key={d} style={{ fontSize: 11, color: 'var(--ink-mute)', textAlign: 'center', padding: '4px 0' }}>{d}</div>)}
          {dates.map((d, i) => {
            const sel = d === 14;
            return (
              <button key={d} style={{
                height: 38, borderRadius: 8, border: 0, cursor: 'pointer',
                background: sel ? 'var(--accent)' : 'transparent',
                color: sel ? '#06101e' : 'var(--ink)',
                fontWeight: sel ? 600 : 400, fontSize: 13,
              }}>{d}</button>
            );
          })}
        </div>
      </div>

      <label className="mv-label">Heure de prise en charge</label>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
        {times.map(t => {
          const sel = t === '08:30';
          return (
            <button key={t} style={{
              height: 38, borderRadius: 8, border: '1px solid ' + (sel ? 'var(--accent)' : 'var(--line)'),
              background: sel ? 'var(--accent-soft)' : 'transparent',
              color: sel ? 'var(--accent-2)' : 'var(--ink-dim)', fontSize: 13, fontWeight: sel ? 500 : 400, cursor: 'pointer',
            }}>{t}</button>
          );
        })}
      </div>
    </BookingShell>
  );
}

function ScreenBookingStep3() {
  const tiers = [
    { id: 'berline', name: 'Berline', desc: 'Mercedes Classe E', cap: '1-3 pax · 3 bagages', price: 62, img: 'photo-1503376780353-7e6692767b70', sel: true },
    { id: 'van', name: 'Van', desc: 'Mercedes Classe V', cap: '1-7 pax · 7 bagages', price: 98 },
    { id: 'premium', name: 'Premium', desc: 'Mercedes Classe S', cap: '1-3 pax · eau & wifi', price: 138, badge: 'Recommandé pour vous' },
  ];
  return (
    <BookingShell stepIdx={2} total={5}>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: '24px 0 12px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Quel <i style={{ color: 'var(--accent-2)' }}>véhicule ?</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginBottom: 32 }}>Trois gammes, un même standard de service. Eau, chargeurs et wifi inclus en Premium.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tiers.map(t => (
          <div key={t.id} className="mv-card" style={{
            padding: 16, display: 'flex', alignItems: 'center', gap: 18,
            borderColor: t.sel ? 'var(--accent)' : 'var(--line)',
            background: t.sel ? 'var(--accent-soft)' : 'var(--surface)',
            cursor: 'pointer', position: 'relative',
          }}>
            <div style={{ width: 88, height: 56, borderRadius: 8, overflow: 'hidden', background: 'var(--surface-3)', flexShrink: 0 }}>
              <UImage id={t.img || 'photo-1503376780353-7e6692767b70'} w={200} h={120} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{t.name}</span>
                <span style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{t.desc}</span>
                {t.badge && <span className="mv-badge mv-badge-info" style={{ marginLeft: 'auto', marginRight: 0 }}>{t.badge}</span>}
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 4 }}>{t.cap}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 26, color: t.sel ? 'var(--accent-2)' : 'var(--ink)' }}>{t.price} €</div>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>prix fixe</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: '50%',
              border: '2px solid ' + (t.sel ? 'var(--accent)' : 'var(--line-2)'),
              background: t.sel ? 'var(--accent)' : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              {t.sel && <Icon name="check" size={12} style={{ color: '#06101e' }} />}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 16, padding: 14, background: 'var(--surface)', borderRadius: 10, border: '1px dashed var(--line-2)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--ink-dim)' }}>
        <Icon name="sparkle" size={14} style={{ color: 'var(--accent-2)' }} />
        Option <b style={{ color: 'var(--ink)' }}>siège bébé</b> ou <b style={{ color: 'var(--ink)' }}>animal</b> disponible à l'étape suivante (gratuit).
      </div>
    </BookingShell>
  );
}

function ScreenBookingStep4() {
  return (
    <BookingShell stepIdx={3} total={5}>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: '24px 0 12px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Vos <i style={{ color: 'var(--accent-2)' }}>coordonnées.</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginBottom: 32 }}>Le chauffeur les utilise pour vous prévenir 5 minutes avant son arrivée.</p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 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">Téléphone mobile</label>
      <input className="mv-input" defaultValue="+33 6 12 34 56 78" style={{ marginBottom: 14 }} />
      <label className="mv-label">Email</label>
      <input className="mv-input" defaultValue="camille.renault@gmail.com" style={{ marginBottom: 22 }} />

      <label className="mv-label">Note ou consigne au chauffeur (optionnel)</label>
      <textarea className="mv-input" style={{ height: 92, padding: 14, resize: 'none' }} defaultValue="Code immeuble : 4587A. Sonner à l'interphone « Renault »." />

      <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {['Siège bébé', 'Booster enfant', 'Animal de compagnie', 'Bagages volumineux', 'Eau / boissons'].map((o, i) => (
          <button key={o} className="mv-btn mv-btn-ghost mv-btn-sm" style={{
            background: i < 2 ? 'var(--accent-soft)' : 'transparent',
            color: i < 2 ? 'var(--accent-2)' : 'var(--ink-dim)',
            borderColor: i < 2 ? 'transparent' : 'var(--line-2)',
          }}>
            {i < 2 && <Icon name="check" size={12} />} {o}
          </button>
        ))}
      </div>
    </BookingShell>
  );
}

function ScreenBookingStep5() {
  return (
    <BookingShell stepIdx={4} total={5} footer={
      <div style={{ marginTop: 20 }}>
        <button className="mv-btn mv-btn-primary mv-btn-lg mv-btn-block">
          Confirmer la réservation · 62 € <Icon name="arrowRight" />
        </button>
        <p style={{ fontSize: 11, color: 'var(--ink-mute)', textAlign: 'center', marginTop: 12 }}>
          Aucun débit immédiat. Vous serez débité après le trajet. Annulation gratuite jusqu'à 1h avant.
        </p>
      </div>
    }>
      <h1 style={{ fontFamily: 'var(--display)', fontSize: 48, margin: '24px 0 12px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Tout est <i style={{ color: 'var(--accent-2)' }}>prêt.</i>
      </h1>
      <p style={{ color: 'var(--ink-dim)', fontSize: 15, marginBottom: 24 }}>Vérifiez le récapitulatif puis confirmez.</p>

      <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }}>
        <SummaryRow label="Trajet" value={<>12 rue de Rivoli, Paris 4e<br/><span style={{ color: 'var(--ink-mute)' }}>→ CDG, Terminal 2E</span></>} />
        <SummaryRow label="Date & heure" value="Mardi 14 mai · 08:30" />
        <SummaryRow label="Véhicule" value="Berline · Mercedes Classe E" />
        <SummaryRow label="Passager" value="Camille Renault · +33 6 12 34 56 78" />
        <SummaryRow label="Options" value="Siège bébé, Booster enfant" />
      </div>

      <div style={{ marginTop: 16, padding: '14px 18px', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icon name="cards" size={18} style={{ color: 'var(--ink-dim)' }} />
          <div>
            <div style={{ fontSize: 14 }}>Visa · 4242</div>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>Carte par défaut</div>
          </div>
        </div>
        <button className="mv-btn mv-btn-ghost mv-btn-sm">Modifier</button>
      </div>

      <div style={{ marginTop: 16, padding: '14px 18px', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, display: 'flex', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, color: 'var(--ink-dim)' }}>Sous-total</div>
          <div style={{ fontSize: 13, color: 'var(--ink-dim)', marginTop: 2 }}>Code WELCOME20 (−20%)</div>
          <div style={{ fontSize: 15, marginTop: 6, fontWeight: 500 }}>Total à payer</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 13, color: 'var(--ink-dim)' }}>62 €</div>
          <div style={{ fontSize: 13, color: 'oklch(0.84 0.14 165)', marginTop: 2 }}>−12,40 €</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 28, marginTop: 4 }}>49,60 €</div>
        </div>
      </div>
    </BookingShell>
  );
}
function SummaryRow({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
      <div style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', flex: '0 0 130px', paddingTop: 2 }}>{label}</div>
      <div style={{ fontSize: 14, textAlign: 'right' }}>{value}</div>
    </div>
  );
}

/* ───────────────── CONFIRMATION ───────────────── */
function ScreenConfirmation() {
  return (
    <div className="mv-screen" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr' }}>
      <div style={{ padding: '56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <Logo />
        <div style={{
          width: 56, height: 56, borderRadius: 16, background: 'oklch(0.78 0.14 165 / 0.18)',
          color: 'oklch(0.84 0.14 165)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginTop: 56, marginBottom: 24,
        }}>
          <Icon name="check" size={28} />
        </div>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 64, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0 }}>
          Réservation<br/><i style={{ color: 'var(--accent-2)' }}>confirmée.</i>
        </h1>
        <p style={{ marginTop: 20, fontSize: 16, color: 'var(--ink-dim)', maxWidth: 500 }}>
          Un email de confirmation est en route. Vous recevrez les coordonnées de votre chauffeur 30&nbsp;minutes avant le départ.
        </p>

        <div style={{ marginTop: 36, padding: 20, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 14, maxWidth: 500 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Référence</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--accent-2)' }}>MV-26-5891-CDG</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Dot color="var(--accent-2)" />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14 }}>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: 14 }}>Aéroport CDG, T2E</div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>Arrivée estimée 09:12</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <button className="mv-btn mv-btn-primary">Voir dans mon espace <Icon name="arrowRight" /></button>
          <button className="mv-btn mv-btn-ghost"><Icon name="cal" size={14} /> Ajouter au calendrier</button>
          <button className="mv-btn mv-btn-ghost"><Icon name="download" size={14} /> Reçu PDF</button>
        </div>
      </div>

      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <UImage id="photo-1610465299996-30f240ac2b1c" w={1000} h={1200} alt="" style={{ filter: 'brightness(0.7)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, var(--bg) 0%, transparent 30%)' }} />
        {/* Driver coming card */}
        <div style={{
          position: 'absolute', bottom: 32, left: 32, right: 32,
          background: 'rgba(14, 24, 48, 0.85)', backdropFilter: 'blur(16px)',
          border: '1px solid var(--line-2)', borderRadius: 16, padding: 20,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
              <UImage id="photo-1500648767791-00dcc994a43e" w={120} h={120} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Votre chauffeur</div>
              <div style={{ fontSize: 16, marginTop: 2 }}>Marc D. <Stars n={5} size={11} /></div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 2 }}>4,9 · 1 240 trajets · Mercedes Classe E (AB-123-CD)</div>
            </div>
            <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--ink-mute)' }}>
              <span className="mv-live">Affecté</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenHome, ScreenBookingStep1, ScreenBookingStep2, ScreenBookingStep3, ScreenBookingStep4, ScreenBookingStep5, ScreenConfirmation, BookingWidget, BookingShell });