// ============================================================
// chrome.jsx — site shell: header, footer
// ============================================================

// ------------------------------------------------------------
// SiteHeader
// ------------------------------------------------------------
function SiteHeader({ route, onRoute, onLogoClick }) {
  const { mobile } = window.useViewport();
  const [navOpen, setNavOpen] = React.useState(false);

  const nav = [
  { id: "home", label: "Home" },
  { id: "products", label: "Products" },
  { id: "research", label: "Research" },
  { id: "contact", label: "Contact" }];


  // Triple-click on the logo triggers after-hours mode
  const clicksRef = React.useRef([]);
  const handleLogoClick = (e) => {
    const now = performance.now();
    clicksRef.current = clicksRef.current.filter((t) => now - t < 700);
    clicksRef.current.push(now);
    if (clicksRef.current.length >= 3) {
      clicksRef.current = [];
      onLogoClick && onLogoClick();
      return;
    }
    onRoute("home");
  };

  // ──────────────── MOBILE BRANCH ────────────────
  if (mobile) {
    return (
      <header className="site-header-mobile" style={{
        borderBottom: "1px solid var(--border-default)",
        background: "var(--black-100)",
        position: "sticky", top: 0, zIndex: 50
      }}>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "10px 16px", height: 52
        }}>
          <a onClick={handleLogoClick} style={{
            display: "flex", alignItems: "center", gap: 10,
            color: "var(--phosphor-500)", cursor: "pointer"
          }}>
            <img src="assets/logos/mark.svg" width="26" height="26" alt=""
              style={{ filter: "drop-shadow(0 0 6px #33ff6688)" }} />
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 15, letterSpacing: "0.16em"
            }}>FUSIONARIA</div>
          </a>
          <button onClick={() => setNavOpen(true)} aria-label="Open navigation"
            style={{
              background: "transparent", border: "1px solid var(--border-default)",
              color: "var(--phosphor-500)", padding: "6px 12px",
              fontFamily: "var(--font-mono)", fontSize: 16, cursor: "pointer",
              letterSpacing: "0.1em",
            }}>≡</button>
        </div>
        <window.MobileNavOverlay open={navOpen} onClose={() => setNavOpen(false)}
          items={nav} current={route} onNavigate={onRoute} />
      </header>
    );
  }
  // ──────────────── DESKTOP BRANCH ────────────────

  return (
    <header style={{
      borderBottom: "1px solid var(--border-default)",
      background: "var(--black-100)",
      position: "sticky", top: 0, zIndex: 50
    }}>
      {/* Top admin strip */}
      <div style={{
        background: "var(--black-200)", borderBottom: "1px solid var(--border-default)",
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: 0.24 * 16 + "px",
        textTransform: "uppercase", color: "var(--fg-muted)"
      }}>
        <div className="wrap-wide" style={{
          display: "flex", justifyContent: "space-between", padding: "6px 32px", gap: 18
        }}>
          <span style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span>SANTIAGO, CHILE</span>
          </span>
          <span style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span><span className="pill nominal" style={{ padding: "0 8px" }}><span className="dot" />ONLINE</span></span>
          </span>
        </div>
      </div>

      {/* Main bar */}
      <div className="wrap-wide" style={{
        display: "flex", alignItems: "center", height: 64
      }}>
        <a onClick={handleLogoClick} style={{
          display: "flex", alignItems: "center", gap: 14,
          color: "var(--phosphor-500)", cursor: "pointer"
        }}>
          <img src="assets/logos/mark.svg" width="32" height="32" alt=""
          style={{ filter: "drop-shadow(0 0 6px #33ff6688)" }} />
          <div style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 20, letterSpacing: "0.18em"
          }}>FUSIONARIA</div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.28em",
            color: "var(--fg-muted)", borderLeft: "1px solid var(--border-default)", paddingLeft: 12,
            lineHeight: 1.3, whiteSpace: "nowrap"
          }}>LABS · SPA<br />CL · RUT 78060986-9</div>
        </a>

        <nav style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
          {nav.map((n) =>
          <a key={n.id} onClick={() => onRoute(n.id)}
          style={{
            padding: "8px 14px", cursor: "pointer",
            fontFamily: "var(--font-display)", fontSize: 11,
            letterSpacing: "0.22em", textTransform: "uppercase",
            color: route === n.id ? "var(--phosphor-500)" : "var(--steel-100)",
            borderBottom: route === n.id ? "2px solid var(--phosphor-500)" : "2px solid transparent",
            textShadow: route === n.id ? "0 0 6px #33ff6688" : "none"
          }}>
              {n.label}
            </a>
          )}
          <a className="btn" style={{ marginLeft: 14 }} onClick={() => onRoute("contact")}>Intake →</a>
        </nav>
      </div>

    </header>);

}

// ------------------------------------------------------------
// SiteFooter — dense legal / patent / regulatory
// ------------------------------------------------------------
function SiteFooter({ onRoute }) {
  return (
    <>
      <footer className="foot">
        <div className="wrap-wide">
          <div className="grid">
            <div>
              <img src="assets/logos/wordmark.svg" alt="FUSIONARIA LABS"
              style={{ height: 20, marginBottom: 18, filter: "drop-shadow(0 0 6px #33ff6644)" }} />
              <p style={{ margin: "0 0 14px", color: "var(--steel-100)", lineHeight: 1.6, fontFamily: "var(--font-sans)", fontSize: 13 }}>Fusionaria Labs SPA. Privately held. Engagement by referral.



              </p>
              <p style={{ margin: 0, color: "var(--fg-faint)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                EST. 2024 — REGISTERED SANTIAGO, CL — RUT 78060986-9<br />
                CIIU 711002 · Development of manufacturing methods<br />
                for electrical machinery
              </p>
            </div>

            <div>
              <h4>Catalogue</h4>
              <ul>
                <li><a onClick={() => onRoute("products")}>FL-MHA / L · Hairpin line</a></li>
                <li><a onClick={() => onRoute("products")}>FL-CLM / S · Closed-loop sim</a></li>
                <li><a onClick={() => onRoute("products")}>FL-CHP / R · CHP winding set</a></li>
                <li><a onClick={() => onRoute("products")}>FL-AMB / B · Bifilar AMB coils</a></li>
              </ul>
            </div>

            <div>
              <h4>Capabilities</h4>
              <ul>
                <li>Automated hairpin generation</li>
                <li>Closed-loop automated manufacturing</li>
                <li>Simulation-led process development</li>
                <li>Bespoke tooling, hairpin / CHP</li>
              </ul>
            </div>

          </div>

          {/* contract block */}
          <div style={{
            display: "grid", gridTemplateColumns: "2fr 1fr",
            gap: 32, marginTop: 56, paddingTop: 24,
            borderTop: "1px solid var(--border-faint)",
            color: "var(--fg-faint)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", lineHeight: 1.7
          }}>
            <div>
              Quotations and specifications on this site are indicative and
              confirmed per engagement.
            </div>
            <div style={{ textAlign: "right" }}>
              © 2024–2026 Fusionaria Labs SPA<br />
              Manufacturing R&amp;D
            </div>
          </div>
        </div>
        <div className="hazard-stripe" style={{ marginTop: 32 }} />
      </footer>
    </>);

}

Object.assign(window, { SiteHeader, SiteFooter });