// ============ Extra pages matching the real site ============
// These mirror dakota15wing.be verbatim for content while reusing the redesign styling.
// NL is the canonical I18N bundle (fallback whenever `lang` is missing or unknown).
// Page-level objects in this file use `{ ...I18N.nl.*, ...locale.* }` (or satellite `*_I18N`) so missing keys fall back to Dutch.

function i18nAt(lang) {
  return I18N[lang] || I18N.nl;
}

/** NL-first merge for `I18N[lang].pages.*` hero chrome (missing `pages` on locale-safe). */
function pagesFor(lang, pageKey) {
  const nl = (I18N.nl.pages && I18N.nl.pages[pageKey]) || {};
  const loc = ((I18N[lang] || I18N.nl).pages || {})[pageKey] || {};
  return { ...nl, ...loc };
}

/** NL-first merge for `I18N[lang].landing` (slider, mandate, etc.). */
function landingFor(lang) {
  const nl = I18N.nl.landing || {};
  const loc = ((I18N[lang] || I18N.nl).landing || {});
  return { ...nl, ...loc };
}

/** NL-first merge for contact blocks (address, labels, opening hours). */
function contactFor(lang) {
  const nl = I18N.nl.contactStandalone || {};
  const loc = ((I18N[lang] || I18N.nl).contactStandalone || {});
  return { ...nl, ...loc };
}

/** NL-first merge for global CTAs (e.g. landing “to home”). */
function ctaFor(lang) {
  const nl = I18N.nl.cta || {};
  const loc = ((I18N[lang] || I18N.nl).cta || {});
  return { ...nl, ...loc };
}

/** NL-first merge for top-level keys (`magazineStandalone`, `missionsStandalone`, …). */
function standaloneFor(lang, key) {
  const nl = I18N.nl[key] || {};
  const loc = (I18N[lang] || I18N.nl)[key] || {};
  return { ...nl, ...loc };
}

// ============ Landing page (separate from Home) ============
// Mirrors the structure of dakota15wing.be's root landing: a 4-block hero
// slider, the C-119 cockpit feature, the Seppe Verbeeck book block, the mandate
// copy (localized per language), and the contact strip.

// ============ Facebook page embeds (side-by-side, auto-refresh) ============
function FacebookFeeds({ lang }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 5 * 60 * 1000);
    return () => clearInterval(id);
  }, []);
  const headings = {
    nl: "Volg ons live op Facebook",
    fr: "Suivez-nous en direct sur Facebook",
    de: "Folgen Sie uns live auf Facebook",
    en: "Follow us live on Facebook",
  };
  const subs = {
    nl: "De laatste berichten van het 15 Wing Air Transport en VZW Dakota.",
    fr: "Les dernières publications du 15 Wing Air Transport et de VZW Dakota.",
    de: "Die neuesten Beiträge vom 15 Wing Air Transport und VZW Dakota.",
    en: "The latest posts from 15 Wing Air Transport and VZW Dakota.",
  };
  const heading = headings[lang] || headings.nl;
  const sub = subs[lang] || subs.nl;
  const localeMap = { nl: "nl_BE", fr: "fr_FR", de: "de_DE", en: "en_GB" };
  const fbLocale = localeMap[lang] || "nl_BE";
  const buildSrc = (pageUrl) => {
    const params = new URLSearchParams({
      href: pageUrl,
      tabs: "timeline",
      width: "500",
      height: "700",
      small_header: "false",
      adapt_container_width: "true",
      hide_cover: "false",
      show_facepile: "true",
      locale: fbLocale,
    });
    return `https://www.facebook.com/plugins/page.php?${params.toString()}`;
  };
  const feeds = [
    { title: "15 Wing Air Transport", url: "https://www.facebook.com/15wingairtransport/" },
    { title: "VZW Dakota", url: "https://www.facebook.com/Vzw-Dakota-100064722187279/" },
  ];
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule-soft)", background: "var(--paper-2)" }}>
      <div className="shell">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="eyebrow" style={{ color: "var(--accent)" }}>Facebook</div>
          <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(30px, 3.6vw, 46px)", lineHeight: 1.05, margin: "12px 0 10px" }}>
            {heading}
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, opacity: 0.85, maxWidth: 640, margin: "0 auto" }}>{sub}</p>
        </div>
        <div
          className="reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))",
            gap: 32,
            justifyItems: "center",
            alignItems: "start",
          }}
        >
          {feeds.map((f) => (
            <div key={f.title} style={{ width: "100%", maxWidth: 500, border: "1px solid var(--rule-soft)", background: "var(--paper)", padding: 8 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", padding: "8px 6px 12px" }}>
                {f.title}
              </div>
              <iframe
                key={tick}
                src={buildSrc(f.url)}
                title={f.title}
                width="500"
                height="700"
                style={{ border: 0, overflow: "hidden", display: "block", width: "100%", maxWidth: 500, height: 700 }}
                scrolling="yes"
                frameBorder="0"
                allow="encrypted-media"
                allowtransparency="true"
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LandingPage({ goTo, lang }) {
  useReveal();
  const L = landingFor(lang);
  const c = contactFor(lang);
  const ctaUi = ctaFor(lang);
  const slides = L.slides;
  const [slide, setSlide] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => { setSlide(0); }, [lang]);
  React.useEffect(() => {
    if (paused) return;
    const len = slides.length;
    const id = setInterval(() => setSlide((s) => (s + 1) % len), 6000);
    return () => clearInterval(id);
  }, [lang, slides.length, paused]);
  const s = slides[slide];
  return (
    <div className="page">
      {/* HERO SLIDER — full-bleed photo background */}
      <section
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onTouchStart={() => setPaused(true)}
        style={{ position: "relative", minHeight: "min(82vh, 880px)", background: "var(--ink)", color: "var(--paper)", overflow: "hidden", borderBottom: "1px solid var(--ink)" }}>
        {/* photo layers — crossfade between slides */}
        {slides.map((sl, i) => (
          <div
            key={i}
            aria-hidden
            style={{
              position: "absolute",
              inset: 0,
              backgroundImage: `url("${sl.img}")`,
              backgroundSize: "cover",
              backgroundPosition: sl.pos,
              opacity: i === slide ? 1 : 0,
              transition: "opacity 1200ms ease-in-out",
            }}
          />
        ))}
        {/* dark gradient for legibility */}
        <div aria-hidden style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,18,30,0.55) 0%, rgba(10,18,30,0.30) 35%, rgba(10,18,30,0.78) 100%)" }} />

        <div className="shell" style={{ position: "relative", paddingTop: 120, paddingBottom: 120, minHeight: "inherit", display: "grid", gridTemplateColumns: "1fr", alignContent: "end", gap: 22 }}>
          <div className="caption" style={{ color: "var(--accent)", letterSpacing: "0.22em", textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}>
            {L.heroCaption}
          </div>
          <h1 key={"t"+slide} className="reveal in" style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 9vw, 140px)", lineHeight: 0.92, margin: 0, textWrap: "balance", textShadow: "0 2px 16px rgba(0,0,0,0.55)" }}>
            {s.kw}
          </h1>
          <p key={"sub"+slide} className="reveal in" style={{ maxWidth: 720, fontSize: 19, lineHeight: 1.5, opacity: 0.95, margin: 0, textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{s.sub}</p>
          <div style={{ display: "flex", gap: 14, marginTop: 12, flexWrap: "wrap" }}>
            <button onClick={() => { try { window.__dkAircraftFocus = s.aircraftId || null; } catch(_){} goTo(s.to); }} style={{ background: "var(--accent)", color: "var(--paper)", border: "1px solid var(--accent)", padding: "14px 22px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer" }}>
              {s.cta} →
            </button>
            <button onClick={() => goTo("home")} style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(6px)", color: "var(--paper)", border: "1px solid var(--paper)", padding: "14px 22px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer" }}>
              {ctaUi.toHome}
            </button>
          </div>
          {/* slide dots */}
          <div style={{ position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 10 }}>
            {slides.map((_, i) => (
              <button key={i} onClick={() => { setPaused(true); setSlide(i); }} aria-label={`${L.slideAria} ${i + 1}`} style={{ width: i === slide ? 36 : 12, height: 4, background: i === slide ? "var(--accent)" : "rgba(255,255,255,0.45)", border: 0, cursor: "pointer", transition: "all 0.4s" }} />
            ))}
          </div>
        </div>
      </section>

      {/* C-119 cockpit feature */}
      <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule-soft)" }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "center" }}>
            <div style={{ position: "relative", aspectRatio: "3/2", overflow: "hidden", border: "1px solid var(--ink)" }}>
              <img src="assets/c119-cockpit.jpg" alt={L.c119.imgAlt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <div style={{ position: "absolute", bottom: 12, left: 14, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--paper)", background: "rgba(14, 58, 107, 0.85)", padding: "5px 9px" }}>
                {L.c119.photoTag}
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)" }}>{L.c119.eyebrow}</div>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.0, margin: "12px 0 18px" }}>
                {L.c119.h2Before}<em style={{ color: "var(--red)", fontStyle: "italic" }}>{L.c119.h2Em}</em>{L.c119.h2After}
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.7 }}>
                {L.c119.p1}
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.7, marginTop: 8, fontStyle: "italic", color: "var(--accent)" }}>
                {L.c119.p2}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Seppe Verbeeck book */}
      <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule-soft)" }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 48, alignItems: "center" }}>
            <div style={{ position: "relative", aspectRatio: "749/1024", overflow: "hidden", border: "1px solid var(--ink)" }}>
              <img src="assets/book-c130h-deel1-cover.jpg" alt={L.book.imgAlt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)" }}>{L.book.eyebrow}</div>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.0, margin: "12px 0 18px" }}>
                {L.book.h2Before}<em style={{ color: "var(--red)", fontStyle: "italic" }}>{L.book.h2Em}</em>{L.book.h2After}
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.7 }}>
                {L.book.p1}
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.7 }}>
                {L.book.p2}
              </p>
              <button onClick={() => goTo("magazine")} style={{ marginTop: 16, background: "transparent", color: "var(--ink)", border: "1px solid var(--ink)", padding: "12px 18px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer" }}>
                {L.book.pdfCta}
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Facebook live feeds — side by side, auto-refresh */}
      <FacebookFeeds lang={lang} />

      {/* Crowdfunding — Google Drive live preview */}
      {L.book.crowdfundUrl && (() => {
        const m = String(L.book.crowdfundUrl).match(/\/file\/d\/([^/]+)/);
        const fileId = m ? m[1] : null;
        const [cfPage, setCfPage] = React.useState(1);
        const previewSrc = fileId ? `https://drive.google.com/file/d/${fileId}/preview#page=${cfPage}` : null;
        return (
          <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule-soft)", background: "var(--paper-2)" }}>
            <div className="shell">
              <div className="reveal" style={{ maxWidth: 980, margin: "0 auto" }}>
                <div className="eyebrow" style={{ color: "var(--accent)" }}>{L.book.crowdfundLabel}</div>
                <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(28px, 3.2vw, 40px)", lineHeight: 1.05, margin: "12px 0 18px" }}>
                  {L.book.crowdfundLabel}
                </h2>
                {previewSrc && (
                  <div>
                    <div style={{ position: "relative", width: "100%", aspectRatio: "4/5", border: "1px solid var(--ink)", background: "var(--ink)", overflow: "hidden" }}>
                      <iframe
                        key={cfPage}
                        src={previewSrc}
                        title={L.book.crowdfundLabel}
                        allow="autoplay"
                        scrolling="no"
                        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, display: "block", pointerEvents: "none" }}
                      />
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase" }}>
                      <button
                        onClick={() => setCfPage((p) => Math.max(1, p - 1))}
                        disabled={cfPage <= 1}
                        aria-label="Previous page"
                        style={{ background: "transparent", border: "1px solid var(--ink)", color: "var(--ink)", padding: "10px 16px", cursor: cfPage <= 1 ? "not-allowed" : "pointer", opacity: cfPage <= 1 ? 0.35 : 1, fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit" }}
                      >
                        ←
                      </button>
                      <span style={{ opacity: 0.7 }}>{cfPage}</span>
                      <button
                        onClick={() => setCfPage((p) => p + 1)}
                        aria-label="Next page"
                        style={{ background: "transparent", border: "1px solid var(--ink)", color: "var(--ink)", padding: "10px 16px", cursor: "pointer", fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit" }}
                      >
                        →
                      </button>
                    </div>
                  </div>
                )}
                <div style={{ marginTop: 18 }}>
                  <a href={L.book.crowdfundUrl} target="_blank" rel="noopener noreferrer" style={{ display: "inline-block", color: "var(--paper)", background: "var(--red)", padding: "12px 18px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", textDecoration: "none" }}>
                    {L.book.crowdfundCta}
                  </a>
                </div>
              </div>
            </div>
          </section>
        );
      })()}

      {/* Mandate — I18N per locale (NL / EN / FR / DE) */}
      <section style={{ padding: "80px 0", background: "var(--ink)", color: "var(--paper)" }}>
        <div className="shell">
          <div className="reveal" style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <div className="caption" style={{ color: "var(--accent)", letterSpacing: "0.22em", marginBottom: 18 }}>
              {L.mandate.eyebrow}
            </div>
            <p style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(22px, 2.4vw, 32px)", lineHeight: 1.4, margin: 0 }}>
              {L.mandate.p1}
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, marginTop: 24, opacity: 0.85 }}>
              {L.mandate.p2}
            </p>
          </div>
        </div>
      </section>

      {/* Contact strip */}
      <section style={{ padding: "60px 0", borderBottom: "1px solid var(--rule-soft)" }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, alignItems: "start" }}>
            <div>
              <div className="caption" style={{ color: "var(--accent)" }}>{L.contact.lblAddress}</div>
              <div style={{ fontFamily: "var(--serif-display)", fontSize: 22, lineHeight: 1.3, marginTop: 10 }}>
                {c.addrLine1}<br />
                {c.addrLine2}<br />
                {c.addrLine3}<br />
                {c.countryLine}
              </div>
            </div>
            <div>
              <div className="caption" style={{ color: "var(--accent)" }}>{L.contact.lblEmail}</div>
              <a href={`mailto:${c.secretariatEmail}`} style={{ fontFamily: "var(--serif-display)", fontSize: 22, lineHeight: 1.3, marginTop: 10, display: "block", color: "var(--ink)", textDecoration: "none" }}>
                {(() => {
                  const em = c.secretariatEmail;
                  const i = em.indexOf("@");
                  return i === -1 ? em : <>{em.slice(0, i + 1)}<br />{em.slice(i + 1)}</>;
                })()}
              </a>
            </div>
            <div>
              <div className="caption" style={{ color: "var(--accent)" }}>{L.contact.lblPhone}</div>
              <a href={`tel:${String(c.phoneDisplay).replace(/[^\d+]/g, "")}`} style={{ fontFamily: "var(--serif-display)", fontSize: 22, lineHeight: 1.3, marginTop: 10, display: "block", color: "var(--ink)", textDecoration: "none" }}>
                {c.phoneDisplay}
              </a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

