// booking-screen.jsx — Étape /booking
// Formulaire client + récap. Iso fonctionnel BookingView.vue / CustomerForm.vue, restylé charte Van-Away clear.
//
// Exporte : BookingScreen, BookingFormSection
// Réutilise via window : CartSidebar, CartSidebarMinimal, BottomBar, fmtPrice, fmtDate (de configure-screen.jsx)

const B_TEAL    = '#11978f';
const B_TEAL_HV = '#1c7d77';
const B_INK     = '#042828';
const B_MUTED   = '#5B7A82';
const B_CREAM   = '#F4F2EC';
const B_SURFACE = '#FFFFFF';
const B_BORDER  = 'rgba(4,40,40,0.08)';
const B_BORDER_S= 'rgba(4,40,40,0.14)';
const B_DANGER  = '#C0392B';
const B_BG_TEAL = '#e7fcfb';

// ─── Mock data ────────────────────────────────────────────────
const BK_VEHICLE = {
  id: 1,
  display_name: 'Volkswagen California Ocean',
  category_name: 'Campervans',
  brand: 'Volkswagen',
  model: 'California Ocean',
  nb_places: 4,
  gearbox: 'Automatique',
  energy: 'Diesel',
  pricePerDay: 120,
  picture: 'https://www.van-away.com/wp-content/uploads/malaga-2p-1600x923-1-1024x591.png',
};

const BK_SEARCH = {
  agencyName: 'Van-Away Bordeaux - Bordeaux',
  agencyAddress: '12 rue des Vignerons · 33000 Bordeaux',
  agencyPhone: '05 56 00 00 00',
  agencyEmail: 'bordeaux@van-away.com',
  startDate: '2026-07-12',
  endDate: '2026-07-20',
  days: 8,
};

const BK_CONFIG = {
  mileageLabel: 'Confort',
  mileageAmount: 4.90,
  insuranceLabel: 'Confort',
  insuranceAmount: 14.90,
  insurancePricingPerDay: true,
};

const BK_OPTIONS_SELECTED = [
  { id: 1, name: 'Conducteur supplémentaire',  amount: 49,    pricing: 'total' },
  { id: 2, name: 'Pack vaisselle (2 pers.)',   amount: 25,    pricing: 'total' },
];

// Helpers (locaux pour autonomie)
function bfmtPrice(n, dec = 2) {
  return (n ?? 0).toFixed(dec).replace('.', ',') + ' €';
}
function bfmtDate(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
}
function bfmtDateLong(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
}

// Total réel pour le bottom bar
function computeTotal() {
  const v = BK_VEHICLE.pricePerDay * BK_SEARCH.days;
  const m = BK_CONFIG.mileageAmount * BK_SEARCH.days;
  const i = BK_CONFIG.insurancePricingPerDay ? BK_CONFIG.insuranceAmount * BK_SEARCH.days : BK_CONFIG.insuranceAmount;
  const opts = BK_OPTIONS_SELECTED.reduce((s, o) => s + o.amount, 0);
  return v + m + i + opts;
}

// ─── Form fields (champs réutilisables) ───────────────────────
function FormLabel({ htmlFor, required, optional, children }) {
  return (
    <label htmlFor={htmlFor} className="va-fl">
      <span className="va-fl-text">{children}</span>
      {required && <span className="va-fl-req" aria-hidden="true">*</span>}
      {optional && <span className="va-fl-opt">(optionnel)</span>}
      <style>{`
        .va-fl{display:flex;align-items:baseline;gap:6px;font-size:12.5px;font-weight:700;color:${B_INK};margin-bottom:7px;letter-spacing:.01em}
        .va-fl-req{color:${B_DANGER};font-weight:900}
        .va-fl-opt{font-size:11px;color:${B_MUTED};font-weight:500;font-style:italic}
      `}</style>
    </label>
  );
}

function TextInput({ id, type='text', value, onChange, placeholder, error, autoComplete, suggestion, onApplySuggestion }) {
  return (
    <div className="va-input-wrap">
      <input
        id={id}
        type={type}
        autoComplete={autoComplete}
        value={value}
        onChange={(e)=>onChange(e.target.value)}
        placeholder={placeholder}
        className={`va-input ${error ? 'is-error' : ''}`}
      />
      {error && <p className="va-input-err" role="alert">{error}</p>}
      {suggestion && !error && (
        <button type="button" className="va-input-hint" onClick={onApplySuggestion}>
          Vouliez-vous dire <strong>{suggestion}</strong> ?
        </button>
      )}
      <style>{`
        .va-input-wrap{display:flex;flex-direction:column}
        .va-input{width:100%;padding:12px 14px;background:${B_SURFACE};border:1.5px solid ${B_BORDER_S};border-radius:12px;font-family:inherit;font-size:14px;font-weight:500;color:${B_INK};outline:none;transition:all .2s}
        .va-input::placeholder{color:${B_MUTED}}
        .va-input:hover{border-color:rgba(4,40,40,0.22)}
        .va-input:focus{border-color:${B_TEAL};box-shadow:0 0 0 3px rgba(17,151,143,.12)}
        .va-input.is-error{border-color:${B_DANGER};box-shadow:0 0 0 3px rgba(192,57,43,.1)}
        .va-input-err{margin:6px 0 0;font-size:11.5px;color:${B_DANGER};font-weight:600}
        .va-input-hint{align-self:flex-start;margin-top:6px;padding:6px 10px;background:${B_BG_TEAL};border:1px solid rgba(17,151,143,.25);border-radius:8px;color:${B_INK};font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s}
        .va-input-hint strong{color:${B_TEAL};font-weight:900}
        .va-input-hint:hover{background:#d6f7f5;border-color:${B_TEAL}}
      `}</style>
    </div>
  );
}

function SelectInput({ id, value, onChange, options }) {
  return (
    <div className="va-select-wrap">
      <select id={id} value={value} onChange={(e)=>onChange(e.target.value)} className="va-input va-select">
        <option value="" disabled>---</option>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <style>{`
        .va-select-wrap{position:relative}
        .va-select{appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235B7A82'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
      `}</style>
    </div>
  );
}

function Textarea({ id, value, onChange, rows=3, placeholder }) {
  return (
    <textarea id={id} value={value} onChange={(e)=>onChange(e.target.value)} rows={rows} placeholder={placeholder} className="va-input va-textarea">
      <style>{`.va-textarea{resize:vertical;min-height:80px;font-family:inherit}`}</style>
    </textarea>
  );
}

// ─── Email typo detection (mock simple) ───────────────────────
const TYPO_DOMAINS = {
  'gmal.com':    'gmail.com',
  'gmial.com':   'gmail.com',
  'gmai.com':    'gmail.com',
  'gnail.com':   'gmail.com',
  'hotnail.com': 'hotmail.com',
  'hotmial.com': 'hotmail.com',
  'yaho.fr':     'yahoo.fr',
  'yahooo.com':  'yahoo.com',
  'orang.fr':    'orange.fr',
  'wanado.fr':   'wanadoo.fr',
};
function suggestEmailFix(email) {
  if (!email || !email.includes('@')) return null;
  const dom = email.split('@')[1]?.toLowerCase().trim();
  if (!dom) return null;
  const fix = TYPO_DOMAINS[dom];
  if (!fix) return null;
  return email.split('@')[0] + '@' + fix;
}

// ─── Customer Form (réutilisé par les 3 layouts) ──────────────
function PersonalSection({ form, setForm, errors, suggestion, applySuggestion, compact }) {
  return (
    <div className={`va-form-grid ${compact ? 'is-compact' : ''}`}>
      <div className="va-form-row va-form-row-full">
        <FormLabel htmlFor="cust-email" required>Email</FormLabel>
        <TextInput
          id="cust-email" type="email" autoComplete="email"
          value={form.email}
          onChange={(v)=>setForm({...form, email: v})}
          placeholder="vous@exemple.com"
          error={errors.email}
          suggestion={suggestion}
          onApplySuggestion={applySuggestion}
        />
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-firstName" required>Prénom</FormLabel>
        <TextInput id="cust-firstName" autoComplete="given-name" value={form.firstName} onChange={(v)=>setForm({...form, firstName: v})}/>
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-lastName" required>Nom</FormLabel>
        <TextInput id="cust-lastName" autoComplete="family-name" value={form.lastName} onChange={(v)=>setForm({...form, lastName: v})}/>
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-phone" required>Téléphone</FormLabel>
        <TextInput id="cust-phone" type="tel" autoComplete="tel" value={form.phone} onChange={(v)=>setForm({...form, phone: v})} placeholder="06 12 34 56 78"/>
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-birthday" optional>Date de naissance</FormLabel>
        <TextInput id="cust-birthday" type="date" autoComplete="bday" value={form.birthday} onChange={(v)=>setForm({...form, birthday: v})}/>
      </div>
      <style>{`
        .va-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
        .va-form-grid.is-compact{grid-template-columns:1fr}
        .va-form-row-full{grid-column:1/-1}
      `}</style>
    </div>
  );
}

