// payment-screen.jsx — Étape /recap devenue /paiement
// Colonne large gauche = choix du moyen de paiement (mode e-commerce).
// Sidebar droite = <CartSidebar/> repris de l'étape /options (configure-screen.jsx).
// Expose : PaymentScreen

const P_TEAL = '#11978f';
const P_TEAL_HV = '#1c7d77';
const P_INK = '#042828';
const P_MUTED = '#5B7A82';
const P_CREAM = '#F4F2EC';
const P_SURFACE = '#FFFFFF';
const P_BORDER = 'rgba(4,40,40,0.08)';
const P_BORDER_S = 'rgba(4,40,40,0.14)';
const P_BG_TEAL = '#e7fcfb';

// ─── Mock data (iso /recap) ───────────────────────────────────
const PAY_VEHICLE = {
  id: 1, display_name: 'Volkswagen California Ocean', category_name: 'Campervans',
  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 PAY_SEARCH = {
  agencyName: 'Van-Away Bordeaux - Bordeaux',
  agencyAddress: '12 rue des Vignerons · 33000 Bordeaux',
  agencyPhone: '05 56 00 00 00',
  startDate: '2026-07-12', endDate: '2026-07-20', days: 8
};
const PAY_MILEAGE = { id: 2, label: 'Confort', mileage: 200, unlimited: false, amount: 4.90 };
const PAY_INSURANCE = { id: 2, name: 'Pack Sécurité', amount: 19.00, pricing_type: 'per_day' };
const PAY_OPTIONS = [
{ name: 'Conducteur supplémentaire', qty: 1, total: 49 },
{ name: 'Pack vélos électriques', qty: 2, total: 318.40 },
{ name: 'Pack apéro (table + chaises)', qty: 1, total: 25 }];

const PAY_INCLUDED = [
'Assurance et l\'Assistance',
'Parking gratuit en agence',
'Abonnement France Passion',
'Abonnement Park4night+'];


function payFmt(n, dec = 2) {return (n ?? 0).toFixed(dec).replace('.', ',') + ' €';}
function payDate(iso) {
  const d = new Date(iso);
  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' });
}
function payAddDays(iso, n) {
  const d = new Date(iso);d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
}

function payTotals() {
  const days = PAY_SEARCH.days;
  const v = PAY_VEHICLE.pricePerDay * days;
  const m = PAY_MILEAGE.amount * days;
  const i = PAY_INSURANCE.pricing_type === 'per_day' ? PAY_INSURANCE.amount * days : PAY_INSURANCE.amount;
  const opts = PAY_OPTIONS.reduce((s, o) => s + o.total, 0);
  const total = v + m + i + opts;
  const deposit = Math.round(total * 0.30 * 100) / 100;
  return { days, v, m, i, opts, total, deposit, balance: Math.round((total - deposit) * 100) / 100 };
}

// ─── Bloc voyageur (récap) ────────────────────────────────────
const PAY_CUSTOMER = {
  firstName: 'Téo', lastName: 'Marchand',
  email: 'teo@gmail.com', phone: '06 12 34 56 78',
  birthdate: '14/03/1992', licence: 'Permis B — délivré le 02/06/2011',
  address: '34 cours de la Marne, 33800 Bordeaux, France',
  drivers: 2
};

function TravelerBlock() {
  const c = PAY_CUSTOMER;
  return (
    <div className="va-ptrav">
      <div className="va-ptrav-head">
        <span className="va-ptrav-subhead">Voyageur</span>
        <a href="#" onClick={(e) => e.preventDefault()} className="va-ptrav-edit">Modifier</a>
      </div>
      <div className="va-ptrav-id">
        <span className="va-ptrav-avatar">{c.firstName[0]}{c.lastName[0]}</span>
        <div>
          <strong>{c.firstName} {c.lastName}</strong>
          <span>Conducteur principal · né le {c.birthdate}</span>
        </div>
      </div>
      <div className="va-ptrav-rows">
        <div className="va-ptrav-row"><span>Email</span><strong>{c.email}</strong></div>
        <div className="va-ptrav-row"><span>Téléphone</span><strong>{c.phone}</strong></div>
        <div className="va-ptrav-row"><span>Adresse</span><strong>{c.address}</strong></div>
        <div className="va-ptrav-row"><span>Permis</span><strong>{c.licence}</strong></div>
        <div className="va-ptrav-row"><span>Conducteurs</span><strong className="va-ptrav-pill">{c.drivers} déclarés</strong></div>
      </div>
      <style>{`
        .va-ptrav{margin-top:12px;padding-top:10px;border-top:1px dashed ${P_BORDER}}
        .va-ptrav-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
        .va-ptrav-subhead{font-size:10.5px;font-weight:900;color:${P_TEAL};text-transform:uppercase;letter-spacing:1.4px}
        .va-ptrav-edit{font-size:11.5px;font-weight:700;color:${P_MUTED};text-decoration:none;padding:2px 7px;border-radius:8px;transition:all .2s}
        .va-ptrav-edit:hover{background:${P_BG_TEAL};color:${P_TEAL}}
        .va-ptrav-id{display:flex;align-items:center;gap:10px;padding:8px 0 10px}
        .va-ptrav-avatar{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:${P_BG_TEAL};color:${P_TEAL};font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
        .va-ptrav-id strong{display:block;font-size:13.5px;font-weight:900;color:${P_INK};letter-spacing:-.01em;line-height:1.2}
        .va-ptrav-id span{display:block;font-size:11px;color:${P_MUTED};font-weight:600;margin-top:2px}
        .va-ptrav-rows{display:flex;flex-direction:column}
        .va-ptrav-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:12.5px;color:${P_MUTED}}
        .va-ptrav-row strong{color:${P_INK};font-weight:700;text-align:right;max-width:64%;word-break:break-word;line-height:1.35}
        .va-ptrav-pill{background:${P_BG_TEAL};color:${P_TEAL} !important;padding:3px 10px;border-radius:999px;font-weight:900 !important;font-size:11.5px}
      `}</style>
    </div>);

}

// ─── Marques / pictos ─────────────────────────────────────────
function BrandMark({ label, tone = 'neutral' }) {
  return (
    <span className={`va-pmark tone-${tone}`}>{label}
      <style>{`
        .va-pmark{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;border:1px solid ${P_BORDER_S};background:${P_SURFACE};font-size:10px;font-weight:900;letter-spacing:.06em;color:${P_INK};text-transform:uppercase;white-space:nowrap}
        .va-pmark.tone-teal{border-color:${P_TEAL}40;background:${P_BG_TEAL};color:${P_TEAL}}
      `}</style>
    </span>);

}

const payIcon = (kind, color = P_TEAL) => {
  const c = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'card':return <svg {...c}><rect x="2" y="5" width="20" height="14" rx="2.5" /><path d="M2 10h20M6 15h4" /></svg>;
    case 'split':return <svg {...c}><circle cx="6" cy="12" r="3" /><circle cx="18" cy="12" r="3" /><path d="M9 12h6" /></svg>;
    case 'ticket':return <svg {...c}><path d="M3 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 000 4v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 000-4V8z" /><path d="M9 10h6M9 14h4" /></svg>;
    case 'phone':return <svg {...c}><rect x="6" y="2" width="12" height="20" rx="3" /><path d="M11 18h2" /><path d="M9.5 9.5l2 2 3.5-3.5" /></svg>;
    case 'lock':return <svg {...c}><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7.5a4 4 0 018 0V11" /></svg>;
    case 'shield':return <svg {...c}><path d="M12 22s-8-4.5-8-11.8A8 8 0 0112 2a8 8 0 018 8.2C20 17.5 12 22 12 22z" /><path d="M9 12l2 2 4-4" /></svg>;
    case 'calendar':return <svg {...c}><rect x="3" y="5" width="18" height="16" rx="2.5" /><path d="M3 10h18M8 3v4M16 3v4" /></svg>;
    default:return null;
  }
};