function GenericHero({ eyebrow, title, em, lead }) {
  return (
    <section className="hero">
      <div className="shell">
        <div className="eyebrow reveal in" style={{ marginBottom: 20 }}>{eyebrow}</div>
        <h1 className="hero-title reveal in" style={{ fontSize: "clamp(48px, 8vw, 120px)" }}>
          {title}{em ? <> <span className="red">{em}</span></> : null}
        </h1>
        {lead && <p className="reveal in" style={{ maxWidth: 720, marginTop: 32, fontSize: 17, lineHeight: 1.6 }}>{lead}</p>}
      </div>
    </section>
  );
}

function PortraitPlate({ label, src, alt, objectPosition }) {
  if (src) {
    return (
      <div className="blueprint-wrap" style={{ aspectRatio: "3/4", position: "relative", padding: 0, overflow: "hidden", background: "var(--ink)", color: "var(--paper)" }}>
        <img src={src} alt={alt || label} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: objectPosition || "center top", display: "block" }} />
        <span className="corner tl"></span><span className="corner tr"></span>
        <span className="corner bl"></span><span className="corner br"></span>
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "40px 16px 14px", background: "linear-gradient(to top, rgba(14, 58, 107, 0.92), rgba(14, 58, 107, 0))", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--paper)" }}>{label}</div>
      </div>
    );
  }
  return (
    <div className="blueprint-wrap" style={{ aspectRatio: "3/4", position: "relative", padding: 0, display: "grid", placeItems: "center", background: "var(--ink)", color: "var(--paper)" }}>
      <span className="corner tl"></span><span className="corner tr"></span>
      <span className="corner bl"></span><span className="corner br"></span>
      <svg viewBox="0 0 100 100" width="60%" height="60%" style={{ opacity: 0.25 }}>
        <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="0.6" />
        <circle cx="50" cy="40" r="14" fill="none" stroke="currentColor" strokeWidth="0.6" />
        <path d="M 28 78 Q 50 60 72 78 L 72 90 L 28 90 Z" fill="none" stroke="currentColor" strokeWidth="0.6" />
      </svg>
      <div style={{ position: "absolute", bottom: 14, left: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>{label}</div>
    </div>
  );
}

// 15 W AirTpt — body from AIRTPT_I18N (en / nl / fr / de); hero from I18N.pages.airtpt.
function AirTptPage({ lang }) {
  useReveal();
  const p = pagesFor(lang, "airtpt");
  const A = { ...AIRTPT_I18N.nl, ...(typeof AIRTPT_I18N !== "undefined" && AIRTPT_I18N[lang] ? AIRTPT_I18N[lang] : {}) };
  const lead = p.lead + (A.leadSuffix || "");
  const pStyle = { fontSize: 17, lineHeight: 1.7 };
  return (
    <div className="page">
      <GenericHero eyebrow={p.eyebrow} title={p.title} em={p.em} lead={lead} />
      <section className="section" style={{ paddingTop: 20 }}>
        <div className="shell">
          {A.chapters.map((ch, ci) => (
            <div key={ci} className="reveal" style={{ maxWidth: 820, margin: "0 auto 60px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{ch.eyebrow}</div>
              {ch.blocks.map((b, bi) => {
                if (b.type === "p") {
                  return <p key={bi} style={pStyle} dangerouslySetInnerHTML={{ __html: b.html }} />;
                }
                if (b.type === "ul") {
                  return (
                    <ul key={bi} style={{ fontSize: 17, lineHeight: 1.8, paddingLeft: 24 }}>
                      {b.items.map((li, lix) => (
                        <li key={lix} dangerouslySetInnerHTML={{ __html: li }} />
                      ))}
                    </ul>
                  );
                }
                return null;
              })}
            </div>
          ))}

          <div className="reveal" style={{ background: "var(--paper-2)", padding: "40px", maxWidth: 820, margin: "0 auto 60px" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{A.readMoreEyebrow}</div>
            <div style={{ display: "grid", gap: 12 }}>
              {A.readMoreLinks.map((lnk, i) => (
                <a
                  key={i}
                  href={lnk.href}
                  target="_blank"
                  rel="noreferrer"
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr auto",
                    padding: "14px 0",
                    borderBottom: i === 0 ? "1px solid var(--rule-soft)" : "none",
                    cursor: "pointer",
                    color: "inherit",
                    textDecoration: "none",
                  }}
                >
                  <div style={{ fontFamily: "var(--serif-body)", fontSize: 16 }}>{lnk.label}</div>
                  <div className="meta">{lnk.meta}</div>
                </a>
              ))}
            </div>
          </div>

          <div className="reveal" style={{ maxWidth: 820, margin: "0 auto", paddingTop: 30, borderTop: "1px solid var(--rule-soft)" }}>
            <div className="eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>{A.footnotesEyebrow}</div>
            {A.footnotes.map((fn, i) => (
              <p key={i} style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.85 }}>
                <b>{fn.k}</b> <span dangerouslySetInnerHTML={{ __html: fn.html }} />
              </p>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// Our Museum — full body copy from MUSEUM_I18N (en / nl / fr / de); hero via I18N.pages.museum.
function OurMuseumPage({ lang }) {
  useReveal();
  const p = pagesFor(lang, "museum");
  const M = { ...MUSEUM_I18N.nl, ...(typeof MUSEUM_I18N !== "undefined" && MUSEUM_I18N[lang] ? MUSEUM_I18N[lang] : {}) };
  const nbMark = M.nbLabel ?? MUSEUM_I18N.nl.nbLabel;

  const h2Title = {
    fontFamily: "var(--serif-display)",
    fontSize: "clamp(34px, 4.4vw, 52px)",
    lineHeight: 1.05,
    margin: "0 0 24px",
    color: "var(--ink)",
  };
  const para = { fontSize: 17, lineHeight: 1.75, margin: "0 0 14px" };
  const ulStyle = { fontSize: 16, lineHeight: 1.75, paddingLeft: 24, margin: "8px 0 16px" };
  const figFull = { position: "relative", overflow: "hidden", border: "1px solid var(--ink)", marginTop: 28 };
  const tripletGrid = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 24 };
  const tripletCell = { position: "relative", aspectRatio: "3/2", overflow: "hidden", border: "1px solid var(--rule-soft)" };
  const imgCover = { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" };

  const Section = ({ children, first }) => (
    <section className="section" style={{ paddingTop: first ? 40 : 60, paddingBottom: 20 }}>
      <div className="shell" style={{ maxWidth: 980 }}>
        <div className="reveal">{children}</div>
      </div>
    </section>
  );

  return (
    <div className="page">
      <GenericHero eyebrow={p.eyebrow} title={p.title} em={p.em} lead={p.lead} />

      {/* 0 — Intro */}
      <Section first>
        {M.s0Title && <h2 style={h2Title}>{M.s0Title}</h2>}
        <p style={para}>{M.s0Lead}</p>
        <ul style={ulStyle}>
          {M.s0List.map((li, i) => <li key={i}>{li}</li>)}
        </ul>
        <div style={{ ...figFull, aspectRatio: "16/10", maxWidth: 520, marginLeft: "auto", marginRight: "auto" }}>
          <img src="assets/museum-flag.jpg" alt={M.s0Alt} style={imgCover} />
        </div>
      </Section>

      {/* 1 — Staff */}
      <Section>
        <h2 style={h2Title}>{M.s1Title}</h2>
        {M.s1P.map((t, i) => <p key={i} style={para}>{t}</p>)}
      </Section>

      {/* 2 — Exhibition */}
      <Section>
        <h2 style={h2Title}>{M.s2Title}</h2>
        <p style={para}>{M.s2Intro}</p>
        <div style={{ ...figFull, aspectRatio: "942/1024", maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          <img src="assets/museum-exhibit-quad.jpg" alt={M.s2Alt1} style={imgCover} />
        </div>
        <p style={{ ...para, marginTop: 28 }}>{M.s2Mid}</p>
        <ul style={ulStyle}>
          {M.s2Ul1.map((li, i) => <li key={i}>{li}</li>)}
        </ul>
        <p style={para}>{M.s2MidB}</p>
        <ul style={ulStyle}>
          {M.s2Ul2.map((li, i) => <li key={i}>{li}</li>)}
        </ul>
        <div style={{ ...figFull, aspectRatio: "1024/650" }}>
          <img src="assets/museum-exhibit-cockpit-panel.jpg" alt={M.s2Alt2} style={imgCover} />
        </div>
        <p style={{ ...para, marginTop: 24 }}>{M.s2Outro}</p>
      </Section>

      {/* 3 — Documentation centre */}
      <Section>
        <h2 style={h2Title}>{M.s3Title}</h2>
        {M.s3P.map((t, i) => <p key={i} style={para}>{t}</p>)}
        <div style={{ ...figFull, aspectRatio: "4/3", maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          <img src="assets/museum-archive-team.jpg" alt={M.s3Alt} style={imgCover} />
        </div>
        <p style={{ fontSize: 15, lineHeight: 1.7, marginTop: 22, padding: "12px 16px", background: "var(--rule-soft)", color: "var(--ink)", fontStyle: "italic" }}>
          <b>{nbMark}</b> {M.s3Nb}
        </p>
      </Section>

      {/* 4 — Aircraft park */}
      <Section>
        <h2 style={h2Title}>{M.s4Title}</h2>
        {M.s4P1.map((t, i) => <p key={i} style={para}>{t}</p>)}
        <div style={{ ...figFull, aspectRatio: "4/3" }}>
          <img src="assets/museum-noses-c130-b727.jpg" alt={M.s4Alt1} style={imgCover} />
        </div>
        {M.s4P2.map((t, i) => <p key={i} style={{ ...para, marginTop: 24 }}>{t}</p>)}
        <div style={{ ...figFull, aspectRatio: "4/3" }}>
          <img src="assets/museum-dc3-outdoor.jpg" alt={M.s4Alt2} style={imgCover} />
        </div>
        <p style={{ ...para, marginTop: 22, fontStyle: "italic", opacity: 0.85 }}>{M.s4Outro}</p>
      </Section>

      {/* 5 — Restore team */}
      <Section>
        <h2 style={h2Title}>{M.s5Title}</h2>
        {M.s5P.map((t, i) => <p key={i} style={para}>{t}</p>)}
        <div style={tripletGrid}>
          {[
            { src: "assets/restore-pembroke-ladder.jpg", alt: M.s5Alts1[0] },
            { src: "assets/restore-poetsbeurt-2024.jpg", alt: M.s5Alts1[1] },
            { src: "assets/restore-painting-2019.jpg", alt: M.s5Alts1[2] },
          ].map((it) => (
            <div key={it.src} style={tripletCell}>
              <img src={it.src} alt={it.alt} style={imgCover} />
            </div>
          ))}
        </div>
        <p style={{ ...para, marginTop: 28 }}>{M.s5DA900}</p>
        <div style={tripletGrid}>
          {[
            { src: "assets/restore-dakota-1.jpg", alt: M.s5Alts2[0] },
            { src: "assets/restore-dakota-2.jpg", alt: M.s5Alts2[1] },
            { src: "assets/restore-dakota-3.jpg", alt: M.s5Alts2[2] },
          ].map((it) => (
            <div key={it.src} style={tripletCell}>
              <img src={it.src} alt={it.alt} style={imgCover} />
            </div>
          ))}
        </div>
      </Section>

      {/* 6 — Shop */}
      <Section>
        <h2 style={h2Title}>{M.s6Title}</h2>
        <p style={para}>{M.s6Intro}</p>
        <div style={tripletGrid}>
          {[
            { src: "assets/museum-shop-display.jpg", alt: M.s6ShopAlts[0] },
            { src: "assets/museum-shop-shelves.jpg", alt: M.s6ShopAlts[1] },
            { src: "assets/museum-book-c119-cover.jpg", alt: M.s6ShopAlts[2] },
          ].map((it) => (
            <div key={it.src} style={{ ...tripletCell, aspectRatio: "3/4" }}>
              <img src={it.src} alt={it.alt} style={imgCover} />
            </div>
          ))}
        </div>
        <p style={{ fontSize: 15, lineHeight: 1.7, marginTop: 22, padding: "12px 16px", background: "var(--rule-soft)", color: "var(--ink)", fontStyle: "italic" }}>
          <b>{nbMark}</b> {M.s6Nb}
        </p>

        <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 28, margin: "40px 0 14px" }}>{M.s6DvdHead}</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--rule-soft)", border: "1px solid var(--rule-soft)" }}>
          <div style={{ background: "var(--paper)", padding: "26px 26px" }}>
            <h4 style={{ fontFamily: "var(--serif-display)", fontSize: 20, lineHeight: 1.2, margin: "0 0 8px" }}>{M.s6Dvd1Title}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.8, margin: "6px 0 14px" }}>{M.s6Dvd1Desc}</p>
            <div className="meta">{M.s6DvdPrice}</div>
          </div>
          <div style={{ background: "var(--paper)", padding: "26px 26px" }}>
            <h4 style={{ fontFamily: "var(--serif-display)", fontSize: 20, lineHeight: 1.2, margin: "0 0 8px" }}>{M.s6Dvd2Title}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.8, margin: "6px 0 14px" }}>{M.s6Dvd2Desc}</p>
            <div className="meta">{M.s6DvdPrice}</div>
          </div>
        </div>
        <p style={{ fontSize: 14, marginTop: 12, fontStyle: "italic", opacity: 0.85 }}>{M.s6DvdCombo}</p>

        <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 28, margin: "40px 0 14px" }}>{M.s6BooksHead}</h3>
        <div style={{ overflowX: "auto", border: "1px solid var(--ink)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, lineHeight: 1.55 }}>
            <thead>
              <tr style={{ background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", textAlign: "left" }}>
                <th style={{ padding: "10px 12px", width: "32%" }}>{M.s6Cols.t}</th>
                <th style={{ padding: "10px 12px" }}>{M.s6Cols.s}</th>
                <th style={{ padding: "10px 12px", width: "12%" }}>{M.s6Cols.l}</th>
                <th style={{ padding: "10px 12px", width: "10%" }}>{M.s6Cols.p}</th>
              </tr>
            </thead>
            <tbody>
              {M.s6Books.map((b, i) => (
                <tr key={i} style={{ borderTop: "1px solid var(--rule-soft)", background: i % 2 ? "var(--paper-2)" : "var(--paper)" }}>
                  <td style={{ padding: "12px", verticalAlign: "top" }}>
                    <div style={{ fontWeight: 600, fontStyle: "italic" }}>{b.t}</div>
                    <div style={{ opacity: 0.75, marginTop: 2 }}>{b.a}</div>
                  </td>
                  <td style={{ padding: "12px", verticalAlign: "top" }}>{b.s}</td>
                  <td style={{ padding: "12px", verticalAlign: "top", fontFamily: "var(--mono)", fontSize: 12 }}>{b.l}</td>
                  <td style={{ padding: "12px", verticalAlign: "top", fontFamily: "var(--mono)", fontSize: 12 }}>{b.p}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* 7 — Cafeteria */}
      <Section>
        <h2 style={h2Title}>{M.s7Title}</h2>
        {M.s7P.map((t, i) => <p key={i} style={para}>{t}</p>)}
        <p style={{ ...para, fontStyle: "italic", opacity: 0.85 }}>{M.s7Outro}</p>
      </Section>

      {/* 8 — Image gallery */}
      <Section>
        <h2 style={h2Title}>{M.s8Title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
          {[
            { src: "assets/museum-panel-begin.jpg", alt: M.s8Alts[0] },
            { src: "assets/museum-panel-witte.jpg", alt: M.s8Alts[1] },
            { src: "assets/museum-panel-cerulean.jpg", alt: M.s8Alts[2] },
            { src: "assets/museum-panel-naviguer.jpg", alt: M.s8Alts[3] },
          ].map((it) => (
            <div key={it.src} style={{ position: "relative", aspectRatio: "3/4", overflow: "hidden", border: "1px solid var(--ink)" }}>
              <img src={it.src} alt={it.alt} style={imgCover} />
            </div>
          ))}
        </div>
      </Section>

      {/* 9 — Member magazine */}
      <Section>
        <h2 style={h2Title}>{M.s9Title}</h2>
        <p style={{ ...para, fontStyle: "italic" }}>{M.s9P}</p>
      </Section>
    </div>
  );
}

// Magazine — stand-alone page
const MAGAZINE_ISSUES = [
  "1VBEyg0MDFivYQHUMMGFfc4Ffsp9J6JvS","1WkPKDyqi3nCIiEBb2D4LSudBxidjOqtW","1UymTZaPWA575OrHjtTYJA491tSn4mD25","1kVAciK_atYnkywpuR53HIc9YTI2RWD6-",
  "1YvJPSVOn_Az10v9Yv_nfuJOAL1r5kJ_w","1CCKTUWBgluJLBhghegnhzK-FK-NmU_Ds","1aPbYWLZXljAiisLKgSS10qhsvZJzziqc","1w0zIS0lReRBD7XF4dZ2RU1-55Jn5Vp2Q",
  "1HQPvVAefHWHu-swiSM9JWpmlOUPdPQKD","1biZyqopYez7BySw822dR5oS3WsPEDBDl","1Bz6TxtLSTWQhJ9RsXIXVqMhCwpI3Cgj0","1fpmty4wlLFhZdv6FF_eKhGmn-TC9t1UM",
  "1rDJLTm9tihdFEtS73G_KT9WmwS4RfkCe","1OLZDBFftWRw5-ltT69zwAB9qrW7kMeDD","11ET_IZphd4GZ_PdLVPeUywrnoY6rBEDA","1pQ5wlZffJOkJidsTpvFgKBw4U3fPbCcq",
  "1I9HQdQDXKT0Iok3ptQAwAmSb3t1auyao","1l0DSnnJAL5Dq37oUXDDRUAznXlCQIzr_","1mjf3c7bvXhLGVOkm4J_SgMQHXSp-k3AN","1mvGPjBWBQJzeYdp-hdgeM7GPK7Vz604f",
  "1TrTEHFQk8sTHY4Lp1nAk1ryPv_G2lwEJ","1IazIJ5lHSlarHJ0azzgpSmJ9l6s9UFub","1Y973JxHDxkPwqzsDC3EKB5FfrtJFzE4T","1oYqg0jz09FEFTu1EixgEyFa8uvHtWG6s",
  "1t8scySPxGyEB3eqVpdyE4GjNeRqewTEj","1ojvbj4FR8fEq76DM3XxLUK6yxHRpqllS","1GfYpQH1VLXypQUwYbyXvW8zOmM40LUCv","1kHoVGZ2rKfiZS9zAy3LZdiFriXnvgewa",
  "1EWfG6gbGMq4AKpgC4CK5v6OumjUT0s4r","1bl1HgVHO-JM37384oyoC2XlN_vWp6D1M","1IK6inEVpVHrcQMChVlYvVWcAZBqdezL7","1nq4PKpu1jWJhJMvexgdpT04f6LSo3FAh",
  "189qeh2rUaew0Q2pO1icAA22u2K4V3ar4","1z31skPFIaJ85lE4f3Rm_33YBBuKEEVSE","1Pelq15wUzyrRO-SGDvuJuJ8MobyOGKOq","1oDps2_0_cLloC6Ub8vfel73ZQmjKByl1",
  "1xpS_oUaqTWvbbfTLtiu8wYEgCb0slcfx","1mNNJ0u9NAZ0f5jneeKNGtyRNsMFFo7dJ","1fuIFBkPhnzQ2opMTmC5OylIu8n77ow2Z","1t1CXl7LUiy8eNNto6JYR1Jb6_hOzxhk0",
  "16vlDXCXGc4xvAtiA7Uee_z6TUiZ_h934","1wTGbArlL6b5i3AERMf1zAICawrzfF4zP","15EoYvuc9c3I0CT6y3zqmbADlODP0AnZO","1zLe7kytpHHDj4RQjxYU7_O5ZVn5b6X3n",
  "1DhJS-M0hIsjX7oTLou4E46QTkOgLmBlF","1Pevwu7Xc05MtHMAa1WfubdxAHtgXfzNy","1i1oY7hwEvKuoqnq4dtmojjTDXUfqk25x","1EqPNR_M3feq7TSx3oV0RssZ87ElhSvT8",
  "1J6ZRTbL4BPUKw2jR8Fxqie2sHH6wQEkG","1f0MO2x2x7bAqrEUvkZaUaDjzTN0PYcKA","1lD_IOWc6-32cNomdo3Oe6fTP9BJVNDnv","1l2is1Y53hRBbakwfFYUNd-Z1eQyXCSkp",
  "1_dZpwXN6X7WhHTTKHiptEL2H7sqtEUyH","1LaeIdS5rTYxz0FYykGcdYeMocAOXRTQb","1o3jdf7RG8xw40bEn7FHTmiclZvY8-eYU","1tPiOVk0eXU5_cYU8SpnDAP05RlOH0EvK",
  "1q_ZsyTsmG5LHFyTW6B-7kP8zYxpccPSF","1D7NhPJwAdvEFdambA7aYcZNvZJHobrHZ","1mivRcB8AotOuJdUIGQJkInb0-c-4MaRc","1XYfgAnJCOretRLxkp0iXeuIQIQ_hbcyy",
  "1Hty1hqXn-xt-eKcqiCT0kebUYNYur89n","1QQXyPB8aPeq8jQBMCjEDsKrICP3ywGUT","1u0jiKny2eqrDalf5Cf9jP1Naqb9CbJiF","1c5DnXSbzL0GVVgIT-6lkMmRpBb8N5OoV",
  "1S8q9UnRxf72vJQtfJ73eso82N-Iszxlr","1q8n3N-p3SH4G9F3CLHvZ0COany1_PisI","1QAwhxf5er0n03trGAr03GwD9YzlMIYKe","16PfutfIW42PBuQ6EiR5XhDq4vO6Di1NZ",
  "1ZxUvpwizilKagXlagDM4nazyfJ8vkBBG","1oNMllGnplCjCzkGadkfKZqa_n7d_8y50","1w9RhTnphLN4ZFYTDYsUxoVpECse6PzlM","17-pemlSl2Tj7mnxkGcxAauF6kwMzVVaO",
  "1-McaFe4CKuyKhJZtC6J9P1gxAvsEqC8N","1_naatsB8B-a6w-e4GTHd3IrkaPv4uR1Z","1lIJFnHEyvb5-eZJCMOL3OP2fC7JVi1H_","1mwo3WmN7QbadX0pbOysD10n5ajctLO6b",
  "11Jb9OXHqFW-aqw81m8odm2yXKnH174KB","1TXMXZiz6jVCSEb1Yt9rHQZqJ9W0WGrGf","1cJ_XZlmyqFmJAUExfa_mFnf040P4Z526","1mFIsaDnwl5h-gRHicYIHKx_8Ei9DA980",
];

const MAGAZINE_LABELS = {
  nl: { eyebrow: "ARCHIEF · DAKOTA NEWS", heading: "Alle uitgaven", lead: "Blader doorheen alle nummers van Dakota News. Klik op een uitgave hieronder of gebruik de pijltjes om naar de volgende of vorige uitgave te gaan.", prev: "Vorige", next: "Volgende", issue: "Nr.", of: "van", openDrive: "Open in Drive", download: "Download PDF", allIssues: "Alle uitgaven", clickHint: "Klik een uitgave om te openen", current: "Huidige uitgave" },
  fr: { eyebrow: "ARCHIVES · DAKOTA NEWS", heading: "Toutes les éditions", lead: "Parcourez tous les numéros de Dakota News. Cliquez sur une édition ci-dessous ou utilisez les flèches pour passer à la suivante ou à la précédente.", prev: "Précédent", next: "Suivant", issue: "N°", of: "sur", openDrive: "Ouvrir dans Drive", download: "Télécharger le PDF", allIssues: "Toutes les éditions", clickHint: "Cliquez une édition pour l'ouvrir", current: "Édition en cours" },
  en: { eyebrow: "ARCHIVE · DAKOTA NEWS", heading: "All issues", lead: "Browse every issue of Dakota News. Click an issue below or use the arrows to move to the next or previous one.", prev: "Previous", next: "Next", issue: "No.", of: "of", openDrive: "Open in Drive", download: "Download PDF", allIssues: "All issues", clickHint: "Click an issue to open it", current: "Current issue" },
  de: { eyebrow: "ARCHIV · DAKOTA NEWS", heading: "Alle Ausgaben", lead: "Blättern Sie durch alle Ausgaben von Dakota News. Klicken Sie unten auf eine Ausgabe oder verwenden Sie die Pfeile, um zur nächsten oder vorherigen zu wechseln.", prev: "Zurück", next: "Weiter", issue: "Nr.", of: "von", openDrive: "In Drive öffnen", download: "PDF herunterladen", allIssues: "Alle Ausgaben", clickHint: "Klicken Sie auf eine Ausgabe, um sie zu öffnen", current: "Aktuelle Ausgabe" },
};

function MagazinePage({ lang }) {
  useReveal();
  const m = pagesFor(lang, "magazine");
  const ms = standaloneFor(lang, "magazineStandalone");
  const L = MAGAZINE_LABELS[lang] || MAGAZINE_LABELS.nl;
  const N = MAGAZINE_ISSUES.length;
  const [idx, setIdx] = React.useState(0);
  const id = MAGAZINE_ISSUES[idx];
  const embedSrc = `https://drive.google.com/file/d/${id}/preview`;
  const viewHref = `https://drive.google.com/file/d/${id}/view`;
  const goto = (next) => setIdx(((next % N) + N) % N);
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target && /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) return;
      if (e.key === "ArrowLeft") goto(idx - 1);
      if (e.key === "ArrowRight") goto(idx + 1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [idx]);
  const navBtn = { background: "transparent", color: "var(--ink)", border: "1px solid var(--ink)", padding: "10px 18px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer" };
  return (
    <div className="page">
      <GenericHero
        eyebrow={m.eyebrow}
        title={m.title}
        em={m.em}
        lead={m.lead}
      />
      <section id="magazine-reader" style={{ padding: "0 0 40px" }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 14, display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12 }}>
            <div className="eyebrow">{L.eyebrow}</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              {L.current}: {L.issue} {idx + 1} {L.of} {N}
              {" · "}
              <a href={viewHref} target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)" }}>{L.openDrive}</a>
            </div>
          </div>
          <div className="reveal" style={{ position: "relative", width: "100%", aspectRatio: "4/5", border: "1px solid var(--ink)", background: "var(--ink-soft, #f4f4f4)" }}>
            <iframe
              key={id}
              src={embedSrc}
              title={`Dakota News ${L.issue} ${idx + 1}`}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
              allow="autoplay"
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer"
            />
          </div>
          <div className="reveal" style={{ marginTop: 18, display: "flex", justifyContent: "space-between", gap: 12 }}>
            <button type="button" onClick={() => goto(idx - 1)} style={navBtn} aria-label={L.prev}>← {L.prev}</button>
            <button type="button" onClick={() => goto(idx + 1)} style={navBtn} aria-label={L.next}>{L.next} →</button>
          </div>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 20, paddingBottom: 40 }}>
        <div className="shell">
          <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, flexWrap: "wrap", gap: 8 }}>
            <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(24px, 3vw, 32px)", margin: 0 }}>{L.allIssues}</h2>
            <div className="meta" style={{ opacity: 0.7 }}>{L.clickHint}</div>
          </div>
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
            {MAGAZINE_ISSUES.map((fid, i) => {
              const active = i === idx;
              return (
                <button
                  key={fid}
                  type="button"
                  onClick={() => {
                    goto(i);
                    const el = document.getElementById("magazine-reader");
                    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
                  }}
                  style={{
                    padding: 0,
                    cursor: "pointer",
                    border: "1px solid " + (active ? "var(--accent)" : "var(--ink)"),
                    background: "var(--paper)",
                    textAlign: "left",
                    display: "flex",
                    flexDirection: "column",
                    overflow: "hidden",
                  }}
                >
                  <div style={{ position: "relative", width: "100%", aspectRatio: "3/4", background: "#f4f4f4", overflow: "hidden" }}>
                    <iframe
                      src={`https://drive.google.com/file/d/${fid}/preview`}
                      title={`Dakota News ${L.issue} ${i + 1}`}
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, pointerEvents: "none" }}
                      loading="lazy"
                      referrerPolicy="no-referrer"
                    />
                    <div style={{ position: "absolute", inset: 0 }} aria-hidden="true" />
                  </div>
                  <div style={{
                    padding: "8px 10px",
                    fontFamily: "var(--mono)",
                    fontSize: 11,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                    background: active ? "var(--accent)" : "transparent",
                    color: active ? "var(--paper)" : "var(--ink)",
                    borderTop: "1px solid " + (active ? "var(--accent)" : "var(--rule-soft, var(--ink))"),
                  }}>
                    {L.issue} {i + 1} {L.of} {N}
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 20 }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--rule-soft)", border: "1px solid var(--rule-soft)", maxWidth: 1000, margin: "0 auto 40px" }}>
            <div style={{ background: "var(--paper)", padding: "32px 30px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{ms.mastheadEyebrow}</div>
              <p style={{ fontSize: 14, lineHeight: 1.65, margin: 0 }} dangerouslySetInnerHTML={{ __html: ms.mastheadHtml }} />
            </div>
            <div style={{ background: "var(--paper)", padding: "32px 30px" }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{ms.subscribeEyebrow}</div>
              <p style={{ fontSize: 14, lineHeight: 1.65, margin: "0 0 14px" }}>
                {ms.subscribeP1}
              </p>
              <div className="meta" style={{ marginBottom: 4 }}>{ms.duesLabel}</div>
              <div style={{ fontFamily: "var(--serif-display)", fontSize: 36, lineHeight: 1 }}>{ms.duesAmount}</div>
              <button className="btn btn-primary" style={{ marginTop: 18 }}>{ms.memberBtn}</button>
            </div>
          </div>
          <div className="reveal" style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
            <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.8 }}>
              {ms.backIssues}
            </p>
          </div>

          {/* Books published by DAKOTA vzw */}
          <div className="reveal" style={{ marginTop: 100, paddingTop: 60, borderTop: "1px solid var(--rule-soft)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 48, alignItems: "start", marginBottom: 40 }}>
              <div>
                <div className="eyebrow">{ms.booksEyebrow}</div>
                <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 0.95, margin: "14px 0 0" }}>
                  {ms.booksH2Line1}<br /><em style={{ color: "var(--red)", fontStyle: "italic" }}>{ms.booksH2Em}</em>
                </h2>
              </div>
              <div style={{ paddingTop: 12 }}>
                <p style={{ fontSize: 16, lineHeight: 1.7 }}>
                  {ms.booksP1}
                </p>
                <p style={{ fontSize: 14, lineHeight: 1.65, marginTop: 12, opacity: 0.8, fontStyle: "italic" }}>
                  {ms.booksP2}
                </p>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 40, alignItems: "start" }}>
              <figure style={{ margin: 0 }}>
                <div style={{ position: "relative", aspectRatio: "3/4", overflow: "hidden", border: "1px solid var(--ink)", boxShadow: "0 12px 30px rgba(14, 58, 107, 0.18)" }}>
                  <img src="assets/book-c130h-deel1-cover.jpg" alt={ms.bookImgAlt} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <figcaption style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.6 }}>
                    {ms.bookNew}
                  </div>
                  <div style={{ fontFamily: "var(--serif-display)", fontSize: 20, lineHeight: 1.15, marginTop: 6 }}>
                    {ms.bookTitle}
                  </div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 6, opacity: 0.7 }}>
                    {ms.bookAuthor}
                  </div>
                </figcaption>
              </figure>
              <div>
                <p style={{ fontSize: 17, lineHeight: 1.7 }}>
                  {ms.bookBody}
                </p>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule-soft)", border: "1px solid var(--rule-soft)", marginTop: 24 }}>
                  <div style={{ background: "var(--paper)", padding: "20px 22px" }}>
                    <div className="meta" style={{ marginBottom: 4 }}>{ms.fmtLabel}</div>
                    <div style={{ fontFamily: "var(--serif-body)", fontSize: 15 }}>{ms.fmtValue}</div>
                  </div>
                  <div style={{ background: "var(--paper)", padding: "20px 22px" }}>
                    <div className="meta" style={{ marginBottom: 4 }}>{ms.langLabel}</div>
                    <div style={{ fontFamily: "var(--serif-body)", fontSize: 15 }}>{ms.langValue}</div>
                  </div>
                  <div style={{ background: "var(--paper)", padding: "20px 22px" }}>
                    <div className="meta" style={{ marginBottom: 4 }}>{ms.volLabel}</div>
                    <div style={{ fontFamily: "var(--serif-body)", fontSize: 15 }}>{ms.volValue}</div>
                  </div>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.65, marginTop: 24, opacity: 0.8 }}>
                  {ms.shopList}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// 15th Wing Humanitarian Missions — dedicated page