const COUNTRY_PRIORITY = [
  'France métropolitaine',
  'La Réunion',
  'Polynésie française',
  'Belgique',
  'Suisse',
  'Allemagne',
  'Espagne',
  'Maroc',
];
const COUNTRY_OTHERS = [
  'Afghanistan','Afrique du Sud','Albanie','Algérie','Andorre','Angola','Antigua-et-Barbuda','Arabie saoudite','Argentine','Arménie','Australie','Autriche','Azerbaïdjan',
  'Bahamas','Bahreïn','Bangladesh','Barbade','Biélorussie','Belize','Bénin','Bhoutan','Bolivie','Bosnie-Herzégovine','Botswana','Brésil','Brunei','Bulgarie','Burkina Faso','Burundi',
  'Cambodge','Cameroun','Canada','Cap-Vert','République centrafricaine','Chili','Chine','Chypre','Colombie','Comores','Congo','République démocratique du Congo','Corée du Nord','Corée du Sud','Costa Rica','Côte d\u2019Ivoire','Croatie','Cuba',
  'Danemark','Djibouti','Dominique','République dominicaine',
  'Égypte','Émirats arabes unis','Équateur','Érythrée','Estonie','Eswatini','États-Unis','Éthiopie',
  'Fidji','Finlande',
  'Gabon','Gambie','Géorgie','Ghana','Grèce','Grenade','Guatemala','Guinée','Guinée-Bissau','Guinée équatoriale','Guyana',
  'Haïti','Honduras','Hongrie',
  'Inde','Indonésie','Irak','Iran','Irlande','Islande','Israël','Italie',
  'Jamaïque','Japon','Jordanie',
  'Kazakhstan','Kenya','Kirghizistan','Kiribati','Kosovo','Koweït',
  'Laos','Lesotho','Lettonie','Liban','Libéria','Libye','Liechtenstein','Lituanie','Luxembourg',
  'Macédoine du Nord','Madagascar','Malaisie','Malawi','Maldives','Mali','Malte','Îles Marshall','Maurice','Mauritanie','Mexique','Micronésie','Moldavie','Monaco','Mongolie','Monténégro','Mozambique','Myanmar',
  'Namibie','Nauru','Népal','Nicaragua','Niger','Nigeria','Norvège','Nouvelle-Zélande',
  'Oman','Ouganda','Ouzbékistan',
  'Pakistan','Palaos','Palestine','Panama','Papouasie-Nouvelle-Guinée','Paraguay','Pays-Bas','Pérou','Philippines','Pologne','Portugal',
  'Qatar',
  'République tchèque','Roumanie','Royaume-Uni','Russie','Rwanda',
  'Saint-Christophe-et-Niévès','Sainte-Lucie','Saint-Marin','Saint-Vincent-et-les-Grenadines','Salomon','Salvador','Samoa','São Tomé-et-Principe','Sénégal','Serbie','Seychelles','Sierra Leone','Singapour','Slovaquie','Slovénie','Somalie','Soudan','Soudan du Sud','Sri Lanka','Suède','Suriname','Syrie',
  'Tadjikistan','Tanzanie','Tchad','Thaïlande','Timor oriental','Togo','Tonga','Trinité-et-Tobago','Tunisie','Turkménistan','Turquie','Tuvalu',
  'Ukraine','Uruguay',
  'Vanuatu','Vatican','Venezuela','Viêt Nam',
  'Yémen',
  'Zambie','Zimbabwe',
];

function CountrySelect({ id, value, onChange }) {
  return (
    <div className="va-input-wrap">
      <select
        id={id}
        className="va-input va-select"
        value={value}
        onChange={(e)=>onChange(e.target.value)}
      >
        <optgroup label="Pays principaux">
          {COUNTRY_PRIORITY.map(c => (<option key={c} value={c}>{c}</option>))}
        </optgroup>
        <optgroup label="Autres pays">
          {COUNTRY_OTHERS.map(c => (<option key={c} value={c}>{c}</option>))}
        </optgroup>
      </select>
      <style>{`
        .va-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235B7A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,6 11,1'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
      `}</style>
    </div>
  );
}

function AddressSection({ form, setForm, compact }) {
  return (
    <div className={`va-form-grid ${compact ? 'is-compact' : ''}`}>
      <div className="va-form-row va-form-row-full">
        <FormLabel htmlFor="cust-address" required>Adresse</FormLabel>
        <TextInput id="cust-address" autoComplete="street-address" value={form.address} onChange={(v)=>setForm({...form, address: v})} placeholder="42 rue de la République"/>
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-postcode" required>Code postal</FormLabel>
        <TextInput id="cust-postcode" autoComplete="postal-code" value={form.postcode} onChange={(v)=>setForm({...form, postcode: v})} placeholder="33000"/>
      </div>
      <div className="va-form-row">
        <FormLabel htmlFor="cust-city" required>Ville</FormLabel>
        <TextInput id="cust-city" autoComplete="address-level2" value={form.city} onChange={(v)=>setForm({...form, city: v})} placeholder="Bordeaux"/>
      </div>
      <div className="va-form-row va-form-row-full">
        <FormLabel htmlFor="cust-country" required>Pays</FormLabel>
        <CountrySelect id="cust-country" value={form.country} onChange={(v)=>setForm({...form, country: v})}/>
      </div>
    </div>
  );
}

function ProSection({ form, setForm, compact }) {
  return (
    <div className={`va-pro ${compact ? 'is-compact' : ''}`}>
      <div className="va-form-grid is-compact">
        <div className="va-form-row va-form-row-full">
          <FormLabel htmlFor="cust-companyName" required>Raison sociale</FormLabel>
          <TextInput id="cust-companyName" autoComplete="organization" value={form.companyName} onChange={(v)=>setForm({...form, companyName: v})} placeholder="Ma société SAS"/>
        </div>
      </div>
      <div className={`va-form-grid ${compact ? 'is-compact' : ''}`} style={{marginTop:14}}>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-siren" required>SIREN</FormLabel>
          <TextInput id="cust-siren" value={form.siren} onChange={(v)=>setForm({...form, siren: v})} placeholder="123 456 789"/>
        </div>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-tva" optional>Numéro de TVA</FormLabel>
          <TextInput id="cust-tva" value={form.tva} onChange={(v)=>setForm({...form, tva: v})} placeholder="FR12345678901"/>
        </div>
      </div>
      <style>{`
        .va-pro{padding:14px 16px;background:${B_BG_TEAL};border:1px dashed rgba(17,151,143,.3);border-radius:14px;margin-top:14px}
      `}</style>
    </div>
  );
}

function NumberStepper({ id, value, onChange, min = 0, max = 99 }) {
  const v = Number(value) || 0;
  const dec = () => onChange(Math.max(min, v - 1));
  const inc = () => onChange(Math.min(max, v + 1));
  return (
    <div className="va-input-wrap">
      <div className="va-step" id={id}>
        <button type="button" onClick={dec} disabled={v <= min} className="va-step-btn" aria-label="Diminuer">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14"/></svg>
        </button>
        <span className="va-step-val">{v}</span>
        <button type="button" onClick={inc} disabled={v >= max} className="va-step-btn" aria-label="Augmenter">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
        </button>
      </div>
      <style>{`
        .va-step{display:inline-flex;align-items:center;gap:10px;background:${B_SURFACE};border:1.5px solid ${B_TEAL};border-radius:999px;padding:4px;width:fit-content}
        .va-step-btn{width:34px;height:34px;border-radius:50%;border:none;background:${B_BG_TEAL};color:${B_TEAL};display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
        .va-step-btn:hover:not(:disabled){background:${B_TEAL};color:#fff}
        .va-step-btn:disabled{opacity:.35;cursor:not-allowed}
        .va-step-val{min-width:26px;text-align:center;font-size:15px;font-weight:900;color:${B_INK};letter-spacing:-.01em}
      `}</style>
    </div>
  );
}