// ─── Définition des moyens de paiement ────────────────────────
const ALMA_FEE_RATE = 0.02; // variable — défini par l'agence

const PAY_METHODS = [
{
  id: 'cb-instant', icon: 'card',
  name: 'Carte bancaire',
  desc: 'Réservation instantanée — réglez l\'acompte en ligne',
  badge: 'Réservation instantanée',
  badgeShort: 'Instantané',
  variant: 'Cas 1 · véhicule en réservation instantanée',
  logos: ['Images/visa-logo.webp', 'Images/mastercard-logo.svg', 'Images/cb-logo.svg'],
  marks: [],
  instant: true
},
{
  id: 'cb-request', icon: 'card',
  name: 'Carte bancaire',
  desc: 'Paiement après validation de la demande par l\'agence',
  badge: 'Demande à valider',
  badgeShort: 'À valider',
  variant: 'Cas 2 · véhicule à valider par l\'agence',
  logos: ['Images/visa-logo.webp', 'Images/mastercard-logo.svg', 'Images/cb-logo.svg'],
  marks: [],
  instant: false
},
{
  id: 'alma', icon: 'split',
  name: 'Alma',
  desc: 'Payez la totalité en 3 fois',
  badge: 'Paiement en 3 fois',
  badgeShort: '3 fois',
  logos: ['Images/alma-logo.png'],
  marks: [],
  instant: false
},
{
  id: 'ancv-paper', icon: 'ticket',
  name: 'ANCV papier',
  desc: 'Chèques-Vacances au format papier',
  logos: ['Images/ancv-logo.png'],
  marks: [],
  instant: false
},
{
  id: 'ancv-connect', icon: 'phone',
  name: 'ANCV dématérialisé',
  desc: 'Chèque-Vacances Connect',
  logos: ['Images/ancv-logo.png'],
  marks: ['Connect'],
  instant: false
}];