const MISSIONS_VIDEOS_TOP = ["X415Hcy29lM"];
const MISSIONS_VIDEOS_SAUDI = ["SP5REBL8HqM", "O9hGQaYkUmg", "Nk7YC3ZNOkY", "-oKOLNdROew"];
const MISSIONS_VIDEOS_BRAZZAVILLE = ["XbyjtJuZUI8"];
const MISSIONS_VIDEOS_MALI = ["cLbGB2Y1um8", "eaCvC1hbP6Y"];

function MissionVideo({ id }) {
  return (
    <div className="reveal" style={{ position: "relative", width: "100%", aspectRatio: "16/9", border: "1px solid var(--ink)", margin: "18px 0" }}>
      <iframe
        src={`https://www.youtube.com/embed/${id}`}
        title={`15 Wing mission video ${id}`}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        referrerPolicy="strict-origin-when-cross-origin"
      />
    </div>
  );
}

function MissionVideoGrid({ ids }) {
  return (
    <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 12, margin: "18px 0" }}>
      {ids.map((id) => (
        <div key={id} style={{ position: "relative", width: "100%", aspectRatio: "16/9", border: "1px solid var(--ink)" }}>
          <iframe
            src={`https://www.youtube.com/embed/${id}`}
            title={`15 Wing mission video ${id}`}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            referrerPolicy="strict-origin-when-cross-origin"
          />
        </div>
      ))}
    </div>
  );
}