function AdditionalSection({ form, setForm, compact }) {
  return (
    <>
      <div className={`va-form-grid ${compact ? 'is-compact' : ''}`}>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-nbTravelers" optional>Nombre de voyageurs</FormLabel>
          <NumberStepper id="cust-nbTravelers" value={form.nbTravelers} onChange={(v)=>setForm({...form, nbTravelers: v})} min={1} max={9}/>
        </div>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-howFound" optional>Comment nous avez-vous connu&nbsp;?</FormLabel>
          <SelectInput
            id="cust-howFound"
            value={form.howFound}
            onChange={(v)=>setForm({...form, howFound: v})}
            options={[
              {value:'internet',label:'Internet'},
              {value:'socialMedia',label:'Réseaux sociaux'},
              {value:'friends',label:'Bouche à oreille'},
              {value:'press',label:'Presse'},
              {value:'salon',label:'Salon / Événement'},
              {value:'returning',label:'Client existant'},
              {value:'other',label:'Autre'},
            ]}
          />
        </div>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-destination" optional>Votre destination</FormLabel>
          <TextInput id="cust-destination" value={form.destination} onChange={(v)=>setForm({...form, destination: v})} placeholder="Ex. Pays Basque"/>
        </div>
        <div className="va-form-row">
          <FormLabel htmlFor="cust-flightTrain" optional>Numéro de vol / train</FormLabel>
          <TextInput id="cust-flightTrain" value={form.flightTrain} onChange={(v)=>setForm({...form, flightTrain: v})}/>
        </div>
        <div className="va-form-row va-form-row-full">
          <FormLabel htmlFor="cust-questions" optional>Questions ou remarques</FormLabel>
          <Textarea id="cust-questions" value={form.questions} onChange={(v)=>setForm({...form, questions: v})} rows={3} placeholder="Une demande particulière à nous transmettre&nbsp;?"/>
        </div>
      </div>
      {/* Checkbox entreprise — révèle ProSection */}
      <label className="va-pro-toggle">
        <input
          type="checkbox"
          checked={form.isPro}
          onChange={(e)=>setForm({...form, isPro: e.target.checked})}
        />
        <span className="va-pro-toggle-label">
          <strong>Vous réservez pour une entreprise&nbsp;?</strong>
          <em>Cochez pour ajouter les informations de facturation professionnelle.</em>
        </span>
        <style>{`
          .va-pro-toggle{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 16px;background:#fbfffe;border:1.5px solid ${B_BORDER};border-radius:14px;cursor:pointer;transition:all .2s}
          .va-pro-toggle:hover{border-color:${B_TEAL};background:${B_BG_TEAL}}
          .va-pro-toggle input{margin-top:3px;width:18px;height:18px;accent-color:${B_TEAL};cursor:pointer;flex-shrink:0}
          .va-pro-toggle-label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:${B_INK}}
          .va-pro-toggle-label strong{font-weight:700}
          .va-pro-toggle-label em{font-style:normal;font-size:12px;color:${B_MUTED}}
        `}</style>
      </label>
      {form.isPro && <ProSection form={form} setForm={setForm} compact={compact}/>}
    </>
  );
}

// ─── Code promo (inline) ──────────────────────────────────────
function PromoBlock({ promo, setPromo, compact }) {
  const [code, setCode] = React.useState('');
  const [applied, setApplied] = React.useState(false);
  const apply = () => {
    if (code.trim()) { setApplied(true); setPromo(code.trim().toUpperCase()); }
  };
  return (
    <div className={`va-promo ${compact ? 'is-compact' : ''}`}>
      <div className="va-promo-head">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
          <line x1="7" y1="7" x2="7.01" y2="7"/>
        </svg>
        <div>
          <div className="va-promo-title">Vous avez un code promo&nbsp;?</div>
          <div className="va-promo-help">Saisissez-le pour profiter de votre réduction.</div>
        </div>
      </div>
      <div className="va-promo-row">
        <input
          type="text"
          value={code}
          onChange={(e)=>setCode(e.target.value.toUpperCase())}
          placeholder="VAN2026"
          disabled={applied}
          className="va-input va-promo-input"
        />
        <button type="button" onClick={apply} disabled={applied || !code.trim()} className="va-promo-btn">
          {applied ? '✓ Appliqué' : 'Appliquer'}
        </button>
      </div>
      {applied && <div className="va-promo-success">Code « {promo} » appliqué — réduction visible dans le récap.</div>}
      <style>{`
        .va-promo{padding:16px 18px;background:#fafaf6;border:1px solid ${B_BORDER};border-radius:14px}
        .va-promo-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
        .va-promo-title{font-size:13.5px;font-weight:700;color:${B_INK}}
        .va-promo-help{font-size:12px;color:${B_MUTED};margin-top:2px}
        .va-promo-row{display:flex;gap:8px}
        .va-promo.is-compact .va-promo-row{flex-direction:column}
        .va-promo-input{flex:1;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
        .va-promo-btn{padding:0 22px;height:44px;background:${B_TEAL};color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
        .va-promo-btn:hover:not(:disabled){background:${B_TEAL_HV};transform:translateY(-1px);box-shadow:0 4px 12px rgba(17,151,143,.3)}
        .va-promo-btn:disabled{background:${B_BG_TEAL};color:${B_TEAL};cursor:default}
        .va-promo-success{margin-top:10px;font-size:12px;color:${B_TEAL};font-weight:600}
      `}</style>
    </div>
  );
}

// ─── Section title (numéroté) ─────────────────────────────────
function SectionTitle({ num, title, help }) {
  return (
    <div className="va-sec-head">
      {num != null && <div className="va-sec-num">{num}</div>}
      <div>
        <h2 className="va-sec-title">{title}</h2>
        {help && <p className="va-sec-help">{help}</p>}
      </div>
      <style>{`
        .va-sec-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
        .va-sec-num{flex-shrink:0;width:32px;height:32px;background:${B_BG_TEAL};color:${B_TEAL};border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
        .va-sec-title{font-size:20px;font-weight:900;color:${B_INK};margin:0;letter-spacing:-.01em;line-height:1.15}
        .va-sec-help{font-size:13px;color:${B_MUTED};margin:4px 0 0;line-height:1.45}
      `}</style>
    </div>
  );
}

// ─── Cancellation / CGV / RGPD blocks ─────────────────────────
function CancellationBlock({ compact }) {
  return (
    <div className={`va-cancel ${compact ? 'is-compact' : ''}`}>
      <div className="va-cancel-head">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <polyline points="12 6 12 12 16 14"/>
        </svg>
        <h3 className="va-cancel-title">Politique d'annulation</h3>
      </div>
      <ul className="va-cancel-list">
        <li><strong>Plus de 2 mois avant le départ&nbsp;:</strong> acompte restitué moins 50&nbsp;€ forfaitaires.</li>
        <li><strong>Moins de 2 mois avant le départ&nbsp;:</strong> acompte non restitué (sauf relouage du véhicule).</li>
        <li><strong>Moins de 48h ou non-présentation&nbsp;:</strong> solde total débité automatiquement.</li>
      </ul>
      <p className="va-cancel-note">L'assurance annulation (si souscrite) offre des conditions plus souples.</p>
      <a href="https://www.van-away.com/cgv" target="_blank" rel="noopener" className="va-cancel-link">
        Voir les CGV complètes
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M7 17L17 7M9 7h8v8"/>
        </svg>
      </a>
      <style>{`
        .va-cancel{padding:18px 20px;background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:16px}
        .va-cancel-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        .va-cancel-title{font-size:14px;font-weight:900;color:${B_INK};margin:0;letter-spacing:.01em}
        .va-cancel-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
        .va-cancel-list li{font-size:12.5px;color:${B_MUTED};line-height:1.5;padding-left:14px;position:relative}
        .va-cancel-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:${B_TEAL};opacity:.4}
        .va-cancel-list li strong{color:${B_INK};font-weight:700}
        .va-cancel-note{margin:10px 0 0;font-size:12px;color:${B_TEAL};font-weight:600}
        .va-cancel-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:${B_TEAL};font-weight:700;text-decoration:none}
        .va-cancel-link:hover{text-decoration:underline}
      `}</style>
    </div>
  );
}

