/* Volaire — flight components: search widget, autocomplete, date ribbon, flight cards, seat map, boarding pass */

/* ---------- airport autocomplete ---------- */
function AirportAutocomplete({ label, value, onChange, exclude, restrictTo }) {
  const { lang } = useLang();
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const ref = useRef(null);
  const sel = value ? L.airportByCode[value] : null;
  const options = useMemo(function () {
    let list = restrictTo ? restrictTo.map(function (c) { return L.airportByCode[c]; }) : L.AIRPORTS;
    list = list.filter(function (a) { return a && a.code !== exclude; });
    const needle = q.trim().toLowerCase();
    if (!needle) return list;
    return list.filter(function (a) {
      return a.code.toLowerCase().includes(needle) || a.city.toLowerCase().includes(needle) || a.cityEn.toLowerCase().includes(needle) || a.cityEs.toLowerCase().includes(needle);
    });
  }, [q, exclude, restrictTo]);
  useEffect(function () {
    const fn = function (e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', fn);
    return function () { document.removeEventListener('click', fn); };
  }, []);
  return (
    <div className="relative" ref={ref}>
      <Field label={label}>
        <div className="relative">
          <input
            type="text" className={inputCls + ' pr-14'} aria-label={label} role="combobox" aria-expanded={open}
            placeholder={lang === 'en' ? 'City or airport' : lang === 'es' ? 'Ciudad o aeropuerto' : 'Ville ou aéroport'}
            value={open ? q : (sel ? L.cityName(sel, lang) : '')}
            onFocus={function () { setOpen(true); setQ(''); }}
            onChange={function (e) { setQ(e.target.value); setOpen(true); }} />
          {sel && !open ? <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-md bg-cobalt/10 px-1.5 py-0.5 text-xs font-bold tabular-nums text-cobalt">{sel.code}</span> : null}
        </div>
      </Field>
      {open ? (
        <ul role="listbox" className="absolute left-0 right-0 top-full z-40 mt-1 max-h-64 overflow-auto rounded-xl border border-line bg-white py-1 shadow-lg">
          {options.length === 0 ? <li className="px-3 py-2 text-sm text-muted">—</li> : null}
          {options.map(function (a) {
            return (
              <li key={a.code} role="option" aria-selected={a.code === value}>
                <button type="button" className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-page"
                  onClick={function () { onChange(a.code); setOpen(false); }}>
                  <span><span className="font-semibold text-ink">{L.cityName(a, lang)}</span><span className="text-muted"> · {a.name}</span></span>
                  <span className="rounded-md bg-page px-1.5 py-0.5 text-xs font-bold tabular-nums text-muted">{a.code}</span>
                </button>
              </li>
            );
          })}
        </ul>
      ) : null}
    </div>
  );
}

/* ---------- search widget ---------- */
function SearchWidget({ initial, compact, onSearch }) {
  const { t } = useLang();
  const init = initial || {};
  const [tripType, setTripType] = useState(init.tripType || 'round-trip');
  const [from, setFrom] = useState(init.from || 'CDG');
  const [to, setTo] = useState(init.to || '');
  const [depart, setDepart] = useState(init.depart || L.todayISO(14));
  const [ret, setRet] = useState(init.ret || L.todayISO(18));
  const [cabin, setCabin] = useState(init.cabin || 'economy');
  const [tooltip, setTooltip] = useState(false);
  const destinations = from ? L.destinationsFor(from) : null;

  function submit(e) {
    e.preventDefault();
    if (!from || !to || !depart) return;
    const params = new URLSearchParams({ from: from, to: to, depart: depart, cabin: cabin, type: tripType });
    if (tripType === 'round-trip') params.set('return', ret || L.addDays(depart, 4));
    if (onSearch) onSearch();
    navigate('/search?' + params.toString());
  }

  return (
    <form onSubmit={submit} className={'rounded-xl border border-line bg-white p-4 sm:p-5 ' + (compact ? '' : 'shadow-[0_8px_30px_rgba(32,66,200,0.10)]')}>
      <div className="flex flex-wrap items-center gap-4">
        <div role="radiogroup" aria-label={t('home.search.tripType.return') + ' / ' + t('home.search.tripType.oneWay')} className="flex rounded-lg border border-line p-0.5">
          {[{ v: 'round-trip', l: t('home.search.tripType.return') }, { v: 'one-way', l: t('home.search.tripType.oneWay') }].map(function (o) {
            return (
              <button key={o.v} type="button" role="radio" aria-checked={tripType === o.v}
                className={'rounded-md px-3 py-1.5 text-sm font-medium ' + (tripType === o.v ? 'bg-cobalt text-white' : 'text-muted hover:text-ink')}
                onClick={function () { setTripType(o.v); }}>{o.l}</button>
            );
          })}
        </div>
        <div className="relative flex items-center gap-1.5 text-sm text-muted">
          <Icon name="user" size={15}></Icon>{t('home.search.onePassenger')}
          <button type="button" aria-label={t('home.search.onePassenger.tooltip')}
            className="text-muted/70 hover:text-cobalt"
            onMouseEnter={function () { setTooltip(true); }} onMouseLeave={function () { setTooltip(false); }}
            onFocus={function () { setTooltip(true); }} onBlur={function () { setTooltip(false); }}>
            <Icon name="info" size={14}></Icon>
          </button>
          {tooltip ? <span role="tooltip" className="absolute left-0 top-full z-40 mt-1 w-56 rounded-lg bg-ink px-3 py-2 text-xs text-white shadow-lg">{t('home.search.onePassenger.tooltip')}</span> : null}
        </div>
      </div>
      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-12">
        <div className="lg:col-span-3"><AirportAutocomplete label={t('home.search.from')} value={from} onChange={function (c) { setFrom(c); if (c === to) setTo(''); }} exclude={to}></AirportAutocomplete></div>
        <div className="lg:col-span-3"><AirportAutocomplete label={t('home.search.to')} value={to} onChange={setTo} exclude={from} restrictTo={destinations}></AirportAutocomplete></div>
        <Field label={t('home.search.depart')} className="lg:col-span-2">
          <input type="date" className={inputCls + ' tabular-nums'} value={depart} min={L.todayISO(0)} required
            onChange={function (e) { setDepart(e.target.value); if (ret < e.target.value) setRet(L.addDays(e.target.value, 4)); }} />
        </Field>
        {tripType === 'round-trip' ? (
          <Field label={t('home.search.return')} className="lg:col-span-2">
            <input type="date" className={inputCls + ' tabular-nums'} value={ret} min={depart} required
              onChange={function (e) { setRet(e.target.value); }} />
          </Field>
        ) : <div className="hidden lg:col-span-2 lg:block"></div>}
        <Field label={t('home.search.cabin')} className="lg:col-span-2">
          <select className={inputCls} value={cabin} onChange={function (e) { setCabin(e.target.value); }}>
            <option value="economy">{t('home.search.cabin.economy')}</option>
            <option value="premium">{t('home.search.cabin.premium')}</option>
          </select>
        </Field>
      </div>
      <div className="mt-4 flex justify-end">
        <button type="submit" disabled={!from || !to}
          className="w-full rounded-lg bg-cobalt px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-cobaltDark disabled:cursor-not-allowed disabled:opacity-40 sm:w-auto">
          {t('home.search.cta')}
        </button>
      </div>
    </form>
  );
}

/* ---------- date ribbon ---------- */
function DateRibbon({ from, to, selected, onPick }) {
  const { lang } = useLang();
  const days = [];
  for (let i = -3; i <= 3; i++) {
    const d = L.addDays(selected, i);
    if (d < L.todayISO(0)) continue;
    days.push(d);
  }
  return (
    <div className="flex gap-2 overflow-x-auto pb-1" role="tablist" aria-label="Dates">
      {days.map(function (d) {
        const price = L.lowestPrice(from, to, d);
        const sel = d === selected;
        return (
          <button key={d} role="tab" aria-selected={sel} onClick={function () { onPick(d); }}
            className={'flex min-w-[92px] flex-1 flex-col items-center gap-0.5 rounded-xl border px-3 py-2 text-center ' +
              (sel ? 'border-cobalt bg-cobalt text-white' : 'border-line bg-white text-ink hover:border-cobalt/50')}>
            <span className={'text-xs font-medium capitalize ' + (sel ? 'text-white/80' : 'text-muted')}>{L.fmtDateShort(d, lang)}</span>
            <span className="text-sm font-bold tabular-nums">{price != null ? L.fmtEUR(price) : '—'}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ---------- fare family column ---------- */
function FareFamilyColumn({ fare, flight, onSelect, selected }) {
  const { t } = useLang();
  const rules = L.FARE_RULES[fare];
  const price = flight.fares[fare];
  const rows = [
    { ok: true, label: t('search.fare.cabinBag') },
    { ok: rules.checkedBag, label: t('search.fare.checkedBag') },
    { ok: rules.seat !== 'fee', label: t('search.fare.seat.' + rules.seat) },
    { ok: !!rules.changes, label: rules.changes === true ? t('search.fare.changes.free') : (rules.changes === 'fee' ? t('search.fare.changes.fee') : t('search.fare.changes.no')) },
    { ok: rules.refund, label: rules.refund ? t('search.fare.refund.yes') : t('search.fare.refund.no') },
  ];
  if (fare === 'flex') rows.push({ ok: true, label: t('search.fare.priority') });
  const flexCls = fare === 'flex';
  return (
    <div className={'flex min-w-[210px] flex-1 flex-col rounded-xl border p-4 ' +
      (selected ? 'border-2 border-cobalt bg-cobalt/5' : flexCls ? 'border-gold/50 bg-gold/5' : 'border-line bg-white')}>
      <div className="flex items-center justify-between">
        <span className={'text-sm font-bold uppercase tracking-wide ' + (flexCls ? 'text-gold' : 'text-ink')}>{t('search.fare.' + fare)}</span>
        {flexCls ? <Badge variant="gold">Flex</Badge> : null}
      </div>
      <p className="mt-1 text-2xl font-bold tabular-nums tracking-tight text-ink">{L.fmtEUR(price.price)}</p>
      <ul className="mt-3 flex flex-1 flex-col gap-1.5">
        {rows.map(function (r, i) {
          return (
            <li key={i} className={'flex items-start gap-2 text-[13px] ' + (r.ok ? 'text-ink' : 'text-muted/70')}>
              <span className={'mt-0.5 shrink-0 ' + (r.ok ? 'text-success' : 'text-muted/50')}><Icon name={r.ok ? 'check' : 'cross'} size={14}></Icon></span>
              {r.label}
            </li>
          );
        })}
      </ul>
      <button onClick={onSelect} disabled={!price.available}
        className={'mt-4 rounded-lg px-4 py-2.5 text-sm font-bold transition-colors disabled:cursor-not-allowed disabled:opacity-40 ' +
          (selected ? 'bg-cobalt text-white' : 'border border-cobalt text-cobalt hover:bg-cobalt hover:text-white')}>
        {selected ? '✓ ' + t('search.fare.' + fare) : t('search.results.select')}
      </button>
    </div>
  );
}

/* ---------- flight card ---------- */
function FlightCard({ flight, expanded, onToggle, onSelectFare, selectedFare }) {
  const { t, lang } = useLang();
  const minFare = flight.fares.light.price;
  return (
    <article className={'overflow-hidden rounded-xl border bg-white transition-colors ' + (expanded || selectedFare ? 'border-cobalt' : 'border-line hover:border-cobalt/40')}>
      <button onClick={onToggle} aria-expanded={expanded}
        className="grid w-full grid-cols-[1fr_auto] items-center gap-x-4 gap-y-2 p-4 text-left sm:grid-cols-[minmax(0,1fr)_auto] sm:p-5">
        <div className="flex items-center gap-4 sm:gap-6">
          <div className="text-left">
            <p className="text-2xl font-bold tabular-nums tracking-tight text-ink">{L.fmtTime(flight.departTime)}</p>
            <p className="text-sm font-semibold tabular-nums text-muted">{flight.origin}</p>
          </div>
          <div className="flex min-w-[90px] flex-1 flex-col items-center gap-0.5 sm:min-w-[140px]">
            <span className="text-xs tabular-nums text-muted">{L.fmtDuration(flight.durationMin)}</span>
            <span className="relative h-px w-full bg-line">
              <span className="absolute right-0 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rotate-45 border-r border-t border-muted"></span>
              {flight.stops ? <span className="absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-muted bg-white"></span> : null}
            </span>
            <span className={'text-xs font-medium ' + (flight.stops ? 'text-muted' : 'text-success')}>
              {flight.stops ? t('search.results.oneStop') + (flight.via ? ' · ' + flight.via : '') : t('search.results.direct')}
            </span>
          </div>
          <div className="text-left">
            <p className="text-2xl font-bold tabular-nums tracking-tight text-ink">{L.fmtTime(flight.arriveTime)}</p>
            <p className="text-sm font-semibold tabular-nums text-muted">{flight.destination}</p>
          </div>
        </div>
        <div className="flex flex-col items-end gap-1">
          {flight.lastSeats ? <Badge variant="coral">{t('search.results.lastSeats')}</Badge> : null}
          <PriceTag amount={minFare} from={true} size="lg"></PriceTag>
          <span className={'flex items-center gap-1 text-sm font-semibold ' + (expanded ? 'text-muted' : 'text-cobalt')}>
            {t('search.results.choose')}<Icon name="chevronDown" size={14} className={expanded ? 'rotate-180' : ''}></Icon>
          </span>
        </div>
        <p className="col-span-2 text-xs text-muted">{flight.flightNumber} · {flight.aircraft} · {t('search.operatedBy')}</p>
      </button>
      {expanded ? (
        <div className="border-t border-line bg-page/60 p-4">
          <div className="flex gap-3 overflow-x-auto pb-1">
            {['light', 'classic', 'flex'].map(function (f) {
              return <FareFamilyColumn key={f} fare={f} flight={flight} selected={selectedFare === f}
                onSelect={function () { onSelectFare(f); }}></FareFamilyColumn>;
            })}
          </div>
        </div>
      ) : null}
    </article>
  );
}

/* ---------- seat map ---------- */
function SeatMap({ flight, fareFamily, selected, onSelect, initials }) {
  const { t } = useLang();
  const rows = useMemo(function () { return L.generateSeatMap(flight.id); }, [flight.id]);
  const [focused, setFocused] = useState(selected || '15C');
  const gridRef = useRef(null);

  function seatCls(seat) {
    if (selected === seat.id) return 'bg-cobalt text-white border-cobalt';
    if (seat.unavailable) return 'bg-line/60 border-line text-transparent cursor-not-allowed';
    if (seat.category === 'extraLegroom') return 'bg-coral/15 border-coral/40 text-coral hover:bg-coral/30';
    if (seat.category === 'frontCabin') return 'bg-cobalt/10 border-cobalt/30 text-cobalt hover:bg-cobalt/25';
    return 'bg-white border-line text-muted hover:border-cobalt hover:bg-cobalt/10';
  }
  function fee(seat) { return L.seatFee(seat.category, fareFamily); }

  function moveFocus(seatId, dRow, dCol) {
    const row = parseInt(seatId, 10);
    const col = L.SEAT_COLS.indexOf(seatId.replace(/^\d+/, ''));
    let r = Math.max(1, Math.min(30, row + dRow));
    let c = Math.max(0, Math.min(5, col + dCol));
    const id = r + L.SEAT_COLS[c];
    setFocused(id);
    requestAnimationFrame(function () {
      const el = gridRef.current && gridRef.current.querySelector('[data-seat="' + id + '"]');
      if (el) el.focus();
    });
  }

  const legend = [
    { k: 'standard', cls: 'bg-white border-line', label: t('booking.seats.standard'), fee: L.seatFee('standard', fareFamily) },
    { k: 'extraLegroom', cls: 'bg-coral/15 border-coral/40', label: t('booking.seats.extraLegroom'), fee: L.seatFee('extraLegroom', fareFamily) },
    { k: 'frontCabin', cls: 'bg-cobalt/10 border-cobalt/30', label: t('booking.seats.frontCabin'), fee: L.seatFee('frontCabin', fareFamily) },
    { k: 'unavailable', cls: 'bg-line/60 border-line', label: t('booking.seats.unavailable'), fee: null },
  ];

  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
      <ul className="flex flex-wrap gap-x-5 gap-y-2 lg:w-44 lg:flex-col">
        {legend.map(function (lg) {
          return (
            <li key={lg.k} className="flex items-center gap-2 text-[13px] text-ink">
              <span className={'h-5 w-5 shrink-0 rounded-md border ' + lg.cls}></span>
              <span>{lg.label}{lg.fee != null ? <span className="text-muted"> · {lg.fee === 0 ? t('booking.seats.included') : L.fmtEUR(lg.fee)}</span> : null}</span>
            </li>
          );
        })}
      </ul>
      <div className="flex-1 overflow-x-auto">
        <div className="mx-auto w-fit rounded-[28px] border border-line bg-white px-4 py-6" ref={gridRef}
          role="grid" aria-label={t('booking.seats.title') + ' — ' + flight.flightNumber}>
          {/* nose */}
          <div className="mx-auto mb-4 h-8 w-24 rounded-t-full border border-b-0 border-line bg-page/70"></div>
          <div className="flex flex-col gap-1.5">
            {rows.map(function (row) {
              return (
                <div key={row.row} role="row" className="flex items-center gap-1.5">
                  <span className="w-5 text-right text-[10px] tabular-nums text-muted">{row.row}</span>
                  {row.seats.map(function (seat, ci) {
                    const isSel = selected === seat.id;
                    return (
                      <React.Fragment key={seat.id}>
                        {ci === 3 ? <span className="w-6 text-center text-[10px] tabular-nums text-muted/60">{row.exit ? '⟶' : ''}</span> : null}
                        <button
                          role="gridcell" data-seat={seat.id}
                          tabIndex={focused === seat.id ? 0 : -1}
                          disabled={seat.unavailable}
                          aria-label={seat.id + ' — ' + t('booking.seats.' + (seat.category === 'extraLegroom' ? 'extraLegroom' : seat.category === 'frontCabin' ? 'frontCabin' : 'standard')) + (seat.unavailable ? ' — ' + t('booking.seats.unavailable') : fee(seat) ? ' — ' + L.fmtEUR(fee(seat)) : '')}
                          aria-selected={isSel}
                          className={'flex h-9 w-9 items-center justify-center rounded-md border text-[10px] font-bold sm:h-10 sm:w-10 ' + seatCls(seat)}
                          onClick={function () { if (!seat.unavailable) onSelect(seat.id, fee(seat)); }}
                          onKeyDown={function (e) {
                            if (e.key === 'ArrowDown') { e.preventDefault(); moveFocus(seat.id, 1, 0); }
                            else if (e.key === 'ArrowUp') { e.preventDefault(); moveFocus(seat.id, -1, 0); }
                            else if (e.key === 'ArrowRight') { e.preventDefault(); moveFocus(seat.id, 0, 1); }
                            else if (e.key === 'ArrowLeft') { e.preventDefault(); moveFocus(seat.id, 0, -1); }
                          }}
                          onFocus={function () { setFocused(seat.id); }}>
                          {isSel ? initials : seat.col}
                        </button>
                      </React.Fragment>
                    );
                  })}
                  {row.exit && row.row === 11 ? <span className="ml-1 text-[9px] font-semibold uppercase tracking-wide text-coral">{t('booking.seats.exit')}</span> : null}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- QR placeholder ---------- */
function QRPlaceholder({ seed, size }) {
  const cells = useMemo(function () {
    const rnd = (function () {
      let h = 2166136261;
      const s = seed || 'VL';
      for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
      return function () { h = Math.imul(h ^ (h >>> 13), 0x5bd1e995); return ((h >>> 15) & 0xff) / 255; };
    })();
    const out = [];
    for (let y = 0; y < 21; y++) for (let x = 0; x < 21; x++) {
      const finder = (x < 7 && y < 7) || (x > 13 && y < 7) || (x < 7 && y > 13);
      if (finder) {
        const lx = x > 13 ? x - 14 : x, ly = y > 13 ? y - 14 : y;
        const on = lx === 0 || lx === 6 || ly === 0 || ly === 6 || (lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4);
        if (on) out.push([x, y]);
      } else if (rnd() > 0.52) out.push([x, y]);
    }
    return out;
  }, [seed]);
  return (
    <svg viewBox="0 0 21 21" width={size || 112} height={size || 112} aria-label="QR code (démo)" role="img" className="block">
      <rect width="21" height="21" fill="#FFFFFF"></rect>
      {cells.map(function (c, i) { return <rect key={i} x={c[0]} y={c[1]} width="1" height="1" fill="#0E1220"></rect>; })}
    </svg>
  );
}

/* ---------- boarding pass ---------- */
function BoardingPass({ trip, flight, seat }) {
  const { t, lang } = useLang();
  const dep = new Date(flight.departTime);
  const boarding = new Date(dep.getTime() - 40 * 60000);
  const gateRnd = ((trip.pnr.charCodeAt(2) + trip.pnr.charCodeAt(3)) % 38) + 2;
  const gate = String.fromCharCode(65 + (trip.pnr.charCodeAt(4) % 4)) + gateRnd;
  const terminal = flight.origin === 'CDG' ? '2F' : flight.origin === 'ORY' ? '3' : '1';
  const p = trip.passenger;
  return (
    <div className="overflow-hidden rounded-xl border border-line bg-white" data-comment-anchor="boarding-pass">
      <div className="flex items-center justify-between bg-cobalt px-5 py-3">
        <VolaireMark height={20} light={true}></VolaireMark>
        <span className="text-xs font-semibold uppercase tracking-widest text-white/80">{t('checkin.boardingPass')}</span>
      </div>
      <div className="grid gap-5 p-5 sm:grid-cols-[1fr_auto]">
        <div className="flex flex-col gap-4">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wide text-muted">{t('checkin.passenger')}</p>
            <p className="text-lg font-bold tracking-tight text-ink">{(p.lastName || '').toUpperCase()} / {p.firstName}</p>
          </div>
          <div className="flex items-center gap-4">
            <div>
              <p className="text-3xl font-bold tabular-nums tracking-tight text-ink">{flight.origin}</p>
              <p className="text-xs text-muted">{L.fmtTime(flight.departTime)}</p>
            </div>
            <span className="relative mt-1 h-px w-16 bg-line">
              <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 text-cobalt"><Icon name="plane" size={16}></Icon></span>
            </span>
            <div>
              <p className="text-3xl font-bold tabular-nums tracking-tight text-ink">{flight.destination}</p>
              <p className="text-xs text-muted">{L.fmtTime(flight.arriveTime)}</p>
            </div>
            <FareFamilyPill fare={trip.fareFamily}></FareFamilyPill>
          </div>
          <dl className="grid grid-cols-3 gap-x-6 gap-y-3 sm:grid-cols-5">
            {[
              { k: t('checkin.flight'), v: flight.flightNumber },
              { k: lang === 'es' ? 'Fecha' : 'Date', v: L.fmtDateShort(flight.departTime, lang) },
              { k: t('checkin.boarding'), v: L.fmtTime(boarding.toISOString()) },
              { k: t('checkin.gate'), v: gate },
              { k: t('checkin.seat'), v: seat },
            ].map(function (d) {
              return (
                <div key={d.k}>
                  <dt className="text-[10px] font-semibold uppercase tracking-wide text-muted">{d.k}</dt>
                  <dd className="text-sm font-bold tabular-nums text-ink">{d.v}</dd>
                </div>
              );
            })}
          </dl>
          <p className="text-xs text-muted">{t('checkin.terminal')} {terminal} · PNR {trip.pnr}</p>
        </div>
        <div className="flex flex-col items-center justify-center gap-2 border-t border-dashed border-line pt-4 sm:border-l sm:border-t-0 sm:pl-5 sm:pt-0">
          <QRPlaceholder seed={trip.pnr + seat}></QRPlaceholder>
          <span className="text-[10px] tabular-nums text-muted">{trip.pnr}·{flight.flightNumber.replace(' ', '')}</span>
        </div>
      </div>
      <div className="flex flex-wrap gap-2 border-t border-line bg-page/60 px-5 py-3">
        <button className="flex items-center gap-2 rounded-lg bg-ink px-4 py-2 text-sm font-semibold text-white hover:bg-ink/85"
          onClick={function () { showToast(t('account.trip.comingSoon')); }}>
          <Icon name="wallet" size={16}></Icon>{t('checkin.addToWallet')}
        </button>
        <button className="flex items-center gap-2 rounded-lg border border-line bg-white px-4 py-2 text-sm font-semibold text-ink hover:border-cobalt"
          onClick={function () { showToast(t('account.trip.comingSoon')); }}>
          <Icon name="doc" size={16}></Icon>{t('checkin.downloadPdf')}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { AirportAutocomplete, SearchWidget, DateRibbon, FareFamilyColumn, FlightCard, SeatMap, QRPlaceholder, BoardingPass });