// Detail, booking, confirmation screens.

function Detail({ lang, search, go, theme, parking, days }) {
  const t = COPY[lang];
  if (!parking) return <div style={{ padding: 60 }}>Not found</div>;
  const pricing = computePricing(parking, search, days);
  const total = pricing.total;
  const occPct = Math.round(pricing.occupancy * 100);
  const saison = seasonLabel(pricing.month, lang);
  const occText = occupancyLabel(pricing.occupancy, lang);
  const surchargePct = Math.round((pricing.perDay / pricing.base - 1) * 100);

  return (
    <div style={{ background: theme.subtle, minHeight: "100%" }}>
      <div style={{ padding: "24px 56px" }}>
        <button onClick={() => go("results")} style={{
          border: "none", background: "transparent", color: theme.inkMuted, fontSize: 13, cursor: "pointer",
          display: "flex", alignItems: "center", gap: 6, padding: 0, marginBottom: 16,
        }}>
          <Icon name="chevron" size={14} /> <span style={{ transform: "rotate(180deg)", display: "inline-block" }}/>
          {lang === "fr" ? "Retour aux résultats" : "Back to results"}
        </button>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 24, alignItems: "start" }}>
          <div>
            {/* Gallery */}
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "220px 220px", gap: 8, marginBottom: 24 }}>
              <div style={{ gridRow: "span 2" }}><PlaceholderImage seed={parking.name.length} label="main photo" height="100%" rounded={14}/></div>
              <div><PlaceholderImage seed={parking.name.length + 3} label="entrance" height="100%" rounded={14}/></div>
              <div><PlaceholderImage seed={parking.name.length + 5} label="aisle" height="100%" rounded={14}/></div>
              <div><PlaceholderImage seed={parking.name.length + 7} label="shuttle" height="100%" rounded={14}/></div>
              <div><PlaceholderImage seed={parking.name.length + 11} label="reception" height="100%" rounded={14}/></div>
            </div>

            {/* Header */}
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 10 }}>
              {parking.badges.map(b => <BadgeFor key={b} kind={b} lang={lang}/>)}
            </div>
            <h1 style={{ fontFamily: theme.fontDisplay, fontSize: 34, fontWeight: 700, color: theme.ink, margin: "0 0 8px", letterSpacing: -0.8 }}>
              {parking.name}
            </h1>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: theme.inkMuted, marginBottom: 28 }}>
              <Stars value={parking.rating}/>
              <span><b style={{ color: theme.ink }}>{parking.rating}</b> · {parking.reviews.toLocaleString(lang)} {t.reviewsCount}</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span style={{ display: "flex", alignItems: "center", gap: 4 }}><Icon name="pin" size={14}/>{parking.address}</span>
            </div>

            {/* About */}
            <Block title={t.about} theme={theme}>
              <p style={{ fontSize: 15, color: theme.ink, lineHeight: 1.6, margin: 0 }}>
                {lang === "fr"
                  ? `Parking ${parking.typeLabel.fr.toLowerCase()} situé à ${parking.distanceKm} km de l'aéroport ${parking.airport === "CDG" ? "Paris-Charles de Gaulle" : "Paris-Orly"}. ${parking.shuttleMin > 0 ? `Une navette gratuite vous dépose aux terminaux en ${parking.shuttleMin} minutes, 24h/24 et 7j/7.` : "Service voiturier directement au terminal."} Surveillance vidéo continue, éclairage LED, accès sécurisé par badge.`
                  : `${parking.typeLabel.en} parking ${parking.distanceKm} km from ${parking.airport === "CDG" ? "Paris-Charles de Gaulle" : "Paris-Orly"} airport. ${parking.shuttleMin > 0 ? `A free shuttle takes you to the terminals in ${parking.shuttleMin} minutes, 24/7.` : "Valet service directly at the terminal."} Continuous video monitoring, LED lighting, badge-secured access.`}
              </p>
            </Block>

            {/* Services */}
            <Block title={t.servicesTitle} theme={theme}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
                {parking.services.map(s => (
                  <div key={s} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: theme.subtle, borderRadius: 10 }}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: theme.primaryBg, color: theme.primary, display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <Icon name={s} size={16}/>
                    </div>
                    <span style={{ fontSize: 14, fontWeight: 500, color: theme.ink }}>{SERVICE_LABELS[lang][s]}</span>
                  </div>
                ))}
              </div>
            </Block>

            {/* Location */}
            <Block title={t.location} theme={theme}>
              <div style={{ position: "relative", height: 260, background: "oklch(0.95 0.015 220)", borderRadius: 12, overflow: "hidden" }}>
                <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 100 100" preserveAspectRatio="none">
                  <defs>
                    <pattern id="grid2" width="8" height="8" patternUnits="userSpaceOnUse">
                      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="oklch(0.88 0.02 220)" strokeWidth="0.2"/>
                    </pattern>
                  </defs>
                  <rect width="100" height="100" fill="url(#grid2)"/>
                  <path d="M-5 50 C 30 30, 70 70, 105 40" stroke="oklch(0.83 0.04 220)" strokeWidth="1.6" fill="none"/>
                </svg>
                <div style={{ position: "absolute", left: `${parking.coords.x}%`, top: `${parking.coords.y}%`, transform: "translate(-50%, -100%)",
                  background: theme.primary, color: "#fff", padding: "6px 10px", borderRadius: 10, fontSize: 12, fontWeight: 700 }}>
                  {parking.name}
                </div>
                <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
                  background: theme.ink, color: theme.bg, padding: "5px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, display: "flex", gap: 6, alignItems: "center" }}>
                  <Icon name="plane" size={12}/> {parking.airport}
                </div>
              </div>
              <div style={{ fontSize: 14, color: theme.inkMuted, marginTop: 10 }}>
                <Icon name="pin" size={13}/> {parking.address}
              </div>
            </Block>
          </div>

          {/* Booking summary */}
          <aside style={{ position: "sticky", top: 90, background: theme.bg, border: "1px solid " + theme.border, borderRadius: 16, padding: 22 }}>
            <div style={{ fontSize: 12, color: theme.inkMuted, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, marginBottom: 8 }}>
              {days} {t.days}
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
              <span style={{ fontFamily: theme.fontDisplay, fontSize: 36, fontWeight: 700, color: theme.ink, letterSpacing: -1 }}>€{total.toFixed(2)}</span>
            </div>
            <div style={{ fontSize: 13, color: theme.inkMuted, marginBottom: 14 }}>
              €{pricing.perDay.toFixed(2)} {t.perDay}
              {surchargePct > 0 && <span style={{ marginLeft: 6, color: "oklch(0.55 0.17 30)", fontWeight: 600 }}>+{surchargePct}%</span>}
              {surchargePct < 0 && <span style={{ marginLeft: 6, color: "oklch(0.5 0.14 150)", fontWeight: 600 }}>{surchargePct}%</span>}
            </div>

            {/* Dynamic pricing explainer */}
            <div style={{ background: theme.subtle, border: "1px solid " + theme.border, borderRadius: 10, padding: 12, marginBottom: 16, fontSize: 12 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <span style={{ color: theme.inkMuted, fontWeight: 600 }}>{lang === "fr" ? "Pourquoi ce prix ?" : "Why this price?"}</span>
                <span style={{ color: theme.inkMuted }}>{lang === "fr" ? `base €${pricing.base.toFixed(2)}` : `base €${pricing.base.toFixed(2)}`}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, marginBottom: 6 }}>
                <span style={{ color: theme.ink }}>{saison}</span>
                <span style={{ color: theme.inkMuted }}>×{pricing.season.toFixed(2)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span style={{ color: theme.ink }}>{occText} · {occPct}%</span>
                <span style={{ color: theme.inkMuted }}>×{pricing.occMult.toFixed(2)}</span>
              </div>
              {/* Occupancy bar */}
              <div style={{ height: 5, background: theme.border, borderRadius: 3, overflow: "hidden" }}>
                <div style={{
                  width: `${occPct}%`, height: "100%",
                  background: pricing.occupancy >= 0.85 ? "oklch(0.65 0.17 30)" : pricing.occupancy >= 0.7 ? "oklch(0.75 0.16 70)" : "oklch(0.68 0.14 150)",
                }}/>
              </div>
            </div>

            <div style={{ display: "grid", gap: 10, padding: "14px 0", borderTop: "1px solid " + theme.border, borderBottom: "1px solid " + theme.border }}>
              <KV k={t.from} v={`${fmtDate(search.from, lang)} · ${search.fromTime}`} theme={theme}/>
              <KV k={t.to} v={`${fmtDate(search.to, lang)} · ${search.toTime}`} theme={theme}/>
              <KV k={t.airport} v={parking.airport === "CDG" ? "Paris-CDG" : "Paris-Orly"} theme={theme}/>
            </div>

            <button onClick={() => go("booking")} style={{
              width: "100%", background: theme.primary, color: "#fff", border: "none", borderRadius: 12,
              padding: "14px", fontSize: 15, fontWeight: 700, cursor: "pointer", marginTop: 16,
              display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
            }}>
              {t.book} <Icon name="arrow" size={16}/>
            </button>
            <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: theme.inkMuted, marginTop: 12, justifyContent: "center" }}>
              <Icon name="shield" size={13}/> {lang === "fr" ? "Paiement 100% sécurisé" : "100% secure payment"}
            </div>
          </aside>
        </div>
      </div>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function Block({ title, children, theme }) {
  return (
    <section style={{ background: "#fff", border: "1px solid " + theme.border, borderRadius: 16, padding: 22, marginBottom: 16 }}>
      <h3 style={{ fontFamily: theme.fontDisplay, fontSize: 18, fontWeight: 700, color: theme.ink, margin: "0 0 14px", letterSpacing: -0.3 }}>{title}</h3>
      {children}
    </section>
  );
}