function LegalBlock({ form, setForm, errors, compact }) {
  return (
    <div className={`va-legal ${compact ? 'is-compact' : ''}`}>
      <label className="va-legal-row">
        <input
          type="checkbox"
          checked={form.cgv}
          onChange={(e)=>setForm({...form, cgv: e.target.checked})}
        />
        <span className="va-legal-text">
          J'accepte les <a href="https://www.van-away.com/cgv" target="_blank" rel="noopener">Conditions Générales de Vente</a>
          <span className="va-legal-req">*</span>
        </span>
      </label>

      <p className="va-legal-l221">
        Conformément à l'article L.221-28 du Code de la consommation, le droit de rétractation ne s'applique pas aux prestations de location de véhicules prévues à une date déterminée.
      </p>

      <label className="va-legal-row">
        <input
          type="checkbox"
          checked={form.rgpd}
          onChange={(e)=>setForm({...form, rgpd: e.target.checked})}
        />
        <span className="va-legal-text">
          J'accepte le traitement de mes données personnelles conformément à la <a href="https://www.van-away.com/confidentialite" target="_blank" rel="noopener">politique de confidentialité</a>.
          <span className="va-legal-req">*</span>
        </span>
      </label>

      {errors.legal && <div className="va-legal-err" role="alert">{errors.legal}</div>}

      <style>{`
        .va-legal{display:flex;flex-direction:column;gap:14px;padding:18px 20px;background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:16px}
        .va-legal-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
        .va-legal-row input{margin-top:2px;width:18px;height:18px;accent-color:${B_TEAL};flex-shrink:0;cursor:pointer}
        .va-legal-text{font-size:13px;color:${B_INK};line-height:1.5}
        .va-legal-text a{color:${B_TEAL};font-weight:700;text-decoration:none}
        .va-legal-text a:hover{text-decoration:underline}
        .va-legal-req{color:${B_DANGER};font-weight:900;margin-left:3px}
        .va-legal-l221{margin:-8px 0 0 30px;padding:10px 12px;background:#fafaf6;border-radius:10px;font-size:11.5px;color:${B_MUTED};line-height:1.5;font-style:italic}
        .va-legal-err{padding:10px 14px;background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.2);border-radius:10px;color:${B_DANGER};font-size:12.5px;font-weight:600}
      `}</style>
    </div>
  );
}

// ─── Agency contact block ─────────────────────────────────────
function AgencyContactBlock({ search, compact }) {
  return (
    <div className={`va-agency ${compact ? 'is-compact' : ''}`}>
      <div className="va-agency-head">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 9l9-6 9 6v11a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2z"/>
        </svg>
        <div>
          <div className="va-agency-eyebrow">Une question&nbsp;? Contactez votre agence</div>
          <div className="va-agency-name">{search.agencyName}</div>
        </div>
      </div>
      <div className="va-agency-grid">
        <div className="va-agency-item">
          <span className="va-agency-item-label">Adresse</span>
          <span className="va-agency-item-val">{search.agencyAddress}</span>
        </div>
        <a href={`tel:${search.agencyPhone.replace(/\s/g,'')}`} className="va-agency-item is-link">
          <span className="va-agency-item-label">Téléphone</span>
          <span className="va-agency-item-val">{search.agencyPhone}</span>
        </a>
        <a href={`mailto:${search.agencyEmail}`} className="va-agency-item is-link">
          <span className="va-agency-item-label">Email</span>
          <span className="va-agency-item-val">{search.agencyEmail}</span>
        </a>
      </div>
      <style>{`
        .va-agency{padding:18px 20px;background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:16px}
        .va-agency-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
        .va-agency-eyebrow{font-size:11px;font-weight:900;color:${B_TEAL};text-transform:uppercase;letter-spacing:1.4px}
        .va-agency-name{font-size:15px;font-weight:900;color:${B_INK};margin-top:2px}
        .va-agency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .va-agency.is-compact .va-agency-grid{grid-template-columns:1fr}
        .va-agency-item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:#fafaf6;border-radius:10px;text-decoration:none;transition:all .15s}
        .va-agency-item.is-link{cursor:pointer}
        .va-agency-item.is-link:hover{background:${B_BG_TEAL}}
        .va-agency-item-label{font-size:10.5px;font-weight:900;color:${B_MUTED};text-transform:uppercase;letter-spacing:1px}
        .va-agency-item-val{font-size:13px;font-weight:700;color:${B_INK};line-height:1.3}
      `}</style>
    </div>
  );
}

