/* Shared layout components for North Harbor Technologies (v2 — Plate)
   Exposed on window so multiple Babel scripts can use them. */

/* ---- Tweaks defaults ---- */
const NH_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "fog",
  "showProducts": true,
  "showProcess": true
}/*EDITMODE-END*/;

const ACCENTS = {
  fog:     { hex: "#6E8696", soft: "rgba(110,134,150,0.12)",  line: "rgba(110,134,150,0.40)",  label: "Fog" },
  ember:   { hex: "#BE7E4E", soft: "rgba(190,126,78,0.12)",   line: "rgba(190,126,78,0.40)",   label: "Ember" },
  oxblood: { hex: "#8A4A45", soft: "rgba(138,74,69,0.12)",    line: "rgba(138,74,69,0.40)",    label: "Oxblood" },
};

function applyAccent(name) {
  const a = ACCENTS[name] || ACCENTS.fog;
  const r = document.documentElement.style;
  r.setProperty("--accent",      a.hex);
  r.setProperty("--accent-soft", a.soft);
  r.setProperty("--accent-line", a.line);
}

function NHTweaks() {
  if (!window.useTweaks) return null;
  const [t, setTweak] = window.useTweaks(NH_DEFAULTS);

  React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);

  React.useEffect(() => {
    window.__nhTweaks = t;
    window.dispatchEvent(new CustomEvent("nh-tweaks", { detail: t }));
  }, [t]);

  return (
    <window.TweaksPanel title="Tweaks" defaultOpen={false}>
      <window.TweakSection label="Accent">
        <window.TweakRadio
          label="Color"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["fog", "ember", "oxblood"]}
        />
      </window.TweakSection>
      <window.TweakSection label="Sections">
        <window.TweakToggle
          label="Show process"
          value={t.showProcess}
          onChange={(v) => setTweak("showProcess", v)}
        />
        <window.TweakToggle
          label="Show products"
          value={t.showProducts}
          onChange={(v) => setTweak("showProducts", v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* ─────────────────────────────────────────────────────────
   Brand mark — L·H Star through bullseye (compass × concentric)
   Square form for inline use (header, footer, lockups).
   ───────────────────────────────────────────────────────── */
function NHMark({ size = 28, stroke = "currentColor", accent = "var(--accent)" }) {
  const w = size, h = size, c = w/2;
  const sw = Math.max(1, size/56);
  const r  = w*0.34;            // outer ring radius — leaves room for tips outside
  const Lv = r*1.32;            // N/S tip extension past outer ring
  const Lh = r*1.22;            // E/W tip extension
  const wV = r*0.17;            // N-S spear waist
  const wH = r*0.14;            // E-W spear waist
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} aria-hidden="true" style={{overflow:"visible"}}>
      <circle cx={c} cy={c} r={r}      fill="none" stroke={stroke} strokeWidth={sw*0.90} />
      <circle cx={c} cy={c} r={r*0.55} fill="none" stroke={stroke} strokeWidth={Math.max(0.7, sw*0.50)} opacity="0.45" />
      {/* E-W spear — fainter, drawn first so N-S sits on top */}
      <polygon points={`${c-Lh},${c} ${c},${c+wH} ${c+Lh},${c} ${c},${c-wH}`} fill={stroke} opacity="0.5" />
      {/* South half of N-S spear — neutral */}
      <polygon points={`${c},${c+Lv} ${c+wV},${c} ${c-wV},${c}`} fill={stroke} opacity="0.92" />
      {/* North half of N-S spear — accent */}
      <polygon points={`${c},${c-Lv} ${c+wV},${c} ${c-wV},${c}`} fill={accent} />
      {/* Hub */}
      <circle cx={c} cy={c} r={r*0.13} fill={stroke} />
    </svg>
  );
}

/* Wordmark — Plate is the mark. Sits top-left in the header. */
function NHWordmark({ inverse = false }) {
  const stroke = inverse ? "var(--paper-on-dark)" : "currentColor";
  return (
    <a href="index.html" className="nh-wordmark nh-wordmark--plate" aria-label="North Harbor Technologies"
       style={{ color: inverse ? "var(--paper-on-dark)" : "var(--ink)" }}>
      <span className="nh-plate__serial">NH · 01</span>
      <NHMark size={26} stroke={stroke} />
      <span className="nh-wordmark__name">North Harbor</span>
    </a>
  );
}

function NHHeader({ active }) {
  return (
    <header className="nh-header">
      <div className="nh-container nh-header__inner">
        <NHWordmark />
        <nav className="nh-nav">
          <a href="index.html" data-active={active === "home"}>Work</a>
          <a href="services.html" data-active={active === "services"}>Services</a>
          <a href="index.html#process" data-active={active === "process"}>Process</a>
          <a href="NewProject.html" data-active={active === "newproject"} className="nh-nav__cta">
            Start a project
          </a>
        </nav>
      </div>
    </header>
  );
}

function NHFooter() {
  return (
    <footer className="nh-footer">
      <div className="nh-container">
        <div className="nh-footer__grid">
          <div>
            <NHWordmark />
            <p style={{ marginTop: 20, maxWidth: 360, color: "var(--ink-mute)", fontSize: 14, lineHeight: 1.6 }}>
              Bespoke AI systems, built quietly, for businesses that can't afford to be wrong.
            </p>
          </div>
          <div>
            <h6>— Studio</h6>
            <ul>
              <li><a href="services.html">Services</a></li>
              <li><a href="index.html#process">Process</a></li>
              <li><a href="NewProject.html">Start a project</a></li>
            </ul>
          </div>
          <div>
            <h6>— Products</h6>
            <ul>
              <li><a href="https://www.beacon-app.ai/" target="_blank" rel="noreferrer">Beacon ↗</a></li>
              <li><a href="https://www.northharborproductions.com/" target="_blank" rel="noreferrer">NH Productions ↗</a></li>
            </ul>
          </div>
          <div>
            <h6>— Contact</h6>
            <ul>
              <li><a href="mailto:info@northharbortech.com">info@northharbortech.com</a></li>
              <li><a href="NewProject.html">Start a project →</a></li>
            </ul>
          </div>
        </div>
        <div className="nh-footer__bottom">
          <span>© 2026 North Harbor Technologies</span>
          <span>NH·2025·001 · New York City / Remote</span>
        </div>
      </div>
    </footer>
  );
}

/* IntersectionObserver-based reveal hook */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".nh-reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, {
  NHTweaks, NHWordmark, NHHeader, NHFooter, NHMark, useReveal, NH_DEFAULTS, applyAccent,
});