// Studio WIBI — shared chrome (Nav, Footer, Logomark, hooks)
// Loaded on every page.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c98a2a",
  "headlineStyle": "mixed",
  "density": "airy",
  "altBg": true
}/*EDITMODE-END*/;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;

// ---------- reveal-on-scroll hook ----------
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}
window.useReveal = useReveal;

// ---------- color helpers ----------
function _lighten(hex, n) {
  const c = parseInt(hex.slice(1), 16);
  const R = Math.min(255, ((c >> 16) & 255) + n);
  const G = Math.min(255, ((c >> 8) & 255) + n);
  const B = Math.min(255, (c & 255) + n);
  return "#" + ((R << 16) | (G << 8) | B).toString(16).padStart(6, "0");
}
function _darken(hex, n) {
  const c = parseInt(hex.slice(1), 16);
  const R = Math.max(0, ((c >> 16) & 255) - n);
  const G = Math.max(0, ((c >> 8) & 255) - n);
  const B = Math.max(0, (c & 255) - n);
  return "#" + ((R << 16) | (G << 8) | B).toString(16).padStart(6, "0");
}
function applyAccent(accent) {
  const r = document.documentElement.style;
  r.setProperty("--amber", accent);
  r.setProperty("--amber-glow", _lighten(accent, 32));
  r.setProperty("--amber-deep", _darken(accent, 32));
}
window.applyAccent = applyAccent;

// ---------- Logomark ----------
function Logomark({ size = 22 }) {
  return (
    <img
      src="Links/20260517_StudioWIBI_Logo.png"
      alt="Studio WIBI"
      width={size}
      height={size}
      style={{ display: "block", objectFit: "contain" }}
    />
  );
}
window.Logomark = Logomark;

// ---------- Nav ----------
function Nav({ active = "home" }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const links = [
    { id: "manifesto", label: "Manifesto", href: active === "home" ? "#manifesto" : "index.html#manifesto" },
    { id: "practice",  label: "Practice",  href: active === "home" ? "#practice"  : "index.html#practice" },
    { id: "lumen",     label: "Lumen",     href: "lumen.html" },
    { id: "contact",   label: "Contact",   href: active === "home" ? "#contact"   : "index.html#contact" },
  ];

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="index.html" className="brand" aria-label="Studio WIBI — home">
        <img
          src="Links/20260517_StudioWIBI_Logo.png"
          alt="Studio WIBI"
          style={{ height: 36, width: "auto", display: "block", objectFit: "contain" }}
        />
      </a>
      <div className="links">
        {links.map(l => (
          <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
        ))}
      </div>
      <a href={active === "lumen" ? "#reserve" : "lumen.html#reserve"} className="cta">
        {active === "lumen" ? "Reserve a Lumen" : "Priority Access"}
      </a>
    </nav>
  );
}
window.Nav = Nav;

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer-wrap" id="contact">
      <div className="inner">
        <div className="row1">
          <div className="addr">
            <span className="b">Studio WIBI</span>
            Wilhelminakade 308<br/>
            3072 AR Rotterdam<br/>
            The Netherlands
            <div style={{ marginTop: 14, color: "var(--grey-1)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em" }}>
              51.9035° N · 4.4845° E
            </div>
          </div>
          <div>
            <h6>Studio</h6>
            <ul>
              <li><a href="index.html#manifesto">Manifesto</a></li>
              <li><a href="index.html#practice">Practice</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>
          <div>
            <h6>Work</h6>
            <ul>
              <li><a href="lumen.html">Lumen</a></li>
              <li><a href="#">Studio Editions</a></li>
              <li><a href="#">Commissions</a></li>
              <li><a href="#">Archive</a></li>
            </ul>
          </div>
          <div>
            <h6>Contact</h6>
            <ul>
              <li><a href="mailto:studio@wibi.nl">studio@wibi.nl</a></li>
              <li><a href="tel:+31102000000">+31 10 200 0000</a></li>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">Are.na</a></li>
            </ul>
          </div>
        </div>
        <div className="row2">
          <div>© MMXXVI Studio WIBI B.V. · KvK 9000.0042</div>
          <div>Made in Rotterdam</div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

// ---------- Tweaks panel ----------
function SiteTweaks({ t, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Accent" />
      <window.TweakColor
        label="Glow color"
        value={t.accent}
        onChange={(v) => setTweak("accent", v)}
        options={["#c98a2a", "#b8782a", "#d4a04a", "#a36a1f", "#bf7c44", "#9c8862"]}
      />
      <window.TweakSection label="Type" />
      <window.TweakRadio
        label="Headline"
        value={t.headlineStyle}
        onChange={(v) => setTweak("headlineStyle", v)}
        options={[
          { value: "mixed", label: "Mixed" },
          { value: "sans",  label: "Sans" },
          { value: "serif", label: "Serif" },
        ]}
      />
      <window.TweakSection label="Layout" />
      <window.TweakRadio
        label="Density"
        value={t.density}
        onChange={(v) => setTweak("density", v)}
        options={[
          { value: "compact", label: "Compact" },
          { value: "airy",    label: "Airy" },
          { value: "epic",    label: "Epic" },
        ]}
      />
      <window.TweakToggle
        label="Alternating section bg"
        value={t.altBg}
        onChange={(v) => setTweak("altBg", v)}
      />
    </window.TweaksPanel>
  );
}
window.SiteTweaks = SiteTweaks;

// ---------- density styles injected once per page ----------
(function injectDensityStyle() {
  const s = document.createElement("style");
  s.id = "wibi-density";
  s.textContent = `
    [data-density="compact"] section.block { padding: 96px 48px; }
    [data-density="epic"] section.block { padding: 200px 48px; }
    @media(max-width:720px){
      [data-density="compact"] section.block { padding: 72px 24px; }
      [data-density="epic"] section.block { padding: 128px 24px; }
    }
    [data-altbg="false"] .section-alt { background: var(--bg); }
  `;
  document.head.appendChild(s);
})();