// ============ Shared chrome: Nav + Footer + Tweaks ============

const { useState, useEffect, useRef } = React;

function useReveal() {
  useEffect(() => {
    // Promote everything on mount. We previously used IntersectionObserver for a
    // reveal-on-scroll effect, but it proved unreliable across page switches.
    // Reliable content visibility > clever animation.
    const promote = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => el.classList.add("in"));
    };
    promote();
    // Safety net: re-run shortly after mount in case children mount async.
    const t1 = setTimeout(promote, 50);
    const t2 = setTimeout(promote, 300);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
}

function BrandMark({ alt }) {
  const fallback =
    (typeof I18N !== "undefined" && I18N.nl && I18N.nl.chrome && I18N.nl.chrome.logoAlt) ||
    "Logo DAKOTA 15 Wing";
  return (
    <img src="assets/dakota-logo.png" alt={alt || fallback} />
  );
}

function BrandMark__unused() {
  return (
    <svg viewBox="0 0 44 44" width="28" height="28">
      <g fill="none" stroke="currentColor" strokeWidth="1.3">
        <circle cx="22" cy="22" r="20" />
        <path d="M 6 22 L 38 22 L 40 23 L 38 24 L 6 24 Z" fill="currentColor" stroke="none" />
        <path d="M 22 22 L 14 10 L 26 22 L 14 34 L 22 24" />
        <circle cx="22" cy="22" r="2.5" fill="currentColor" stroke="none" />
      </g>
    </svg>
  );
}

const BLUE_VARIANTS = [
  { swatchKey: "swatchAviation", v: "#0e3a6b" },
  { swatchKey: "swatchFlightDeck", v: "#0b4b7a" },
  { swatchKey: "swatchSkyBeacon", v: "#1464a8" },
  { swatchKey: "swatchDeepCobalt", v: "#0a2a4a" },
];

function Nav({ page, setPage, lang, setLang }) {
  const t = I18N[lang] || I18N.nl;
  const n = { ...(I18N.nl.nav || {}), ...(t.nav || {}) };
  const ch = { ...(I18N.nl.chrome || {}), ...(t.chrome || {}) };
  return (
    <nav className="nav">
      <div className="shell nav-top">
        <div className="brand" onClick={() => setPage("landing")} style={{ cursor: "pointer" }} title={n.toLanding}>
          <div className="brand-mark"><BrandMark alt={ch.logoAlt} /></div>
          <div className="brand-text">
            <div className="top">DAKOTA</div>
            <div className="bot">{ch.brandSubline}</div>
          </div>
        </div>
        <div />
        <div className="nav-right">
          <div className="lang-toggle">
            {["FR", "NL", "DE", "EN"].map((code) => {
              const k = code.toLowerCase();
              return (
                <button
                  key={code}
                  className={lang === k ? "on" : ""}
                  onClick={() => setLang(k)}
                  title={code}
                >
                  {code}
                </button>
              );
            })}
          </div>
          <button className="nav-cta" onClick={() => setPage("contact")}>{n.contact}</button>
        </div>
      </div>
      <div className="shell nav-bottom">
        <div className="nav-links">
          {NAV_ITEMS.map((l) => (
            <div
              key={l.id}
              className={"nav-link" + (page === l.id ? " active" : "")}
              onClick={() => setPage(l.id)}
            >
              {n[l.id] || l.label}
            </div>
          ))}
        </div>
      </div>
    </nav>
  );
}

function Footer({ setPage, lang }) {
  const t = I18N[lang] || I18N.nl;
  const n = { ...(I18N.nl.nav || {}), ...(t.nav || {}) };
  const c0 = I18N.nl.contactStandalone;
  const f0 = I18N.nl.footer;
  const c = { ...c0, ...(t.contactStandalone || {}) };
  const ch = { ...(I18N.nl.chrome || {}), ...(t.chrome || {}) };
  const f = { ...f0, ...(t.footer || {}) };
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="ft-brand">
            <img
              src="assets/dakota-logo.png"
              alt={ch.logoAlt || "Logo DAKOTA 15 Wing"}
              style={{ width: 200, height: 200, objectFit: "contain", display: "block", background: "transparent", marginBottom: 18, marginLeft: -8 }}
            />
            <div className="mark-big">DAKOTA</div>
            <div className="caption" style={{ color: "var(--paper)", opacity: 0.55, marginBottom: 20 }}>
              {ch.footerMark}
            </div>
            <p>{f.blurb}</p>
          </div>
          <div>
            <h5>{f.colMuseum}</h5>
            <a onClick={() => setPage("home")}>{n.home}</a>
            <a onClick={() => setPage("airtpt")}>{n.airtpt}</a>
            <a onClick={() => setPage("visit")}>{n.visit}</a>
            <a onClick={() => setPage("aircraft")}>{n.aircraft}</a>
            <a onClick={() => setPage("museum")}>{n.museum}</a>
            <a onClick={() => setPage("shop")}>{n.shop}</a>
          </div>
          <div>
            <h5>{f.colEngage}</h5>
            <a onClick={() => setPage("support")}>{n.support}</a>
            <a onClick={() => setPage("magazine")}>{n.magazine}</a>
            <a onClick={() => setPage("missions")}>{n.missions}</a>
            <a onClick={() => setPage("links")}>{n.links}</a>
            <a onClick={() => setPage("partners")}>{n.partners}</a>
          </div>
          <div>
            <h5>{f.colContact}</h5>
            <a onClick={() => setPage("contact")}>{c.addrLine1}</a>
            <a onClick={() => setPage("contact")}>{c.addrLine2}</a>
            <a onClick={() => setPage("contact")}>{c.addrLine3}</a>
            <a onClick={() => setPage("contact")}>{c.secretariatEmail}</a>
            <a onClick={() => setPage("contact")}>{c.phoneDisplay}</a>
          </div>
        </div>
        <div className="footer-bot">
          <div>{f.copyright}</div>
          <div>{f.addressMono}</div>
          <div>
            {f.createdBy}{" "}
            <a href="https://www.linkedin.com/in/vibecoding/" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>Laurens Dauchy</a>
            {" "}{ch.creditAfterName}{" "}
            <a href="https://Nivk.com" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>Nivk</a>
          </div>
        </div>
        <div style={{ textAlign: "center", paddingTop: 18, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.55 }}>
          {f.entityStrip}
        </div>
      </div>
    </footer>
  );
}

// ========== Tweaks panel ==========
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "navbarBlue": "#0e3a6b"
}/*EDITMODE-END*/;

function TweaksPanel({ open, onClose, current, setCurrent, lang }) {
  if (!open) return null;
  const t = I18N[lang] || I18N.nl;
  const tw = { ...(I18N.nl.tweaks || {}), ...(t.tweaks || {}) };
  const ch = { ...(I18N.nl.chrome || {}), ...(t.chrome || {}) };
  return (
    <div className="tweaks-panel">
      <h3>{tw.title}</h3>
      <div className="lbl" style={{ marginBottom: 10 }}>{tw.colorLabel}</div>
      <div className="swatches">
        {BLUE_VARIANTS.map((b) => (
          <div
            key={b.v}
            className={"sw" + (current === b.v ? " on" : "")}
            style={{ background: b.v }}
            title={ch[b.swatchKey] || b.swatchKey}
            onClick={() => setCurrent(b.v)}
          />
        ))}
      </div>
      <div className="lbl" style={{ fontSize: 10, opacity: 0.5 }}>
        {tw.colorNote}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, TweaksPanel, useReveal, TWEAK_DEFAULTS });