// ─── Contenu déplié par moyen de paiement ─────────────────────
function MethodDetail({ id, t }) {
  if (id === 'cb-instant') {
    return (
      <div className="va-pdet">
        <div className="va-pdet-amount">
          <div>
            <span className="va-pdet-amount-label">À régler maintenant</span>
            <em>Acompte de 30 % — solde de {payFmt(t.balance)} à régler avant le départ</em>
          </div>
          <strong>{payFmt(t.deposit)}</strong>
        </div>
        <div className="va-pform">
          <label className="va-pfield va-pfield-full">
            <span>Numéro de carte</span>
            <div className="va-pinput"><span className="va-pinput-ph">1234 5678 9012 3456</span>{payIcon('card', P_MUTED)}</div>
          </label>
          <label className="va-pfield">
            <span>Expiration</span>
            <div className="va-pinput"><span className="va-pinput-ph">MM / AA</span></div>
          </label>
          <label className="va-pfield">
            <span>CVC</span>
            <div className="va-pinput"><span className="va-pinput-ph">123</span></div>
          </label>
          <label className="va-pfield va-pfield-full">
            <span>Titulaire de la carte</span>
            <div className="va-pinput"><span className="va-pinput-ph">Prénom Nom</span></div>
          </label>
        </div>
        <p className="va-pdet-note">{payIcon('lock', P_TEAL)}<span>Validation <strong>3D Secure</strong> par votre banque. Vos données bancaires sont chiffrées et ne transitent jamais par nos serveurs.</span></p>
        <PayDetailStyles />
      </div>);

  }
  if (id === 'cb-request') {
    return (
      <div className="va-pdet">
        <div className="va-pdet-msg">
          <span className="va-pdet-msg-icon">{payIcon('calendar', P_TEAL)}</span>
          <div className="va-pdet-msg-body">
            <span className="va-pdet-msg-t">Aucune saisie de carte à cette étape</span>
            <span className="va-pdet-msg-d">Ce véhicule doit être validé par l'agence. Vous envoyez d'abord votre demande de réservation ; l'agence revient vers vous rapidement. Le règlement par carte se fait dans un second temps, après validation.</span>
          </div>
        </div>
        <ul className="va-psteps">
          <li><span>1</span><div><strong>Vous envoyez votre demande</strong>Sans paiement ni saisie de carte.</div></li>
          <li><span>2</span><div><strong>L'agence valide la disponibilité</strong>Elle vous répond rapidement par email.</div></li>
          <li><span>3</span><div><strong>Vous réglez l'acompte par carte</strong>Via un lien de paiement sécurisé, une fois la demande validée.</div></li>
        </ul>
        <p className="va-pdet-note">{payIcon('lock', P_TEAL)}<span>Acompte de <strong>{payFmt(t.deposit)}</strong> à régler après validation. Solde de {payFmt(t.balance)} avant le départ.</span></p>
        <PayDetailStyles />
      </div>);

  }
  if (id === 'alma') {
    const fees = Math.round(t.total * ALMA_FEE_RATE * 100) / 100;
    const almaTotal = Math.round((t.total + fees) * 100) / 100;
    const inst = Math.round(almaTotal / 3 * 100) / 100;
    const sched = [
    { label: '1re échéance', when: 'à la confirmation', amount: inst },
    { label: '2e échéance', when: '30 jours après', amount: inst },
    { label: '3e échéance', when: '60 jours après', amount: almaTotal - inst * 2 }];

    return (
      <div className="va-pdet">
        <div className="va-pdet-amount">
          <div>
            <span className="va-pdet-amount-label">Total en 3 fois avec <img src="Images/alma-logo.png" alt="Alma" className="va-pdet-logo"/></span>
            <em>Pas d'acompte : la totalité du séjour est financée. Frais de {Math.round(ALMA_FEE_RATE * 100)} % inclus, soit {payFmt(fees)} (taux défini par l'agence).</em>
          </div>
          <strong>{payFmt(almaTotal)}</strong>
        </div>
        <div className="va-psched">
          {sched.map((s, i) =>
          <div className="va-psched-step" key={i}>
              <span className="va-psched-num">{i + 1}</span>
              <div className="va-psched-body">
                <strong>{payFmt(s.amount)}</strong>
                <span>{s.label} · {s.when}</span>
              </div>
            </div>
          )}
        </div>
        <p className="va-pdet-note">{payIcon('calendar', P_TEAL)}<span>L'agence de {PAY_SEARCH.agencyName.split(' - ')[1]} vous contacte <strong>rapidement</strong> pour mettre en place le paiement Alma.</span></p>
        <PayDetailStyles />
      </div>);

  }
  if (id === 'ancv-paper') {
    return (
      <div className="va-pdet">
        <div className="va-pdet-msg">
          <span className="va-pdet-msg-icon">{payIcon('ticket', P_TEAL)}</span>
          <div className="va-pdet-msg-body">
            <span className="va-pdet-msg-t">Aucun montant à régler en ligne</span>
            <span className="va-pdet-msg-d">Le montant réglé en Chèques-Vacances dépend de ce dont vous disposez. L'agence revient vers vous rapidement pour convenir des modalités de paiement.</span>
          </div>
        </div>
        <ul className="va-psteps">
          <li><span>1</span><div><strong>Vous envoyez votre demande</strong>Aucun paiement à cette étape.</div></li>
          <li><span>2</span><div><strong>L'agence vous contacte rapidement</strong>Elle définit avec vous le montant en Chèques-Vacances et l'adresse d'envoi.</div></li>
          <li><span>3</span><div><strong>Remise des chèques</strong>En agence au départ, ou par courrier suivi avant le départ.</div></li>
        </ul>
        <p className="va-pdet-note">{payIcon('ticket', P_TEAL)}<span>Les Chèques-Vacances ne sont <strong>pas rendus en monnaie</strong> : l'appoint se règle par carte bancaire au départ.</span></p>
        <PayDetailStyles />
      </div>);

  }
  return (
    <div className="va-pdet">
      <div className="va-pdet-msg">
        <span className="va-pdet-msg-icon">{payIcon('phone', P_TEAL)}</span>
        <div className="va-pdet-msg-body">
          <span className="va-pdet-msg-t">Aucun montant à régler en ligne</span>
          <span className="va-pdet-msg-d">Le montant réglé en Chèque-Vacances Connect dépend du solde de votre porte-monnaie ANCV. L'agence revient vers vous rapidement pour convenir des modalités de paiement.</span>
        </div>
      </div>
      <ul className="va-psteps">
        <li><span>1</span><div><strong>Vous envoyez votre demande</strong>Aucun paiement à cette étape.</div></li>
        <li><span>2</span><div><strong>L'agence vous contacte rapidement</strong>Elle définit avec vous le montant réglé en Chèque-Vacances Connect.</div></li>
        <li><span>3</span><div><strong>Vous payez dans l'app ANCV</strong>Le montant convenu est débité de votre porte-monnaie Connect.</div></li>
      </ul>
      <p className="va-pdet-note">{payIcon('phone', P_TEAL)}<span>Compte <strong>ANCV Connect</strong> activé requis. Le solde peut être complété par carte bancaire.</span></p>
      <PayDetailStyles />
    </div>);

}

