// Shared website chrome: Nav + Footer
const NS = window.DeckhausDesignSystem_ca5964;

// tone: "dark" → white mark, "light" → black mark
function Mark({ size = 26, tone = "dark" }) {
  const src = tone === "light"
    ? "assets/logos/deckhaus-mark-black.svg"
    : "assets/logos/deckhaus-mark-white.svg";
  return <img src={src} style={{ height: size, display: "block" }} alt="" />;
}

function Wordmark({ tone = "dark" }) {
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); window.DH_NAV("home"); }}
      style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Mark size={24} tone={tone} />
      <span style={{ fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "0", color: "var(--text-primary)" }}>deckhaus</span>
    </a>
  );
}

// tone controls the surface the nav sits on: "dark" or "light"
function Nav({ view, tone = "dark" }) {
  const { Button } = NS;
  const items = [["work", "Work"], ["services", "Services"], ["sprint", "Visual Sprint"], ["shop", "Shop"]];
  const [scrolled, setScrolled] = React.useState(false);
  const [navTone, setNavTone] = React.useState(tone);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => { setMenuOpen(false); }, [view]);
  React.useEffect(() => {
    const probe = () => {
      const y = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
      setScrolled(y > 28);
      // which section sits behind the header band?
      let t = "light";
      document.querySelectorAll("main section, footer").forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top <= 70 && r.bottom > 70) t = el.getAttribute("data-theme") === "dark" ? "dark" : "light";
      });
      setNavTone(t);
    };
    probe();
    const raf = requestAnimationFrame(probe);
    window.addEventListener("scroll", probe, { passive: true });
    document.addEventListener("scroll", probe, { passive: true, capture: true });
    window.addEventListener("resize", probe);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("scroll", probe); document.removeEventListener("scroll", probe, { capture: true }); window.removeEventListener("resize", probe); };
  }, [view]);
  const blur = "blur(26px) saturate(190%) contrast(105%)";
  const darkGlass = { background: "color-mix(in srgb, var(--bg-base) 32%, transparent)", backdropFilter: blur, WebkitBackdropFilter: blur, borderBottom: "1px solid color-mix(in srgb, var(--paper) 12%, transparent)", boxShadow: "0 1px 0 rgba(255,255,255,.06) inset, 0 10px 34px -20px rgba(0,0,0,.7)" };
  const lightGlass = { background: "color-mix(in srgb, var(--paper) 64%, transparent)", backdropFilter: blur, WebkitBackdropFilter: blur, borderBottom: "1px solid color-mix(in srgb, var(--text-primary) 9%, transparent)", boxShadow: "0 1px 0 rgba(255,255,255,.5) inset, 0 10px 34px -22px rgba(0,0,0,.22)" };
  const transparent = { background: "transparent", backdropFilter: "none", WebkitBackdropFilter: "none", borderBottom: "1px solid transparent", boxShadow: "none" };
  const glass = !scrolled ? transparent : (navTone === "dark" ? darkGlass : lightGlass);
  return (
    <header data-theme={navTone} style={{ position: "sticky", top: 0, zIndex: 100, transition: "background .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease", ...glass }}>
      <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "0 var(--page-margin)", height: 74, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Wordmark tone={navTone} />
        <nav className="dh-nav-desktop" style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {items.map(([id, label]) => (
            <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); window.DH_NAV(id); }}
              style={{ fontFamily: "var(--font-sans)", fontSize: 14, padding: "8px 14px", borderRadius: "var(--radius-md)",
                color: view === id ? "var(--text-primary)" : "var(--text-muted)", background: view === id ? "var(--surface-hover)" : "transparent", transition: "color .15s, background .15s" }}>
              {label}
            </a>
          ))}
          <span style={{ width: 16 }} />
          <Button size="sm" onClick={() => window.DH_NAV("contact")}>Start a project</Button>
        </nav>
        <button className="dh-nav-toggle" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}
          style={{ display: "none", alignItems: "center", justifyContent: "center", width: 44, height: 44, margin: "-4px -8px -4px 0", background: "transparent", border: "none", cursor: "pointer", color: "var(--text-primary)", WebkitTapHighlightColor: "transparent" }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            {menuOpen
              ? <React.Fragment><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></React.Fragment>
              : <React.Fragment><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></React.Fragment>}
          </svg>
        </button>
      </div>
      {menuOpen ? (
        <div className="dh-nav-panel" style={{ position: "absolute", top: "100%", left: 0, right: 0, display: "flex", flexDirection: "column", padding: "6px var(--page-margin) 24px",
          background: navTone === "dark" ? "rgba(12,12,13,.97)" : "rgba(248,248,244,.98)", backdropFilter: blur, WebkitBackdropFilter: blur,
          borderBottom: "1px solid " + (navTone === "dark" ? "rgba(244,244,239,.12)" : "rgba(10,10,11,.1)"), boxShadow: "0 26px 44px -26px rgba(0,0,0,.55)" }}>
          {items.map(([id, label]) => (
            <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); window.DH_NAV(id); }}
              style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, letterSpacing: "-0.01em", padding: "14px 2px",
                borderBottom: "1px solid " + (navTone === "dark" ? "rgba(244,244,239,.08)" : "rgba(10,10,11,.07)"),
                color: view === id ? "var(--lime-500)" : "var(--text-primary)" }}>
              {label}
            </a>
          ))}
          <div style={{ marginTop: 18 }}>
            <Button onClick={() => window.DH_NAV("contact")}>Start a project</Button>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function Footer() {
  const go = (v) => (e) => { e.preventDefault(); window.DH_NAV(v); };
  const cols = [
    ["Explore", [["Work", go("work")], ["Services", go("services")], ["Visual Sprint", go("sprint")], ["Contact", go("contact")]]],
    ["Services", [["Strategic presentations", go("services")], ["Content systems", go("services")], ["Brand experiences", go("services")]]],
    ["Connect", [["hola@deckhaus.studio", null, "mailto:hola@deckhaus.studio"], ["LinkedIn", null, "#"], ["Instagram", null, "#"]]],
  ];
  const { Button } = NS;
  return (
    <footer data-theme="dark" style={{ position: "relative", background: "var(--bg-base)", borderTop: "1px solid var(--border-subtle)", overflow: "hidden" }}>
      {/* live drifting grid */}
      <div aria-hidden="true" className="dh-ftgrid" style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(244,244,239,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244,244,239,.05) 1px, transparent 1px)", backgroundSize: "52px 52px", pointerEvents: "none", WebkitMaskImage: "radial-gradient(130% 90% at 18% 0%, #000 22%, transparent 72%)", maskImage: "radial-gradient(130% 90% at 18% 0%, #000 22%, transparent 72%)" }} />

      <div style={{ position: "relative", maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "clamp(72px,8vw,128px) var(--page-margin) 36px" }}>
        {/* CTA band */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap", paddingBottom: "clamp(48px,6vw,84px)", borderBottom: "1px solid var(--border-subtle)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: "clamp(22px,2.4vw,34px)" }}>
              <span style={{ width: 18, height: 2, background: "var(--lime-500)" }} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--text-accent)" }}>Start a project</span>
            </div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(38px,5.4vw,80px)", lineHeight: 1.04, letterSpacing: "-0.015em", margin: 0, maxWidth: "16ch", color: "var(--paper)" }}>Let's design how you <span style={{ color: "var(--lime-500)" }}>appear.</span></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 18 }}>
            <Button onClick={() => window.DH_NAV("contact")} trailingIcon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>}>Start a project</Button>
            <a href="mailto:hola@deckhaus.studio" className="dh-flink" style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".04em", color: "var(--text-secondary)" }}>hola@deckhaus.studio</a>
          </div>
        </div>

        {/* columns */}
        <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr 1fr 1.2fr", gap: 40, paddingTop: "clamp(44px,5vw,72px)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <Mark size={26} tone="dark" /><span style={{ fontFamily: "var(--font-display)", fontSize: 26, letterSpacing: "0", color: "var(--text-primary)" }}>deckhaus</span>
            </div>
            <p style={{ maxWidth: 300, color: "var(--text-muted)", fontSize: 15, lineHeight: 1.62, margin: 0 }}>
              Visual systems for brands that need to present, launch and grow — design-led, human-first, AI throughout.
            </p>
          </div>
          {cols.map(([h, links]) => (
            <div key={h}>
              <div className="dh-eyebrow" style={{ marginBottom: 18 }}>{h}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 13 }}>
                {links.map(([label, onClick, href]) => (
                  <li key={label}>
                    <a className="dh-flink" href={href || "#" + label.toLowerCase()} onClick={onClick || (href ? undefined : (e) => e.preventDefault())}
                      style={{ color: "var(--text-secondary)", fontSize: 14.5, lineHeight: 1.4 }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* oversized wordmark signature */}
        <div aria-hidden="true" style={{ marginTop: "clamp(40px,5vw,72px)", lineHeight: .78, userSelect: "none" }}>
          <span style={{ display: "block", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(74px,18.5vw,300px)", letterSpacing: "-0.035em", color: "transparent", WebkitTextStroke: "1.4px rgba(244,244,239,.2)", textStroke: "1.4px rgba(244,244,239,.2)", whiteSpace: "nowrap" }}>deckhaus<span style={{ WebkitTextStroke: "0", color: "var(--lime-500)" }}>.</span></span>
        </div>

        {/* legal row */}
        <div style={{ marginTop: "clamp(28px,3vw,44px)", paddingTop: 26, borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-disabled)" }}>© 2026 Deckhaus Studio · Built across borders</span>
          <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-disabled)", letterSpacing: ".14em", textTransform: "uppercase" }}>Enhanced by AI · Crafted by humans</span>
            <a className="dh-flink" href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--text-secondary)" }}>
              Top <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, Mark, Wordmark });