/* Volaire — /booking part 2: protection slot #1, payment, confirmation, wizard shell */

/* ---------- ProtectionOfferPlaceholder (visual stub for the embed) ---------- */
function ProtectionOfferPlaceholder({ tripTotal, tripType, value, onSelectionChange }) {
  const { t } = useLang();
  const options = [
    { id: 'cancellation', title: t('booking.protection.cancellation'), desc: t('booking.protection.cancellation.desc'), premium: L.protectionPremium(tripTotal, 'cancellation') },
    { id: 'multi-risk', title: t('booking.protection.multiRisk'), desc: t('booking.protection.multiRisk.includes'), premium: L.protectionPremium(tripTotal, 'multi-risk'), recommended: true },
    { id: 'multi-risk-plus', title: t('booking.protection.multiRiskPlus'), desc: t('booking.protection.multiRiskPlus.includes'), premium: L.protectionPremium(tripTotal, 'multi-risk-plus') },
    { id: 'none', title: t('booking.protection.none'), desc: t('booking.protection.none.desc'), premium: null },
  ];
  return (
    <div role="radiogroup" aria-label={t('booking.protection.stepTitle')} className="flex flex-col gap-3">
      <p className="text-sm text-muted">{t('booking.protection.intro')}</p>
      {options.map(function (o) {
        const selected = value === o.id;
        const none = o.id === 'none';
        return (
          <button key={o.id} role="radio" aria-checked={selected}
            onClick={function () {
              onSelectionChange(o.id === 'none' ? null : { quoteId: 'Q-' + o.id.toUpperCase().slice(0, 3) + Math.abs(tripTotal | 0), coverageType: o.id, premium: o.premium }, o.id);
            }}
            className={'relative flex w-full items-start gap-3 rounded-xl p-4 text-left transition-colors ' +
              (selected ? 'border-2 border-cobalt bg-cobalt/5' : 'border border-line bg-white hover:border-muted/40') +
              (none && !selected ? ' opacity-80' : '')}>
            <span className={'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ' + (selected ? 'border-cobalt' : 'border-line')}>
              {selected ? <span className="h-2.5 w-2.5 rounded-full bg-cobalt"></span> : null}
            </span>
            <span className="min-w-0 flex-1">
              <span className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5 pr-20">
                <span className={'font-bold ' + (none ? 'text-muted' : 'text-ink')}>{o.title}</span>
                {o.premium != null ? <span className="text-base font-bold tabular-nums tracking-tight text-ink">{L.fmtEUR(o.premium)}</span> : null}
              </span>
              <span className="mt-0.5 block text-sm text-muted">{o.desc}</span>
            </span>
            {o.recommended ? <span className="absolute right-3 top-3"><Badge variant="coral">{t('booking.protection.recommended')}</Badge></span> : null}
          </button>
        );
      })}
      <p className="text-xs text-muted">{t('booking.protection.precontractual')}</p>
    </div>
  );
}

/* ---------- coverage dates from the flight itinerary ---------- */
// Travel-medical cover runs from the outbound departure to the return arrival
// (or the outbound arrival for a one-way trip). Dates are YYYY-MM-DD.
function coverageDates(draft) {
  const inception = (draft.outbound && draft.outbound.departTime || '').slice(0, 10);
  const last = draft.inbound ? draft.inbound.arriveTime : (draft.outbound && draft.outbound.arriveTime);
  let expiry = (last || '').slice(0, 10);
  if (!expiry || expiry < inception) expiry = inception;
  return { inceptionDate: inception, expiryDate: expiry };
}