const MISSIONS_DECADES = [
  { decade: "1950s", entries: [
    { place: "NETHERLANDS", event: "Floods", date: "1953", deploy: "C-119 and Sikorski — rescue and food transport" },
    { place: "MOROCCO – AGADIR", event: "Earthquake", date: "1960", deploy: "DC-6 — transport tents and blankets" },
    { place: "CONGO", event: "Independence Rebellion", date: "June to August 1960", deploy: "Humanitarian armed intervention. LULUABURG – ELISABETH CITY – JADOT CITY – MATADI – LEOPOLD CITY. All transport aircraft 15th Wing plus SABENA (B-707 – DC-10)." },
    { place: "RUANDA – URUNDI", event: "Maintaining order in tribal disputes in anticipation of 1959–1962 independence", date: "1959–1962", deploy: "C-119, DC-3, DC-6 — Operation \u201CAntiloop\u201D – Bet 1, 3, 4 and 6 Bn Paras" },
  ]},
  { decade: "1960s", entries: [
    { place: "CONGO – STANLEYSTAD", event: "Rebellion: Operation \u201CRed Dragon\u201D", date: "November–December 1964", deploy: "STANLEYSTAD, PAULIS \u201CBlack Dragon\u201D — 5 USAF C-130 — Evac Belgians by DC-6 and SABENA" },
    { place: "ITALY (PISA)", event: "Flood Pô-vlakte", date: "Nov '66 – January '67", deploy: "10 × C-119 — food and tents" },
    { place: "INDIA (MADRAS)", event: "Famine", date: "Nov 6 '67", deploy: "1 × DC-6 (7 tons of food)" },
    { place: "EGYPT and JORDAN", event: "Refugee war Middle East", date: "October '67", deploy: "2 × DC-6 (tents and food)" },
    { place: "NIGERIA", event: "Civil War – Secession Biafra", date: "'68 – '69", deploy: "DC-6; C-119 (food and medicines)" },
    { place: "INDIA (MADRAS)", event: "Famine", date: "1969", deploy: "DC-6 (food aid)" },
  ]},
  { decade: "1970s", entries: [
    { place: "TUNISIA", event: "Flood", date: "December '69 – January '70", deploy: "C-119 (tents and food)" },
    { place: "EAST PAKISTAN (DACCA)", event: "Typhoon in Gulf of Bengal", date: "November 18, 1970 – March 15, 1971", deploy: "4 × DC-6 (Be R.K. and ABL) — tents and medical aid (field hospital)" },
    { place: "INDIA (CALCUTTA)", event: "Famine due to war with Pakistan for liberation of East Pakistan", date: "February 18 '71", deploy: "1 × DC-6 (7 tons of food)" },
    { place: "UPPER VOLTA (OUAGADOUGOU)", event: "Famine", date: "June 25 '71", deploy: "1 × DC-6 (food)" },
    { place: "AFGHANISTAN (KABUL)", event: "Evacuation of Belgians from India (India–Pakistan war)", date: "Dec 13 '71", deploy: "1 × DC-6" },
    { place: "SAHEL (NIGER, UPPER VOLTA, CHAD, MALI)", event: "Drought / famine", date: "1973 (May–September)", deploy: "Up to 6 C-130 simultaneously on site for 3 weeks — 4,000 tons of food on behalf of the EEC" },
    { place: "FRANCE (GRENOBLE)", event: "Belgian bus accident — repatriation of victims", date: "June '73", deploy: "2 × C-130 + 2 × DC-6" },
    { place: "SAHEL", event: "Famine due to drought", date: "1974 (3 months)", deploy: "23 × C-130 (mostly return flights Belgium) — 1,200 tons" },
    { place: "TUNISIA (TUNIS – MONASTIR)", event: "Technical assistance ABOS", date: "July–October '74", deploy: "5 × C-130 — 87 tons of equipment" },
    { place: "SUDAN", event: "Famine", date: "October 8 – 18 '74", deploy: "2 × C-130; 270 tons of food" },
    { place: "HONDURAS (SAN PEDRO DE SULA)", event: "Hurricane (7,500 dead)", date: "October 1–6 '74", deploy: "2 × C-130 — 30 tons of food" },
    { place: "ANGOLA (LUANDA)", event: "Uprising — evacuation to Lisbon", date: "October 15 – 20 '75", deploy: "2 × C-130 — 30 tons of relief supplies; 450 Portuguese refugees Luanda – Lisbon" },
    { place: "GUATEMALA", event: "Earthquake", date: "February 12 – March 3 '76", deploy: "1 × C-130 (22 flights) — 200 tons of food" },
    { place: "NIGER (MARADI)", event: "Technical assistance ABOS", date: "July–November '76", deploy: "3 × C-130 — 53 tons of equipment" },
    { place: "ITALY (RIVOLTO)", event: "Earthquake", date: "May 15 – 18 '76", deploy: "6 × C-130 — food, drugs" },
    { place: "ALGERIA (SIDI AHMED)", event: "Technical assistance ABOS", date: "October – December '76 / January – June '77", deploy: "3 × C-130 (equipment) / 5 × C-130 (equipment)" },
    { place: "TUNISIA (MONASTIR)", event: "Technical assistance ABOS", date: "1977", deploy: "3 × C-130 — 37 tons of equipment" },
    { place: "ROMANIA", event: "Earthquake", date: "1977", deploy: "1 × C-130 — Medical Aid BE Red Cross" },
    { place: "MOROCCO (CASABLANCA)", event: "Technical assistance ABOS", date: "September '77 – March '78", deploy: "4 × C-130 — 59 tons equipment" },
    { place: "MALI", event: "Famine", date: "May 4 – 24 '78", deploy: "3 × C-130 — 750 tons of food (transfer and TPT on site)" },
    { place: "SPAIN (VALENCIA)", event: "Accident at Los Alfaques campsite — repatriation of victims", date: "July 13 – 20 '78", deploy: "2 × C-130" },
    { place: "SUDAN", event: "Famine", date: "August 2 – September 2 '78", deploy: "1 × C-130 — distribution 750 tons of food for ABOS" },
    { place: "ZAÏRE (KOLWEZI)", event: "Operation \u201CRed Bean\u201D — evacuation 2,500 Europeans", date: "May 18 – July '78", deploy: "Transport 1,300 paratroopers — 9 × C-130; 2 × B-727; SABENA" },
    { place: "IRAN (TEHRAN)", event: "Revolution — evacuation personnel BENELUX", date: "December 31 '78 – January 4 '79", deploy: "1 × C-130; 42 BE and NL refugees" },
    { place: "SRI LANKA (COLOMBO)", event: "Tornado (1,500 dead)", date: "March 13 – 18 '79", deploy: "1 × C-130 — 19 tons of medical equipment ABOS" },
    { place: "ZAÏRE (KITONA)", event: "Operation \u201CGreen Apple\u201D — military presence", date: "February 12 – March 30 '79", deploy: "Variable C-130 and B-727 (128 flights)" },
  ]},
  { decade: "1980s", entries: [
    { place: "THAILAND – CAMBODIA (BANGKOK)", event: "Aid to Cambodian refugees", date: "May 12 – June 18 '80", deploy: "1 × C-130 — 31 rotations Bangkok – Cambodia — total: 390 tons" },
    { place: "ALGERIA (ALGIERS)", event: "Earthquake", date: "October 12 and October 21 '80", deploy: "3 × C-130 — Belgian Army (surgical antenna)" },
    { place: "ITALY (NAPLES)", event: "Earthquake", date: "December 1 '80 – January 2 '81", deploy: "7 × C-130 (medical equipment, food, blankets)" },
    { place: "ZAIRE (BUNIA)", event: "Ugandan refugees", date: "January – April '81", deploy: "3 × C-130 — 110 hrs (food and blankets ABOS)" },
    { place: "CYPRUS", event: "Evacuation of Belgians (consequence of Iran–Iraq war)", date: "September 22 – October 7 '80", deploy: "2 × C-130" },
    { place: "NORTH YEMEN (SANA)", event: "Earthquake", date: "December 18 – 21 '82", deploy: "1 × C-130 — 13 tons BE Red Cross" },
    { place: "TURKEY (ERZURUM)", event: "Earthquake", date: "November 23 – 24 '83", deploy: "1 × C-130 (15 tons BE Red Cross)" },
    { place: "BOLIVIA", event: "Technical cooperation", date: "October '84", deploy: "3 × C-130 (technical assistance ABOS — 45 tons tech. mat.)" },
    { place: "ETHIOPIA (ADDIS ABEBA)", event: "Famine", date: "December 19 – 21 '84", deploy: "2 × C-130 — 2 × 18 tons (Red Cross)" },
    { place: "CHAD (NDJAMENA)", event: "Famine", date: "Dec 4 – 6 '84 / Dec 27 – 29 '84", deploy: "2 × C-130 / 2 × 18 tons (MSF and PZG)" },
    { place: "MALI (TIMBUKTOE)", event: "Famine", date: "Dec 11 – 13 '84 / Dec 17 – 19 '84", deploy: "2 × C-130 / 2 × 18 tons (MSF and PZG)" },
    { place: "ETHIOPIA", event: "Famine — C-130s stayed for 15 days, 4-5 daily domestic flights for ABOS, CICR, MSF and Communauté Française", date: "1985", deploy: "C-130 detachment on site" },
    { place: "SUDAN", event: "Famine", date: "1985", deploy: "8 × C-130 (5 EEC; 3 MSF) — 722 hrs" },
    { place: "MALI", event: "Famine", date: "September 13 – 15 '85", deploy: "1 × C-130 (MSF)" },
    { place: "MEXICO", event: "Earthquake", date: "September 22 – 26 '85", deploy: "1 × C-130 (MSF)" },
    { place: "COLUMBIA (BOGOTA)", event: "Volcanic eruption", date: "November 24 – 30 '85", deploy: "1 × C-130 ABOS (with Prince Philippe)" },
    { place: "SOUTH YEMEN", event: "Revolution", date: "February 13 '86", deploy: "1 × C-130 BE Red Cross (17 tons of medical aid)" },
    { place: "MALI (TIMBUKTOE)", event: "Famine", date: "March 21 – 23 '86", deploy: "1 × C-130 (MSF — Medical Aid)" },
    { place: "ETHIOPIA", event: "Famine", date: "1986", deploy: "1,648 hrs C-130 (CICR, UNDRO, MSF)" },
    { place: "SUDAN", event: "Famine", date: "March 21 – 23 '86; Apr 2 – 24; April 15 – 17 '86", deploy: "3 × C-130 (1 for CICR, 1 for MSF, 1 for PZG)" },
    { place: "ETHIOPIA", event: "Famine", date: "February 17 – 21 '87; November 28 – December 29 '89", deploy: "2 × C-130 — 165 hrs for CICR" },
    { place: "MOZAMBIQUE", event: "Rebellion", date: "May 25 – 31 '87", deploy: "1 × C-130 (MSF) — 18 tons of medical aid" },
    { place: "ETHIOPIA", event: "Famine", date: "Jan 1 – Apr 10 '88", deploy: "12 × C-130 (1,102 hrs) — UNDRO and CICR" },
    { place: "MOROCCO (RABAT)", event: "Locust plague — supply and spread of pesticides", date: "March 19 – April 30 '88", deploy: "2 × B-72; 2 × Alouette II Army; 4 × C-130" },
    { place: "RWANDA (KIGALI)", event: "Refugees — famine", date: "August 24 – September 6 '88", deploy: "2 × B-727; 2 × C-130 (coordinated with Sudan shipment)" },
    { place: "SUDAN (KHARTUM)", event: "Famine", date: "August 26 – September 6 '88", deploy: "1 × C-130 (ABOS)" },
    { place: "NICARAGUA (MANAGUA)", event: "Hurricane", date: "October 25 – November 3 '88", deploy: "1 × C-130 — 7 flights at Bluefields — 104 tons (MSF)" },
    { place: "NIGER (NIAMEY)", event: "Development cooperation", date: "October 29 – November 2 '88", deploy: "2 × C-130 ABL — 20 tons of equipment — 24 youth (MLV)" },
    { place: "SOVIET UNION (YEREVAN)", event: "Armenia earthquake (55,000 dead)", date: "December 27 – 31 '88", deploy: "1 × C-130 MSF + Belgian Committee Armenia" },
    { place: "SUDAN", event: "Famine (operation \u201CLifeline\u201D)", date: "Apr 22 – July 30 '89 (SUDAN III)", deploy: "4 × C-130; each stayed on site for 3 weeks. CICR — 476 hrs — 2,173 tons + 300 passenger transport" },
    { place: "NAMIBIA", event: "Elections — police detachment", date: "29 August – 2 September '89", deploy: "1 × B-727 — 40 people" },
    { place: "SUDAN", event: "Famine", date: "October 21 – December 24 '89 (SUDAN IV)", deploy: "4 × C-130 (135 hrs) — 205 tons CICR" },
    { place: "ROMANIA", event: "Revolution — aid to the population", date: "December 23 '89 – January 23 '90", deploy: "Relief flights" },
  ]},
  { decade: "1990s", entries: [
    { place: "TUNISIA", event: "Floods", date: "January 27 – February 7 '90", deploy: "3 × C-130; UNDRO, BE Red Cross, ABOS" },
    { place: "IRAN (TEHRAN)", event: "Earthquake (35,000 dead)", date: "June 22 – 23 '90", deploy: "1 × C-130 — 20 tons MSF" },
    { place: "ZAIRE (KINSHASA)", event: "Operation \u201CSweet Home\u201D — evacuation Be Mil collaboration", date: "August 7 – 30 '90", deploy: "8 × C-130; 1 × B-727 (evacuation personnel and equipment)" },
    { place: "JORDAN – EGYPT", event: "Operation \u201CFlying Carpet\u201D — evacuation of Egyptian refugees from Kuwait", date: "August 23 – October 4 '90", deploy: "6 × C-130; 1 × B-727 (430 hrs — 9,400 refugees)" },
    { place: "RWANDA (KIGALI)", event: "Rebellion — Operation \u201CGreen Bean\u201D — Humanitarian armed intervention, Regt Paracommando", date: "October 4 – November 27, 1990", deploy: "19 × C-130; 4 × B-727; 1 × DC-10 (SABENA)" },
    { place: "SAUDI ARABIA (RIYADH – DAHRAN)", event: "Evacuation BE personnel — oil spill control — operation \u201CGulf Stream\u201D, support WEU", date: "January 31 – February 3 '91", deploy: "2 × C-130", videos: MISSIONS_VIDEOS_SAUDI },
    { place: "SOMALIA (MOGADISHU)", event: "Rebellion — medical and food aid — operation \u201CSOS Somalia\u201D", date: "February 14 – April 30 '91", deploy: "4 × C-130 SOS Kinderdorpen — 553 tons" },
    { place: "TURKEY – IRAN (DIYARBAKIR and UROMIEH)", event: "Aid to Kurds who fled Iraq", date: "1991", deploy: "15 × C-130 — MSF and EEC (tent camp and medical aid for 3,000 people)" },
    { place: "TURKEY – IRAN (INCIRLIK and SIRSENK)", event: "Medical assistance in W Iran for refugee Kurds — Operation \u201CBlue Lodge\u201D", date: "May – June '91", deploy: "4 × C-130 — 421 hrs" },
    { place: "ZAIRE", event: "Operation \u201CBlue Beam\u201D — Armed intervention and evacuation of refugees", date: "September 23 – November 4 '91", deploy: "30 × C-130 (1,140 hrs); 10 × B-727 (142 hrs); DC-10 and B-747 (SABENA); 7 × C-141 (USAF); 1 × C-130 Portuguese Air Force. Delivery of 1,130 military personnel, 75 vehicles and 263 tons of equipment; evacuation 5,345 refugees." },
    { place: "SOMALIA / KENYA", event: "Operation \u201CRestore Hope\u201D — SOS Kinderdorf — coordination for NGOs", date: "17 December '91 – 8 January '92", deploy: "1 × C-130 — 15 flights / 150 hrs — 270 tons" },
    { place: "ALGERIA TAMANRASSET (GHARDAÏA)", event: "Relief operation", date: "February 27 '92", deploy: "C-130" },
    { place: "TURKEY (ANKARA – ERZINCAN; PISA – ERZINCAN)", event: "Earthquake — on behalf of UNDRO", date: "March 15 – 16 '92 / March 17 – 20 '92", deploy: "1 × C-130 / 1 × C-130" },
    { place: "YUGOSLAVIA (BELGRADE – ZAGREB)", event: "OPS UNPROFOR — \u201CWinter Lodge\u201D — UN peace force", date: "April – December 1992", deploy: "9 × C-130 (53 hrs); 9 × HS-748 (53 hrs); 7 × B-727 (30 hrs)" },
    { place: "KENYA – SOMALIA", event: "Food aid for UNDRO and MSF", date: "June 12 – August 28 '92", deploy: "1 × C-130 permanent (200 hrs)" },
    { place: "EX-YUGOSLAVIA / SARAJEVO", event: "On behalf of ABOS and MSF", date: "July 17 – 31 '92", deploy: "1 × C-130 permanent (90 hrs)" },
    { place: "SOMALIA", event: "Food aid for ABOS and CICR", date: "August 17 – December 30 '92", deploy: "1 × C-130 permanent (1,100 hrs)" },
    { place: "UKRAINE / MINSK", event: "Children of Chernobyl — holiday in Belgium", date: "Summer '92", deploy: "3 × B-727" },
    { place: "EX-YUGOSLAVIA / MONTENEGRO", event: "UNDRO — material reinforcement dam (danger of environmental damage)", date: "November 22 – 27 '92", deploy: "1 × C-130 (15 hrs)" },
    { place: "ALBANIA (TIRANA)", event: "Flood aid — UNDRO", date: "November 26 '92", deploy: "1 × C-130 (2 rotations — 15 hrs)" },
    { place: "SOMALIA", event: "Operation \u201CRestore Hope\u201D — deployment of the press Paracommando", date: "Dec '92", deploy: "24 × C-130 (750 hrs); 2 × B-727 (30 hrs)" },
    { place: "BRAZZAVILLE", event: "Operation \u201CSunny Winter\u201D — Zaire riot", date: "January 29 – February 24 '93", deploy: "16 × C-130 (427 hrs); 4 × B-727 (70 hrs); 2 × Merlin (10:30 hrs)" },
    { place: "KENYA – SOMALIA", event: "Food aid ABOS and CICR", date: "28 December '92 – 14 March '93", deploy: "1 × C-130 permanent (490 hrs — 70 flights)" },
    { place: "NIGER / NIAMEY", event: "Delivery of medicines to hospital Niamey — \u201CAssociation Coopération et Développement\u201D", date: "July 8 – 11 '93", deploy: "Single mission" },
    { place: "EX-YUGOSLAVIA", event: "Evacuation of wounded to Finland and Norway on behalf of IOM", date: "September 13 – 15 '93", deploy: "1 × C-130 (13 hrs)" },
    { place: "TANZANIA", event: "Tpt material tent camp for refugees", date: "October – December '93", deploy: "3 × C-130" },
    { place: "EX-YUGOSLAVIA", event: "Logistic support UNPROFOR — BELBAT — \u201CMoving Star\u201D", date: "January 1 – December 31 '93", deploy: "All types" },
    { place: "RWANDA", event: "Ops \u201CUNAMIR\u201D (BE) Det KIGALIA", date: "October 25 – December 31 '93", deploy: "C-130 (553 hrs); B-727 (55 hrs)" },
    { place: "RWANDA", event: "Ops \u201CUNAMIR\u201D (BE) Det KIGALIA", date: "Jan 1 – Apr 5 '94", deploy: "C-130 (709 hrs); B-727 (95 hrs)" },
    { place: "RWANDA", event: "Ops \u201CSilver Back\u201D — evacuation from Kigali", date: "Apr 6 – 19 '94", deploy: "C-130 (920 hrs); B-727 (217 hrs)" },
    { place: "RWANDA", event: "Ops \u201CBlue Safari\u201D — evacuation Press & Mat KIBAT to Belgium", date: "April – May '94", deploy: "C-130 (486 hrs); B-727 (20 hrs)" },
    { place: "YUGOSLAVIA", event: "Logistic support Ops UNPROFOR and peacekeeping force UNO", date: "Year '94", deploy: "C-130 (63 hrs); DA 20 (07 hrs); HS (200 hrs); B-727 (48:05 hrs); Merlin (33:40 hrs)" },
    { place: "RWANDA / KIGALI / MALAWI", event: "UNAMIR II deployment of UN Detachment", date: "August 17 – September 7 '94", deploy: "× × C-130 (81 hrs)" },
    { place: "KENYA / SOUTH SUDAN", event: "Aid ECHO (European Community Humanitarian Office)", date: "June 8 – October 26 '94", deploy: "C-130 (1,558 hrs)" },
    { place: "KENYA / SOUTH SUDAN", event: "Humanitarian Aid World Food Program", date: "August 24 – September 22, 1994", deploy: "C-130 (198 hrs)" },
    { place: "BURUNDI", event: "Humanitarian Aid ICRC", date: "May 6 – 16 '94", deploy: "C-130 rotations Nairobi – Bujumbura – Nairobi (34 hrs)" },
    { place: "KENYA", event: "Humanitarian Aid ABOS", date: "June 30 – July 7 '94", deploy: "C-130 (12 hrs) — rotations Nairobi – Mwanza" },
    { place: "KENYA", event: "Humanitarian Aid (Co-op & Development)", date: "June 30 – July 1", deploy: "C-130 (8 hrs) — Nairobi – Mwanza rotations" },
    { place: "MOLDOVA / CHISNIAU", event: "Humanitarian Aid (UN Dept Hum Affairs)", date: "September 10 – 11 '94", deploy: "C-130 (10 hrs)" },
    { place: "MOLDOVA / CHISNIAU", event: "Humanitarian Aid UNDHA", date: "September 16 – 17 '94", deploy: "C-130 (09 hrs)" },
    { place: "BURUNDI / BUJUMBURA", event: "Caritas Catholica help", date: "24 September '94", deploy: "Rotation Nairobi – Bujumbura – Nairobi — C-130 (4 hrs)" },
    { place: "HAITI", event: "Operation \u201CColumbus\u201D — substitution BE – NL police force", date: "November 1 – 5 '94", deploy: "C-130 (33 hrs)" },
    { place: "ALGERIA – EGYPT", event: "Floods in Egypt — order from UNDHA", date: "November 7 – 12 '94", deploy: "C-130 (42 hrs)" },
    { place: "GUINEA-BISSAU", event: "Tpt medicines and relief goods", date: "Dec 20 – 22 '94", deploy: "C-130 (21 hrs)" },
    { place: "EX-YUGOSLAVIA", event: "MSF — medical assistance", date: "March 2 '95", deploy: "1 × C-130" },
    { place: "SUDAN", event: "MSF — medical assistance", date: "Apr 2 – 7 '95", deploy: "1 × C-130" },
    { place: "ROMANIA / BUCHAREST", event: "Repatriation after Romanian Airbus crash — commissioned by (Be) Government", date: "March 31 – April 2; April 8 – 10 '95", deploy: "Commissioned flights" },
    { place: "CAPE VERDE ISLANDS", event: "Earthquake — commissioned by UNDRO — first aid", date: "12 – 16 April 1995", deploy: "1 × C-130" },
    { place: "CONGO / KICKWIT", event: "Medicines — Ebola epidemic — ICRC", date: "May 18 – 23 '95", deploy: "Relief flight" },
    { place: "ANGOLA", event: "Humanitarian Aid Red Cross", date: "June 13 – 30 '95", deploy: "× × C-130" },
    { place: "KENYA – SOMALIA", event: "Relief goods ECHO", date: "Year 1996", deploy: "× × C-130; 763 hrs, 1,943 tons of goods" },
    { place: "EX-YUGOSLAVIA", event: "Logistics UN peacekeeping force; passengers and cargo", date: "Year 1996", deploy: "All types; 542 hrs; 8,861 pax; 102 tons of cargo" },
    { place: "SARAJEVO", event: "Relief goods for Americares (12 tons); pax and freight on behalf of \u201CDe Munt\u201D (68 pax)", date: "January 2 '96; 7 and 12 February '96", deploy: "Multiple flights" },
    { place: "CZECH REPUBLIC / NALCHIK", event: "Relief Goods ICRC", date: "August 30 – 31, 1996", deploy: "1 × C-130; 13.5 tons of equipment" },
    { place: "ZAGREB", event: "UNTAES — transitional Administrator Mr KLEIN", date: "September 24 '96 – December 24 '96", deploy: "× × Merlin (112:05 hrs; 158 pax)" },
    { place: "ITALY / VILLAFRANCA", event: "DATF F-16 detachment", date: "Oct 9 – Dec 26 '96", deploy: "C-130; Falcon 20; HS 748 (103 hrs total)" },
    { place: "ZAIRE / UGANDA / TANZANIA", event: "Relief Goods — Operation Great Lakes", date: "Nov 9 '96 – Jan 9 '97", deploy: "× × C-130; 1 × B-727 (420 hrs total; 230 tons of freight)" },
    { place: "BRAZZAVILLE – KINSHASA", event: "Relief Goods Caritas — ABOS", date: "January 6 '97 – January 10 '97", deploy: "1 × C-130 (54,000 lbs cargo)" },
    { place: "CONGO / KINSHASA", event: "Aid Goods UNICEF — ABOS", date: "January 11 '97 – January 15 '97", deploy: "2 × C-130 (78,000 lbs cargo)" },
    { place: "BRAZZAVILLE – POINTE NOIRE", event: "Operation Green Stream — transfer of soldiers and goods, ferry between Pointe Noire and Brazzaville", date: "March 22, 1997 – May 30, 1997", deploy: "× × C-130; 2 × B-727; 1 × B-767 (Sobelair)", videos: MISSIONS_VIDEOS_BRAZZAVILLE },
    { place: "KENYA / MOMBASSA – SOMALIA – ETHIOPIA", event: "Famine — shipments World Food Program (El Niño)", date: "December 8 '97 – January '98", deploy: "2 × C-130; 3 drops of food per day each" },
    { place: "KENYA / SOMALIA", event: "Food aid commissioned by World Food Program", date: "December 28 '97 – August 25 '98", deploy: "× × C-130 on site" },
    { place: "ANGOLA / LUANDA", event: "ECHO (European Community Humanitarian Office)", date: "May 2 – December 19 '98", deploy: "× × C-130 on site" },
    { place: "ALBANIA / TIRANA", event: "Humanitarian Mission", date: "June 17 – June 19 '98", deploy: "1 × C-130" },
    { place: "CONGO / KINSHASA", event: "Evacuation of Belgians and Europeans", date: "14 – 19 August '98", deploy: "5 × A-310 — 990 passengers including 445 Belgians between Kinshasa and Libreville — repatriation 196 Belgians on 19 August '98" },
    { place: "MALI / TIMBOOKTOE", event: "ECHO", date: "August 24 – 26, 1998", deploy: "1 × C-130", videos: MISSIONS_VIDEOS_MALI },
    { place: "CONGO / KINSHASA", event: "Evacuation from DRC", date: "7 – 27 September '98", deploy: "× × C-130 on site" },
    { place: "SUDAN / EL OBEID", event: "On behalf of ABOS", date: "27 October '98 – 14 January '99", deploy: "× × C-130 on site" },
    { place: "NICARAGUA / MANAGUA", event: "Relief supplies after hurricane Mitch", date: "November 15 – 16 '98", deploy: "1 × A-310 (with Princess Astrid)" },
    { place: "SUDAN / EL OBEID", event: "Operation \u201CLifeline Sudan\u201D — ordered by ABOS", date: "January 8 '99", deploy: "C-130 detachment" },
    { place: "TURKEY", event: "Earthquake — relief supplies, rescue teams, tents", date: "August 19 – September 16 '99", deploy: "1 × C-130 in rotation — 308 tons of goods" },
    { place: "TURKEY", event: "Second earthquake — 7.5 tons of goods", date: "November 13 – November 15 '99", deploy: "1 × C-130" },
    { place: "IVORY COAST", event: "Substitute BE Mil Assistance Team", date: "October 11 – October 13 '99", deploy: "1 × C-130; 16 passengers and 8.3 tons of equipment" },
    { place: "IVORY COAST", event: "Bring back BE Mil Assistance Team", date: "Dec 7 – Dec 10 '99", deploy: "1 × C-130" },
    { place: "EX-YUGOSLAVIA 1999", event: "Peace Force UNO / NATO — all types", date: "January 1 – December 31 '99", deploy: "4,045 passengers — 55.3 tons of cargo" },
    { place: "ITALY (VILLAFRANCA – AMENDOLA) 1999", event: "Operation \u201CJoint Falcon\u201D — Tpt personnel and equipment — BE and NL Air Forces", date: "January 1 – December 31 '99", deploy: "All types — 3,020 passengers — 1,290 tons of cargo" },
    { place: "KOSOVO – ALBANIA", event: "Kosovo crisis — Tpt personnel and cargo", date: "March 4 – December 31 '99", deploy: "C-130: 4,24 passengers; 1,098 tons of cargo (1,041 hrs). A-310: 4,295 passengers; 67 tons of cargo (130 hrs)" },
    { place: "KOSOVO – ALBANIA", event: "Humanitarian aid AMERICARES — med aid, food", date: "Apr 3 – Aug 11 '99", deploy: "× × C-130; 313 passengers; 310 tons of cargo" },
    { place: "KOSOVO – ALBANIA", event: "Humanitarian aid AMERICARES, ABOS, UNICEF, UNHCR, Austrian Army, CARITAS", date: "April 6 – 23 '99", deploy: "× × C-130 (115 tons of cargo); 3 × A-310 (59 tons of cargo)" },
    { place: "KOSOVO – ALBANIA", event: "Transport refugees to Belgium", date: "Apr 18 – May 1 '99", deploy: "× × A-310 (1,225 passengers)" },
    { place: "KOSOVO – ALBANIA", event: "Transport refugees and food transport t.v.v. WFP", date: "July 8 – 30 '99", deploy: "× × C-130; 183 passengers; 255 tons of food" },
  ]},
  { decade: "2000 – 2010", entries: [
    { place: "FRANCE / BORDEAUX", event: "Storm damage — Tpt electrogen groups", date: "January 4, 2000", deploy: "1 × C-130" },
    { place: "GABON / LIBREVILLE", event: "Ex Gabon 2000 — Tpt troops and equipment", date: "January 16 – 31 '00", deploy: "5 × C-130; 355 passengers; 91 tons of cargo" },
    { place: "MOZAMBIQUE", event: "Floods — Tpt boats, milk powder, tents…", date: "March 2 – 15 '00", deploy: "× × C-130; 132 passengers; 143 tons of cargo" },
    { place: "HUNGARY / BUDAPEST", event: "Floods — transport sandbags (18.2 tons)", date: "Apr 19 '00", deploy: "1 × C-130" },
    { place: "ENGLAND / MANCHESTER, LONDON", event: "EURO 2000 — repatriation 494 hooligans with police escort (total: 1,071 passengers)", date: "June 17 – 18 '00", deploy: "× × C-130" },
    { place: "CONGO / KINSHASA and BUJUMBURA", event: "Humanitarian aid (milk powder and medicines)", date: "June 28 – Jul 2 '00", deploy: "1 × A-310; 11.2 tons of cargo + 48 passengers" },
    { place: "CONGO / KINSHASA and KISANGANI", event: "Humanitarian aid MEMISA / CARITAS", date: "June 27 – July 3 '00", deploy: "1 × C-130; 19 passengers; 6.8 tons of cargo" },
    { place: "ITALY / VILLAFRANCA and AMENDOLA 2000", event: "Operation Joint Falcon (BE and NL Air Forces)", date: "January 1 – December 31 '00", deploy: "All types; total: 1,628 passengers; 464 tons of cargo" },
    { place: "KOSOVO – ALBANIA 2000", event: "Crisis Kosovo — logistical support troops", date: "January 1 – December 31 '00", deploy: "All types; 9,312 passengers; 774 tons of cargo" },
    { place: "EX-YUGOSLAVIA 2000", event: "United Nations and NATO peacekeeping forces; logistical support", date: "January 1 – December 31 '00", deploy: "All types; 331 passengers and 6.5 tons of cargo" },
    { place: "ITALY / AMENDOLA", event: "Logistic Support Ops Joint Falcon (F-16)", date: "Year 2001", deploy: "All types — Tpt personnel and equipment" },
    { place: "KOSOVO / PRISTINA", event: "Kosovo crisis — various flights (press and mat)", date: "Year 2001", deploy: "All types — 8,346 soldiers transported" },
    { place: "UKRAINE / UZHGOROD", event: "Flood", date: "March 10 '01", deploy: "1 × C-130 — 12.6 tons of auxiliary" },
    { place: "SLOVAKIA / KOSICE", event: "Flood", date: "March 13 '01", deploy: "1 × A-310 — 12 tons auxiliary" },
    { place: "GABON / LIBREVILLE", event: "Operation \u201CGuardian Angel\u201D — intervention detachment", date: "January 17 – April 13 '01", deploy: "× × C-130; 257 hrs" },
    { place: "CONGO / KINSHASA", event: "Transport humanitarian help ABOS", date: "June 22 – 24 '01", deploy: "1 × A-310" },
    { place: "USA / NEW YORK", event: "Twin Towers attack — identification team — blocked in Keflavik, no permission to land in the US", date: "September 12 '01", deploy: "1 × DA-900" },
    { place: "ALGERIA", event: "Flood — humanitarian staff", date: "November 14 – 15 '01 / November 17 – 18 '01", deploy: "1 × C-130 / 1 × A-310" },
    { place: "AFGHANISTAN / DUSHANBE", event: "Humanitarian aid war zone — commissioned by V.N.", date: "November 19 – 22 '01 / December 14 – 18 '01", deploy: "1 × C-130 (15 tons) / 1 × C-130 (16.3 tons)" },
    { place: "TANZANIA", event: "Peacekeeping operations — support African countries", date: "February '02", deploy: "1 × C-130 and 1 × A-310" },
    { place: "PAKISTAN / KARACHI", event: "Logistic support ISAF Afghanistan", date: "March 22 – August 15 '02", deploy: "1 × BE + 1 × Portuguese C-130 (479 hrs)" },
    { place: "AFGHANISTAN / KABUL", event: "Tpt medicines, auxiliary equipment, vehicles", date: "May 8 – 9 '02", deploy: "1 × C-130 + 1 × A-310" },
    { place: "KENYA / NANYUKI", event: "African Crisis Response Initiative (ACRI)", date: "June 5 – July 1 '02", deploy: "1 × C-130 in permanence (in support US)" },
    { place: "CZECH REPUBLIC / PRAGUE", event: "Flooding in Central Europe — B-FAST assignment", date: "August 20 – 22 '02", deploy: "3 × C-130" },
    { place: "ALBANIA / TIRANA", event: "B-FAST — relief supplies", date: "August 28 '02", deploy: "1 × C-130 + 1 × A-310" },
    { place: "MOROCCO / CASABLANCA", event: "Flooding — B-FAST — medicines and blankets", date: "2002", deploy: "Relief flights" },
    { place: "BENIN / COTONOU", event: "With Bde Paracommando — exercise \u201CHerky 2002\u201D", date: "Oct 7 – Nov 4 '02", deploy: "4 × C-130 (415 hrs)" },
    { place: "ALGERIA / ZEMOURI", event: "Earthquake", date: "May 23 '03", deploy: "1 × A-310" },
    { place: "DEM. REP CONGO / KINSHASA", event: "Transport Congolese troops under \u201CFormation Continuée des Cadres (FCC)\u201D", date: "August '06 – December '06", deploy: "1 × C-130 in permanence" },
    { place: "AFGHANISTAN / KABUL", event: "Support to Provincial Reconstruction Teams in North Afghanistan", date: "Nov '06 – March '07", deploy: "1 × C-130 on site" },
    { place: "AFGHANISTAN / KABUL", event: "Logistical support to ISAF troops", date: "From November '06 — weekly", deploy: "1 × C-130" },
    { place: "EX-YUGOSLAVIA / SKOPJE – PRISTINA", event: "Logistical support to BE troops", date: "January 1 – December 31 '06", deploy: "All types of the 15th Wing" },
    { place: "DEM. REP CONGO / KINSHASA", event: "Shipments t.v.v. BE cooperatives and locals", date: "1 January '07 – 31 December '07", deploy: "1 × C-130 on site with detachment 17 persons" },
    { place: "BENIN / COTONOU", event: "Support paratroopers during operational exercise", date: "April 6 '07 – April 24 '07", deploy: "1 × C-130 on site" },
  ]},
  { decade: "2010 – 2020", entries: [] },
];