// ─── Trip recap sidebar (variante : récap voyage en haut + détail prix dépliable) ──
function TripRecapSidebar({ vehicle, search, config, options, promo, total, compact, ready }) {
  const [openPrice, setOpenPrice] = React.useState(true);
  const vPrice = vehicle.pricePerDay * search.days;
  const mPrice = config.mileageAmount * search.days;
  const iPrice = config.insurancePricingPerDay ? config.insuranceAmount * search.days : config.insuranceAmount;
  const oTotal = options.reduce((s,o)=>s+o.amount, 0);

  return (
    <aside className="va-recap">
      {/* Trip card en haut */}
      <div className="va-recap-trip">
        <div className="va-recap-trip-vehicle">
          <img src={vehicle.picture} alt={vehicle.display_name}/>
          <div className="va-recap-trip-vname">{vehicle.display_name}</div>
        </div>
        <div className="va-recap-trip-dates">
          <div className="va-recap-trip-leg">
            <span className="va-recap-trip-leg-label">Départ</span>
            <span className="va-recap-trip-leg-date">{bfmtDateLong(search.startDate)}</span>
            <span className="va-recap-trip-leg-loc">{search.agencyName.split(' - ')[1]}</span>
          </div>
          <div className="va-recap-trip-arrow" aria-hidden="true">
            <span className="va-recap-trip-line"/>
            <span className="va-recap-trip-pill">{search.days} j</span>
            <span className="va-recap-trip-line"/>
          </div>
          <div className="va-recap-trip-leg">
            <span className="va-recap-trip-leg-label">Retour</span>
            <span className="va-recap-trip-leg-date">{bfmtDateLong(search.endDate)}</span>
            <span className="va-recap-trip-leg-loc">{search.agencyName.split(' - ')[1]}</span>
          </div>
        </div>
      </div>

      {/* Détail prix dépliable */}
      <button type="button" className="va-recap-toggle" onClick={()=>setOpenPrice(!openPrice)}>
        <span>Détail du prix</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{transform: openPrice ? 'rotate(180deg)' : 'none', transition:'transform .2s'}}>
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>

      {openPrice && (
        <div className="va-recap-prices">
          <div className="va-recap-price-row">
            <span>Location <em>· {search.days} j × {bfmtPrice(vehicle.pricePerDay)}</em></span>
            <strong>{bfmtPrice(vPrice)}</strong>
          </div>
          <div className="va-recap-price-row">
            <span>Forfait km <em>· {config.mileageLabel}</em></span>
            <strong>{bfmtPrice(mPrice)}</strong>
          </div>
          <div className="va-recap-price-row">
            <span>Assurance <em>· {config.insuranceLabel}</em></span>
            <strong>{bfmtPrice(iPrice)}</strong>
          </div>
          {options.length > 0 && (
            <>
              <div className="va-recap-price-divider">Options</div>
              {options.map(o => (
                <div key={o.id} className="va-recap-price-row">
                  <span>{o.name}</span>
                  <strong>{bfmtPrice(o.amount)}</strong>
                </div>
              ))}
            </>
          )}
          {promo && (
            <div className="va-recap-price-row va-recap-promo">
              <span>Code promo <em>· {promo}</em></span>
              <strong>− {bfmtPrice(0)}</strong>
            </div>
          )}
        </div>
      )}

      {/* Total */}
      <div className="va-recap-total">
        <div className="va-recap-total-row">
          <span>Total TTC</span>
          <strong>{bfmtPrice(total)}</strong>
        </div>
        <div className="va-recap-total-tva">dont {bfmtPrice(total*0.2/1.2)} de TVA (20%)</div>
        <button type="button" className={`va-side-cta ${ready ? 'is-ready' : ''}`} disabled={!ready}>
          <span>{ready ? 'Voir le récapitulatif' : 'Acceptez les conditions'}</span>
          {ready && (<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M13 5l7 7-7 7"/></svg>)}
        </button>
      </div>

      <style>{`
        .va-recap{background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(4,40,40,.04),0 8px 24px rgba(4,40,40,.06)}

        .va-recap-trip{padding:16px 18px 18px;border-bottom:1px solid ${B_BORDER};background:#fbfffe}
        .va-recap-trip-vehicle{display:flex;align-items:center;gap:10px;margin-bottom:14px}
        .va-recap-trip-vehicle img{width:60px;height:40px;object-fit:cover;border-radius:8px;flex-shrink:0}
        .va-recap-trip-vname{font-size:13.5px;font-weight:900;color:${B_INK};letter-spacing:-.01em;line-height:1.2}

        .va-recap-trip-dates{display:flex;flex-direction:column;gap:4px}
        .va-recap-trip-leg{display:flex;flex-direction:column;gap:1px}
        .va-recap-trip-leg-label{font-size:10px;font-weight:900;color:${B_TEAL};text-transform:uppercase;letter-spacing:1.4px}
        .va-recap-trip-leg-date{font-size:13.5px;font-weight:700;color:${B_INK};text-transform:capitalize}
        .va-recap-trip-leg-loc{font-size:11.5px;color:${B_MUTED}}

        .va-recap-trip-arrow{display:flex;align-items:center;gap:8px;margin:8px 0 8px 0;padding-left:0}
        .va-recap-trip-line{flex:1;height:1px;background:${B_BORDER_S}}
        .va-recap-trip-pill{font-size:10.5px;font-weight:900;color:${B_TEAL};background:${B_BG_TEAL};padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:1px}

        .va-recap-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:${B_SURFACE};border:none;border-bottom:1px solid ${B_BORDER};font-family:inherit;font-size:11px;font-weight:900;color:${B_MUTED};text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;transition:background .15s}
        .va-recap-toggle:hover{background:#fafaf6}

        .va-recap-prices{padding:12px 18px;border-bottom:1px solid ${B_BORDER}}
        .va-recap-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;font-size:12.5px;color:${B_MUTED}}
        .va-recap-price-row strong{color:${B_INK};font-weight:700;font-size:13px;text-align:right}
        .va-recap-price-row em{font-style:normal;color:${B_MUTED};font-size:11px;font-weight:400}
        .va-recap-price-divider{font-size:10px;font-weight:900;color:${B_MUTED};text-transform:uppercase;letter-spacing:1.2px;margin:8px 0 4px}
        .va-recap-promo strong{color:${B_TEAL} !important}

        .va-recap-total{padding:16px 18px;background:#fbfffe}
        .va-recap-total-row{display:flex;justify-content:space-between;align-items:baseline}
        .va-recap-total-row span{font-size:13px;font-weight:900;color:${B_INK};text-transform:uppercase;letter-spacing:1.2px}
        .va-recap-total-row strong{font-size:26px;font-weight:900;color:${B_TEAL};letter-spacing:-.02em}
        .va-recap-total-tva{font-size:10.5px;color:${B_MUTED};text-align:right;margin-top:2px}
        .va-side-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:13px 18px;background:${B_BORDER};color:${B_MUTED};border:none;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;cursor:not-allowed;transition:all .25s cubic-bezier(.4,0,.2,1)}
        .va-side-cta.is-ready{background:${B_TEAL};color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(17,151,143,.3)}
        .va-side-cta.is-ready:hover{background:${B_TEAL_HV};transform:translateY(-1px);box-shadow:0 8px 22px rgba(17,151,143,.4)}
        .va-side-cta svg{transition:transform .2s}
        .va-side-cta.is-ready:hover svg{transform:translateX(3px)}
      `}</style>
    </aside>
  );
}

// ─── Help block (réutilisé de /vehicles, simplifié contextuel /booking) ──
function BookingHelpBlock({ search, compact }) {
  const [name, setName] = React.useState('');
  const [firstName, setFirstName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [rgpd, setRgpd] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const agencyCity = (search.agencyName.split(' - ')[1] || '').trim();
  const defaultMessage = `Bonjour,\n\nJ'ai une question concernant ma réservation au départ de ${agencyCity} du ${bfmtDateLong(search.startDate)} au ${bfmtDateLong(search.endDate)}.\n\nMerci de me recontacter.\n\nBien cordialement.`;
  const [message, setMessage] = React.useState(defaultMessage);

  const handleSubmit = (e) => { e.preventDefault(); if (rgpd) setSubmitted(true); };

  return (
    <section className={`va-help ${compact ? 'is-compact' : ''}`}>
      <div className="va-help-inner">
        <div className="va-help-left">
          <div className="va-help-eyebrow"><span className="va-help-eyebrow-dot"/>Besoin d'aide ?</div>
          <h2 className="va-help-title">Une question avant de finaliser&nbsp;?</h2>
          <p className="va-help-lede">Notre équipe vous répond sous 24h ouvrées. Décrivez votre besoin, on revient vers vous.</p>
          <ul className="va-help-list">
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z"/></svg>
              <div>
                <div className="va-help-item-title">Par téléphone</div>
                <div className="va-help-item-val">{search.agencyPhone}</div>
              </div>
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              <div>
                <div className="va-help-item-title">Par email</div>
                <div className="va-help-item-val">{search.agencyEmail}</div>
              </div>
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              <div>
                <div className="va-help-item-title">Via le formulaire ci-contre</div>
                <div className="va-help-item-val">Réponse sous 24h ouvrées</div>
              </div>
            </li>
          </ul>
        </div>

        <form className="va-help-form" onSubmit={handleSubmit}>
          {submitted ? (
            <div className="va-help-ok">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={B_TEAL} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 16 9"/></svg>
              <div>
                <div className="va-help-ok-title">Demande envoyée&nbsp;!</div>
                <div className="va-help-ok-text">Notre équipe vous recontacte sous 24h ouvrées.</div>
              </div>
              <button type="button" onClick={()=>setSubmitted(false)} className="va-help-ok-again">Nouvelle demande</button>
            </div>
          ) : (
            <>
              <div className="va-help-form-grid">
                <input value={firstName} onChange={(e)=>setFirstName(e.target.value)} placeholder="Prénom" className="va-input"/>
                <input value={name} onChange={(e)=>setName(e.target.value)} placeholder="Nom" className="va-input"/>
                <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="Email" className="va-input va-help-form-full"/>
                <input type="tel" value={phone} onChange={(e)=>setPhone(e.target.value)} placeholder="Téléphone (optionnel)" className="va-input va-help-form-full"/>
              </div>
              <textarea value={message} onChange={(e)=>setMessage(e.target.value)} rows={5} className="va-input va-help-textarea"/>
              <label className="va-help-rgpd">
                <input type="checkbox" checked={rgpd} onChange={(e)=>setRgpd(e.target.checked)}/>
                <span>J'accepte que mes données soient traitées pour répondre à ma demande.</span>
              </label>
              <button type="submit" disabled={!rgpd || !email} className="va-help-submit">
                Envoyer ma demande
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
              </button>
            </>
          )}
        </form>
      </div>

      <style>{`
        .va-help{margin-top:48px;padding:36px 24px;background:${B_BG_TEAL}}
        .va-help.is-compact{padding:28px 16px;margin-top:32px}
        .va-help-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
        .va-help.is-compact .va-help-inner{grid-template-columns:1fr;gap:24px}

        .va-help-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:${B_TEAL};text-transform:uppercase;letter-spacing:1.4px;margin-bottom:8px}
        .va-help-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:${B_TEAL}}
        .va-help-title{font-size:28px;font-weight:900;color:${B_INK};margin:0 0 10px;letter-spacing:-.02em;line-height:1.1;text-wrap:pretty}
        .va-help.is-compact .va-help-title{font-size:22px}
        .va-help-lede{font-size:14px;color:${B_MUTED};line-height:1.55;margin:0 0 20px;max-width:42ch}
        .va-help-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
        .va-help-list li{display:flex;align-items:flex-start;gap:12px}
        .va-help-list li svg{flex-shrink:0;margin-top:2px}
        .va-help-item-title{font-size:13px;font-weight:700;color:${B_INK}}
        .va-help-item-val{font-size:13px;color:${B_MUTED};margin-top:1px}

        .va-help-form{padding:24px;background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:18px;box-shadow:0 1px 2px rgba(4,40,40,.04),0 8px 24px rgba(4,40,40,.06)}
        .va-help-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
        .va-help-form-full{grid-column:1/-1}
        .va-help-textarea{resize:vertical;min-height:110px;font-family:inherit;margin-bottom:10px}
        .va-help-rgpd{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:${B_MUTED};line-height:1.45;margin-bottom:14px;cursor:pointer}
        .va-help-rgpd input{margin-top:2px;width:16px;height:16px;accent-color:${B_TEAL};flex-shrink:0;cursor:pointer}
        .va-help-submit{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:${B_TEAL};color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .25s ease}
        .va-help-submit:hover:not(:disabled){background:${B_TEAL_HV};transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,151,143,.3)}
        .va-help-submit:disabled{opacity:.4;cursor:not-allowed}

        .va-help-ok{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:8px 0}
        .va-help-ok-title{font-size:18px;font-weight:900;color:${B_INK}}
        .va-help-ok-text{font-size:13px;color:${B_MUTED};margin-top:4px}
        .va-help-ok-again{margin-top:6px;padding:9px 18px;background:transparent;border:1.5px solid ${B_BORDER_S};color:${B_INK};border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
        .va-help-ok-again:hover{border-color:${B_TEAL};color:${B_TEAL}}
      `}</style>
    </section>
  );
}

// ─── Booking screen (main) ────────────────────────────────────
function BookingScreen({ compact = false, tweaks = {} }) {
  const layout      = tweaks.formLayout || 'iso';        // iso | cards | stepped
  const sidebarKind = tweaks.sidebarKind || 'recap';     // recap | detailed | minimal

  // Form state — pré-rempli avec un email VOLONTAIREMENT typoté pour démo (FR-018)
  const [form, setForm] = React.useState({
    email: 'teo@gmal.com',
    firstName: 'Téo',
    lastName: '',
    phone: '',
    birthday: '',
    address: '',
    postcode: '',
    city: '',
    country: 'France métropolitaine',
    isPro: false,
    companyName: '',
    siren: '',
    tva: '',
    nbTravelers: 2,
    howFound: 'internet',
    destination: '',
    flightTrain: '',
    questions: '',
    cgv: false,
    rgpd: false,
  });
  const [errors] = React.useState({});
  const [promo, setPromo] = React.useState('');

  // Email typo suggestion (live)
  const suggestion = React.useMemo(() => suggestEmailFix(form.email), [form.email]);
  const applySuggestion = () => { if (suggestion) setForm({...form, email: suggestion}); };

  const total = computeTotal();
  const ready = form.cgv && form.rgpd;

  return (
    <>
      <div className={`va-bk ${compact ? 'is-compact' : ''}`}>
        <main className="va-bk-main">
          <div className="va-bk-back">
            <a href="#" onClick={(e)=>e.preventDefault()} className="va-bk-back-link">
              <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7"/></svg>
              Retour aux options
            </a>
          </div>

          <header className="va-bk-header">
            <h1 className="va-bk-title">Vos coordonnées</h1>
            <p className="va-bk-subtitle">Plus qu'une étape avant le récapitulatif et le paiement de l'acompte. Les champs marqués <span className="va-bk-req">*</span> sont obligatoires.</p>
          </header>

          {/* Layout switch */}
          {layout === 'iso' && <FormLayoutIso form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} promo={promo} setPromo={setPromo} compact={compact}/>}
          {layout === 'cards' && <FormLayoutCards form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} promo={promo} setPromo={setPromo} compact={compact}/>}
          {layout === 'stepped' && <FormLayoutStepped form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} promo={promo} setPromo={setPromo} compact={compact}/>}

          {/* Blocs additionnels (iso Vue, ordre demandé par Téo) */}
          <div className="va-bk-blocks">
            <CancellationBlock compact={compact}/>
            <LegalBlock form={form} setForm={setForm} errors={errors} compact={compact}/>
            <AgencyContactBlock search={BK_SEARCH} compact={compact}/>
          </div>
        </main>

        {/* Sidebar */}
        {!compact && (
          <aside className="va-bk-aside">
            {sidebarKind === 'recap'    && <TripRecapSidebar vehicle={BK_VEHICLE} search={BK_SEARCH} config={BK_CONFIG} options={BK_OPTIONS_SELECTED} promo={promo} total={total} ready={ready}/>}
            {sidebarKind === 'detailed' && <DetailedCartSidebar vehicle={BK_VEHICLE} search={BK_SEARCH} config={BK_CONFIG} options={BK_OPTIONS_SELECTED} promo={promo} total={total} ready={ready}/>}
            {sidebarKind === 'minimal'  && <MinimalCartSidebar vehicle={BK_VEHICLE} search={BK_SEARCH} total={total} ready={ready}/>}
          </aside>
        )}
      </div>

      {/* Help block (form en bas, demandé par Téo) */}
      <BookingHelpBlock search={BK_SEARCH} compact={compact}/>

      {/* Bottom bar sticky (mobile uniquement — desktop a son CTA en bas de sidebar) */}
      <BottomBarBooking
        total={total}
        ready={ready}
        compact={compact}
        desktopHidden
        vehicle={BK_VEHICLE}
        search={BK_SEARCH}
        config={BK_CONFIG}
        options={BK_OPTIONS_SELECTED}
        promo={promo}
      />

      <style>{`
        .va-bk{display:grid;grid-template-columns:1fr 380px;gap:32px;max-width:1320px;margin:0 auto;padding:24px;align-items:start}
        .va-bk.is-compact{grid-template-columns:1fr;gap:16px;padding:14px}
        .va-bk-main{min-width:0}
        .va-bk-aside{position:sticky;top:24px}

        .va-bk-back{margin-bottom:14px}
        .va-bk-back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:${B_MUTED};text-decoration:none;padding:6px 10px;border-radius:8px;transition:all .15s}
        .va-bk-back-link:hover{color:${B_TEAL};background:${B_BG_TEAL}}

        .va-bk-header{margin-bottom:28px}
        .va-bk-title{font-size:36px;font-weight:900;color:${B_INK};margin:0;letter-spacing:-.02em;line-height:1.05}
        .va-bk.is-compact .va-bk-title{font-size:26px}
        .va-bk-subtitle{font-size:14px;color:${B_MUTED};margin:8px 0 0;line-height:1.5;text-wrap:pretty;white-space:nowrap}
        .va-bk.is-compact .va-bk-subtitle{white-space:normal;max-width:60ch}
        .va-bk-req{color:${B_DANGER};font-weight:900}

        .va-bk-blocks{display:flex;flex-direction:column;gap:14px;margin-top:28px}
      `}</style>
    </>
  );
}

