// screens-b2b.jsx — déclinaison Entreprise / B2B

/* ── B2B Landing ──────────────────────────────────── */
function ScreenB2BLanding() {
  return (
    <div className="mv-screen" style={{ overflowY: 'auto' }}>
      <SiteHeader active="biz" />
      <section style={{ position: 'relative', padding: '72px 56px 88px' }}>
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
          <UImage id="photo-1551836022-d5d88e9218df" w={1600} h={900} style={{ filter: 'brightness(0.4) saturate(1.1)' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(8,16,31,0.96) 0%, rgba(8,16,31,0.7) 50%, rgba(8,16,31,0.4) 100%)' }} />
        </div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56 }}>
          <div>
            <span className="mv-badge mv-badge-info" style={{ marginBottom: 24 }}>monvtc · Entreprise</span>
            <h1 style={{ fontFamily: 'var(--display)', fontSize: 84, lineHeight: 0.95, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
              Le déplacement<br/>de vos équipes,<br/><i style={{ color: 'var(--accent-2)' }}>centralisé.</i>
            </h1>
            <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: 'var(--ink-dim)', maxWidth: 480 }}>
              Une plateforme unique pour réserver, suivre et facturer les courses de vos collaborateurs et invités. Politique de voyage configurable, factures consolidées, reporting mensuel.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <button className="mv-btn mv-btn-primary mv-btn-lg">Demander un devis <Icon name="arrowRight" /></button>
              <button className="mv-btn mv-btn-ghost mv-btn-lg">Parler à un commercial</button>
            </div>
            <div style={{ display: 'flex', gap: 32, marginTop: 48 }}>
              <div><div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>240+</div><div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>entreprises clientes</div></div>
              <div style={{ width: 1, background: 'var(--line)' }} />
              <div><div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>−18%</div><div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>budget mobilité moyen</div></div>
              <div style={{ width: 1, background: 'var(--line)' }} />
              <div><div style={{ fontFamily: 'var(--display)', fontSize: 28 }}>SSO</div><div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>SAML · SCIM · API</div></div>
            </div>
          </div>
          {/* Quote widget */}
          <div className="mv-card" style={{ background: 'rgba(14,24,48,0.85)', backdropFilter: 'blur(16px)', borderRadius: 20, padding: 24 }}>
            <div style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14 }}>Estimation entreprise · 30s</div>
            <label className="mv-label">Société</label>
            <input className="mv-input" defaultValue="Helios Conseil" style={{ marginBottom: 12 }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
              <div><label className="mv-label">Collaborateurs</label><select className="mv-input" defaultValue="50"><option>1-10</option><option>10-50</option><option>50-200</option><option>200+</option></select></div>
              <div><label className="mv-label">Volume / mois</label><select className="mv-input"><option>10-50</option><option>50-200</option><option>200+</option></select></div>
            </div>
            <label className="mv-label">Email professionnel</label>
            <input className="mv-input" placeholder="vous@société.fr" style={{ marginBottom: 16 }} />
            <button className="mv-btn mv-btn-primary mv-btn-block mv-btn-lg">Recevoir une proposition</button>
            <p style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 12, textAlign: 'center' }}>Réponse personnalisée sous 24h ouvrées.</p>
          </div>
        </div>
      </section>

      {/* Features */}
      <section style={{ padding: '64px 56px' }}>
        <span className="mv-badge" style={{ marginBottom: 16 }}>Fonctionnalités</span>
        <h2 style={{ fontFamily: 'var(--display)', fontSize: 52, fontWeight: 400, letterSpacing: '-0.02em', margin: 0, maxWidth: 720 }}>
          Une console pour piloter <i style={{ color: 'var(--accent-2)' }}>tous vos déplacements.</i>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 40 }}>
          {[
            { ic: 'users', t: 'Comptes équipes', d: 'Invitez vos collaborateurs en bulk via CSV ou SCIM. Définissez profils, autorisations et budgets par équipe.' },
            { ic: 'shield', t: 'Politique de voyage', d: 'Plafonds par trajet, gammes autorisées, validation manager au-delà d\'un seuil. Tout est paramétrable.' },
            { ic: 'cards', t: 'Facturation centralisée', d: 'Une facture mensuelle unique, ventilée par centre de coût. Export comptable Sage, Pennylane, Quickbooks.' },
            { ic: 'cal', t: 'Réservation invité', d: 'Envoyez un lien à un client ou un candidat — il réserve sans compte, vous êtes facturé.' },
            { ic: 'bolt', t: 'API & SSO', d: 'SAML 2.0, SCIM, webhooks et API REST. S\'intègre à Concur, Workday et vos outils internes.' },
            { ic: 'star', t: 'Concierge dédié', d: 'Un chargé de compte attitré dès 50 trajets/mois. Support prioritaire 24/7.' },
          ].map(f => (
            <div key={f.t} className="mv-card" style={{ padding: 24 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={f.ic} size={18} />
              </div>
              <div style={{ fontSize: 17, fontWeight: 500, marginBottom: 8 }}>{f.t}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-dim)', lineHeight: 1.55 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Logos */}
      <section style={{ padding: '24px 56px 64px' }}>
        <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 24 }}>
          Ils nous font confiance
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', opacity: 0.7, gap: 32, flexWrap: 'wrap' }}>
          {['HELIOS', 'meridien&', 'NORDIA', 'ARTEMIS · co', 'studio sept', 'volta'].map(l => (
            <span key={l} style={{ fontFamily: 'var(--display)', fontSize: 24, color: 'var(--ink-dim)', letterSpacing: '-0.01em' }}>{l}</span>
          ))}
        </div>
      </section>

      {/* Pricing */}
      <section style={{ padding: '40px 56px 80px' }}>
        <h2 style={{ fontFamily: 'var(--display)', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', margin: 0, marginBottom: 28 }}>
          Trois formules. <i style={{ color: 'var(--accent-2)' }}>Pas d'engagement.</i>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { n: 'Essentiel', p: 'Sans frais', s: 'Le tarif des courses. Parfait pour démarrer.', f: ['Comptes illimités', 'Facturation consolidée', 'Export CSV'], cta: 'Démarrer' },
            { n: 'Business', p: '49 €', u: '/mois', s: 'Pour les équipes qui voyagent régulièrement.', f: ['Politique de voyage', 'Centre de coût', 'SSO SAML', 'Reporting mensuel'], cta: 'Choisir Business', tag: 'Le plus choisi' },
            { n: 'Enterprise', p: 'Sur mesure', s: 'Volumes >200 trajets / mois, SLA garanti.', f: ['Chargé de compte dédié', 'API & webhooks', 'SLA 99,9 %', 'Tarifs négociés', 'Concierge VIP'], cta: 'Nous contacter' },
          ].map((p, i) => (
            <div key={p.n} className="mv-card" style={{
              padding: 28, position: 'relative',
              borderColor: i === 1 ? 'var(--accent)' : 'var(--line)',
              background: i === 1 ? 'linear-gradient(160deg, var(--accent-soft), var(--surface))' : 'var(--surface)',
            }}>
              {p.tag && <span className="mv-badge mv-badge-info" style={{ position: 'absolute', top: -12, left: 24 }}>{p.tag}</span>}
              <div style={{ fontSize: 14, color: 'var(--ink-dim)', marginBottom: 4 }}>{p.n}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 40, lineHeight: 1, marginBottom: 6 }}>{p.p}<span style={{ fontSize: 14, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>{p.u}</span></div>
              <p style={{ fontSize: 13, color: 'var(--ink-dim)', minHeight: 40 }}>{p.s}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {p.f.map(item => (
                  <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink)' }}>
                    <Icon name="check" size={14} style={{ color: 'var(--accent-2)' }} /> {item}
                  </li>
                ))}
              </ul>
              <button className={'mv-btn mv-btn-block ' + (i === 1 ? 'mv-btn-primary' : 'mv-btn-ghost')}>{p.cta}</button>
            </div>
          ))}
        </div>
      </section>
      <SiteFooter />
    </div>
  );
}