function PayDetailStyles() {
  return (
    <style>{`
      .va-pdet{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px;border-top:1px dashed ${P_BORDER_S}}
      .va-pdet-amount{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:${P_BG_TEAL};border:1px solid ${P_TEAL}33;border-radius:14px}
      .va-pdet-amount-label{display:block;font-size:11px;font-weight:900;color:${P_INK};text-transform:uppercase;letter-spacing:1.2px}
      .va-pdet-logo{height:15px;width:auto;vertical-align:-2px;margin-left:2px}
      .va-pdet-amount em{display:block;font-style:normal;font-size:12px;color:${P_MUTED};font-weight:500;margin-top:3px;line-height:1.4}
      .va-pdet-amount strong{font-size:24px;font-weight:900;color:${P_TEAL};letter-spacing:-.02em;white-space:nowrap}
      .va-pdet-msg{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:${P_BG_TEAL};border:1px solid ${P_TEAL}33;border-radius:14px}
      .va-pdet-msg-icon{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:${P_SURFACE};display:flex;align-items:center;justify-content:center}
      .va-pdet-msg-body{display:flex;flex-direction:column;gap:3px;min-width:0}
      .va-pdet-msg-t{font-size:13.5px;font-weight:900;color:${P_INK};letter-spacing:-.01em;line-height:1.3}
      .va-pdet-msg-d{font-size:12.5px;color:${P_MUTED};font-weight:500;line-height:1.5;text-wrap:pretty}
      .va-pform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
      .va-pfield{display:flex;flex-direction:column;gap:5px}
      .va-pfield-full{grid-column:1 / -1}
      .va-pfield > span{font-size:11px;font-weight:900;color:${P_MUTED};text-transform:uppercase;letter-spacing:1.1px}
      .va-pinput{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 14px;background:${P_SURFACE};border:1.5px solid ${P_BORDER_S};border-radius:12px;transition:border-color .2s}
      .va-pinput:hover{border-color:${P_TEAL}66}
      .va-pinput-ph{font-size:14px;color:#9fb3b8;font-weight:600;letter-spacing:.02em}
      .va-psched{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
      .va-psched-step{display:flex;align-items:center;gap:10px;padding:12px 14px;background:${P_SURFACE};border:1px solid ${P_BORDER};border-radius:14px}
      .va-psched-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:${P_BG_TEAL};color:${P_TEAL};font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
      .va-psched-body{display:flex;flex-direction:column;min-width:0}
      .va-psched-body strong{font-size:15px;font-weight:900;color:${P_INK};letter-spacing:-.01em}
      .va-psched-body span{font-size:11px;color:${P_MUTED};font-weight:600;line-height:1.3}
      .va-psteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
      .va-psteps li{display:flex;gap:12px;padding:8px 0}
      .va-psteps li > span{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:${P_BG_TEAL};color:${P_TEAL};font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:1px}
      .va-psteps li > div{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:${P_MUTED};font-weight:500;line-height:1.45}
      .va-psteps li strong{font-size:13.5px;font-weight:900;color:${P_INK};letter-spacing:-.005em}
      .va-pdet-note{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:12.5px;color:${P_MUTED};font-weight:500;line-height:1.5}
      .va-pdet-note svg{flex-shrink:0;margin-top:1px}
      .va-pdet-note strong{color:${P_INK};font-weight:700}
      @media (max-width:520px){.va-pform{grid-template-columns:1fr}.va-psched{grid-template-columns:1fr}.va-pdet-amount{flex-direction:column;align-items:flex-start;gap:8px}}
      .va-pay.is-compact .va-pform{grid-template-columns:1fr}
      .va-pay.is-compact .va-psched{grid-template-columns:1fr}
      .va-pay.is-compact .va-pdet-amount{flex-direction:column;align-items:flex-start;gap:8px}
      .va-pay.is-compact .va-pdet{padding:14px 14px 16px}
    `}</style>);

}