// ─── Layout 1 — ISO (tout déroulé, sections séparées par titre) ──
function FormLayoutIso({ form, setForm, errors, suggestion, applySuggestion, promo, setPromo, compact }) {
  return (
    <div className="va-fl-iso">
      <SectionTitle num={1} title="Informations personnelles" help="On utilise ces informations pour le contrat de location."/>
      <PersonalSection form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} compact={compact}/>

      <div className="va-fl-iso-sep"/>

      <SectionTitle num={2} title="Adresse de facturation" help="Pour l'édition de votre facture."/>
      <AddressSection form={form} setForm={setForm} compact={compact}/>

      <div className="va-fl-iso-sep"/>

      <SectionTitle num={3} title="Informations complémentaires" help="Aidez-nous à préparer votre arrivée."/>
      <AdditionalSection form={form} setForm={setForm} compact={compact}/>

      <div className="va-fl-iso-sep"/>

      <PromoBlock promo={promo} setPromo={setPromo} compact={compact}/>

      <style>{`
        .va-fl-iso{display:flex;flex-direction:column;gap:16px}
        .va-fl-iso-sep{height:1px;background:${B_BORDER};margin:14px 0}
      `}</style>
    </div>
  );
}

// ─── Layout 2 — CARDS (sections en cards séparées) ────────────
function FormLayoutCards({ form, setForm, errors, suggestion, applySuggestion, promo, setPromo, compact }) {
  return (
    <div className="va-fl-cards">
      <div className="va-fl-card">
        <SectionTitle num={1} title="Informations personnelles" help="Identité et contact pour le contrat."/>
        <PersonalSection form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} compact={compact}/>
      </div>
      <div className="va-fl-card">
        <SectionTitle num={2} title="Adresse de facturation" help="Pour l'édition de votre facture."/>
        <AddressSection form={form} setForm={setForm} compact={compact}/>
      </div>
      <div className="va-fl-card">
        <SectionTitle num={3} title="Informations complémentaires" help="Voyageurs, destination, professionnel…"/>
        <AdditionalSection form={form} setForm={setForm} compact={compact}/>
      </div>
      <div className="va-fl-card va-fl-card-promo">
        <PromoBlock promo={promo} setPromo={setPromo} compact={compact}/>
      </div>

      <style>{`
        .va-fl-cards{display:flex;flex-direction:column;gap:16px}
        .va-fl-card{padding:24px 26px;background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:18px;box-shadow:0 1px 2px rgba(4,40,40,.04)}
        .va-bk.is-compact .va-fl-card{padding:18px 16px}
        .va-fl-card-promo{padding:0;background:transparent;border:none;box-shadow:none}
      `}</style>
    </div>
  );
}