function KV({ k, v, theme }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, fontSize: 13, alignItems: "start", lineHeight: 1.4 }}>
      <span style={{ color: theme.inkMuted }}>{k}</span>
      <span style={{ color: theme.ink, fontWeight: 600, textAlign: "right" }}>{v}</span>
    </div>
  );
}

function fmtDate(d, lang) {
  if (!d) return "";
  const date = new Date(d);
  return date.toLocaleDateString(lang === "fr" ? "fr-FR" : "en-GB", { day: "2-digit", month: "short", year: "numeric" });
}

// --- BOOKING ---
function Booking({ lang, search, go, theme, parking, days, form, setForm, extras, setExtras, onConfirm }) {
  const t = COPY[lang];
  if (!parking) return null;
  const pricing = computePricing(parking, search, days);
  const extrasTotal = EXTRAS[lang].filter(e => extras[e.id]).reduce((s, e) => s + e.price, 0);
  const total = pricing.total + extrasTotal;

  const canSubmit = form.firstName && form.lastName && form.email && form.plate && form.card && form.expiry && form.cvc;

  return (
    <div style={{ background: theme.subtle, minHeight: "100%" }}>
      <div style={{ padding: "24px 56px" }}>
        <button onClick={() => go("detail", parking.id)} style={{
          border: "none", background: "transparent", color: theme.inkMuted, fontSize: 13, cursor: "pointer",
          display: "flex", alignItems: "center", gap: 6, padding: 0, marginBottom: 16,
        }}>‹ {lang === "fr" ? "Retour" : "Back"}</button>

        <h1 style={{ fontFamily: theme.fontDisplay, fontSize: 28, fontWeight: 700, color: theme.ink, margin: "0 0 24px", letterSpacing: -0.6 }}>
          {t.bookingTitle}
        </h1>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 24, alignItems: "start" }}>
          <div>
            <Block title={t.contact} theme={theme}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label={t.firstName} value={form.firstName} onChange={(v) => setForm({ ...form, firstName: v })} theme={theme}/>
                <Field label={t.lastName} value={form.lastName} onChange={(v) => setForm({ ...form, lastName: v })} theme={theme}/>
                <Field label={t.email} value={form.email} type="email" onChange={(v) => setForm({ ...form, email: v })} theme={theme}/>
                <Field label={t.phone} value={form.phone} onChange={(v) => setForm({ ...form, phone: v })} theme={theme}/>
              </div>
            </Block>

            <Block title={t.vehicle} theme={theme}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label={t.plate} value={form.plate} onChange={(v) => setForm({ ...form, plate: v.toUpperCase() })} theme={theme} placeholder="AB-123-CD"/>
                <Field label={t.model} value={form.model} onChange={(v) => setForm({ ...form, model: v })} theme={theme} placeholder="Peugeot 308"/>
                <Field label={t.flight} value={form.flight} onChange={(v) => setForm({ ...form, flight: v })} theme={theme} placeholder="AF1234"/>
              </div>
            </Block>

            <Block title={t.extras} theme={theme}>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {EXTRAS[lang].map(ex => (
                  <label key={ex.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                    border: "1px solid " + (extras[ex.id] ? theme.primary : theme.border),
                    background: extras[ex.id] ? theme.primaryBg : theme.bg,
                    borderRadius: 10, padding: "12px 14px", cursor: "pointer", transition: "all .15s ease" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <span style={{ width: 20, height: 20, borderRadius: 6, border: "1.5px solid " + (extras[ex.id] ? theme.primary : theme.border),
                        background: extras[ex.id] ? theme.primary : theme.bg,
                        display: "flex", alignItems: "center", justifyContent: "center" }}>
                        {extras[ex.id] && <Icon name="check" size={12} color="#fff" stroke={2.5}/>}
                      </span>
                      <span style={{ fontSize: 14, fontWeight: 500, color: theme.ink }}>{ex.label}</span>
                    </div>
                    <span style={{ fontSize: 14, fontWeight: 700, color: theme.ink }}>+ €{ex.price}</span>
                    <input type="checkbox" checked={!!extras[ex.id]} onChange={(e) => setExtras({ ...extras, [ex.id]: e.target.checked })} style={{ display: "none" }}/>
                  </label>
                ))}
              </div>
            </Block>

            <Block title={t.payment} theme={theme}>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "10px 14px", marginBottom: 14,
                background: "linear-gradient(135deg, oklch(0.97 0.02 280), oklch(0.98 0.01 260))",
                border: "1px solid " + theme.border, borderRadius: 10,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <Icon name="shield" size={16} color="oklch(0.5 0.18 280)"/>
                  <span style={{ fontSize: 13, color: theme.ink, fontWeight: 500 }}>
                    {lang === "fr" ? "Paiement sécurisé traité par" : "Secure payment processed by"}
                  </span>
                </div>
                <span style={{
                  fontFamily: "ui-sans-serif, system-ui", fontSize: 14, fontWeight: 800,
                  color: "oklch(0.45 0.2 275)", letterSpacing: -0.3,
                  background: "#fff", padding: "4px 10px", borderRadius: 6,
                  border: "1px solid " + theme.border,
                }}>stripe</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 12 }}>
                <Field label={t.cardNumber} value={form.card} onChange={(v) => setForm({ ...form, card: v })} theme={theme} placeholder="4242 4242 4242 4242"/>
                <Field label={t.cardExpiry} value={form.expiry} onChange={(v) => setForm({ ...form, expiry: v })} theme={theme} placeholder="09/28"/>
                <Field label={t.cardCvc} value={form.cvc} onChange={(v) => setForm({ ...form, cvc: v })} theme={theme} placeholder="123"/>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: theme.inkMuted, marginTop: 12 }}>
                <Icon name="shield" size={13}/> {lang === "fr" ? "Vos données sont chiffrées par Stripe et protégées par 3D Secure." : "Your data is encrypted by Stripe and protected by 3D Secure."}
              </div>
            </Block>
          </div>

          <aside style={{ position: "sticky", top: 90, background: theme.bg, border: "1px solid " + theme.border, borderRadius: 16, padding: 22 }}>
            <div style={{ fontSize: 11, color: theme.inkMuted, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 700, marginBottom: 10 }}>
              {t.summary}
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 14 }}>
              <div style={{ width: 56, height: 56, borderRadius: 10, overflow: "hidden", flexShrink: 0 }}>
                <PlaceholderImage seed={parking.name.length} label="" height={56} rounded={10}/>
              </div>
              <div>
                <div style={{ fontFamily: theme.fontDisplay, fontSize: 15, fontWeight: 600, color: theme.ink, lineHeight: 1.2 }}>{parking.name}</div>
                <div style={{ fontSize: 12, color: theme.inkMuted, marginTop: 2 }}>{parking.airport === "CDG" ? "Paris-CDG" : "Paris-Orly"}</div>
              </div>
            </div>

            <div style={{ display: "grid", gap: 10, padding: "14px 0", borderTop: "1px solid " + theme.border }}>
              <KV k={t.from} v={`${fmtDate(search.from, lang)}`} theme={theme}/>
              <KV k={t.to} v={`${fmtDate(search.to, lang)}`} theme={theme}/>
              <KV k={`${days} × €${pricing.perDay.toFixed(2)}`} v={`€${pricing.total.toFixed(2)}`} theme={theme}/>
              {pricing.perDay !== pricing.base && (
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, fontSize: 11, alignItems: "start", lineHeight: 1.4, color: theme.inkMuted }}>
                  <span>{seasonLabel(pricing.month, lang)} · {occupancyLabel(pricing.occupancy, lang)}</span>
                  <span style={{ textAlign: "right" }}>base €{pricing.base.toFixed(2)} × {(pricing.season * pricing.occMult * pricing.wMult).toFixed(2)}</span>
                </div>
              )}
              {EXTRAS[lang].filter(e => extras[e.id]).map(e => (
                <KV key={e.id} k={e.label} v={`€${e.price.toFixed(2)}`} theme={theme}/>
              ))}
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "14px 0", borderTop: "1px solid " + theme.border }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: theme.ink }}>{t.total}</span>
              <span style={{ fontFamily: theme.fontDisplay, fontSize: 28, fontWeight: 700, color: theme.ink, letterSpacing: -0.6 }}>€{total.toFixed(2)}</span>
            </div>

            <button disabled={!canSubmit} onClick={onConfirm} style={{
              width: "100%", background: canSubmit ? theme.primary : theme.border, color: "#fff", border: "none", borderRadius: 12,
              padding: "14px", fontSize: 15, fontWeight: 700, cursor: canSubmit ? "pointer" : "not-allowed", marginTop: 4,
              display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
            }}>
              {t.payNow}
            </button>
          </aside>
        </div>
      </div>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", theme, placeholder = "" }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: theme.inkMuted }}>{label}</span>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{
        border: "1px solid " + theme.border, borderRadius: 10, padding: "11px 13px",
        fontFamily: "inherit", fontSize: 14, color: theme.ink, outline: "none",
        background: theme.bg, transition: "border .15s ease",
      }}
      onFocus={(e) => e.target.style.borderColor = theme.primary}
      onBlur={(e) => e.target.style.borderColor = theme.border}
      />
    </label>
  );
}