function MissionsPage({ lang }) {
  useReveal();
  const ms = standaloneFor(lang, "missionsStandalone");
  return (
    <div className="page">
      <GenericHero
        eyebrow={ms.heroEyebrow}
        title={ms.heroTitle}
        em={ms.heroEm}
        lead={ms.heroLead}
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell" style={{ maxWidth: 980 }}>
          <MissionVideo id={MISSIONS_VIDEOS_TOP[0]} />
          {MISSIONS_DECADES.map((d) => (
            <div key={d.decade} className="reveal" style={{ marginTop: 48 }}>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(28px, 4vw, 44px)", margin: "0 0 8px", borderBottom: "1px solid var(--ink)", paddingBottom: 8 }}>{d.decade}</h2>
              <div className="meta" style={{ marginBottom: 18, opacity: 0.7 }}>
                {ms.columnsLine}
              </div>
              {d.entries.map((e, i) => (
                <React.Fragment key={i}>
                  <article style={{ padding: "16px 0", borderBottom: "1px solid var(--rule-soft, rgba(0,0,0,0.1))" }}>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 4 }}>
                      • {e.place}
                    </div>
                    <div style={{ fontFamily: "var(--serif-display)", fontSize: 18, lineHeight: 1.35, margin: "2px 0 6px" }}>{e.event}</div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.75, marginBottom: 6 }}>{e.date}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.6 }}>{e.deploy}</div>
                  </article>
                  {e.videos && <MissionVideoGrid ids={e.videos} />}
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// Links page — tables + Martens CV from LINKS_TABLE_I18N (en / nl / fr / de). Headers: I18N.linksStandalone.
function LinksPage({ lang }) {
  useReveal();
  const L = standaloneFor(lang, "linksStandalone");
  const T = {
    ...LINKS_TABLE_I18N.nl,
    ...(typeof LINKS_TABLE_I18N !== "undefined" && LINKS_TABLE_I18N[lang] ? LINKS_TABLE_I18N[lang] : {}),
  };
  const { military, interesting, cv } = T;
  const linkStyle = { color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3, wordBreak: "break-word" };
  const A = ({ href, children, download }) => (
    <a href={href} target={href && href.startsWith("#") ? undefined : (download ? undefined : "_blank")} rel="noopener noreferrer" download={download || undefined} style={linkStyle}>{children}</a>
  );
  return (
    <div className="page">
      <GenericHero eyebrow={L.heroEyebrow} title={L.heroTitle} lead={L.heroLead} />

      {/* Table A · Military */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}>{L.tableMilitary}</div>
          <div className="reveal" style={{ border: "1px solid var(--ink)", background: "var(--paper)", overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.2fr 1.4fr", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
              <div style={{ padding: "14px 18px", borderRight: "1px solid var(--paper)" }}>{L.colOrg}</div>
              <div style={{ padding: "14px 18px", borderRight: "1px solid var(--paper)" }}>{L.colWeb}</div>
              <div style={{ padding: "14px 18px" }}>{L.colContact}</div>
            </div>
            {military.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1.2fr 1.2fr 1.4fr", borderTop: i ? "1px solid var(--rule-soft)" : "none", fontFamily: "var(--serif-body)", fontSize: 16 }}>
                <div style={{ padding: "20px 18px", borderRight: "1px solid var(--rule-soft)", fontWeight: 500 }}>{r.org}</div>
                <div style={{ padding: "20px 18px", borderRight: "1px solid var(--rule-soft)", color: "var(--ink-2)" }}>
                  {r.web ? <A href={r.web.href}>{r.web.label}</A> : <span>{L.noUrl}</span>}
                  {r.note && <div className="meta" style={{ marginTop: 8, color: "var(--ink-2)", textTransform: "none", letterSpacing: 0, fontSize: 13, fontFamily: "var(--serif-body)" }}>{r.note}</div>}
                </div>
                <div style={{ padding: "20px 18px", color: "var(--ink-2)" }}>
                  {r.email && <div><A href={r.email.href}>{r.email.label}</A></div>}
                  {r.poc && <div style={{ marginTop: r.email ? 6 : 0 }}><strong style={{ color: "var(--ink)" }}>{L.pocLabel}</strong> = {r.poc}</div>}
                  {r.viaContact && <div style={{ marginTop: r.email || r.poc ? 6 : 0 }}>{L.viaContact}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Table B · Interesting sources */}
      <section className="section" style={{ paddingTop: 20 }}>
        <div className="shell">
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}>{L.tableOther}</div>
          <div className="reveal" style={{ border: "1px solid var(--ink)", background: "var(--paper)", overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1.2fr 1.4fr", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
              <div style={{ padding: "14px 18px", borderRight: "1px solid var(--paper)" }}>{L.colSubject}</div>
              <div style={{ padding: "14px 18px", borderRight: "1px solid var(--paper)" }}>{L.colAuthor}</div>
              <div style={{ padding: "14px 18px" }}>{L.colLink}</div>
            </div>
            {interesting.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1.2fr 1.4fr", borderTop: i ? "1px solid var(--rule-soft)" : "none", fontFamily: "var(--serif-body)", fontSize: 16 }}>
                <div style={{ padding: "20px 18px", borderRight: "1px solid var(--rule-soft)" }}>{r.sub}</div>
                <div style={{ padding: "20px 18px", borderRight: "1px solid var(--rule-soft)", color: "var(--ink-2)" }}>{r.aut}</div>
                <div style={{ padding: "20px 18px", color: "var(--ink-2)" }}>
                  {(r.links || []).map((lnk, j) => (
                    <div key={j} style={{ marginTop: j ? 8 : 0 }}>
                      {lnk.href ? <A href={lnk.href} download={lnk.download}>{lnk.label}</A> : <span>{lnk.label}</span>}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Inline preview — Martens BAF inventory (read-only) */}
      <section id="inventory" className="section" style={{ paddingTop: 0, scrollMarginTop: 80 }}>
        <div className="shell">
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}>{L.downloadExcel}</div>
          <div className="reveal" style={{ border: "1px solid var(--ink)", background: "#f4f4f4", padding: 0, height: "min(85vh, 900px)", overflow: "hidden", position: "relative" }}>
            <iframe
              src={(typeof LINKS_EXCEL_HREF !== "undefined" ? LINKS_EXCEL_HREF : "/downloads/BAF-Inventory-1946-2002-Martens.pdf") + "#view=FitH"}
              title={L.downloadExcel}
              style={{ width: "100%", height: "100%", border: "none", display: "block" }}
              loading="lazy"
            />
          </div>
          <div className="meta reveal" style={{ marginTop: 10, color: "var(--ink-2)" }}>{L.downloadHint}</div>
        </div>
      </section>

      {/* Author's CV — Col Denis Martens */}
      <section id="cv" className="section" style={{ paddingTop: 40, background: "var(--paper-2)", scrollMarginTop: 80 }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "minmax(220px, 280px) 1fr", gap: 48, alignItems: "start" }}>
            <div style={{ minWidth: 0 }}>
              <div className="caption" style={{ marginBottom: 10 }}>{L.authorCv}</div>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: 30, lineHeight: 1.1, margin: 0, color: "var(--accent)" }}>{L.authorRank}</h2>
              <h2 style={{ fontFamily: "var(--serif-display)", fontSize: 38, lineHeight: 1.05, margin: "4px 0 18px" }}>{L.authorName}</h2>
              <div className="meta">{L.authorMeta1}</div>
              <div className="meta" style={{ marginTop: 6 }}>{L.authorMeta2}</div>
            </div>
            <div style={{ fontFamily: "var(--serif-body)", fontSize: 17, lineHeight: 1.7, color: "var(--ink-2)" }}>
              {cv.map((para, i) => (
                <p key={i} style={{ margin: i ? "16px 0 0" : 0 }}>{para}</p>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// Partners page — RAF & IWM from PARTNERS_I18N (en / nl / fr / de). Hero: I18N.partnersStandalone.
function PartnersPage({ lang }) {
  useReveal();
  const p = standaloneFor(lang, "partnersStandalone");
  const P = {
    ...PARTNERS_I18N.nl,
    ...(typeof PARTNERS_I18N !== "undefined" && PARTNERS_I18N[lang] ? PARTNERS_I18N[lang] : {}),
  };
  return (
    <div className="page">
      <GenericHero eyebrow={p.eyebrow} title={p.title} em={p.em} />

      {/* RAF Museum block */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="reveal" style={{ border: "1px solid var(--rule-soft)", background: "var(--paper)", padding: "48px 56px" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 36 }}>
              <div style={{ fontFamily: "var(--serif-display)", textAlign: "center", lineHeight: 0.9 }}>
                <div style={{ fontSize: 76, color: "#08368e", fontWeight: 700, letterSpacing: "-0.02em" }}>
                  <span style={{ display: "inline-block", width: 78, height: 78, borderRadius: "50%", border: "12px solid #08368e", verticalAlign: "middle", position: "relative", marginRight: 14 }}>
                    <span style={{ position: "absolute", inset: 14, background: "#d4202a", borderRadius: "50%" }} />
                  </span>
                  {P.rafLockupRoyal}
                </div>
                <div style={{ fontSize: 76, color: "#08368e", fontWeight: 700, letterSpacing: "-0.02em" }}>{P.rafLockupAirForce}</div>
                <div style={{ fontSize: 92, color: "#d4202a", fontFamily: "Georgia, serif", fontStyle: "italic", marginTop: -10 }}>{P.rafLockupMuseumItalic}</div>
              </div>
            </div>
            <div style={{ fontFamily: "var(--serif-body)", fontSize: 17, lineHeight: 1.75, color: "var(--ink-2)" }}>
              {P.rafParas.map((html, i) => (
                <p key={i} style={{ margin: i === P.rafParas.length - 1 ? "0 0 18px" : "0 0 14px" }} dangerouslySetInnerHTML={{ __html: html }} />
              ))}
              <div className="meta" style={{ marginBottom: 6 }}>
                <strong style={{ color: "var(--ink)" }}>{P.rafConservatorLabel}</strong>{" "}
                <span style={{ textTransform: "none", letterSpacing: 0, fontFamily: "var(--serif-body)", fontSize: 16 }}>{P.rafConservatorName}</span>
              </div>
              <a href="https://www.rafmuseum.org.uk" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)", paddingBottom: 1, fontFamily: "var(--mono)", fontSize: 13 }}>
                {P.rafUrlLabel}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* IWM block */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="reveal" style={{ border: "1px solid var(--rule-soft)", background: "var(--paper)", padding: "48px 56px" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 36 }}>
              <div style={{ background: "#d4202a", padding: "44px 80px", color: "#fff", textAlign: "center", fontFamily: "var(--serif-display)", lineHeight: 0.95, position: "relative" }}>
                <div style={{ fontSize: 110, fontWeight: 700, letterSpacing: "-0.04em" }}>IWM</div>
                <div style={{ fontSize: 14, fontFamily: "var(--mono)", letterSpacing: "0.32em", marginTop: 8 }}>{P.iwmStrapline}</div>
              </div>
            </div>
            <div style={{ fontFamily: "var(--serif-body)", fontSize: 17, lineHeight: 1.75, color: "var(--ink-2)" }}>
              {P.iwmParas.map((html, i) => (
                <p key={i} style={{ margin: i === P.iwmParas.length - 1 ? "0 0 18px" : "0 0 14px" }} dangerouslySetInnerHTML={{ __html: html }} />
              ))}
              <div style={{ fontFamily: "var(--serif-body)", fontSize: 16, color: "var(--ink)", fontWeight: 600, marginBottom: 10 }}>{P.iwmLocationsTitle}</div>
              <ul style={{ margin: "0 0 18px", paddingLeft: 22, lineHeight: 1.7 }}>
                {P.iwmLocations.map((loc) => (
                  <li key={loc.k}>
                    <strong style={{ color: "var(--ink)" }}>{loc.k}</strong> {loc.t}
                  </li>
                ))}
              </ul>
              <div className="meta" style={{ marginBottom: 6 }}>
                <strong style={{ color: "var(--ink)" }}>{P.iwmContactLabel}</strong>{" "}
                <span style={{ textTransform: "none", letterSpacing: 0, fontFamily: "var(--serif-body)", fontSize: 16 }} dangerouslySetInnerHTML={{ __html: P.iwmContactHtml }} />
              </div>
              <a href="https://www.iwm.org.uk/visits/iwm-london/about" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)", paddingBottom: 1, fontFamily: "var(--mono)", fontSize: 13 }}>
                {P.iwmUrlLabel}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// Shop / Winkel page — mirrors dakota15wing.be/nl/winkel
// Translations follow the same I18N pattern used elsewhere.
const SHOP_I18N = {
  nl: {
    eyebrow: "WINKEL · MUSEUMSHOP",
    title: "De",
    em: "winkel.",
    lead: "In onze museumwinkel vindt u boeken, magazines, badges, modelvliegtuigen en herinneringen aan het 15de Wing — beschikbaar tijdens elk bezoek aan het museum.",
    img1: "Tentoonstelling \u201CCerulean Skies / The Future is Bright\u201D · Tenacity-paneel",
    img2: "Uniformen-galerij · vlieger- en grondbemanning",
    blogTitle: "Ons ledenblad — Dakota News!",
    blogLead: "De rubriek \u201CArchief\u201D bevat de nummers van vorige jaren.",
    blogBody: [
      "Sinds 1995 publiceren wij ons kwartaalblad Dakota News — geschreven door piloten, loadmasters, technici en historici van het 15de Wing en het museum. Elk nummer brengt verhalen uit de hangars, de cockpit en de archieven, met technische dossiers, missies en interviews.",
      "Leden van DAKOTA VZW ontvangen het magazine vier keer per jaar in de bus. Niet-leden kunnen losse oudere nummers in onze winkel kopen tijdens een bezoek.",
    ],
    archiveLink: "Naar het Archief →",
    visitLink: "Plan uw bezoek →",
  },
  en: {
    eyebrow: "SHOP · MUSEUM SHOP",
    title: "The",
    em: "shop.",
    lead: "Our museum shop carries books, magazines, badges, model aircraft and 15th Wing souvenirs — available during every visit.",
    img1: "\u201CCerulean Skies / The Future is Bright\u201D exhibition · Tenacity panel",
    img2: "Uniform gallery · flight & ground crews",
    blogTitle: "Our member magazine — Dakota News!",
    blogLead: "See the \u201CArchive\u201D section for back issues from previous years.",
    blogBody: [
      "Since 1995 we have published our quarterly magazine Dakota News — written by pilots, loadmasters, technicians and historians of the 15th Wing and the museum. Every issue brings stories out of the hangars, the cockpit and the archive, with technical files, missions and interviews.",
      "Members of DAKOTA VZW receive the magazine four times a year. Non-members can purchase individual back issues in our shop during a visit.",
    ],
    archiveLink: "To the Archive →",
    visitLink: "Plan your visit →",
  },
  fr: {
    eyebrow: "BOUTIQUE · BOUTIQUE DU MUSÉE",
    title: "La",
    em: "boutique.",
    lead: "Notre boutique propose des livres, revues, écussons, maquettes d'avion et souvenirs du 15e Wing — disponibles à chaque visite du musée.",
    img1: "Exposition \u201CCerulean Skies / The Future is Bright\u201D · panneau Tenacity",
    img2: "Galerie d'uniformes · équipages de vol et au sol",
    blogTitle: "Notre revue — Dakota News\u00A0!",
    blogLead: "La rubrique \u201CArchives\u201D contient les numéros des années précédentes.",
    blogBody: [
      "Depuis 1995 nous publions notre trimestriel Dakota News — écrit par les pilotes, chefs de soute, techniciens et historiens du 15e Wing et du musée. Chaque numéro apporte les histoires des hangars, du cockpit et des archives, avec des dossiers techniques, des missions et des interviews.",
      "Les membres de DAKOTA ASBL reçoivent la revue quatre fois par an. Les non-membres peuvent acheter des numéros individuels dans notre boutique lors d'une visite.",
    ],
    archiveLink: "Vers les Archives →",
    visitLink: "Préparer votre visite →",
  },
  de: {
    eyebrow: "SHOP · MUSEUMSSHOP",
    title: "Der",
    em: "Shop.",
    lead: "In unserem Museumsshop finden Sie Bücher, Magazine, Abzeichen, Flugzeugmodelle und Souvenirs zum 15. Transportflügel — bei jedem Museumsbesuch erhältlich.",
    img1: "Ausstellung \u201CCerulean Skies / The Future is Bright\u201D · Tenacity-Tafel",
    img2: "Uniform-Galerie · Flug- und Bodenpersonal",
    blogTitle: "Unser Mitgliedermagazin — Dakota News!",
    blogLead: "Im Archiv-Bereich finden Sie alle Ausgaben der letzten Jahre.",
    blogBody: [
      "Seit 1995 erscheint unser Quartalsmagazin Dakota News — geschrieben von Piloten, Ladekommandanten, Technikern und Historikern des 15. Flügels und des Museums. Jede Ausgabe bringt Geschichten aus den Hangars, dem Cockpit und dem Archiv, mit technischen Dossiers, Einsatzberichten und Interviews.",
      "Mitglieder der DAKOTA VZW erhalten das Magazin viermal pro Jahr per Post. Nichtmitglieder können einzelne Rückausgaben bei einem Besuch im Museumsshop erwerben.",
    ],
    archiveLink: "Zum Archiv →",
    visitLink: "Besuch planen →",
  },
};
if (typeof window !== "undefined") window.DK_SHOP_I18N = SHOP_I18N;

function ShopPage({ lang, goTo }) {
  useReveal();
  const t = { ...SHOP_I18N.nl, ...(typeof SHOP_I18N !== "undefined" && SHOP_I18N[lang] ? SHOP_I18N[lang] : {}) };
  const nav = (id) => (e) => {
    e.preventDefault();
    if (typeof goTo === "function") goTo(id);
  };
  return (
    <div className="page">
      <GenericHero eyebrow={t.eyebrow} title={t.title} em={t.em} lead={t.lead} />

      {/* Two stacked photos — same layout as the real /winkel page */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell" style={{ maxWidth: 880 }}>
          <div className="reveal" style={{ display: "grid", gap: 28 }}>
            <figure style={{ margin: 0 }}>
              <div style={{ position: "relative", aspectRatio: "16/11", overflow: "hidden", border: "1px solid var(--ink)" }}>
                <img
                  src="assets/museum-tenacity-30-years.jpg"
                  alt={t.img1}
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <figcaption style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-2)" }}>
                {t.img1}
              </figcaption>
            </figure>

            <figure style={{ margin: 0 }}>
              <div style={{ position: "relative", aspectRatio: "16/12", overflow: "hidden", border: "1px solid var(--ink)" }}>
                <img
                  src="assets/museum-mannequin-gallery.jpg"
                  alt={t.img2}
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
                />
              </div>
              <figcaption style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-2)" }}>
                {t.img2}
              </figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* "Ons ledenblad — Dakota News!" block */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="shell" style={{ maxWidth: 880 }}>
          <div className="reveal">
            <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 38, lineHeight: 1.1, margin: "0 0 14px", color: "var(--ink)" }}>
              {t.blogTitle}
            </h3>
            <div className="meta" style={{ marginBottom: 22, color: "var(--ink-2)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--serif-body)", fontStyle: "italic", fontSize: 16 }}>
              {t.blogLead}
            </div>
            {t.blogBody.map((p, i) => (
              <p key={i} style={{ fontFamily: "var(--serif-body)", fontSize: 17, lineHeight: 1.75, color: "var(--ink-2)", margin: i ? "14px 0 0" : 0 }}>{p}</p>
            ))}
            <div style={{ marginTop: 28, display: "flex", gap: 18, flexWrap: "wrap" }}>
              <a className="meta" href="#p=magazine" onClick={nav("magazine")} style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)", paddingBottom: 2, cursor: "pointer" }}>
                {t.archiveLink}
              </a>
              <a className="meta" href="#p=visit" onClick={nav("visit")} style={{ color: "var(--ink-2)", borderBottom: "1px solid var(--rule-soft)", paddingBottom: 2, cursor: "pointer" }}>
                {t.visitLink}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// Contact page — verbatim address block
function ContactPage({ lang }) {
  useReveal();
  const c = contactFor(lang);
  return (
    <div className="page">
      <GenericHero eyebrow={c.heroEyebrow} title={c.heroTitle} em={c.heroEm} />
      <section className="section" style={{ paddingTop: 20 }}>
        <div className="shell">
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <div className="info-grid" style={{ margin: 0, gridTemplateColumns: "1fr", border: "1px solid var(--rule-soft)" }}>
              <div className="info-cell"><h4>{c.lblAddress}</h4><p>{c.addrLine1}<br />{c.addrLine2}<br />{c.addrLine3}<br />{c.countryLine}</p></div>
              <div className="info-cell"><h4>{c.lblEmail}</h4><p><a href={`mailto:${c.secretariatEmail}`}>{c.secretariatEmail}</a></p></div>
              <div className="info-cell"><h4>{c.lblPhone}</h4><p><a href={`tel:${String(c.phoneDisplay).replace(/[^\d+]/g, "")}`}>{c.phoneDisplay}</a></p></div>
              <div className="info-cell"><h4>{c.lblOpening}</h4><p>{c.openingValue}</p></div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{c.formEyebrow}</div>
              <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 28, lineHeight: 1.15, margin: "0 0 14px" }}>{c.emailTitle}</h3>
              <p style={{ fontFamily: "var(--serif-body)", fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)", margin: "0 0 22px" }}>{c.emailBody}</p>
              <a href={`mailto:${c.secretariatEmail}`} className="btn btn-primary" style={{ display: "inline-block", textDecoration: "none" }}>{c.emailBtn} →</a>
              <div style={{ marginTop: 18, fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-2)" }}>
                {c.emailCopyLabel} <a href={`mailto:${c.secretariatEmail}`} style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>{c.secretariatEmail}</a>
              </div>
              <p className="meta" style={{ marginTop: 24 }}>{c.footerMeta}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LandingPage, ShopPage, AirTptPage, OurMuseumPage, MagazinePage, MissionsPage, LinksPage, PartnersPage, ContactPage });