/* ---------- step 5: protection — Sherpa travel-medical quote (embed slot #1) ---------- */
function Step5Protection({ draft, dispatch }) {
  const { t, lang } = useLang();
  const S = window.VolaireSherpa;
  const pax = draft.pax || { adults: 1, under_18: 0, from_65: 0 };
  const paxN = window.VolaireDraft.paxCount(pax);
  const dates = coverageDates(draft);

  const [phase, setPhase] = useState('loading'); // 'loading' | 'ready' | 'error'
  const [quote, setQuote] = useState(null);
  const [errMsg, setErrMsg] = useState('');
  const [attempt, setAttempt] = useState(0);
  // Selected plan name, 'none', or null (no decision yet).
  const [decided, setDecided] = useState(draft.protection ? (draft.protection.planName || 'none') : null);

  useEffect(function () {
    let on = true;
    setPhase('loading');
    S.getQuote({
      identifier: 'VL-' + (draft.outbound ? draft.outbound.id : 'trip'),
      counts: { adults: pax.adults, under_18: pax.under_18, from_65: pax.from_65 },
      inceptionDate: dates.inceptionDate,
      expiryDate: dates.expiryDate,
    }).then(function (q) {
      if (!on) return;
      if (!q.plans || !q.plans.length) { setErrMsg('no plans'); setPhase('error'); return; }
      setQuote(q);
      setPhase('ready');
    }).catch(function (err) {
      if (!on) return;
      setErrMsg(err && err.message ? err.message : String(err));
      setPhase('error');
    });
    return function () { on = false; };
  }, [attempt, paxN, dates.inceptionDate, dates.expiryDate]);

  function selectPlan(plan) {
    setDecided(plan.name);
    dispatch({ type: 'ATTACH_PROTECTION', protection: {
      quoteId: quote.quoteId,
      planName: plan.name,
      coverageType: 'travel_medical',
      title: plan.title,
      premium: plan.premium,
      currency: plan.currency,
      forTravelers: paxN,
    } });
  }
  function selectNone() {
    setDecided('none');
    dispatch({ type: 'REMOVE_PROTECTION' });
  }
  const hasDecision = decided !== null;

  function fmt(amount, plan) { return S.formatMoney(amount, plan.format); }

  return (
    <div>
      <h1 className="text-2xl font-bold tracking-tight text-ink">{t('booking.protection.stepTitle')}</h1>
      <section id="protection-embed-slot" className="mt-4 min-h-[420px] rounded-xl border border-line bg-white p-6">
        <p className="text-sm text-muted">{t('booking.protection.intro')}</p>

        {phase === 'loading' ? (
          <div className="flex min-h-[320px] flex-col items-center justify-center gap-3" role="status" aria-label={t('booking.protection.loading')}>
            <span className="h-8 w-8 animate-spin rounded-full border-2 border-line border-t-cobalt"></span>
            <span className="text-sm text-muted">{t('booking.protection.loading')}</span>
          </div>
        ) : null}

        {phase === 'error' ? (
          <div className="mt-4 flex flex-col items-start gap-3 rounded-xl border border-line bg-page/60 p-5">
            <p className="text-sm font-semibold text-ink">{t('booking.protection.error')}</p>
            <div className="flex flex-wrap gap-2">
              <button className="rounded-lg border border-cobalt px-4 py-2 text-sm font-semibold text-cobalt hover:bg-cobalt hover:text-white"
                onClick={function () { setAttempt(attempt + 1); }}>{t('booking.protection.retry')}</button>
              <button className="rounded-lg px-4 py-2 text-sm font-semibold text-muted hover:text-ink" onClick={selectNone}>{t('booking.protection.none')}</button>
            </div>
          </div>
        ) : null}

        {phase === 'ready' && quote ? (
          <div role="radiogroup" aria-label={t('booking.protection.stepTitle')} className="mt-4 flex flex-col gap-3">
            <p className="text-xs text-muted">{t('booking.protection.forTravelers').replace('{n}', paxN).replace('{a}', L.fmtDateShort(dates.inceptionDate, lang)).replace('{b}', L.fmtDateShort(dates.expiryDate, lang))}</p>
            {quote.plans.map(function (plan) {
              const selected = decided === plan.name;
              const covers = plan.coverages.filter(function (c) { return c.included; });
              return (
                <button key={plan.name} role="radio" aria-checked={selected} onClick={function () { selectPlan(plan); }}
                  className={'relative flex w-full items-start gap-3 rounded-xl p-4 text-left transition-colors ' +
                    (selected ? 'border-2 border-cobalt bg-cobalt/5' : 'border border-line bg-white hover:border-muted/40')}>
                  <span className={'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ' + (selected ? 'border-cobalt' : 'border-line')}>
                    {selected ? <span className="h-2.5 w-2.5 rounded-full bg-cobalt"></span> : null}
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
                      <span className="flex items-center gap-2">
                        <Icon name="shield" size={16} className="text-success"></Icon>
                        <span className="font-bold text-ink">{t('booking.protection.travelMedical')}{plan.title ? ' · ' + plan.title : ''}</span>
                      </span>
                      <span className="text-right">
                        <span className="block text-base font-bold tabular-nums tracking-tight text-ink">{fmt(plan.premium, plan)}</span>
                        <span className="block text-xs text-muted">{t('booking.protection.oneTime')}</span>
                      </span>
                    </span>
                    {covers.length ? (
                      <span className="mt-2 block">
                        <span className="text-xs font-semibold uppercase tracking-wide text-muted">{t('booking.protection.covers')}</span>
                        <span className="mt-1 flex flex-wrap gap-1.5">
                          {covers.map(function (c) {
                            return <span key={c.name} className="inline-flex items-center gap-1 rounded-full bg-page px-2 py-0.5 text-xs text-ink"><Icon name="check" size={12} className="text-success"></Icon>{c.title}</span>;
                          })}
                        </span>
                      </span>
                    ) : null}
                  </span>
                  {plan.recommended ? <span className="absolute right-3 top-3"><Badge variant="coral">{t('booking.protection.recommended')}</Badge></span> : null}
                </button>
              );
            })}
            {/* no insurance */}
            <button role="radio" aria-checked={decided === 'none'} onClick={selectNone}
              className={'flex w-full items-start gap-3 rounded-xl p-4 text-left transition-colors ' +
                (decided === 'none' ? 'border-2 border-cobalt bg-cobalt/5' : 'border border-line bg-white opacity-80 hover:border-muted/40')}>
              <span className={'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ' + (decided === 'none' ? 'border-cobalt' : 'border-line')}>
                {decided === 'none' ? <span className="h-2.5 w-2.5 rounded-full bg-cobalt"></span> : null}
              </span>
              <span className="min-w-0 flex-1">
                <span className="font-bold text-muted">{t('booking.protection.none')}</span>
                <span className="mt-0.5 block text-sm text-muted">{t('booking.protection.none.desc')}</span>
              </span>
            </button>
            <p className="text-xs text-muted">{t('booking.protection.precontractual')}</p>
          </div>
        ) : null}
      </section>
      <StepFooter onBack={function () { dispatch({ type: 'SET_STEP', step: 4 }); }}
        onNext={function () { dispatch({ type: 'SET_STEP', step: 6 }); }} nextDisabled={!hasDecision || phase === 'loading'}></StepFooter>
    </div>
  );
}