// --- CONFIRMATION ---
function Confirmation({ lang, search, theme, parking, days, form, ref_, go }) {
  const t = COPY[lang];
  return (
    <div style={{ background: theme.subtle, minHeight: "100%" }}>
      <div style={{ padding: "56px 56px 40px", maxWidth: 780, margin: "0 auto" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", marginBottom: 32 }}>
          <div style={{
            width: 72, height: 72, borderRadius: "50%",
            background: "oklch(0.94 0.07 150)", color: "oklch(0.45 0.15 150)",
            display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18,
          }}>
            <Icon name="check" size={34} stroke={2.5}/>
          </div>
          <h1 style={{ fontFamily: theme.fontDisplay, fontSize: 36, fontWeight: 700, color: theme.ink, margin: "0 0 10px", letterSpacing: -0.8 }}>
            {t.confirmTitle}
          </h1>
          <p style={{ fontSize: 16, color: theme.inkMuted, margin: 0 }}>
            {t.confirmSub}{form.email && ` → ${form.email}`}
          </p>
        </div>

        <div style={{ background: theme.bg, border: "1px solid " + theme.border, borderRadius: 18, padding: 28, display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: theme.inkMuted, letterSpacing: 0.6, textTransform: "uppercase", marginBottom: 8 }}>
              {t.reference}
            </div>
            <div style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 22, fontWeight: 700, color: theme.ink, marginBottom: 18 }}>
              {ref_}
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              <KV k={parking?.name || ""} v={parking?.airport === "CDG" ? "Paris-CDG" : "Paris-Orly"} theme={theme}/>
              <KV k={t.from} v={`${fmtDate(search.from, lang)} · ${search.fromTime}`} theme={theme}/>
              <KV k={t.to} v={`${fmtDate(search.to, lang)} · ${search.toTime}`} theme={theme}/>
              <KV k={t.plate} v={form.plate || "—"} theme={theme}/>
            </div>
          </div>
          <div style={{
            width: 160, height: 160, padding: 8, background: "#fff",
            border: "1px solid " + theme.border, borderRadius: 12,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon name="qr" size={140} color={theme.ink}/>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, marginTop: 24, justifyContent: "center" }}>
          <button onClick={() => go("home")} style={{
            background: theme.ink, color: theme.bg, border: "none", borderRadius: 12,
            padding: "12px 22px", fontSize: 14, fontWeight: 600, cursor: "pointer",
          }}>{t.backHome}</button>
          <button style={{
            background: theme.bg, color: theme.ink, border: "1px solid " + theme.border, borderRadius: 12,
            padding: "12px 22px", fontSize: 14, fontWeight: 600, cursor: "pointer",
          }}>{lang === "fr" ? "Télécharger le PDF" : "Download PDF"}</button>
        </div>
      </div>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

Object.assign(window, { Detail, Booking, Confirmation });