// ============ Other pages: Aircraft, Visit, Support ============

function FactRow({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.55, marginBottom: 6 }}>{k}</div>
      <div style={{ fontFamily: "var(--serif-body)", fontSize: 16, lineHeight: 1.4 }}>{v}</div>
    </div>
  );
}

const DK_AIRCRAFT_SRC_NOTE_BASE = {
  padding: "12px 16px",
  background: "var(--paper-2)",
  borderLeft: "3px solid var(--accent)",
  fontFamily: "var(--serif-body)",
  fontSize: 14,
  lineHeight: 1.55,
  color: "var(--ink-2)",
  fontStyle: "italic",
};

function AircraftSrcLangNote({ children, style }) {
  return (
    <div role="note" style={{ ...DK_AIRCRAFT_SRC_NOTE_BASE, ...style }}>
      {children}
    </div>
  );
}

function AircraftPage({ lang }) {
  useReveal();
  const t = I18N[lang] || I18N.nl;
  const p = { ...I18N.nl.pages.aircraft, ...(t.pages.aircraft || {}) };
  const ui = { ...I18N.nl.aircraftPage, ...(t.aircraftPage || {}) };
  const C = { ...I18N.nl.common, ...(t.common || {}) };
  const cta = { ...I18N.nl.cta, ...(t.cta || {}) };
  const fleetUi = { ...I18N.nl.sections.fleet, ...(t.sections.fleet || {}) };
  const [selectedId, setSelectedId] = useState(() => {
    try {
      const focus = typeof window !== "undefined" && window.__dkAircraftFocus;
      if (focus && AIRCRAFT.some((a) => a.id === focus)) {
        window.__dkAircraftFocus = null;
        return focus;
      }
    } catch (_) {}
    return AIRCRAFT[0].id;
  });
  const selectedBase = AIRCRAFT.find((x) => x.id === selectedId) || AIRCRAFT[0];
  const selected = typeof aircraftForLang !== "undefined" ? aircraftForLang(selectedBase, lang) : selectedBase;
  const storyStillNl =
    lang &&
    lang !== "nl" &&
    typeof selectedBase.story === "string" &&
    typeof selected.story === "string" &&
    selected.story === selectedBase.story;
  const narrativeBanner = storyStillNl && typeof srcLangBannerText !== "undefined" ? srcLangBannerText(lang, "nl") : "";
  const fateStillNl =
    lang &&
    lang !== "nl" &&
    selected.fate &&
    typeof selectedBase.fate === "string" &&
    selected.fate === selectedBase.fate;
  const lossStillNl =
    lang &&
    lang !== "nl" &&
    selected.loss &&
    typeof selectedBase.loss === "string" &&
    selected.loss === selectedBase.loss;
  const fateBlockBanner =
    !storyStillNl &&
    (fateStillNl || lossStillNl) &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const baseGallery = selectedBase.gallery;
  const galleryStillNl =
    lang &&
    lang !== "nl" &&
    selected.gallery &&
    baseGallery &&
    selected.gallery.length > 0 &&
    selected.gallery.some((g, i) => {
      const b = baseGallery[i];
      return b && typeof g.caption === "string" && g.caption === b.caption;
    });
  const galleryBanner =
    !storyStillNl &&
    galleryStillNl &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const heroCaptionStillNl =
    lang &&
    lang !== "nl" &&
    selected.photo &&
    typeof selectedBase.photoCaption === "string" &&
    selectedBase.photoCaption.length > 0 &&
    typeof selected.photoCaption === "string" &&
    selected.photoCaption === selectedBase.photoCaption;
  const photoHeroBanner =
    !storyStillNl &&
    heroCaptionStillNl &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const subtitleStillNl =
    lang &&
    lang !== "nl" &&
    selected.subtitle &&
    selectedBase.subtitle &&
    selected.subtitle === selectedBase.subtitle;
  const subtitleBanner =
    !storyStillNl &&
    subtitleStillNl &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const roleStillNl =
    lang &&
    lang !== "nl" &&
    selected.role &&
    selectedBase.role &&
    selected.role === selectedBase.role;
  const crewStillNl =
    lang &&
    lang !== "nl" &&
    selected.crew &&
    selectedBase.crew &&
    selected.crew === selectedBase.crew;
  const unitsStillNl =
    lang &&
    lang !== "nl" &&
    selected.units &&
    selectedBase.units &&
    selected.units === selectedBase.units;
  const firstMissionStillNl =
    lang &&
    lang !== "nl" &&
    selected.firstMission &&
    selectedBase.firstMission &&
    selected.firstMission === selectedBase.firstMission;
  /** NL authoring strings; EN bundle does not localize `engines` yet — skip banner noise for `en`. */
  const enginesStillNl =
    lang &&
    (lang === "fr" || lang === "de") &&
    selected.engines &&
    selectedBase.engines &&
    selected.engines === selectedBase.engines;
  const specsInlineStillNl = roleStillNl || crewStillNl || enginesStillNl;
  const specsInlineBanner =
    !storyStillNl &&
    specsInlineStillNl &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const factsheetGridStillNl = unitsStillNl || firstMissionStillNl;
  const factsheetBanner =
    !storyStillNl &&
    factsheetGridStillNl &&
    typeof srcLangBannerText !== "undefined"
      ? srcLangBannerText(lang, "nl")
      : "";
  const Shape = SILHOUETTES[selected.shape] || SILHOUETTES.DC6;
  return (
    <div className="page">
      <section className="hero">
        <div className="shell">
          <div className="eyebrow reveal in" style={{ marginBottom: 20 }}>
            {p.eyebrowSmall}
          </div>
          <h1 className="hero-title reveal in" style={{ fontSize: "clamp(48px, 9vw, 140px)" }}>
            {p.title}<br />
            <span className="red">{p.em}</span>
          </h1>
          <p className="reveal in" style={{ maxWidth: 760, marginTop: 32, fontSize: 18, lineHeight: 1.65 }}>
            {p.lead1}
          </p>
          <p className="reveal in" style={{ maxWidth: 760, marginTop: 24, fontSize: 16, lineHeight: 1.65 }}>
            {p.lead2}
          </p>
          <p className="reveal in" style={{ maxWidth: 760, marginTop: 14, fontSize: 14, lineHeight: 1.6, opacity: 0.7 }}>
            {p.lead3}
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          {/* Big focus block for selected */}
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 40, marginBottom: 80, alignItems: "start" }}>
            <div className="blueprint-wrap" style={{ padding: selected.photo ? 0 : 40, minHeight: 400, display: "grid", placeItems: selected.photo ? "stretch" : "center", overflow: "hidden" }}>
              <span className="corner tl"></span><span className="corner tr"></span>
              <span className="corner bl"></span><span className="corner br"></span>
              {selected.photo ? (
                <img src={selected.photo} alt={selected.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: 400 }} />
              ) : (
                <div style={{ width: "100%" }}>
                  <Shape />
                </div>
              )}
              <div className="caption" style={{ position: "absolute", bottom: 16, left: 20, opacity: 0.7, color: selected.photo ? "var(--paper)" : undefined, background: selected.photo ? "rgba(14, 58, 107, 0.75)" : undefined, padding: selected.photo ? "4px 8px" : 0 }}>
                {selected.photoCaption || (ui.blueprintCaptionFallback || (I18N.nl.aircraftPage && I18N.nl.aircraftPage.blueprintCaptionFallback) || "PLAAT N° %s · SCHAAL 1:200").replace("%s", selected.id.toUpperCase())}
              </div>
              <div className="caption" style={{ position: "absolute", top: 16, right: 20, opacity: 0.7, color: selected.photo ? "var(--paper)" : undefined, background: selected.photo ? "rgba(14, 58, 107, 0.75)" : undefined, padding: selected.photo ? "4px 8px" : 0 }}>
                {selected.tail}
              </div>
            </div>
            <div>
              <div className="tag-row">
                <span className="tag">{selected.years}</span>
                <span className="tag">{selected.origin}</span>
                {selected.location && <span className="tag">{selected.location}</span>}
              </div>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: 72, lineHeight: 0.95, margin: "20px 0 6px" }}>
                {selected.name}
              </h2>
              {subtitleBanner ? (
                <AircraftSrcLangNote style={{ margin: "0 0 12px" }}>{subtitleBanner}</AircraftSrcLangNote>
              ) : null}
              <p style={{ fontStyle: "italic", fontSize: 20, opacity: 0.75, margin: "0 0 24px" }}>
                {selected.subtitle}
              </p>
              {narrativeBanner ? (
                <AircraftSrcLangNote style={{ margin: "0 0 16px" }}>{narrativeBanner}</AircraftSrcLangNote>
              ) : null}
              <p style={{ fontSize: 16, lineHeight: 1.65, margin: 0 }}>
                {selected.story}
              </p>
              {specsInlineBanner ? (
                <AircraftSrcLangNote style={{ margin: "20px 0 12px" }}>{specsInlineBanner}</AircraftSrcLangNote>
              ) : null}
              <div className="specs">
                {selected.role && <div className="spec"><div className="k">{C.role}</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--serif-body)" }}>{selected.role}</div></div>}
                {selected.crew && <div className="spec"><div className="k">{C.crew}</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--serif-body)" }}>{selected.crew}</div></div>}
                {selected.span && <div className="spec"><div className="k">{C.wingspan}</div><div className="v">{selected.span}</div></div>}
                {selected.range && <div className="spec"><div className="k">{C.range}</div><div className="v">{selected.range}</div></div>}
                {selected.speed && <div className="spec"><div className="k">{C.topSpeed}</div><div className="v">{selected.speed}</div></div>}
                {selected.engines && <div className="spec"><div className="k">{C.engines}</div><div className="v" style={{ fontSize: 13, fontFamily: "var(--serif-body)" }}>{selected.engines}</div></div>}
              </div>
            </div>
            {photoHeroBanner ? (
              <AircraftSrcLangNote style={{ gridColumn: "1 / -1" }}>{photoHeroBanner}</AircraftSrcLangNote>
            ) : null}
          </div>

          {/* Extended factsheet — appears when source data is available */}
          {(selected.length || selected.height || selected.mtow || selected.units || selected.cruise || selected.firstMission || selected.fate || selected.loss) && (
              <div className="reveal" style={{ marginBottom: 80, borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", padding: "40px 0" }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{C.specs}</div>
              {factsheetBanner ? (
                <AircraftSrcLangNote style={{ marginBottom: 20 }}>{factsheetBanner}</AircraftSrcLangNote>
              ) : null}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "28px 40px" }}>
                {selected.span && <FactRow k={C.wingspan} v={selected.span} />}
                {selected.length && <FactRow k={C.length} v={selected.length} />}
                {selected.height && <FactRow k={C.height} v={selected.height} />}
                {selected.engines && <FactRow k={C.engines} v={selected.engines} />}
                {selected.speed && <FactRow k={C.topSpeed} v={selected.speed} />}
                {selected.cruise && <FactRow k={C.cruise} v={selected.cruise} />}
                {selected.range && <FactRow k={C.range} v={selected.range} />}
                {selected.rangeFull && <FactRow k={C.rangeFull} v={selected.rangeFull} />}
                {selected.payload && <FactRow k={C.payload} v={selected.payload} />}
                {selected.mtow && <FactRow k={C.mtow} v={selected.mtow} />}
                {selected.crew && <FactRow k={C.capacity} v={selected.crew} />}
                {selected.units && <FactRow k={C.units} v={selected.units} />}
                {selected.tail && <FactRow k={C.registration} v={selected.tail} />}
                {selected.firstMission && <FactRow k={C.firstMission} v={selected.firstMission} />}
              </div>
              {(selected.fate || selected.loss) && (
                <div style={{ marginTop: 36, paddingTop: 28, borderTop: "1px solid var(--rule-soft)", display: "grid", gap: 14 }}>
                  {fateBlockBanner ? (
                    <AircraftSrcLangNote>{fateBlockBanner}</AircraftSrcLangNote>
                  ) : null}
                  {selected.fate && <p style={{ margin: 0, fontSize: 15, lineHeight: 1.7, fontStyle: "italic", opacity: 0.85 }}>{selected.fate}</p>}
                  {selected.loss && <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, fontFamily: "var(--mono)", letterSpacing: "0.04em", opacity: 0.75 }}>* {C.loss} — {selected.loss}</p>}
                </div>
              )}
            </div>
          )}

          {/* Photo gallery — appears when source provides multiple photos */}
          {selected.gallery && selected.gallery.length > 0 && (
            <div className="reveal" style={{ marginBottom: 80 }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>{C.gallery.toUpperCase()} · {selected.name.toUpperCase()}</div>
              {galleryBanner ? (
                <AircraftSrcLangNote style={{ marginBottom: 16 }}>{galleryBanner}</AircraftSrcLangNote>
              ) : null}
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(selected.gallery.length, 3)}, 1fr)`, gap: 8 }}>
                {selected.gallery.map((g, gi) => (
                  <figure key={gi} style={{ margin: 0 }}>
                    <div style={{ position: "relative", aspectRatio: "3/2", overflow: "hidden", border: "1px solid var(--ink)" }}>
                      <img src={g.src} alt={g.caption} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                    </div>
                    <figcaption style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.75 }}>
                      {g.caption}
                    </figcaption>
                  </figure>
                ))}
              </div>
            </div>
          )}

          {/* Conditional cockpit/detail photography */}
          {selected.id === "c119" && (
            <div className="reveal" style={{ marginBottom: 80 }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>{ui.c119DetailEyebrow}</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                <figure style={{ margin: 0 }}>
                  <div style={{ position: "relative", aspectRatio: "3/2", overflow: "hidden", border: "1px solid var(--ink)" }}>
                    <img src="assets/c119-cockpit-detail.jpg" alt={ui.c119CockpitAlt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  </div>
                  <figcaption style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.75 }}>
                    {ui.c119CockpitCaption}
                  </figcaption>
                </figure>
                <figure style={{ margin: 0 }}>
                  <div style={{ position: "relative", aspectRatio: "3/2", overflow: "hidden", border: "1px solid var(--ink)" }}>
                    <img src="assets/c119-radio-station.jpg" alt={ui.c119RadioAlt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  </div>
                  <figcaption style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.75 }}>
                    {ui.c119RadioCaption}
                  </figcaption>
                </figure>
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.7, opacity: 0.7, marginTop: 18, fontStyle: "italic", maxWidth: 720 }}>
                {ui.c119Note}
              </p>
            </div>
          )}

          <div className="eyebrow" style={{ marginBottom: 20 }}>{cta.browseCollection.toUpperCase()}</div>
          <div className="aircraft-grid catalog">
            {AIRCRAFT.map((a, i) => {
              const S = SILHOUETTES[a.shape] || SILHOUETTES.DC6;
              const disp = typeof aircraftForLang !== "undefined" ? aircraftForLang(a, lang) : a;
              const isSel = selectedId === a.id;
              return (
                <div
                  key={a.id}
                  className="aircraft-card reveal"
                  style={isSel ? { background: "var(--paper-3)" } : undefined}
                  onClick={() => {
                    setSelectedId(a.id);
                    window.scrollTo({ top: 0, behavior: "smooth" });
                  }}
                >
                  <div className="card-top">
                    <div className="card-idx">{fleetUi.cardIdxPrefix} {String(i + 1).padStart(2, "0")} · {disp.location || disp.origin}</div>
                    <div className="card-years">{a.years}</div>
                  </div>
                  <div className="blueprint" style={a.photo ? { padding: 0, overflow: "hidden", background: "#0a1c33" } : undefined}>
                    {a.photo ? (
                      <img src={a.photo} alt={a.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: 180 }} />
                    ) : (
                      <S />
                    )}
                  </div>
                  <div>
                    <h3 className="card-name">{a.name}</h3>
                    <p className="card-sub">{disp.subtitle}</p>
                  </div>
                  <div className="card-footer">
                    <span>{fleetUi.tailLabel} · {a.tail}</span>
                    <span>{isSel ? cta.nowViewing : cta.viewFile}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

function VisitPage({ lang }) {
  useReveal();
  const t = I18N[lang] || I18N.nl;
  const v0 = I18N.nl.pages.visit;
  const v = { ...v0, ...(t.pages.visit || {}) };
  const c = { ...I18N.nl.contactStandalone, ...(t.contactStandalone || {}) };
  const cN = I18N.nl.contactStandalone;
  const secEmail = c.secretariatEmail || cN.secretariatEmail;
  const get = (k, fb) => (v[k] != null ? v[k] : fb);
  const dayKeys = ["dayMon", "dayTue", "dayWed", "dayThu", "dayFri", "daySat", "daySun"];
  const dayNames = dayKeys.map((k) => get(k, ""));
  const rows = Array.isArray(v.hoursRows) ? v.hoursRows : [];
  const footLines = Array.isArray(v.hoursFootLines)
    ? v.hoursFootLines
    : (typeof v.weekdayClosed === "string" ? v.weekdayClosed.split(" · ") : []);
  const weekendSubj = encodeURIComponent(get("weekendMailSubject", v0.weekendMailSubject || "Aanvraag weekendbezoek"));
  const opt1p1 = v.opt1Part1;
  const cateringBold = v.cateringNoteBold;
  const mkHoursTime = (m) => (m === "open" ? get("openHours", v0.openHours || "10.00 — 17.00 uur") : m === "closed" ? v.closed : v.onRequest);

  return (
    <div className="page">
      <section className="hero">
        <div className="shell">
          <div className="eyebrow reveal in" style={{ marginBottom: 20 }}>
            {v.eyebrow}
          </div>
          <div className="visit-hero">
            <div className="reveal in">
              <h1 className="headline">
                {v.title}<br />
                <em>{v.em}</em>
              </h1>
              <p style={{ fontSize: 17, lineHeight: 1.65, marginTop: 32, maxWidth: 520 }}>
                {v.lead}
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, marginTop: 16, maxWidth: 520 }}>
                {v.daysPart1 != null ? (
                  <>
                    {v.daysPart1}
                    <b>{v.daysBold}</b>
                    {v.daysPart2}
                  </>
                ) : (
                  v.days
                )}
              </p>
              <div style={{ marginTop: 22, padding: "14px 18px", background: "var(--accent)", color: "var(--paper)", maxWidth: 520 }}>
                <div className="caption" style={{ color: "rgba(255,255,255,0.75)", marginBottom: 4 }}>{v.noticeTitle}</div>
                <div style={{ fontFamily: "var(--serif-body)", fontSize: 15, lineHeight: 1.5 }}>
                  {v.noticePart1 != null ? (
                    <>
                      {v.noticePart1}
                      <b>{v.noticeDate1}</b>
                      {v.noticePart2}
                      <b>{v.noticeDate2}</b>
                      {v.noticePart3}
                    </>
                  ) : (
                    v.noticeBody
                  )}
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <a href={`mailto:${secEmail}`} className="btn btn-primary">
                  {v.request}
                  <svg viewBox="0 0 12 12" fill="none"><path d="M 2 6 L 10 6 M 7 3 L 10 6 L 7 9" stroke="currentColor" strokeWidth="1.2" /></svg>
                </a>
                <a href={`mailto:${secEmail}?subject=${weekendSubj}`} className="btn btn-ghost">{v.weekendRequest}</a>
              </div>
            </div>
            <div className="hours-card reveal in">
              <h3>{v.hoursTitle}</h3>
              <div className="hours-list">
                {rows.map((row, i) => (
                  <div key={i} className={"hours-row" + (row.m !== "open" ? " closed" : "")}>
                    <span className="day">{dayNames[i]}</span>
                    <span className="time">{mkHoursTime(row.m)}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid rgba(241,233,216,0.15)", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.75, lineHeight: 1.7 }}>
                {footLines.map((line, i) => (
                  <span key={i}>
                    {line}
                    {i < footLines.length - 1 ? <br /> : null}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 36, padding: "20px 24px", background: "var(--paper-2)", borderLeft: "3px solid var(--accent)" }}>
            <p style={{ fontSize: 15, lineHeight: 1.65, margin: 0 }}>
              <b>{get("nbLabel", v0.nbLabel || "NB.")}</b>{" "}
              {v.nbWeekendBody != null ? v.nbWeekendBody : (v.nbWeekend || "").replace(/^\s*NB\.\s*/i, "")}
            </p>
          </div>

          <div className="reveal" style={{ marginTop: 24, padding: "32px 36px", background: "var(--paper-2)", border: "1px solid var(--rule-soft)" }}>
            {opt1p1 != null ? (
              <p style={{ fontSize: 16, lineHeight: 1.65, margin: 0 }}>
                {v.opt1Part1}
                <a href={`mailto:${secEmail}`} style={{ borderBottom: "1px solid var(--ink)" }}>{secEmail}</a>
                {v.opt1Part2}
                <b>{v.opt1Part3Bold}</b>
                {v.opt1Part4}
              </p>
            ) : (
              <p style={{ fontSize: 16, lineHeight: 1.65, margin: 0 }}>{v.opt1Body}</p>
            )}
            <ul style={{ fontSize: 15, lineHeight: 1.8, marginTop: 12 }}>
              <li>{v.opt1L1}</li>
              <li>{v.opt1L2}</li>
              <li>{v.opt1L3}</li>
              <li>{v.opt1L4}</li>
            </ul>
          </div>

          <div className="reveal" style={{ marginTop: 60, position: "relative", aspectRatio: "21/9", overflow: "hidden", border: "1px solid var(--ink)" }}>
            <img
              src="assets/museum-interior-vip-lounge.jpeg"
              alt={get("interiorAlt", v0.interiorAlt || v0.interiorCaption)}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
            <div style={{ position: "absolute", bottom: 16, left: 20, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--paper)", background: "rgba(14, 58, 107, 0.82)", padding: "6px 10px" }}>
              {v.interiorCaption}
            </div>
          </div>

          <div className="info-grid reveal" style={{ marginTop: 40 }}>
            <div className="info-cell">
              <h4>{v.addressTitle}</h4>
              <p>
                {c.addrLine1}<br />
                {c.addrLine2}<br />
                {c.addrLine3}<br />
                {c.countryLine}
              </p>
            </div>
            <div className="info-cell">
              <h4>{v.contactTitle}</h4>
              <p>
                <a href={`mailto:${c.secretariatEmail}`}>{c.secretariatEmail}</a><br />
                <a href={`tel:${String(c.phoneDisplay).replace(/[^\d+]/g, "")}`}>{c.phoneDisplay}</a>
              </p>
            </div>
            <div className="info-cell">
              <h4>{v.cafeTitle}</h4>
              <p>{v.cafeBody}</p>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 80 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{v.cateringTitle}</div>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginBottom: 24, maxWidth: 700 }}>
              {v.cateringIntro}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule-soft)", border: "1px solid var(--rule-soft)" }}>
              <div style={{ background: "var(--paper)", padding: "36px 30px" }}>
                <div className="caption" style={{ marginBottom: 14 }}>{get("brkSlot", v0.brkSlot || "09.30 — 12.00 uur")}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 32, lineHeight: 1, margin: "0 0 16px" }}>{v.breakfast}</h3>
                <ul style={{ fontSize: 15, lineHeight: 1.7, paddingLeft: 18, margin: 0 }}>
                  <li>{v.brkItem1}</li>
                  <li>{v.brkItem2}</li>
                </ul>
                <div className="meta" style={{ marginTop: 20 }}>{v.perPerson}</div>
              </div>
              <div style={{ background: "var(--paper)", padding: "36px 30px" }}>
                <div className="caption" style={{ marginBottom: 14 }}>{get("lnchSlot", v0.lnchSlot || "11.00 — 14.00 uur")}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 32, lineHeight: 1, margin: "0 0 16px" }}>{v.lunch}</h3>
                <ul style={{ fontSize: 15, lineHeight: 1.7, paddingLeft: 18, margin: 0 }}>
                  <li>{v.lnchItem1}</li>
                  <li>{v.lnchItem2}</li>
                </ul>
                <div className="meta" style={{ marginTop: 20 }}>{v.perPerson}</div>
              </div>
              <div style={{ background: "var(--paper)", padding: "36px 30px" }}>
                <div className="caption" style={{ marginBottom: 14 }}>{get("teaSlot", v0.teaSlot || "14.00 — 16.30 uur")}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 32, lineHeight: 1, margin: "0 0 16px" }}>{v.afternoonTea}</h3>
                <ul style={{ fontSize: 15, lineHeight: 1.7, paddingLeft: 18, margin: 0 }}>
                  <li>{v.teaItem1}</li>
                  <li>{v.teaItem2}</li>
                </ul>
                <div className="meta" style={{ marginTop: 20 }}>{v.perPerson}</div>
              </div>
            </div>
            <div style={{ marginTop: 24, padding: "18px 22px", background: "var(--paper-2)", borderLeft: "3px solid var(--red)" }}>
              <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}>
                {cateringBold != null && v.cateringNoteBody != null ? (
                  <>
                    <b>{cateringBold}</b>{" "}{v.cateringNoteBody}
                  </>
                ) : (
                  v.cateringNote
                )}
              </p>
            </div>
          </div>

          <div className="map-frame reveal" style={{ marginTop: 80 }}>
            <svg viewBox="0 0 800 350" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="mapgrid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(241,233,216,0.08)" strokeWidth="1" />
                </pattern>
              </defs>
              <rect width="800" height="350" fill="var(--ink)" />
              <rect width="800" height="350" fill="url(#mapgrid)" />
              <g>
                <path d="M 50 180 L 750 180" stroke="rgba(241,233,216,0.6)" strokeWidth="30" />
                <path d="M 50 180 L 750 180" stroke="rgba(241,233,216,0.4)" strokeWidth="26" strokeDasharray="18 22" />
                <path d="M 50 180 L 750 180" stroke="rgba(241,233,216,0.7)" strokeWidth="1" />
              </g>
              <path d="M 200 180 Q 260 180 260 140 L 260 100" stroke="rgba(241,233,216,0.35)" strokeWidth="12" fill="none" />
              <g>
                <rect x="220" y="70" width="80" height="32" fill="rgba(241,233,216,0.9)" />
                <rect x="310" y="70" width="80" height="32" fill="rgba(241,233,216,0.25)" />
                <rect x="400" y="70" width="80" height="32" fill="rgba(241,233,216,0.25)" />
              </g>
              <g>
                <line x1="260" y1="70" x2="260" y2="240" stroke="var(--red)" strokeWidth="1" strokeDasharray="3 4" />
                <circle cx="260" cy="86" r="10" fill="var(--red)" />
                <circle cx="260" cy="86" r="18" fill="none" stroke="var(--red)" strokeWidth="1" opacity="0.6" />
                <text x="280" y="60" fill="var(--paper)" fontFamily="var(--mono)" fontSize="11" letterSpacing="2">{get("mapMuseum", v0.mapMuseum || "DAKOTA MUSEUM · KWARTIER GROENVELD")}</text>
              </g>
              <text x="500" y="130" fill="rgba(241,233,216,0.5)" fontFamily="var(--mono)" fontSize="10" letterSpacing="2">{get("mapFlightLine", v0.mapFlightLine || "15 W · ACTIEVE VLIEGBAAN")}</text>
              <text x="400" y="170" fill="rgba(241,233,216,0.8)" fontFamily="var(--mono)" fontSize="10" letterSpacing="3">{get("mapRwy", v0.mapRwy || "BAAN 25L / 07R · 2988 M")}</text>
              <text x="30" y="330" fill="rgba(241,233,216,0.4)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2">{get("mapCoords", v0.mapCoords || "50°54'N · 4°29'E · MELSBROEK · EBMB")}</text>
              <text x="700" y="330" fill="rgba(241,233,216,0.4)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2" textAnchor="end">{get("mapScale", v0.mapScale || "SCHAAL 1:6000")}</text>
            </svg>
          </div>
        </div>
      </section>
    </div>
  );
}

function SupportPage({ lang }) {
  useReveal();
  const t = I18N[lang] || I18N.nl;
  const s0 = I18N.nl.pages.support;
  const s = { ...s0, ...(t.pages.support || {}) };
  const cs = { ...I18N.nl.contactStandalone, ...(t.contactStandalone || {}) };
  const secEmail = cs.secretariatEmail;
  const num = (k, d) => (s[k] != null ? s[k] : d);
  const [tier, setTier] = useState(50);
  const tiers = [
    { v: 25, label: s.tierFriend },
    { v: 50, label: s.tierSupporter },
    { v: 150, label: s.tierPatron },
    { v: 500, label: s.tierBenefactor },
  ];
  const c47L = "€ " + num("c47RaisedNum", "112,400") + " " + s.raised;
  const c47R = s.goal + " € " + num("c47GoalNum", "180,000") + " · " + num("c47Pct", "62") + "%";
  const c119L = "€ " + num("c119RaisedNum", "198,000") + " " + s.raised;
  const c119R = s.goal + " € " + num("c119GoalNum", "240,000") + " · " + num("c119Pct", "82") + "%";

  return (
    <div className="page">
      <section className="hero">
        <div className="shell">
          <div className="eyebrow reveal in" style={{ marginBottom: 20 }}>
            {s.eyebrow}
          </div>
          <h1 className="hero-title reveal in" style={{ fontSize: "clamp(48px, 9vw, 140px)" }}>
            {s.title}<br />
            <span className="red">{s.em}</span>
          </h1>
          <p className="reveal in" style={{ maxWidth: 700, marginTop: 32, fontSize: 17, lineHeight: 1.65 }}>
            {s.lead}
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="shell">
          <div className="reveal" style={{ background: "var(--paper-2)", padding: "40px 44px", marginBottom: 60 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{s.bankTitle}</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
              <div>
                <div className="meta">{s.bankHolder}</div>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 24, marginTop: 6 }}>DAKOTA vzw</div>
              </div>
              <div>
                <div className="meta">{s.bankIban || "IBAN"}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 18, marginTop: 6, letterSpacing: "0.08em" }}>BE12 0682 4158 9374</div>
                <div className="meta" style={{ marginTop: 10 }}>{s.bankBic || "BIC · GKCCBEBB"}</div>
              </div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 20, opacity: 0.8 }}>
              {s.bankNote}
            </p>
          </div>

          <div className="reveal" style={{ marginTop: 60, background: "var(--paper-2)", padding: "50px 44px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 48, alignItems: "start" }}>
              <div>
                <div className="eyebrow">{s.memTitle}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(32px, 4vw, 50px)", margin: "12px 0 20px", lineHeight: 1 }}>
                  {s.memHead1} <em style={{ color: "var(--red)", fontStyle: "italic" }}>{s.memHead2}</em>
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, opacity: 0.85 }}>{s.memBody}</p>
              </div>
              <div>
                <div className="donate-tiers">
                  {tiers.map((td) => (
                    <div key={td.v} className={"tier" + (tier === td.v ? " sel" : "")} onClick={() => setTier(td.v)}>
                      <div className="amount">€{td.v}</div>
                      <div className="label">{td.label}</div>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 24, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                  <button className="btn btn-primary">
                    {s.donate} €{tier}
                    <svg viewBox="0 0 12 12" fill="none"><path d="M 2 6 L 10 6 M 7 3 L 10 6 L 7 9" stroke="currentColor" strokeWidth="1.2" /></svg>
                  </button>
                  <div className="meta">{s.secure}</div>
                </div>
              </div>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 80, textAlign: "center", padding: "60px 0" }}>
            <div className="eyebrow">{s.volTitle}</div>
            <h3 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(36px, 5vw, 72px)", lineHeight: 1, margin: "20px auto 24px", maxWidth: 900 }}>
              {s.volHead1}<br />
              <em style={{ color: "var(--red)", fontStyle: "italic" }}>{s.volHead2}</em>
            </h3>
            <p style={{ maxWidth: 620, margin: "0 auto 30px", fontSize: 15, lineHeight: 1.6, opacity: 0.85 }}>
              {s.volBody}{" "}
              <a href={`mailto:${secEmail}`} style={{ borderBottom: "1px solid var(--ink)" }}>{secEmail}</a>.
            </p>
            <button className="btn btn-ghost">{s.volBtn}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AircraftPage, VisitPage, SupportPage });