/* ---------- step 6: payment ---------- */
function Step6Payment({ draft, dispatch }) {
  const { t, lang } = useLang();
  const [method, setMethod] = useState(draft.payment || 'card');
  const [terms, setTerms] = useState(false);
  const [privacy, setPrivacy] = useState(false);
  const [card, setCard] = useState({ number: '', expiry: '', cvc: '', holder: '' });
  const [processing, setProcessing] = useState(false);
  const total = bookingTotal(draft);
  const canPay = terms && privacy && !processing && (method !== 'card' || (card.number && card.expiry && card.cvc && card.holder));

  // Bind the Sherpa travel-medical policy for the selected quote. The premium is
  // charged separately by Sherpa (not part of the airline payment total), so a
  // bind failure must never block the flight confirmation — we surface it and
  // keep the booking. Returns the policy fields to merge onto trip.protection.
  async function bindProtection() {
    const prot = draft.protection;
    if (!prot || !prot.quoteId) return null;
    const p = draft.passenger;
    try {
      const policy = await window.VolaireSherpa.createPolicy({
        quoteId: prot.quoteId,
        planName: prot.planName,
        counts: draft.pax,
        roster: window.VolaireDraft.travelerRoster(draft),
        policyholder: {
          firstName: p.firstName, lastName: p.lastName,
          gender: p.salutation === 'Mme' ? 'female' : 'male',
          birthDate: p.dateOfBirth, email: p.email, phone: p.phone,
          address: {}, // Volaire doesn't collect a postal address; Sherpa client fills demo defaults.
        },
      });
      return { policyId: policy.policyId, policyNumber: policy.policyNumber, status: policy.status };
    } catch (err) {
      console.warn('[sherpa] policy bind failed', err && err.message ? err.message : err);
      showToast(t('booking.protection.bindError'));
      return null;
    }
  }

  function pay() {
    if (!canPay) return;
    setProcessing(true);
    L.mockAsync(1200).then(function () { return bindProtection(); }).then(function (policyInfo) {
      const pnr = L.generatePNR();
      const protection = draft.protection
        ? Object.assign({}, draft.protection, policyInfo || {})
        : undefined;
      const booking = {
        pnr: pnr, status: 'confirmed', tripType: draft.tripType,
        outbound: draft.outbound, inbound: draft.inbound || undefined,
        fareFamily: draft.fareFamily, passenger: draft.passenger,
        pax: draft.pax, travelers: window.VolaireDraft.travelerList(draft),
        seats: draft.seats, extras: draft.extras,
        protection: protection,
        total: total, bookedAt: new Date().toISOString(),
      };
      L.saveTrip(booking);
      if (draft.passenger.createAccount || !L.getSession()) {
        L.setSession({ firstName: draft.passenger.firstName || 'Camille', lastName: draft.passenger.lastName || 'Laurent', email: draft.passenger.email });
      }
      dispatch({ type: 'SET_PAYMENT', payload: { payment: method, termsAccepted: true, privacyAccepted: true } });
      dispatch({ type: 'CONFIRM_BOOKING', pnr: pnr });
      window.location.hash = '/booking?step=success';
      window.scrollTo(0, 0);
    });
  }

  const methods = [
    { v: 'card', l: t('booking.payment.card'), icon: 'card' },
    { v: 'paypal', l: t('booking.payment.paypal'), icon: 'wallet' },
    { v: 'apple-pay', l: t('booking.payment.applePay'), icon: 'phone' },
  ];
  return (
    <div>
      <h1 className="text-2xl font-bold tracking-tight text-ink">{t('booking.payment.title')}</h1>
      <p className="mt-1 text-sm text-muted">{t('booking.payment.note')}</p>
      <div className="mt-4 rounded-xl border border-line bg-white p-5">
        <div role="radiogroup" aria-label={t('booking.payment.title')} className="grid grid-cols-1 gap-2 sm:grid-cols-3">
          {methods.map(function (m) {
            const on = method === m.v;
            return (
              <button key={m.v} role="radio" aria-checked={on}
                className={'flex items-center justify-center gap-2 rounded-lg border px-4 py-3 text-sm font-semibold ' + (on ? 'border-2 border-cobalt bg-cobalt/5 text-cobalt' : 'border-line text-ink hover:border-cobalt/50')}
                onClick={function () { setMethod(m.v); }}>
                <Icon name={m.icon} size={18}></Icon>{m.l}
              </button>
            );
          })}
        </div>
        {method === 'card' ? (
          <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-4">
            <Field label={t('booking.payment.cardNumber')} className="sm:col-span-4">
              <input className={inputCls + ' tabular-nums'} inputMode="numeric" placeholder="4970 10•• •••• ••••" value={card.number}
                onChange={function (e) { setCard(Object.assign({}, card, { number: e.target.value })); }} />
            </Field>
            <Field label={t('booking.payment.expiry')} className="sm:col-span-1">
              <input className={inputCls + ' tabular-nums'} placeholder="MM/AA" value={card.expiry}
                onChange={function (e) { setCard(Object.assign({}, card, { expiry: e.target.value })); }} />
            </Field>
            <Field label={t('booking.payment.cvc')} className="sm:col-span-1">
              <input className={inputCls + ' tabular-nums'} inputMode="numeric" placeholder="123" value={card.cvc}
                onChange={function (e) { setCard(Object.assign({}, card, { cvc: e.target.value })); }} />
            </Field>
            <Field label={t('booking.payment.holder')} className="sm:col-span-2">
              <input className={inputCls} placeholder="C. LAURENT" value={card.holder}
                onChange={function (e) { setCard(Object.assign({}, card, { holder: e.target.value })); }} />
            </Field>
          </div>
        ) : (
          <p className="mt-4 rounded-lg bg-page px-4 py-3 text-sm text-muted">{method === 'paypal' ? 'PayPal' : 'Apple Pay'} — {lang === 'en' ? 'visual demo' : lang === 'es' ? 'demo visual' : 'démo visuelle'}.</p>
        )}
        <div className="mt-5 flex flex-col gap-2.5 border-t border-line pt-4">
          <label className="flex cursor-pointer items-start gap-2.5 text-sm text-ink">
            <input type="checkbox" checked={terms} required className="mt-0.5 h-4 w-4 rounded border-line text-cobalt focus:ring-cobalt"
              onChange={function (e) { setTerms(e.target.checked); }} />
            <span>{t('booking.payment.terms')} <Link to="/about" className="text-cobalt underline">(CGV)</Link></span>
          </label>
          <label className="flex cursor-pointer items-start gap-2.5 text-sm text-ink">
            <input type="checkbox" checked={privacy} required className="mt-0.5 h-4 w-4 rounded border-line text-cobalt focus:ring-cobalt"
              onChange={function (e) { setPrivacy(e.target.checked); }} />
            <span>{t('booking.payment.privacy')} <Link to="/about" className="text-cobalt underline">→</Link></span>
          </label>
        </div>
        {draft.protection ? (
          <p className="mt-3 flex items-center gap-2 rounded-lg bg-page px-4 py-3 text-sm text-muted">
            <Icon name="shield" size={16} className="shrink-0 text-success"></Icon>
            {t('booking.summary.protection')} : {L.fmtEUR(draft.protection.premium)} — {t('booking.summary.protection.separate')}.
          </p>
        ) : null}
        <div className="mt-5 flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-between">
          <span className="flex items-center gap-1.5 text-xs text-muted"><Icon name="lock" size={14}></Icon>{t('booking.payment.secure')}</span>
          <button onClick={pay} disabled={!canPay}
            className="flex items-center justify-center gap-2 rounded-lg bg-cobalt px-8 py-3.5 text-sm font-bold text-white hover:bg-cobaltDark disabled:cursor-not-allowed disabled:opacity-40">
            {processing ? <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white"></span> : null}
            {processing ? t('booking.payment.processing') : t('booking.payment.cta') + ' ' + L.fmtEUR(total)}
          </button>
        </div>
      </div>
      <StepFooter onBack={function () { dispatch({ type: 'SET_STEP', step: 5 }); }} onNext={pay} nextDisabled={!canPay}
        nextLabel={t('booking.payment.cta') + ' ' + L.fmtEUR(total)}></StepFooter>
    </div>
  );
}

/* ---------- confirmation ---------- */
function Confirmation({ draft, dispatch }) {
  const { t, lang } = useLang();
  const trip = L.findTrip(draft.pnr) || null;
  if (!trip) return null;
  return (
    <div className="mx-auto max-w-2xl">
      <div className="rounded-xl border border-line bg-white p-6 text-center sm:p-8">
        <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-success/10 text-success"><Icon name="check" size={28}></Icon></span>
        <h1 className="mt-4 text-2xl font-bold tracking-tight text-ink">{t('booking.confirm.title')}</h1>
        <p className="mt-2 text-sm text-muted">{t('booking.confirm.reference')}</p>
        <p className="text-3xl font-bold tabular-nums tracking-widest text-cobalt">{trip.pnr}</p>
        <div className="mt-5 flex flex-col gap-2 text-left">
          <FlightRecapStatic f={trip.outbound} seat={(trip.seats.find(function (s) { return s.flightId === 'out'; }) || {}).seat} lang={lang}></FlightRecapStatic>
          {trip.inbound ? <FlightRecapStatic f={trip.inbound} seat={(trip.seats.find(function (s) { return s.flightId === 'in'; }) || {}).seat} lang={lang}></FlightRecapStatic> : null}
        </div>
        <p className="mt-4 text-sm text-muted">{t('booking.confirm.emailNote')} <span className="font-semibold text-ink">{trip.passenger.email || 'camille.laurent@example.fr'}</span></p>
        <p className="mt-1 flex items-center justify-center gap-1.5 text-xs font-medium text-success"><Icon name="check" size={14}></Icon>{t('booking.confirm.freeCancel')}</p>
        {trip.protection ? (
          <p className="mt-4 flex items-start gap-2 rounded-lg bg-cobalt/5 px-4 py-3 text-left text-sm text-ink">
            <Icon name="shield" size={16} className="mt-0.5 shrink-0 text-cobalt"></Icon>
            {t('booking.confirm.protectionNote')}
          </p>
        ) : null}
        <div className="mt-6 flex flex-col justify-center gap-2 sm:flex-row">
          <button onClick={function () { const pnr = trip.pnr; dispatch({ type: 'RESET' }); window.VolaireDraft.clearDraft(); navigate('/account/trips/' + pnr); }}
            className="rounded-lg bg-cobalt px-6 py-3 text-sm font-bold text-white hover:bg-cobaltDark">{t('booking.confirm.viewTrip')}</button>
          <button onClick={function () { dispatch({ type: 'RESET' }); window.VolaireDraft.clearDraft(); navigate('/'); }}
            className="rounded-lg border border-line px-6 py-3 text-sm font-semibold text-ink hover:border-cobalt">{t('booking.confirm.backHome')}</button>
        </div>
      </div>
    </div>
  );
}
function FlightRecapStatic({ f, seat, lang }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-lg border border-line bg-page/60 px-4 py-3">
      <span className="text-sm font-bold tabular-nums text-ink">{L.fmtTime(f.departTime)} {f.origin} → {L.fmtTime(f.arriveTime)} {f.destination}</span>
      <span className="text-xs capitalize text-muted">{L.fmtDateShort(f.departTime, lang)} · {f.flightNumber}{seat ? ' · ' + seat : ''}</span>
    </div>
  );
}