// ─── Carte moyen de paiement ──────────────────────────────────
function MethodCard({ method, selected, onSelect, t, compact }) {
  return (
    <div className={`va-pm ${selected ? 'is-on' : ''}`}>
      {method.variant && <span className="va-pm-variant">{method.variant}</span>}
      <button type="button" className="va-pm-head" onClick={() => onSelect(method.id)} aria-pressed={selected}>
        <span className="va-pm-radio" aria-hidden="true"><i /></span>
        <span className="va-pm-icon">{payIcon(method.icon, selected ? P_TEAL : P_MUTED)}</span>
        <span className="va-pm-text">
          <span className="va-pm-name">
            {method.name}
            {method.badge && <em className="va-pm-badge">{compact && method.badgeShort ? method.badgeShort : method.badge}</em>}
          </span>
          <span className="va-pm-desc">{method.desc}</span>
        </span>
        <span className="va-pm-marks">
          {(method.logos || []).map((src) => <img key={src} src={src} alt={method.name} className={`va-pm-logo is-${method.id}`}/>)}
          {!compact && method.marks.map((m) => <BrandMark key={m} label={m} tone={method.id.startsWith('ancv') ? 'teal' : 'neutral'} />)}
        </span>
      </button>
      {selected && <MethodDetail id={method.id} t={t} />}
      <style>{`
        .va-pm{background:${P_SURFACE};border:1.5px solid ${P_BORDER};border-radius:18px;overflow:hidden;transition:border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}
        .va-pm:hover{border-color:${P_TEAL}59}
        .va-pm.is-on{border-color:${P_TEAL};box-shadow:0 0 0 3px rgba(17,151,143,.1)}
        .va-pm-head{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left}
        .va-pm-radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1.5px solid ${P_BORDER_S};display:flex;align-items:center;justify-content:center;transition:border-color .2s}
        .va-pm.is-on .va-pm-radio{border-color:${P_TEAL}}
        .va-pm-radio i{width:10px;height:10px;border-radius:50%;background:${P_TEAL};transform:scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}
        .va-pm.is-on .va-pm-radio i{transform:scale(1)}
        .va-pm-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:${P_CREAM};display:flex;align-items:center;justify-content:center;transition:background .25s}
        .va-pm.is-on .va-pm-icon{background:${P_BG_TEAL}}
        .va-pm-icon-logo{width:26px;height:auto;display:block}
        .va-pm-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
        .va-pm-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;font-weight:900;color:${P_INK};letter-spacing:-.01em}
        .va-pm-badge{font-style:normal;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:${P_TEAL};background:${P_BG_TEAL};padding:3px 8px;border-radius:999px}
        .va-pm-desc{font-size:13px;color:${P_MUTED};font-weight:500}
        .va-pm-marks{flex-shrink:0;display:flex;align-items:center;gap:6px}
        .va-pm-logo{height:22px;width:38px;object-fit:contain;object-position:center;display:block}
        .va-pm-variant{display:block;padding:8px 18px 0;font-size:10.5px;font-weight:900;color:${P_MUTED};text-transform:uppercase;letter-spacing:1.2px}
        .va-pay.is-compact .va-pm-head{display:grid;grid-template-columns:20px 40px minmax(0,1fr);grid-template-areas:"radio icon text" ". . marks";column-gap:12px;row-gap:9px;align-items:center;padding:15px 16px}
        .va-pay.is-compact .va-pm-radio{grid-area:radio}
        .va-pay.is-compact .va-pm-icon{grid-area:icon}
        .va-pay.is-compact .va-pm-text{grid-area:text}
        .va-pay.is-compact .va-pm-marks{grid-area:marks;justify-self:start}
        .va-pay.is-compact .va-pm-name{font-size:15px;gap:7px}
        .va-pay.is-compact .va-pm-badge{font-size:9.5px;letter-spacing:.06em;padding:3px 7px;white-space:nowrap}
        .va-pay.is-compact .va-pm-desc{font-size:12.5px;line-height:1.4;text-wrap:pretty}
      `}</style>
    </div>);

}