/* ── B2B Console / Dashboard ──────────────────────── */
function B2BShell({ active, children }) {
  const items = [
    ['Tableau de bord', 'home'],
    ['Réservations', 'bookings'],
    ['Collaborateurs', 'team'],
    ['Centres de coût', 'cost'],
    ['Politique', 'policy'],
    ['Factures', 'invoices'],
    ['Reporting', 'reporting'],
    ['Réglages', 'settings'],
  ];
  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 16px' }}>
          <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' }}>Business</span>
          </div>
          <div style={{ marginTop: 14, padding: 10, background: 'var(--surface-2)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
            <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent)', color: '#06101e', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontFamily: 'var(--display)' }}>H</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500 }}>Helios Conseil</div>
              <div style={{ fontSize: 10, color: 'var(--ink-mute)' }}>Plan Business · 47 collab.</div>
            </div>
            <Icon name="chevronDown" size={12} style={{ color: 'var(--ink-mute)' }} />
          </div>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {items.map(([l, k]) => (
            <a key={k} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 8,
              background: active === k ? 'var(--surface-2)' : 'transparent',
              color: active === k ? 'var(--ink)' : 'var(--ink-dim)', fontSize: 13, cursor: 'pointer',
            }}>
              <span style={{ width: 4, height: 4, borderRadius: '50%', background: active === k ? 'var(--accent)' : 'transparent' }} />
              {l}
            </a>
          ))}
        </nav>
        <div style={{ marginTop: 'auto', padding: 12, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 10 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Budget mensuel</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22 }}>3 240 € <span style={{ fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--sans)' }}>/ 5 000 €</span></div>
          <div style={{ height: 4, borderRadius: 2, background: 'var(--surface-3)', marginTop: 8, overflow: 'hidden' }}>
            <div style={{ width: '64%', height: '100%', background: 'var(--accent)' }} />
          </div>
        </div>
      </aside>
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>{children}</div>
    </div>
  );
}