/* ---------- wizard shell ---------- */
function BookingPage() {
  const { t } = useLang();
  const route = useRoute();
  const [draft, dispatch] = useBookingDraft();
  const liveRef = useRef(null);
  const isSuccess = draft.step === 'success' && route.query.step === 'success';

  useEffect(function () {
    if (liveRef.current) liveRef.current.textContent = typeof draft.step === 'number' ? t(STEP_KEYS[draft.step - 1]) : '';
  }, [draft.step]);

  if (!draft.outbound) {
    return (
      <main className="mx-auto max-w-6xl px-4 py-16 text-center">
        <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-cobalt/10 text-cobalt"><Icon name="plane" size={26}></Icon></span>
        <h1 className="mt-4 text-2xl font-bold tracking-tight text-ink">{t('booking.empty.title')}</h1>
        <p className="mt-2 text-sm text-muted">{t('booking.empty.body')}</p>
        <Link to="/" className="mt-5 inline-block rounded-lg bg-cobalt px-6 py-3 text-sm font-bold text-white hover:bg-cobaltDark">{t('booking.empty.cta')}</Link>
      </main>
    );
  }

  if (draft.step === 'success' || isSuccess) {
    return <main className="mx-auto max-w-6xl px-4 py-10"><Confirmation draft={draft} dispatch={dispatch}></Confirmation></main>;
  }

  const steps = { 1: Step1Flights, 2: Step2Passenger, 3: Step3Seats, 4: Step4Options, 5: Step5Protection, 6: Step6Payment };
  const StepComp = steps[draft.step] || Step1Flights;

  return (
    <main className="mx-auto max-w-6xl px-4 pb-32 pt-6 lg:pb-10">
      <span className="sr-only" aria-live="polite" ref={liveRef}></span>
      <div className="sticky top-[105px] z-30 -mx-1 bg-page/95 px-1 py-2 backdrop-blur md:top-[118px]">
        <div className="rounded-xl border border-line bg-white px-4 py-2.5">
          <ProgressBar step={draft.step} onJump={function (n) { dispatch({ type: 'SET_STEP', step: n }); }}></ProgressBar>
        </div>
      </div>
      <div className="mt-5 grid gap-6 lg:grid-cols-[1fr_320px]">
        <div data-screen-label={'Booking step ' + draft.step}>
          <StepComp draft={draft} dispatch={dispatch}></StepComp>
        </div>
        <SummaryRail draft={draft}></SummaryRail>
      </div>
    </main>
  );
}

Object.assign(window, { ProtectionOfferPlaceholder, Step5Protection, Step6Payment, Confirmation, BookingPage, FlightRecapStatic });