// ─── Écran principal ──────────────────────────────────────────
function PaymentScreen({ compact = false, tweaks = {} }) {
  const t = React.useMemo(payTotals, []);
  const [method, setMethod] = React.useState(null);
  const [accepted, setAccepted] = React.useState(false);
  const [cartOpen, setCartOpen] = React.useState(false);
  const sel = PAY_METHODS.find((m) => m.id === method) || null;
  const ready = !!sel && accepted;
  const isInstant = sel?.instant === true;
  const isAlma = sel?.id === 'alma';
  const isAncv = !!sel?.id.startsWith('ancv');
  const almaFees = Math.round(t.total * ALMA_FEE_RATE * 100) / 100;
  const almaTotal = Math.round((t.total + almaFees) * 100) / 100;

  const ctaLabel = isInstant ? `Payer ${payFmt(t.deposit)} et confirmer` : 'Envoyer ma demande de réservation';

  const trust = [
  { icon: 'lock', title: 'Paiement sécurisé', desc: 'Transactions chiffrées · 3D Secure · CB / Visa / Mastercard' },
  { icon: 'shield', title: 'Caution restituée', desc: `Caution par empreinte bancaire de ${payFmt(1500, 0)} · franchise ${payFmt(900, 0)}` },
  { icon: 'calendar', title: 'Annulation flexible', desc: 'Acompte remboursé jusqu\'à 10 jours avant le départ' }];


  return (
    <>
      <div className={`va-pay ${compact ? 'is-compact' : ''}`}>
        <main className="va-pay-main">
          <div className="va-pay-back">
            <a href="#" onClick={(e) => e.preventDefault()} className="va-pay-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 coordonnées
            </a>
          </div>

          <header className="va-pay-header">
            <span className="va-pay-counter">Dernière étape</span>
            <h1 className="va-pay-title">Paiement</h1>
            <p className="va-pay-subtitle">Choisissez comment vous souhaitez régler votre réservation. Rien n'est débité avant votre confirmation.</p>
          </header>

          {compact &&
          <div className="va-pay-mobile-cart">
              <button type="button" className={`va-pay-cartbtn ${cartOpen ? 'is-open' : ''}`} onClick={() => setCartOpen((v) => !v)} aria-expanded={cartOpen}>
                <span className="va-pay-cartbtn-icon">{payIcon('ticket', P_TEAL)}</span>
                <span className="va-pay-cartbtn-text">
                  <strong>Récapitulatif</strong>
                  <span>{PAY_VEHICLE.display_name} · {t.days} jours</span>
                </span>
                <span className="va-pay-cartbtn-total">{payFmt(t.total)}</span>
                <svg className="va-pay-cartbtn-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
              </button>
              {cartOpen &&
              <CartSidebar
              eyebrow="Récapitulatif" travelerNode={<TravelerBlock />}
              vehicle={PAY_VEHICLE} search={PAY_SEARCH} mileage={PAY_MILEAGE} insurance={PAY_INSURANCE}
              days={t.days} options={PAY_OPTIONS} included={PAY_INCLUDED} tripCollapsible compact />
              }
            </div>
          }

          {/* Échéancier global */}
          <section className="va-pay-split">
            <div className="va-pay-split-item is-now">
              <span className="va-pay-split-label">À régler maintenant</span>
              <strong>{isInstant ? payFmt(t.deposit) : payFmt(0)}</strong>
              <em>{isInstant ? 'Acompte de 30 % par carte bancaire' : 'Aucun paiement à cette étape'}</em>
            </div>
            <div className="va-pay-split-arrow">{payIcon('split', P_MUTED)}</div>
            <div className="va-pay-split-item">
              <span className="va-pay-split-label">{isInstant ? 'Solde avant le départ' : 'Après validation par l\'agence'}</span>
              <strong>{isInstant ? payFmt(t.balance) : isAlma ? payFmt(almaTotal) : isAncv ? 'à définir' : payFmt(t.deposit)}</strong>
              <em>{
                isInstant ? `À régler au plus tard le ${payDate(payAddDays(PAY_SEARCH.startDate, -30))}` :
                isAlma ? `Total en 3 fois, frais de ${Math.round(ALMA_FEE_RATE * 100)} % inclus` :
                isAncv ? 'Modalités définies avec l\'agence' :
                'Acompte demandé par l\'agence'}</em>
            </div>
          </section>

          {/* Moyens de paiement */}
          <section className="va-pay-sec">
            <div className="va-pay-sec-head">
              <h2>Moyen de paiement</h2>
              <span className="va-pay-sec-hint">{payIcon('lock', P_TEAL)} Sécurisé</span>
            </div>
            <div className="va-pay-methods">
              <p className="va-pay-annot">Les deux versions du paiement par carte sont affichées l'une après l'autre — en production, une seule s'affiche selon le mode de réservation du véhicule.</p>
              {PAY_METHODS.map((m) =>
              <MethodCard key={m.id} method={m} selected={method === m.id} onSelect={setMethod} t={t} compact={compact} />
              )}
            </div>
          </section>

          {/* Conditions + CTA */}
          <section className="va-pay-confirm">
            <label className={`va-pay-check ${accepted ? 'is-on' : ''}`}>
              <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />
              <span className="va-pay-check-box" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>
              </span>
              <span className="va-pay-check-text">
                J'accepte les <a href="#" onClick={(e) => e.preventDefault()}>conditions générales de location</a> et la <a href="#" onClick={(e) => e.preventDefault()}>politique d'annulation</a>.
              </span>
            </label>

            <button type="button" className={`va-pay-cta ${ready ? 'is-ready' : ''}`} disabled={!ready}>
              {isInstant && payIcon('lock', '#fff')}
              {ctaLabel}
            </button>

            {!sel && <p className="va-pay-hint">Sélectionnez un moyen de paiement pour continuer.</p>}
            {sel && !accepted && <p className="va-pay-hint">Acceptez les conditions générales pour continuer.</p>}

            <p className="va-pay-note">
              {isInstant ?
              <>Vous serez redirigé vers la page <strong>3D Secure</strong> de votre banque. Le solde de <strong>{payFmt(t.balance)}</strong> sera à régler avant le départ.</> :
              isAncv ?
              <>Aucun paiement à cette étape. <strong>L'agence revient vers vous rapidement</strong> pour convenir des modalités de paiement en Chèques-Vacances.</> :
              isAlma ?
              <>Aucun paiement à cette étape. L'échéancier en 3 fois ({payFmt(almaTotal)} au total, frais inclus) est mis en place avec l'agence, qui <strong>revient vers vous rapidement</strong>.</> :
              <>Aucun paiement ni saisie de carte à cette étape. Un acompte de <strong>{payFmt(t.deposit)}</strong> sera à régler par carte après validation de votre demande. <strong>L'agence revient vers vous rapidement.</strong></>
              }
            </p>
          </section>

          {/* Réassurance */}
          <section className="va-pay-trust">
            {trust.map((it, i) =>
            <div className="va-pay-trust-item" key={i}>
                <span className="va-pay-trust-icon">{payIcon(it.icon)}</span>
                <span className="va-pay-trust-text">
                  <strong>{it.title}</strong>
                  <span>{it.desc}</span>
                </span>
              </div>
            )}
          </section>
        </main>

        {!compact &&
        <aside className="va-pay-side">
            <div className="va-pay-side-sticky">
              <CartSidebar
              eyebrow="Récapitulatif" travelerNode={<TravelerBlock />}
              vehicle={PAY_VEHICLE} search={PAY_SEARCH} mileage={PAY_MILEAGE} insurance={PAY_INSURANCE}
              days={t.days} options={PAY_OPTIONS} included={PAY_INCLUDED} tripCollapsible />
              <p className="va-pay-side-secure">{payIcon('lock', P_MUTED)} Paiement sécurisé — données chiffrées</p>
            </div>
          </aside>
        }
      </div>

      <style>{`
        .va-pay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;max-width:1320px;margin:0 auto;padding:28px 24px 40px;align-items:start;font-family:'Barlow',Helvetica,sans-serif;color:${P_INK}}
        .va-pay.is-compact{grid-template-columns:1fr;gap:0;padding:18px 14px 28px}
        .va-pay-main{min-width:0;display:flex;flex-direction:column;gap:24px}
        .va-pay.is-compact .va-pay-main{gap:20px}

        .va-pay-back{margin-bottom:-10px}
        .va-pay-back-link{display:inline-flex;align-items:center;gap:6px;color:${P_MUTED};font-size:13px;font-weight:600;text-decoration:none;padding:6px 10px 6px 6px;border-radius:8px;transition:all .2s}
        .va-pay-back-link:hover{background:rgba(4,40,40,.05);color:${P_INK}}

        .va-pay-header{display:flex;flex-direction:column;gap:6px}
        .va-pay-counter{align-self:flex-start;background:${P_BG_TEAL};color:${P_TEAL};font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;padding:4px 10px;border-radius:999px}
        .va-pay-title{margin:0;font-size:32px;font-weight:900;color:${P_INK};letter-spacing:-.02em;line-height:1.1}
        .va-pay.is-compact .va-pay-title{font-size:24px}
        .va-pay-subtitle{margin:0;font-size:14.5px;color:${P_MUTED};line-height:1.5;max-width:620px;text-wrap:pretty}

        .va-pay-mobile-cart{margin:2px 0;display:flex;flex-direction:column;gap:10px}
        .va-pay-cartbtn{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;background:${P_SURFACE};border:1px solid ${P_BORDER};border-radius:16px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 1px 2px rgba(4,40,40,.04),0 4px 20px rgba(4,40,40,.05);transition:border-color .2s}
        .va-pay-cartbtn.is-open{border-color:${P_TEAL}59}
        .va-pay-cartbtn-icon{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:${P_BG_TEAL};display:flex;align-items:center;justify-content:center}
        .va-pay-cartbtn-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
        .va-pay-cartbtn-text strong{font-size:13.5px;font-weight:900;color:${P_INK};letter-spacing:-.01em}
        .va-pay-cartbtn-text span{font-size:11px;color:${P_MUTED};font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .va-pay-cartbtn-total{flex-shrink:0;font-size:15px;font-weight:900;color:${P_TEAL};letter-spacing:-.02em}
        .va-pay-cartbtn-chev{flex-shrink:0;color:${P_MUTED};transition:transform .25s ease}
        .va-pay-cartbtn.is-open .va-pay-cartbtn-chev{transform:rotate(180deg);color:${P_TEAL}}

        .va-pay-split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:18px 20px;background:${P_SURFACE};border:1px solid ${P_BORDER};border-radius:20px;box-shadow:0 1px 2px rgba(4,40,40,.04),0 4px 20px rgba(4,40,40,.05)}
        .va-pay.is-compact .va-pay-split{grid-template-columns:1fr;gap:10px;padding:16px}
        .va-pay-split-item{display:flex;flex-direction:column;gap:2px;min-width:0}
        .va-pay-split-label{font-size:11px;font-weight:900;color:${P_MUTED};text-transform:uppercase;letter-spacing:1.2px}
        .va-pay-split-item strong{font-size:26px;font-weight:900;color:${P_INK};letter-spacing:-.02em;line-height:1.1}
        .va-pay-split-item.is-now strong{color:${P_TEAL}}
        .va-pay-split-item em{font-style:normal;font-size:12px;color:${P_MUTED};font-weight:500;line-height:1.4}
        .va-pay-split-arrow{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:${P_CREAM}}
        .va-pay.is-compact .va-pay-split-arrow{display:none}

        .va-pay-sec{display:flex;flex-direction:column;gap:12px}
        .va-pay-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
        .va-pay-sec-head h2{margin:0;font-size:13px;font-weight:900;color:${P_INK};text-transform:uppercase;letter-spacing:1.4px}
        .va-pay-sec-hint{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:${P_TEAL}}
        .va-pay-sec-hint svg{width:14px;height:14px}
        .va-pay-methods{display:flex;flex-direction:column;gap:10px}
        .va-pay-annot{margin:0 0 2px;padding:9px 13px;border:1px dashed ${P_BORDER_S};border-radius:12px;background:${P_CREAM};font-size:11.5px;font-weight:600;color:${P_MUTED};line-height:1.45;text-wrap:pretty}

        .va-pay-confirm{display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:${P_SURFACE};border:1px solid ${P_BORDER};border-radius:20px;box-shadow:0 1px 2px rgba(4,40,40,.04),0 4px 20px rgba(4,40,40,.05)}
        .va-pay.is-compact .va-pay-confirm{padding:16px}
        .va-pay-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
        .va-pay-check input{position:absolute;opacity:0;width:0;height:0}
        .va-pay-check-box{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid ${P_BORDER_S};background:${P_SURFACE};display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);margin-top:1px}
        .va-pay-check-box svg{opacity:0;transform:scale(.6);transition:all .2s cubic-bezier(.4,0,.2,1)}
        .va-pay-check.is-on .va-pay-check-box{background:${P_TEAL};border-color:${P_TEAL}}
        .va-pay-check.is-on .va-pay-check-box svg{opacity:1;transform:scale(1)}
        .va-pay-check-text{font-size:13px;color:${P_MUTED};font-weight:500;line-height:1.5}
        .va-pay-check-text a{color:${P_TEAL};font-weight:700;text-decoration:underline;text-underline-offset:2px}
        .va-pay-check-text a:hover{color:${P_TEAL_HV}}

        .va-pay-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px 22px;background:${P_BORDER};color:${P_MUTED};border:none;border-radius:999px;font-family:inherit;font-size:15px;font-weight:700;cursor:not-allowed;transition:all .25s cubic-bezier(.4,0,.2,1)}
        .va-pay-cta.is-ready{background:${P_TEAL};color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(17,151,143,.3)}
        .va-pay-cta.is-ready:hover{background:${P_TEAL_HV};transform:translateY(-1px);box-shadow:0 8px 22px rgba(17,151,143,.4)}
        .va-pay-hint{margin:0;font-size:12.5px;color:${P_MUTED};font-weight:600;text-align:center}
        .va-pay-note{margin:0;font-size:12.5px;color:${P_MUTED};font-weight:500;line-height:1.55;text-align:center}
        .va-pay-note strong{color:${P_INK};font-weight:700}

        .va-pay-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .va-pay.is-compact .va-pay-trust{grid-template-columns:1fr}
        .va-pay-trust-item{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;background:${P_SURFACE};border:1px solid ${P_BORDER};border-radius:16px}
        .va-pay-trust-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:${P_BG_TEAL};display:flex;align-items:center;justify-content:center}
        .va-pay-trust-text{display:flex;flex-direction:column;gap:2px;min-width:0}
        .va-pay-trust-text strong{font-size:13px;font-weight:900;color:${P_INK}}
        .va-pay-trust-text > span{font-size:11.5px;color:${P_MUTED};font-weight:500;line-height:1.4}

        .va-pay-side{position:relative}
        .va-pay-side-sticky{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
        .va-pay-side .va-cart-cta{display:none}
        .va-pay-side-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:11.5px;color:${P_MUTED};font-weight:600}
        .va-pay-side-secure svg{width:14px;height:14px}
        .va-pay-mobile-cart .va-cart-cta{display:none}
      `}</style>
    </>);

}

Object.assign(window, { PaymentScreen });