function ScreenB2BDashboard() {
  return (
    <B2BShell active="home">
      <header style={{ padding: '24px 32px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <h1 style={{ fontFamily: 'var(--display)', fontSize: 30, margin: 0, fontWeight: 400 }}>Bonjour, Sophie.</h1>
          <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4 }}>Mai 2026 · 47 collaborateurs actifs · <span className="mv-live">8 trajets en cours</span></div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="download" size={14} /> Exporter</button>
          <button className="mv-btn mv-btn-primary mv-btn-sm"><Icon name="plus" size={14} /> Réserver pour…</button>
        </div>
      </header>
      <div style={{ padding: 32, overflowY: 'auto', flex: 1 }}>
        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
          {[
            ['Trajets ce mois', '186', '+24 vs avr.', 'ok'],
            ['Dépenses', '3 240 €', '64% du budget', ''],
            ['Trajet moyen', '17,42 €', '−2 € vs marché', 'ok'],
            ['Collaborateurs actifs', '47', 'sur 52 invités', ''],
          ].map(([k, v, d, t]) => (
            <div key={k} className="mv-card" style={{ padding: 18 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 36, marginTop: 8 }}>{v}</div>
              <div style={{ fontSize: 11, color: t === 'ok' ? 'oklch(0.84 0.14 165)' : 'var(--ink-dim)', marginTop: 4 }}>{d}</div>
            </div>
          ))}
        </div>

        {/* Chart + Top centres de coût */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 24 }}>
          <div className="mv-card" style={{ padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
              <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: 0, fontWeight: 400 }}>Dépenses · 30 derniers jours</h3>
              <div style={{ display: 'flex', gap: 4 }}>
                {['7j', '30j', '90j', '12m'].map((p, i) => (
                  <button key={p} className="mv-btn mv-btn-ghost mv-btn-sm" style={{ background: i === 1 ? 'var(--surface-2)' : 'transparent', height: 28, fontSize: 11 }}>{p}</button>
                ))}
              </div>
            </div>
            <svg width="100%" height="180" viewBox="0 0 600 180" preserveAspectRatio="none">
              <defs>
                <linearGradient id="b2b-area" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="oklch(0.72 0.16 248)" stopOpacity="0.3" />
                  <stop offset="1" stopColor="oklch(0.72 0.16 248)" stopOpacity="0" />
                </linearGradient>
              </defs>
              {[40, 80, 120, 160].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke="rgba(255,255,255,0.05)" />)}
              <path d="M 0 140 L 30 130 L 60 132 L 90 110 L 120 100 L 150 115 L 180 90 L 210 95 L 240 70 L 270 85 L 300 60 L 330 70 L 360 50 L 390 55 L 420 35 L 450 45 L 480 30 L 510 40 L 540 25 L 570 30 L 600 20 L 600 180 L 0 180 Z" fill="url(#b2b-area)" />
              <path d="M 0 140 L 30 130 L 60 132 L 90 110 L 120 100 L 150 115 L 180 90 L 210 95 L 240 70 L 270 85 L 300 60 L 330 70 L 360 50 L 390 55 L 420 35 L 450 45 L 480 30 L 510 40 L 540 25 L 570 30 L 600 20" stroke="oklch(0.86 0.12 248)" strokeWidth="2" fill="none" />
              {[[420, 35], [600, 20]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r="4" fill="oklch(0.86 0.12 248)" />)}
            </svg>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-mute)', marginTop: 12 }}>
              {['10 avr.', '17 avr.', '24 avr.', '1 mai', '8 mai', '14 mai'].map(d => <span key={d}>{d}</span>)}
            </div>
          </div>

          <div className="mv-card" style={{ padding: 24 }}>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: 0, fontWeight: 400, marginBottom: 20 }}>Top centres de coût</h3>
            {[
              ['Direction commerciale', 1240, 64],
              ['Conseil', 820, 42],
              ['Direction générale', 540, 28],
              ['Marketing', 320, 16],
              ['Support client', 180, 10],
            ].map(([n, v, w]) => (
              <div key={n} style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
                  <span>{n}</span>
                  <span style={{ color: 'var(--ink-dim)' }}>{v} €</span>
                </div>
                <div style={{ height: 4, borderRadius: 2, background: 'var(--surface-3)', overflow: 'hidden' }}>
                  <div style={{ width: w + '%', height: '100%', background: 'var(--accent)' }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Pending validations */}
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <h3 style={{ fontFamily: 'var(--display)', fontSize: 20, margin: 0, fontWeight: 400 }}>À valider · 3 demandes</h3>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>Trajets dépassant la politique de voyage en vigueur</div>
            </div>
            <a style={{ fontSize: 12, color: 'var(--accent-2)', cursor: 'pointer' }}>Voir tout →</a>
          </div>
          {[
            { n: 'Antoine Decroix', from: 'Tour First → Le Bristol', dt: 'Demain · 09:00', tier: 'Premium', amount: '78 €', reason: 'Plafond Berline dépassé' },
            { n: 'Léa Marchand', from: 'Le Bristol → Opéra', dt: 'Demain · 14:00', tier: 'Berline', amount: '42 €', reason: 'Hors heures bureau' },
            { n: 'Karim Bensaïd', from: 'Helios HQ → CDG', dt: 'Vendredi · 06:30', tier: 'Van', amount: '94 €', reason: 'Week-end' },
          ].map((r, i) => (
            <div key={i} style={{ padding: '14px 24px', display: 'grid', gridTemplateColumns: '1.2fr 1.4fr 1fr 100px 110px 220px', gap: 12, alignItems: 'center', borderBottom: i < 2 ? '1px solid var(--line)' : 'none', fontSize: 13 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--ink-dim)' }}>{r.n.split(' ').map(s => s[0]).join('')}</div>
                <span>{r.n}</span>
              </div>
              <div style={{ color: 'var(--ink-dim)' }}>{r.from}</div>
              <div style={{ color: 'var(--ink-dim)' }}>{r.dt}</div>
              <div><span className="mv-badge mv-badge-warn">{r.reason}</span></div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 18, textAlign: 'right' }}>{r.amount}</div>
              <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                <button className="mv-btn mv-btn-ghost mv-btn-sm">Refuser</button>
                <button className="mv-btn mv-btn-primary mv-btn-sm">Approuver</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </B2BShell>
  );
}

/* ── B2B Team / Collaborateurs ───────────────────── */
function ScreenB2BTeam() {
  const team = [
    { n: 'Antoine Decroix', r: 'Direction commerciale', mail: 'a.decroix@helios.fr', trips: 18, spend: '342 €', status: 'Actif', cc: 'Commercial' },
    { n: 'Léa Marchand', r: 'Marketing', mail: 'l.marchand@helios.fr', trips: 12, spend: '218 €', status: 'Actif', cc: 'Marketing' },
    { n: 'Karim Bensaïd', r: 'Conseil', mail: 'k.bensaid@helios.fr', trips: 24, spend: '486 €', status: 'Actif', cc: 'Conseil' },
    { n: 'Sofia Marini', r: 'DG', mail: 's.marini@helios.fr', trips: 8, spend: '212 €', status: 'Actif', cc: 'Direction' },
    { n: 'Marc Durand', r: 'Support', mail: 'm.durand@helios.fr', trips: 4, spend: '64 €', status: 'Actif', cc: 'Support' },
    { n: 'Inès Lopez', r: 'Conseil', mail: 'i.lopez@helios.fr', trips: 15, spend: '298 €', status: 'Actif', cc: 'Conseil' },
    { n: 'Patrick Aubert', r: 'Commercial', mail: 'p.aubert@helios.fr', trips: 0, spend: '—', status: 'Invité', cc: 'Commercial' },
    { n: 'Valérie Henry', r: 'Marketing', mail: 'v.henry@helios.fr', trips: 6, spend: '124 €', status: 'Actif', cc: 'Marketing' },
  ];
  return (
    <B2BShell active="team">
      <header style={{ padding: '24px 32px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <h1 style={{ fontFamily: 'var(--display)', fontSize: 30, margin: 0, fontWeight: 400 }}>Collaborateurs</h1>
          <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4 }}>47 actifs · 5 invitations en attente · synchro SCIM</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="mv-btn mv-btn-ghost mv-btn-sm"><Icon name="download" size={14} /> Importer CSV</button>
          <button className="mv-btn mv-btn-primary mv-btn-sm"><Icon name="plus" size={14} /> Inviter</button>
        </div>
      </header>
      <div style={{ padding: '20px 32px 32px', overflowY: 'auto', flex: 1 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 16, alignItems: 'center' }}>
          <div style={{ position: 'relative', flex: 1, maxWidth: 320 }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 12, top: 13, color: 'var(--ink-mute)' }} />
            <input className="mv-input" style={{ height: 38, paddingLeft: 36, fontSize: 13 }} placeholder="Rechercher un collaborateur…" />
          </div>
          <button className="mv-btn mv-btn-ghost mv-btn-sm">Tous les centres</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm">Tous les statuts</button>
          <button className="mv-btn mv-btn-ghost mv-btn-sm" style={{ marginLeft: 'auto' }}><Icon name="filter" size={14} /> Filtres</button>
        </div>
        <div className="mv-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '24px 1.6fr 1fr 1fr 80px 100px 100px 60px', padding: '12px 18px', fontSize: 11, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.06em', borderBottom: '1px solid var(--line)', background: 'var(--surface-2)', alignItems: 'center' }}>
            <input type="checkbox" />
            <span>Collaborateur</span><span>Email</span><span>Centre de coût</span><span style={{ textAlign: 'right' }}>Trajets</span><span style={{ textAlign: 'right' }}>Dépense</span><span>Statut</span><span></span>
          </div>
          {team.map((p, i) => (
            <div key={p.mail} style={{
              display: 'grid', gridTemplateColumns: '24px 1.6fr 1fr 1fr 80px 100px 100px 60px',
              padding: '14px 18px', alignItems: 'center', fontSize: 13,
              borderBottom: i < team.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <input type="checkbox" />
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--ink-dim)' }}>{p.n.split(' ').map(s => s[0]).join('')}</div>
                <div>
                  <div>{p.n}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>{p.r}</div>
                </div>
              </div>
              <span style={{ color: 'var(--ink-dim)' }}>{p.mail}</span>
              <span><span className="mv-badge" style={{ height: 22, fontSize: 10 }}>{p.cc}</span></span>
              <span style={{ textAlign: 'right' }}>{p.trips}</span>
              <span style={{ textAlign: 'right', fontFamily: 'var(--display)', fontSize: 16 }}>{p.spend}</span>
              <span><Status kind={p.status === 'Actif' ? 'completed' : 'pending'} label={p.status} /></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>
    </B2BShell>
  );
}

/* ── B2B Politique de voyage ─────────────────────── */
function ScreenB2BPolicy() {
  return (
    <B2BShell active="policy">
      <header style={{ padding: '24px 32px', borderBottom: '1px solid var(--line)' }}>
        <h1 style={{ fontFamily: 'var(--display)', fontSize: 30, margin: 0, fontWeight: 400 }}>Politique de voyage</h1>
        <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4 }}>Règles appliquées automatiquement à toute réservation. Modifications loggées.</div>
      </header>
      <div style={{ padding: 32, overflowY: 'auto', flex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="mv-card" style={{ padding: 24 }}>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: '0 0 4px', fontWeight: 400 }}>Plafonds par véhicule</h3>
            <p style={{ color: 'var(--ink-mute)', fontSize: 12, margin: '0 0 20px' }}>Au-delà, validation manager requise.</p>
            {[
              ['Berline', 'Tous collaborateurs', '60 €'],
              ['Van', 'Manager + DG', '120 €'],
              ['Premium', 'DG uniquement', '180 €'],
            ].map(([t, who, cap]) => (
              <div key={t} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 100px 80px', alignItems: 'center', gap: 12, padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
                <div>
                  <div style={{ fontSize: 14 }}>{t}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-mute)' }}>{who}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-mute)' }}>Plafond</span>
                  <input className="mv-input" style={{ height: 32, fontSize: 13, width: 100 }} defaultValue={cap} />
                </div>
                <span className="mv-badge mv-badge-ok" style={{ justifySelf: 'start' }}>Actif</span>
                <Icon name="edit" size={14} style={{ color: 'var(--ink-mute)', justifySelf: 'end' }} />
              </div>
            ))}
          </div>

          <div className="mv-card" style={{ padding: 24 }}>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: '0 0 4px', fontWeight: 400 }}>Horaires & jours</h3>
            <p style={{ color: 'var(--ink-mute)', fontSize: 12, margin: '0 0 20px' }}>Trajets autorisés sans validation supplémentaire.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div><label className="mv-label">Heure de début</label><input className="mv-input" defaultValue="06:00" /></div>
              <div><label className="mv-label">Heure de fin</label><input className="mv-input" defaultValue="22:00" /></div>
            </div>
            <div style={{ marginTop: 16, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((d, i) => (
                <button key={d} className="mv-btn mv-btn-ghost mv-btn-sm" style={{
                  background: i < 5 ? 'var(--accent-soft)' : 'var(--surface-2)',
                  color: i < 5 ? 'var(--accent-2)' : 'var(--ink-mute)',
                  borderColor: i < 5 ? 'transparent' : 'var(--line)',
                  width: 56,
                }}>{d}</button>
              ))}
            </div>
          </div>
        </div>

        <div className="mv-card" style={{ padding: 24, height: 'fit-content' }}>
          <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, margin: '0 0 16px', fontWeight: 400 }}>Validateurs</h3>
          {[
            { n: 'Sophie Garnier', r: 'CFO · validateur final', av: 'photo-1573496359142-b8d87734a5a2' },
            { n: 'Antoine Decroix', r: 'Manager · Commercial', av: 'photo-1500648767791-00dcc994a43e' },
            { n: 'Karim Bensaïd', r: 'Manager · Conseil', av: 'photo-1544005313-94ddf0286df2' },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', overflow: 'hidden' }}><UImage id={p.av} w={88} h={88} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>{p.r}</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: 14 }}><Icon name="plus" size={12} /> Ajouter</button>
        </div>
      </div>
    </B2BShell>
  );
}

Object.assign(window, { ScreenB2BLanding, ScreenB2BDashboard, ScreenB2BTeam, ScreenB2BPolicy });