/* Volaire — pages: home, check-in, help, baggage, refunds, login, register, about */

/* ---------- home ---------- */
function HomePage() {
  const { t, lang } = useLang();
  function go(code) {
    navigate('/search?' + new URLSearchParams({ from: 'CDG', to: code, depart: L.todayISO(21), 'return': L.todayISO(25), cabin: 'economy', type: 'round-trip' }).toString());
  }
  const whys = [
    { icon: 'clock', k: 'why.punctuality' },
    { icon: 'bag', k: 'why.baggage' },
    { icon: 'star', k: 'why.service' },
    { icon: 'swap', k: 'why.flexibility' },
  ];
  return (
    <main data-screen-label="Home">
      {/* hero */}
      <section className="bg-gradient-to-b from-cobalt via-[#3D5FD9] to-page pb-10 pt-10 sm:pt-14">
        <div className="mx-auto max-w-6xl px-4">
          <h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-5xl">{t('home.hero.title')}</h1>
          <p className="mt-2 max-w-xl text-base text-white/85 sm:text-lg">{t('home.hero.subtitle')}</p>
          <div className="mt-6"><SearchWidget></SearchWidget></div>
        </div>
      </section>
      {/* destinations */}
      <section className="mx-auto mt-12 max-w-6xl px-4" aria-label={t('home.destinations.title')}>
        <h2 className="text-2xl font-bold tracking-tight text-ink">{t('home.destinations.title')}</h2>
        <div className="mt-4 grid grid-cols-2 gap-3 lg:grid-cols-3">
          {L.HOME_DESTINATIONS.map(function (code, i) {
            return <DestinationTile key={code} code={code} price={[39, 49, 44, 59, 54, 47][i]} onSearch={function () { go(code); }}></DestinationTile>;
          })}
        </div>
      </section>
      {/* promos */}
      <section className="mx-auto mt-12 max-w-6xl px-4" aria-label={t('home.promos.title')}>
        <h2 className="text-2xl font-bold tracking-tight text-ink">{t('home.promos.title')}</h2>
        <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
          {L.HOME_PROMOS.map(function (p) {
            const from = L.airportByCode[p.from], to = L.airportByCode[p.to];
            return (
              <button key={p.from + p.to}
                onClick={function () { navigate('/search?' + new URLSearchParams({ from: p.from, to: p.to, depart: L.todayISO(21), 'return': L.todayISO(25), cabin: 'economy', type: 'round-trip' }).toString()); }}
                className="group flex items-center justify-between gap-3 rounded-xl border border-line bg-white p-4 text-left transition-colors hover:border-coral">
                <div>
                  <Badge variant="coral">Promo</Badge>
                  <p className="mt-2 font-bold tracking-tight text-ink">{L.cityName(from, lang)} → {L.cityName(to, lang)}</p>
                  <p className="text-xs tabular-nums text-muted">{p.from} → {p.to} · {t('home.search.tripType.oneWay').toLowerCase()}</p>
                </div>
                <p className="text-xl font-bold tabular-nums tracking-tight text-coral"><span className="text-xs font-medium text-muted">{t('home.destinations.from')} </span>{L.fmtEUR(p.price)}</p>
              </button>
            );
          })}
        </div>
      </section>
      {/* why volaire */}
      <section className="mx-auto mt-12 max-w-6xl px-4" aria-label={t('home.why.title')}>
        <div className="grid grid-cols-1 gap-3 rounded-xl border border-line bg-white p-6 sm:grid-cols-2 lg:grid-cols-4">
          {whys.map(function (w) {
            return (
              <div key={w.k} className="flex flex-col gap-2">
                <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-cobalt/10 text-cobalt"><Icon name={w.icon} size={20}></Icon></span>
                <p className="font-bold text-ink">{t(w.k)}</p>
                <p className="text-sm text-muted">{t(w.k + '.body')}</p>
              </div>
            );
          })}
        </div>
      </section>
      {/* app teaser */}
      <section className="mx-auto mt-12 max-w-6xl px-4">
        <div className="flex flex-col items-center gap-8 overflow-hidden rounded-xl bg-ink px-6 py-10 sm:flex-row sm:px-10">
          <div className="flex-1">
            <h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">{t('home.app.title')}</h2>
            <p className="mt-2 text-white/70">{t('home.app.body')}</p>
            <div className="mt-5 flex gap-2">
              {['App Store', 'Google Play'].map(function (s) {
                return <span key={s} className="rounded-lg border border-white/25 px-4 py-2 text-sm font-semibold text-white/90">{s}</span>;
              })}
            </div>
          </div>
          <div className="relative h-64 w-36 shrink-0 rounded-[28px] border-2 border-white/25 bg-white/5 p-3">
            <div className="mx-auto h-1 w-12 rounded-full bg-white/25"></div>
            <div className="mt-3 rounded-xl bg-white/10 p-3">
              <VolaireMark height={14} light={true}></VolaireMark>
              <p className="mt-2 text-[10px] font-semibold tabular-nums text-white">CDG → BCN</p>
              <p className="text-[9px] tabular-nums text-white/60">VL 1342 · 09:25</p>
              <div className="mt-2 grid grid-cols-7 gap-px opacity-70">
                {Array.from({ length: 35 }).map(function (_, i) {
                  return <span key={i} className={'aspect-square ' + ((i * 7 + 3) % 5 < 2 ? 'bg-white' : 'bg-transparent')}></span>;
                })}
              </div>
            </div>
            <p className="mt-3 text-center text-[9px] uppercase tracking-widest text-white/50">{t('checkin.boardingPass')}</p>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- check-in ---------- */
function CheckinPage() {
  const { t } = useLang();
  const route = useRoute();
  const [pnr, setPnr] = useState(route.query.pnr || '');
  const [name, setName] = useState(route.query.pnr ? 'Laurent' : '');
  const [error, setError] = useState(false);
  const [trip, setTrip] = useState(null);
  const [searching, setSearching] = useState(false);
  const [, force] = useState(0);

  function lookup(e) {
    e.preventDefault();
    setSearching(true); setError(false);
    L.mockAsync(500).then(function () {
      const found = L.findTrip(pnr);
      const nameOk = found && name.trim().toLowerCase() === (found.passenger.lastName || '').toLowerCase();
      setSearching(false);
      if (found && nameOk && found.status !== 'cancelled') { setTrip(found); setError(false); }
      else { setTrip(null); setError(true); }
    });
  }
  function doCheckin() {
    L.overrideTrip(trip.pnr, { status: 'checked-in' });
    setTrip(Object.assign({}, trip, { status: 'checked-in' }));
    showToast(t('checkin.done'));
  }
  const seatOut = trip ? ((trip.seats.find(function (s) { return s.flightId === 'out'; }) || {}).seat || '23C') : null;

  return (
    <main className="mx-auto max-w-2xl px-4 pt-8" data-screen-label="Check-in">
      <h1 className="text-3xl font-bold tracking-tight text-ink">{t('checkin.title')}</h1>
      <p className="mt-1 text-sm text-muted">{t('checkin.subtitle')}</p>
      {!trip ? (
        <form onSubmit={lookup} className="mt-5 rounded-xl border border-line bg-white p-5">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label={t('checkin.pnr')}>
              <input className={inputCls + ' uppercase tabular-nums'} value={pnr} required placeholder="VLK7M2" maxLength={7}
                onChange={function (e) { setPnr(e.target.value.toUpperCase()); }} />
            </Field>
            <Field label={t('checkin.lastName')}>
              <input className={inputCls} value={name} required placeholder="Laurent" onChange={function (e) { setName(e.target.value); }} />
            </Field>
          </div>
          {error ? <p className="mt-3 rounded-lg bg-danger/10 px-4 py-2.5 text-sm font-medium text-danger" role="alert">{t('checkin.notFound')}</p> : null}
          <button type="submit" disabled={searching || !pnr || !name}
            className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg bg-cobalt py-3 text-sm font-bold text-white hover:bg-cobaltDark disabled:opacity-40">
            {searching ? <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white"></span> : null}
            {t('checkin.cta')}
          </button>
        </form>
      ) : (
        <div className="mt-5 flex flex-col gap-4">
          {trip.status !== 'checked-in' ? (
            <div className="rounded-xl border border-line bg-white p-5">
              <p className="flex items-center gap-2 text-sm font-semibold text-success"><Icon name="check" size={16}></Icon>{t('checkin.found')}</p>
              <div className="mt-3"><FlightRecapStatic f={trip.outbound} seat={seatOut} lang={window.VolaireI18n.getLang()}></FlightRecapStatic></div>
              <button onClick={doCheckin} className="mt-4 w-full rounded-lg bg-cobalt py-3 text-sm font-bold text-white hover:bg-cobaltDark">{t('checkin.do')}</button>
            </div>
          ) : (
            <React.Fragment>
              <p className="flex items-center gap-2 text-sm font-bold text-success"><Icon name="check" size={18}></Icon>{t('checkin.done')}</p>
              <BoardingPass trip={trip} flight={trip.outbound} seat={seatOut}></BoardingPass>
            </React.Fragment>
          )}
          <button className="w-fit text-sm font-medium text-muted hover:text-ink" onClick={function () { setTrip(null); setPnr(''); setName(''); }}>← {t('common.back')}</button>
        </div>
      )}
    </main>
  );
}

/* ---------- help / FAQ ---------- */
const FAQ_ITEMS = [
  { fr: ['Quand puis-je m’enregistrer en ligne ?', 'L’enregistrement en ligne ouvre 30 heures avant le départ et ferme 1 heure avant. Votre carte d’embarquement est disponible immédiatement après.'], en: ['When can I check in online?', 'Online check-in opens 30 hours before departure and closes 1 hour before. Your boarding pass is available immediately afterwards.'], es: ['¿Cuándo puedo hacer el check-in online?', 'El check-in online abre 30 horas antes de la salida y cierra 1 hora antes. Su tarjeta de embarque está disponible inmediatamente después.'] },
  { fr: ['Quels bagages sont inclus dans mon tarif ?', 'Tous les tarifs incluent un bagage cabine (40 × 30 × 20 cm). Les tarifs Classic et Flex incluent en plus un bagage en soute de 23 kg.'], en: ['What baggage is included in my fare?', 'All fares include a cabin bag (40 × 30 × 20 cm). Classic and Flex fares also include a 23 kg checked bag.'], es: ['¿Qué equipaje incluye mi tarifa?', 'Todas las tarifas incluyen un equipaje de mano (40 × 30 × 20 cm). Las tarifas Classic y Flex incluyen además una maleta facturada de 23 kg.'] },
  { fr: ['Puis-je modifier mon vol ?', 'Avec le tarif Flex, les modifications sont gratuites. Avec Classic, elles sont possibles moyennant des frais. Le tarif Light ne permet pas de modification.'], en: ['Can I change my flight?', 'With Flex, changes are free. With Classic, changes are possible for a fee. Light does not allow changes.'], es: ['¿Puedo cambiar mi vuelo?', 'Con la tarifa Flex, los cambios son gratuitos. Con Classic, son posibles con cargo. La tarifa Light no permite cambios.'] },
  { fr: ['Comment demander un remboursement ?', 'Connectez-vous à votre compte, sélectionnez le voyage concerné et demandez le remboursement. Seul le tarif Flex est remboursable, hors annulation sous 24 h.'], en: ['How do I request a refund?', 'Sign in to your account, select the trip and request the refund. Only Flex is refundable, except within 24 h of booking.'], es: ['¿Cómo solicito un reembolso?', 'Inicie sesión en su cuenta, seleccione el viaje y solicite el reembolso. Solo la tarifa Flex es reembolsable, salvo cancelación en las primeras 24 h.'] },
  { fr: ['Puis-je voyager avec un animal ?', 'Les petits animaux (moins de 8 kg, sac fermé) sont acceptés en cabine sur la plupart des vols, avec supplément. Réservez cette option au plus tard 48 h avant le départ.'], en: ['Can I travel with a pet?', 'Small pets (under 8 kg, in a closed bag) are accepted in the cabin on most flights, for a fee. Book this option at least 48 h before departure.'], es: ['¿Puedo viajar con un animal?', 'Los animales pequeños (menos de 8 kg, en bolsa cerrada) se aceptan en cabina en la mayoría de los vuelos, con suplemento. Reserve esta opción como mínimo 48 h antes de la salida.'] },
  { fr: ['Mon enfant peut-il voyager seul ?', 'Les mineurs non accompagnés de 12 à 17 ans peuvent voyager seuls sur les vols directs avec le service d’accompagnement (en option). En dessous de 12 ans, un accompagnateur adulte est requis.'], en: ['Can my child travel alone?', 'Unaccompanied minors aged 12 to 17 can travel alone on direct flights with the escort service (optional). Under 12, an accompanying adult is required.'], es: ['¿Puede mi hijo viajar solo?', 'Los menores no acompañados de 12 a 17 años pueden viajar solos en vuelos directos con el servicio de acompañamiento (opcional). Por debajo de los 12 años, se requiere un adulto acompañante.'] },
  { fr: ['Quels documents de voyage me faut-il ?', 'Une pièce d’identité en cours de validité (CNI ou passeport) est requise sur tous nos vols. Vérifiez les exigences du pays de destination avant le départ.'], en: ['What travel documents do I need?', 'A valid ID (national ID card or passport) is required on all our flights. Check the destination country’s requirements before departure.'], es: ['¿Qué documentos de viaje necesito?', 'Se requiere un documento de identidad en vigor (DNI o pasaporte) en todos nuestros vuelos. Compruebe los requisitos del país de destino antes de la salida.'] },
  { fr: ['Que se passe-t-il en cas de retard ?', 'En cas de retard important, nous vous informons par e-mail et SMS. Selon le règlement (CE) 261/2004, vous pouvez avoir droit à une prise en charge ou une indemnisation.'], en: ['What happens if my flight is delayed?', 'In the event of a long delay, we keep you informed by email and SMS. Under Regulation (EC) 261/2004 you may be entitled to care or compensation.'], es: ['¿Qué ocurre en caso de retraso?', 'En caso de retraso importante, le informamos por correo electrónico y SMS. Según el Reglamento (CE) 261/2004, puede tener derecho a asistencia o a una compensación.'] },
];
function HelpPage() {
  const { t, lang } = useLang();
  const [open, setOpen] = useState(0);
  return (
    <main className="mx-auto max-w-3xl px-4 pt-8" data-screen-label="Help">
      <h1 className="text-3xl font-bold tracking-tight text-ink">{t('help.title')}</h1>
      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
        <Link to="/help/baggage" className="flex items-center gap-3 rounded-xl border border-line bg-white p-4 hover:border-cobalt">
          <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-cobalt/10 text-cobalt"><Icon name="bag" size={20}></Icon></span>
          <span className="font-semibold text-ink">{t('help.baggage.link')}</span>
        </Link>
        <Link to="/help/refunds" className="flex items-center gap-3 rounded-xl border border-line bg-white p-4 hover:border-cobalt">
          <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-cobalt/10 text-cobalt"><Icon name="swap" size={20}></Icon></span>
          <span className="font-semibold text-ink">{t('help.refunds.link')}</span>
        </Link>
      </div>
      <h2 className="mt-8 text-lg font-bold tracking-tight text-ink">{t('help.faq')}</h2>
      <div className="mt-3 overflow-hidden rounded-xl border border-line bg-white">
        {FAQ_ITEMS.map(function (item, i) {
          const o = open === i;
          const txt = item[lang] || item.fr;
          return (
            <div key={i} className={i ? 'border-t border-line' : ''}>
              <button className="flex w-full items-center justify-between gap-3 px-5 py-4 text-left font-semibold text-ink hover:bg-page/60"
                aria-expanded={o} onClick={function () { setOpen(o ? -1 : i); }}>
                {txt[0]}<Icon name="chevronDown" size={16} className={'shrink-0 text-muted ' + (o ? 'rotate-180' : '')}></Icon>
              </button>
              {o ? <p className="px-5 pb-4 text-sm leading-relaxed text-muted">{txt[1]}</p> : null}
            </div>
          );
        })}
      </div>
    </main>
  );
}

/* ---------- baggage ---------- */
function HelpBaggagePage() {
  const { t } = useLang();
  const rows = [
    { label: t('baggage.cabin') + ' (40 × 30 × 20 cm, 10 kg)', light: true, classic: true, flex: true },
    { label: t('baggage.checked') + ' (23 kg)', light: false, classic: true, flex: true },
    { label: t('baggage.extra') + ' (23 kg)', light: L.fmtEUR(L.OPTION_PRICES.extraBag), classic: L.fmtEUR(L.OPTION_PRICES.extraBag), flex: L.fmtEUR(L.OPTION_PRICES.extraBag) },
    { label: t('search.fare.priority'), light: false, classic: false, flex: true },
  ];
  function cell(v) {
    if (v === true) return <span className="inline-flex text-success"><Icon name="check" size={16}></Icon></span>;
    if (v === false) return <span className="inline-flex text-muted/50"><Icon name="cross" size={16}></Icon></span>;
    return <span className="text-sm font-semibold tabular-nums">{v}</span>;
  }
  return (
    <main className="mx-auto max-w-3xl px-4 pt-8" data-screen-label="Baggage policy">
      <Breadcrumb items={[{ label: t('nav.help'), to: '/help' }, { label: t('baggage.title') }]}></Breadcrumb>
      <h1 className="mt-3 text-3xl font-bold tracking-tight text-ink">{t('baggage.title')}</h1>
      <p className="mt-1 text-sm text-muted">{t('baggage.intro')}</p>
      <div className="mt-5 overflow-hidden rounded-xl border border-line bg-white">
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-line bg-page/60 text-xs font-bold uppercase tracking-wider text-muted">
              <th className="px-4 py-3" scope="col"></th>
              <th className="px-4 py-3" scope="col">Light</th>
              <th className="px-4 py-3" scope="col">Classic</th>
              <th className="px-4 py-3 text-gold" scope="col">Flex</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(function (r, i) {
              return (
                <tr key={i} className={i ? 'border-t border-line' : ''}>
                  <th scope="row" className="px-4 py-3 text-sm font-medium text-ink">{r.label}</th>
                  <td className="px-4 py-3">{cell(r.light)}</td>
                  <td className="px-4 py-3">{cell(r.classic)}</td>
                  <td className="px-4 py-3">{cell(r.flex)}</td>
                </tr>
              );
            })}
            <tr className="border-t border-line">
              <th scope="row" className="px-4 py-3 text-sm font-medium text-ink">{t('booking.options.checkedBag')} ({t('common.add').toLowerCase()})</th>
              <td className="px-4 py-3 text-sm font-semibold tabular-nums">{L.fmtEUR(L.OPTION_PRICES.checkedBag)}</td>
              <td className="px-4 py-3"><span className="inline-flex text-success"><Icon name="check" size={16}></Icon></span></td>
              <td className="px-4 py-3"><span className="inline-flex text-success"><Icon name="check" size={16}></Icon></span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="mt-4 rounded-lg bg-page px-4 py-3 text-sm text-muted">{t('baggage.excess')}</p>
    </main>
  );
}

/* ---------- refunds ---------- */
function HelpRefundsPage() {
  const { t } = useLang();
  const [sent, setSent] = useState(false);
  const fares = [
    { f: 'light', changes: t('search.fare.changes.no'), refund: t('search.fare.refund.no') },
    { f: 'classic', changes: t('search.fare.changes.fee') + ' (45 €)', refund: t('search.fare.refund.no') },
    { f: 'flex', changes: t('search.fare.changes.free'), refund: t('search.fare.refund.yes') },
  ];
  return (
    <main className="mx-auto max-w-3xl px-4 pt-8" data-screen-label="Refunds policy">
      <Breadcrumb items={[{ label: t('nav.help'), to: '/help' }, { label: t('refunds.title') }]}></Breadcrumb>
      <h1 className="mt-3 text-3xl font-bold tracking-tight text-ink">{t('refunds.title')}</h1>
      <p className="mt-1 text-sm text-muted">{t('refunds.intro')}</p>
      <div className="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-3">
        {fares.map(function (r) {
          return (
            <div key={r.f} className="rounded-xl border border-line bg-white p-4">
              <FareFamilyPill fare={r.f}></FareFamilyPill>
              <p className="mt-2 text-sm text-ink">{r.changes}</p>
              <p className="mt-1 text-sm text-muted">{r.refund}</p>
            </div>
          );
        })}
      </div>
      <h2 className="mt-8 text-lg font-bold tracking-tight text-ink">{t('refunds.steps.title')}</h2>
      <ol className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-4">
        {[1, 2, 3, 4].map(function (n) {
          return (
            <li key={n} className="flex items-start gap-2.5 rounded-xl border border-line bg-white p-3">
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-cobalt text-xs font-bold tabular-nums text-white">{n}</span>
              <span className="text-sm text-ink">{t('refunds.step' + n)}</span>
            </li>
          );
        })}
      </ol>
      <form className="mt-8 rounded-xl border border-line bg-white p-5"
        onSubmit={function (e) { e.preventDefault(); setSent(true); }}>
        <h2 className="text-lg font-bold tracking-tight text-ink">{t('refunds.form.title')}</h2>
        {sent ? (
          <p className="mt-3 flex items-center gap-2 rounded-lg bg-success/10 px-4 py-3 text-sm font-medium text-success"><Icon name="check" size={16}></Icon>{t('refunds.form.sent')}</p>
        ) : (
          <React.Fragment>
            <div className="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <Field label={t('checkin.pnr')}><input className={inputCls + ' uppercase tabular-nums'} required placeholder="VLK7M2" /></Field>
              <Field label={t('refunds.form.reason')}>
                <select className={inputCls}>
                  <option>{t('search.fare.refund.yes')}</option>
                  <option>{t('search.fare.changes.fee')}</option>
                  <option>EU 261/2004</option>
                </select>
              </Field>
            </div>
            <button type="submit" className="mt-4 rounded-lg bg-cobalt px-6 py-2.5 text-sm font-bold text-white hover:bg-cobaltDark">{t('refunds.form.submit')}</button>
          </React.Fragment>
        )}
      </form>
      <p className="mt-5 rounded-lg bg-page px-4 py-3 text-sm text-muted">
        {t('refunds.eu261')} <Link to="/about" className="font-medium text-cobalt underline">{t('refunds.eu261.link')}</Link>
      </p>
    </main>
  );
}

/* ---------- login / register ---------- */
function SocialButtons() {
  const { t } = useLang();
  return (
    <div className="flex flex-col gap-2">
      {[t('login.google'), t('login.apple')].map(function (s) {
        return <button key={s} type="button" className="rounded-lg border border-line bg-white py-2.5 text-sm font-semibold text-ink hover:border-cobalt">{s}</button>;
      })}
    </div>
  );
}
function LoginPage() {
  const { t } = useLang();
  function submit(e) {
    e.preventDefault();
    L.setSession({ firstName: L.MOCK_CUSTOMER.firstName, lastName: L.MOCK_CUSTOMER.lastName, email: L.MOCK_CUSTOMER.email });
    showToast(t('login.toast'));
    navigate('/account');
  }
  return (
    <main className="mx-auto max-w-md px-4 pt-10" data-screen-label="Login">
      <h1 className="text-3xl font-bold tracking-tight text-ink">{t('login.title')}</h1>
      <form onSubmit={submit} className="mt-5 rounded-xl border border-line bg-white p-5">
        <div className="flex flex-col gap-4">
          <Field label={t('login.email')}><input type="email" className={inputCls} required autoComplete="email" placeholder="camille.laurent@example.fr" /></Field>
          <Field label={t('login.password')}><input type="password" className={inputCls} required autoComplete="current-password" placeholder="••••••••" /></Field>
        </div>
        <button type="submit" className="mt-4 w-full rounded-lg bg-cobalt py-3 text-sm font-bold text-white hover:bg-cobaltDark">{t('login.cta')}</button>
        <div className="my-4 flex items-center gap-3 text-xs uppercase text-muted"><span className="h-px flex-1 bg-line"></span>{t('login.or')}<span className="h-px flex-1 bg-line"></span></div>
        <SocialButtons></SocialButtons>
      </form>
      <p className="mt-4 text-center text-sm text-muted">{t('login.noAccount')} <Link to="/register" className="font-semibold text-cobalt hover:underline">{t('login.register')}</Link></p>
    </main>
  );
}
function RegisterPage() {
  const { t } = useLang();
  function submit(e) {
    e.preventDefault();
    L.setSession({ firstName: L.MOCK_CUSTOMER.firstName, lastName: L.MOCK_CUSTOMER.lastName, email: L.MOCK_CUSTOMER.email });
    showToast(t('register.toast'));
    navigate('/account');
  }
  return (
    <main className="mx-auto max-w-md px-4 pt-10" data-screen-label="Register">
      <h1 className="text-3xl font-bold tracking-tight text-ink">{t('register.title')}</h1>
      <form onSubmit={submit} className="mt-5 rounded-xl border border-line bg-white p-5">
        <div className="flex flex-col gap-4">
          <Field label={t('login.email')}><input type="email" className={inputCls} required autoComplete="email" /></Field>
          <Field label={t('login.password')}><input type="password" className={inputCls} required autoComplete="new-password" /></Field>
          <Field label={t('register.passwordConfirm')}><input type="password" className={inputCls} required autoComplete="new-password" /></Field>
        </div>
        <label className="mt-4 flex cursor-pointer items-start gap-2.5 text-sm text-ink">
          <input type="checkbox" required className="mt-0.5 h-4 w-4 rounded border-line text-cobalt focus:ring-cobalt" />
          {t('register.terms')}
        </label>
        <button type="submit" className="mt-4 w-full rounded-lg bg-cobalt py-3 text-sm font-bold text-white hover:bg-cobaltDark">{t('register.cta')}</button>
        <div className="my-4 flex items-center gap-3 text-xs uppercase text-muted"><span className="h-px flex-1 bg-line"></span>{t('login.or')}<span className="h-px flex-1 bg-line"></span></div>
        <SocialButtons></SocialButtons>
      </form>
      <p className="mt-4 text-center text-sm text-muted">{t('register.haveAccount')} <Link to="/login" className="font-semibold text-cobalt hover:underline">{t('login.cta')}</Link></p>
    </main>
  );
}

/* ---------- about ---------- */
const ABOUT_COPY = {
  fr: {
    founded: 'Fondée à Toulouse', aircraft: 'Avions', ontime: 'Ponctualité 2025',
    intro: 'Volaire est née à Toulouse en 2016 avec une idée simple : voyager en Europe doit être clair, serein et au juste prix. Pas de frais cachés, pas de bruit — des vols point à point bien opérés, depuis Paris et les régions.',
    sustTitle: 'Engagement durable',
    sust: 'Notre flotte de la famille A320neo est l’une des plus jeunes d’Europe. Nous nous engageons à alimenter 10 % de nos vols en carburant d’aviation durable (SAF) d’ici 2030 — un engagement de démonstration pour une compagnie fictive, mais une direction bien réelle.',
  },
  en: {
    founded: 'Founded in Toulouse', aircraft: 'Aircraft', ontime: 'On-time in 2025',
    intro: 'Volaire was born in Toulouse in 2016 with a simple idea: flying across Europe should be clear, calm and fairly priced. No hidden fees, no noise — just well-run point-to-point flights from Paris and the French regions.',
    sustTitle: 'Sustainability',
    sust: 'Our fleet of A320neo-family aircraft is among the youngest in Europe. We have pledged to power 10% of our flights with sustainable aviation fuel (SAF) by 2030 — a demo commitment for a demo airline, but a real direction.',
  },
  es: {
    founded: 'Fundada en Toulouse', aircraft: 'Aviones', ontime: 'Puntualidad 2025',
    intro: 'Volaire nació en Toulouse en 2016 con una idea sencilla: viajar por Europa debe ser claro, tranquilo y a un precio justo. Sin costes ocultos, sin ruido — vuelos punto a punto bien operados, desde París y las regiones francesas.',
    sustTitle: 'Compromiso sostenible',
    sust: 'Nuestra flota de la familia A320neo es una de las más jóvenes de Europa. Nos comprometemos a alimentar el 10 % de nuestros vuelos con combustible de aviación sostenible (SAF) de aquí a 2030 — un compromiso de demostración para una compañía ficticia, pero una dirección muy real.',
  },
};
function AboutPage() {
  const { t, lang } = useLang();
  const c = ABOUT_COPY[lang] || ABOUT_COPY.fr;
  const stats = [
    { v: '2016', l: c.founded },
    { v: '24', l: c.aircraft },
    { v: '38', l: 'Destinations' },
    { v: '92 %', l: c.ontime },
  ];
  return (
    <main className="mx-auto max-w-3xl px-4 pt-10" data-screen-label="About">
      <h1 className="text-3xl font-extrabold tracking-tight text-ink sm:text-4xl">{t('about.title')}</h1>
      <p className="mt-4 leading-relaxed text-muted">{c.intro}</p>
      <div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
        {stats.map(function (s) {
          return (
            <div key={s.l} className="rounded-xl border border-line bg-white p-4 text-center">
              <p className="text-2xl font-extrabold tabular-nums tracking-tight text-cobalt">{s.v}</p>
              <p className="mt-1 text-xs text-muted">{s.l}</p>
            </div>
          );
        })}
      </div>
      <h2 className="mt-10 text-xl font-bold tracking-tight text-ink">{c.sustTitle}</h2>
      <p className="mt-2 leading-relaxed text-muted">{c.sust}</p>
      <p className="mt-8 border-t border-line pt-6 text-sm italic text-muted">« {t('brand.tagline')} »</p>
    </main>
  );
}

Object.assign(window, { HomePage, CheckinPage, HelpPage, HelpBaggagePage, HelpRefundsPage, LoginPage, RegisterPage, AboutPage, FAQ_ITEMS });