// ─── Layout 3 — STEPPED (accordéon, une section ouverte à la fois) ──
function FormLayoutStepped({ form, setForm, errors, suggestion, applySuggestion, promo, setPromo, compact }) {
  const [step, setStep] = React.useState(1);
  const sections = [
    { num: 1, title: 'Informations personnelles',  summary: () => form.firstName || form.email || '—' },
    { num: 2, title: 'Adresse de facturation',     summary: () => [form.postcode, form.city].filter(Boolean).join(' ') || '—' },
    { num: 3, title: 'Informations complémentaires', summary: () => `${form.nbTravelers||0} voyageur(s)` },
  ];
  const goNext = () => setStep((s) => Math.min(s + 1, 3));

  return (
    <div className="va-fl-step">
      {sections.map((sec) => {
        const open = step === sec.num;
        const done = step > sec.num;
        return (
          <div key={sec.num} className={`va-fl-step-item ${open ? 'is-open' : ''} ${done ? 'is-done' : ''}`}>
            <button type="button" className="va-fl-step-head" onClick={()=>setStep(sec.num)}>
              <span className="va-fl-step-num">{done ? '✓' : sec.num}</span>
              <div className="va-fl-step-headtxt">
                <span className="va-fl-step-title">{sec.title}</span>
                {!open && <span className="va-fl-step-summary">{sec.summary()}</span>}
              </div>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{transform: open ? 'rotate(180deg)' : 'none', transition:'transform .2s', color: B_MUTED}}>
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </button>
            {open && (
              <div className="va-fl-step-body">
                {sec.num === 1 && <PersonalSection form={form} setForm={setForm} errors={errors} suggestion={suggestion} applySuggestion={applySuggestion} compact={compact}/>}
                {sec.num === 2 && <AddressSection form={form} setForm={setForm} compact={compact}/>}
                {sec.num === 3 && <AdditionalSection form={form} setForm={setForm} compact={compact}/>}
                {sec.num < 3 && (
                  <div className="va-fl-step-foot">
                    <button type="button" className="va-fl-step-next" onClick={goNext}>
                      Continuer
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>
        );
      })}

      <div style={{marginTop:14}}>
        <PromoBlock promo={promo} setPromo={setPromo} compact={compact}/>
      </div>

      <style>{`
        .va-fl-step{display:flex;flex-direction:column;gap:10px}
        .va-fl-step-item{background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:16px;overflow:hidden;transition:all .2s}
        .va-fl-step-item.is-open{border-color:${B_TEAL};box-shadow:0 0 0 3px rgba(17,151,143,.08)}
        .va-fl-step-head{display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}
        .va-fl-step-head:hover{background:#fafaf6}
        .va-fl-step-item.is-open .va-fl-step-head{background:#fbfffe}
        .va-fl-step-num{flex-shrink:0;width:32px;height:32px;background:${B_BORDER};color:${B_MUTED};border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;transition:all .2s}
        .va-fl-step-item.is-open .va-fl-step-num{background:${B_TEAL};color:#fff}
        .va-fl-step-item.is-done .va-fl-step-num{background:${B_BG_TEAL};color:${B_TEAL}}
        .va-fl-step-headtxt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
        .va-fl-step-title{font-size:15px;font-weight:900;color:${B_INK};letter-spacing:-.01em}
        .va-fl-step-summary{font-size:12.5px;color:${B_MUTED};white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .va-fl-step-body{padding:8px 20px 20px;border-top:1px solid ${B_BORDER}}
        .va-fl-step-foot{margin-top:18px;display:flex;justify-content:flex-end}
        .va-fl-step-next{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;background:${B_TEAL};color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
        .va-fl-step-next:hover{background:${B_TEAL_HV};transform:translateY(-1px);box-shadow:0 6px 16px rgba(17,151,143,.3)}
      `}</style>
    </div>
  );
}

// ─── Sidebar variants : Detailed (panier complet avec tout détaillé) ─────
function DetailedCartSidebar({ vehicle, search, config, options, promo, total, ready }) {
  const vPrice = vehicle.pricePerDay * search.days;
  const mPrice = config.mileageAmount * search.days;
  const iPrice = config.insurancePricingPerDay ? config.insuranceAmount * search.days : config.insuranceAmount;

  return (
    <aside className="va-cart">
      <div className="va-cart-header">
        <span className="va-cart-eyebrow">Votre sélection</span>
      </div>

      <div className="va-cart-vehicle">
        <div className="va-cart-vehicle-img">
          <img src={vehicle.picture} alt={vehicle.display_name}/>
          <span className="va-cart-vehicle-cat">{vehicle.category_name}</span>
        </div>
        <div className="va-cart-vehicle-name">{vehicle.display_name}</div>
        <div className="va-cart-vehicle-specs">
          <span>{vehicle.nb_places} places</span>
          <span className="va-cart-dot"/>
          <span>{vehicle.gearbox}</span>
          <span className="va-cart-dot"/>
          <span>{vehicle.energy}</span>
        </div>
      </div>

      <div className="va-cart-section">
        <div className="va-cart-section-title">Votre voyage</div>
        <div className="va-cart-row"><span>Agence</span><strong>{search.agencyName.split(' - ')[1]}</strong></div>
        <div className="va-cart-row"><span>Départ</span><strong>{bfmtDate(search.startDate)}</strong></div>
        <div className="va-cart-row"><span>Retour</span><strong>{bfmtDate(search.endDate)}</strong></div>
        <div className="va-cart-row va-cart-row-pill"><span>Durée</span><strong className="va-cart-pill">{search.days} jours</strong></div>
      </div>

      <div className="va-cart-section">
        <div className="va-cart-section-title">Détail du prix</div>
        <div className="va-cart-row"><span>Location <em>({bfmtPrice(vehicle.pricePerDay)} × {search.days} j)</em></span><strong>{bfmtPrice(vPrice)}</strong></div>
        <div className="va-cart-row"><span>Forfait km <em>· {config.mileageLabel}</em></span><strong>{bfmtPrice(mPrice)}</strong></div>
        <div className="va-cart-row"><span>Assurance <em>· {config.insuranceLabel}</em></span><strong>{bfmtPrice(iPrice)}</strong></div>
        {options.map(o => (
          <div key={o.id} className="va-cart-row"><span>{o.name}</span><strong>{bfmtPrice(o.amount)}</strong></div>
        ))}
        {promo && <div className="va-cart-row va-cart-row-promo"><span>Code promo <em>· {promo}</em></span><strong>− 0,00 €</strong></div>}
      </div>

      <div className="va-cart-total">
        <div className="va-cart-total-row"><span>Total TTC</span><strong>{bfmtPrice(total)}</strong></div>
        <div className="va-cart-total-tva">dont {bfmtPrice(total*0.2/1.2)} de TVA (20 %)</div>
        <button type="button" className={`va-side-cta ${ready ? 'is-ready' : ''}`} disabled={!ready}>
          <span>{ready ? 'Voir le récapitulatif' : 'Acceptez les conditions'}</span>
          {ready && (<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M13 5l7 7-7 7"/></svg>)}
        </button>
      </div>

      <style>{`
        .va-cart{background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(4,40,40,.04),0 8px 24px rgba(4,40,40,.06)}
        .va-cart-header{padding:16px 18px 0}
        .va-cart-eyebrow{font-size:11px;font-weight:900;color:${B_TEAL};text-transform:uppercase;letter-spacing:1.4px}
        .va-cart-vehicle{padding:12px 18px 14px;border-bottom:1px solid ${B_BORDER}}
        .va-cart-vehicle-img{position:relative;border-radius:12px;overflow:hidden;background:${B_CREAM};aspect-ratio:16/10;margin:8px 0 10px}
        .va-cart-vehicle-img img{width:100%;height:100%;object-fit:cover;display:block}
        .va-cart-vehicle-cat{position:absolute;top:10px;left:10px;background:${B_SURFACE};color:${B_TEAL};font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:1px;padding:4px 9px;border-radius:999px}
        .va-cart-vehicle-name{font-size:15px;font-weight:900;color:${B_INK};letter-spacing:-.01em}
        .va-cart-vehicle-specs{display:flex;align-items:center;gap:6px;font-size:11.5px;color:${B_MUTED};font-weight:600;margin-top:4px;flex-wrap:wrap}
        .va-cart-dot{width:3px;height:3px;border-radius:50%;background:${B_MUTED};opacity:.6}
        .va-cart-section{padding:14px 18px;border-bottom:1px solid ${B_BORDER}}
        .va-cart-section-title{font-size:11px;font-weight:900;color:${B_MUTED};text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px}
        .va-cart-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;font-size:13px;color:${B_MUTED}}
        .va-cart-row strong{color:${B_INK};font-weight:700;text-align:right;font-size:13px}
        .va-cart-row em{font-style:normal;color:${B_MUTED};font-size:11.5px;font-weight:400}
        .va-cart-row-pill{align-items:center}
        .va-cart-pill{background:${B_BG_TEAL};color:${B_TEAL} !important;font-weight:900 !important;padding:3px 10px;border-radius:999px;font-size:12px !important}
        .va-cart-row-promo strong{color:${B_TEAL} !important}
        .va-cart-total{padding:16px 18px;background:#fbfffe}
        .va-cart-total-row{display:flex;justify-content:space-between;align-items:baseline}
        .va-cart-total-row span{font-size:13px;font-weight:900;color:${B_INK};text-transform:uppercase;letter-spacing:1.2px}
        .va-cart-total-row strong{font-size:26px;font-weight:900;color:${B_TEAL};letter-spacing:-.02em}
        .va-cart-total-tva{font-size:10.5px;color:${B_MUTED};text-align:right;margin-top:2px}
      `}</style>
    </aside>
  );
}

// ─── Sidebar variants : Minimal ───────────────────────────────
function MinimalCartSidebar({ vehicle, search, total, ready }) {
  return (
    <aside className="va-cmin">
      <div className="va-cmin-img"><img src={vehicle.picture} alt={vehicle.display_name}/></div>
      <div className="va-cmin-name">{vehicle.display_name}</div>
      <div className="va-cmin-meta">
        <span>{search.agencyName.split(' - ')[1]}</span>
        <span className="va-cmin-dot"/>
        <span>{search.days} jours</span>
      </div>
      <div className="va-cmin-total">
        <div className="va-cmin-total-row">
          <span>Total TTC</span>
          <strong>{bfmtPrice(total)}</strong>
        </div>
        <div className="va-cmin-tva">dont {bfmtPrice(total*0.2/1.2)} de TVA</div>
      </div>
      <button type="button" className={`va-side-cta ${ready ? 'is-ready' : ''}`} disabled={!ready}>
        <span>{ready ? 'Voir le récapitulatif' : 'Acceptez les conditions'}</span>
        {ready && (<svg width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2.4" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M13 5l7 7-7 7"/></svg>)}
      </button>
      <style>{`
        .va-cmin{background:${B_SURFACE};border:1px solid ${B_BORDER};border-radius:20px;padding:16px;box-shadow:0 1px 2px rgba(4,40,40,.04),0 8px 24px rgba(4,40,40,.06)}
        .va-cmin-img{border-radius:12px;overflow:hidden;aspect-ratio:16/10;margin-bottom:10px;background:${B_CREAM}}
        .va-cmin-img img{width:100%;height:100%;object-fit:cover;display:block}
        .va-cmin-name{font-size:14px;font-weight:900;color:${B_INK};letter-spacing:-.01em}
        .va-cmin-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:${B_MUTED};font-weight:600;margin-top:3px}
        .va-cmin-dot{width:3px;height:3px;border-radius:50%;background:${B_MUTED};opacity:.6}
        .va-cmin-total{margin-top:14px;padding-top:14px;border-top:1px dashed ${B_BORDER}}
        .va-cmin-total-row{display:flex;justify-content:space-between;align-items:baseline}
        .va-cmin-total-row span{font-size:12px;font-weight:900;color:${B_INK};text-transform:uppercase;letter-spacing:1.2px}
        .va-cmin-total-row strong{font-size:24px;font-weight:900;color:${B_TEAL};letter-spacing:-.02em}
        .va-cmin-tva{font-size:10.5px;color:${B_MUTED};text-align:right;margin-top:2px}
      `}</style>
    </aside>
  );
}

// ─── Bottom bar (CTA "Voir le récapitulatif") ────────────────
function BottomBarBooking({ total, ready, compact, desktopHidden, vehicle, search, config, options, promo }) {
  if (desktopHidden && !compact) return null;
  const [openSheet, setOpenSheet] = React.useState(false);
  return (
    <div className={`va-bb ${compact ? 'is-compact' : ''} ${openSheet ? 'is-sheet-open' : ''}`}>
      {/* Bottom sheet récap (mobile) — ancré au-dessus de la sticky bar */}
      {compact && (
        <React.Fragment>
          <div
            className={`va-sheet-backdrop ${openSheet ? 'is-open' : ''}`}
            onClick={() => setOpenSheet(false)}
            aria-hidden={!openSheet}
          />
          <div
            className={`va-sheet ${openSheet ? 'is-open' : ''}`}
            role="dialog"
            aria-modal="true"
            aria-label="Récapitulatif de la commande"
          >
            <div className="va-sheet-handle" onClick={() => setOpenSheet(false)}>
              <span/>
            </div>
            <div className="va-sheet-body">
              {vehicle && config && (
                <TripRecapSidebar
                  vehicle={vehicle}
                  search={search}
                  config={config}
                  options={options}
                  promo={promo}
                  total={total}
                />
              )}
            </div>
          </div>
        </React.Fragment>
      )}

      <div className="va-bb-inner">
          <button
            type="button"
            className="va-bb-toggle"
            aria-label={openSheet ? 'Masquer le détail' : 'Afficher le détail'}
            aria-expanded={openSheet}
            onClick={() => setOpenSheet(v => !v)}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{transform: openSheet ? 'rotate(180deg)' : 'none', transition:'transform .25s'}}>
              <path d="M18 15l-6-6-6 6"/>
            </svg>
          </button>
          <div className="va-bb-info">
            <span className="va-bb-info-label">Total TTC</span>
            <span className="va-bb-info-amount">{bfmtPrice(total)}</span>
            <span className="va-bb-info-tva">dont {bfmtPrice(total*0.2/1.2)} de TVA</span>
          </div>
          <button type="button" className={`va-bb-cta ${ready ? 'is-ready' : ''}`} disabled={!ready}>
            <span>Voir le récapitulatif</span>
            <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
        </div>
        {!ready && (
          <div className="va-bb-warn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
            Acceptez les CGV et la politique RGPD pour continuer.
          </div>
        )}
      <style>{`
        .va-bb{position:sticky;bottom:0;left:0;right:0;z-index:30;background:${B_SURFACE};border-top:1px solid ${B_BORDER_S};box-shadow:0 -6px 24px rgba(4,40,40,.06)}
        .va-bb-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;max-width:1320px;margin:0 auto;position:relative;z-index:2}
        .va-bb.is-compact .va-bb-inner{padding:10px 14px}
        .va-bb-info{display:flex;flex-direction:column;gap:1px}
        .va-bb-info-label{font-size:10.5px;font-weight:900;color:${B_MUTED};text-transform:uppercase;letter-spacing:1.2px}
        .va-bb-info-amount{font-size:22px;font-weight:900;color:${B_INK};letter-spacing:-.02em;line-height:1}
        .va-bb-info-tva{font-size:10.5px;color:${B_MUTED}}
        .va-bb.is-compact .va-bb-info-amount{font-size:18px}
        .va-bb-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:${B_BORDER};color:${B_MUTED};border:none;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;cursor:not-allowed;transition:all .25s ease;letter-spacing:.01em}
        .va-bb-cta.is-ready{background:${B_TEAL};color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(17,151,143,.3)}
        .va-bb-cta.is-ready:hover{background:${B_TEAL_HV};transform:translateY(-1px);box-shadow:0 8px 22px rgba(17,151,143,.4)}
        .va-bb-cta svg{transition:transform .2s}
        .va-bb-cta.is-ready:hover svg{transform:translateX(3px)}
        .va-bb.is-compact .va-bb-cta{padding:11px 18px;font-size:13px}
        .va-bb-warn{display:flex;align-items:center;gap:7px;justify-content:center;padding:7px 14px;background:#fff8ec;color:#a16207;font-size:11.5px;font-weight:600;border-top:1px solid rgba(161,98,7,.15);position:relative;z-index:2}

        .va-bb-toggle{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:${B_BORDER};color:${B_INK};border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s;margin-right:2px}
        .va-bb-toggle:hover{background:${B_BORDER_S}}

        /* Bottom sheet ancré dans .va-bb (s'ouvre au-dessus de la sticky bar) */
        .va-sheet-backdrop{position:absolute;left:0;right:0;bottom:100%;height:100vh;background:rgba(4,40,40,.4);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1}
        .va-sheet-backdrop.is-open{opacity:1;pointer-events:auto}
        .va-sheet{position:absolute;left:0;right:0;bottom:100%;z-index:2;background:${B_SURFACE};border-radius:20px 20px 0 0;box-shadow:0 -16px 40px rgba(4,40,40,.18);transform:translateY(calc(100% + 16px));transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:75vh;display:flex;flex-direction:column;overflow:hidden}
        .va-sheet.is-open{transform:translateY(0)}
        .va-sheet-handle{padding:10px;display:flex;justify-content:center;cursor:pointer;flex-shrink:0}
        .va-sheet-handle span{width:42px;height:4px;border-radius:2px;background:${B_BORDER_S}}
        .va-sheet-body{padding:0 14px 18px;overflow:auto}
      `}</style>
    </div>
  );
}

Object.assign(window, { BookingScreen });