// v2-chrome.jsx — header, full-screen menu, footer

const { useState: useChState, useEffect: useChEffect } = React;

const PAGES2 = [
{ key: "home", label: "Home" },
{ key: "projects", label: "Work" },
{ key: "services", label: "Services" },
{ key: "about", label: "Studio" },
{ key: "contact", label: "Contact" }];


// ── HEADER ─────────────────────────────────────────────────────
function Header2({ page, onNavigate, onMenu, tone = "dark", solid = false }) {
  const [scrolled, setScrolled] = useChState(false);
  useChEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  return (
    <header className={`hdr ${tone} ${scrolled || solid ? "scrolled" : ""} ${solid ? "solid" : ""}`} data-comment-anchor="713472e0ec-header-24-5">
      <button type="button" className="hdr-logo" onClick={() => onNavigate("home")} aria-label="Obsidian Studio — home">
        <span className="hdr-logo-img" aria-hidden="true"></span>
      </button>

      <nav className="hdr-nav" aria-label="Primary">
        {PAGES2.filter((p) => p.key !== "home").map((p) =>
        <button
          key={p.key} type="button"
          className={`hdr-link ${page === p.key ? "active" : ""}`}
          onClick={() => onNavigate(p.key)}>

            <span className="label">{p.label}</span>
          </button>
        )}
      </nav>

      <div className="hdr-right">
        <GoldLink small onClick={() => onNavigate("contact")} style={{}}>Start a project</GoldLink>
        <button type="button" className="hdr-burger" onClick={onMenu} aria-label="Open menu">
          <span></span><span></span>
        </button>
      </div>
    </header>);

}

// ── MENU OVERLAY (mobile / overview) ───────────────────────────
function Menu2({ activeKey, onNavigate, onClose }) {
  useChEffect(() => {
    const fn = (e) => {if (e.key === "Escape") onClose();};
    window.addEventListener("keydown", fn);
    document.body.style.overflow = "hidden";
    return () => {window.removeEventListener("keydown", fn);document.body.style.overflow = "";};
  }, [onClose]);

  return (
    <div className="menu2" role="dialog" aria-modal="true" aria-label="Menu">
      <div className="menu2-top">
        <span className="hdr-logo-img on-dark" aria-hidden="true"></span>
        <button type="button" className="menu2-close" onClick={onClose} aria-label="Close menu">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 3l14 14M17 3L3 17" stroke="currentColor" strokeWidth="1" /></svg>
        </button>
      </div>

      <nav className="menu2-nav" aria-label="Menu">
        {PAGES2.map((p, i) =>
        <button
          key={p.key} type="button"
          className={`menu2-item ${activeKey === p.key ? "active" : ""}`}
          style={{ animationDelay: `${80 + i * 60}ms` }}
          onClick={() => onNavigate(p.key)}>

            <span className="menu2-num label">0{i + 1}</span>
            <span className="menu2-label">{p.label}</span>
          </button>
        )}
      </nav>

      <div className="menu2-foot">
        <a className="menu2-mail" href="mailto:hello@obsidian.studio">hello@obsidian.studio</a>
        <span className="label" style={{ color: "var(--w-3)" }}>Lviv, Ukraine — worldwide</span>
      </div>
    </div>);

}

// ── FOOTER ─────────────────────────────────────────────────────
function Footer2({ onNavigate }) {
  return (
    <footer className="ftr">
      <div className="ftr-main">
        <div className="ftr-brand">
          <span className="ftr-logo" aria-hidden="true"></span>
          <p className="ftr-tag">Architectural visualization<br />for spaces that don't exist yet.</p>
        </div>

        <div className="ftr-col">
          <span className="label ftr-head">Studio</span>
          {PAGES2.filter((p) => p.key !== "home").map((p) =>
          <button key={p.key} type="button" className="ftr-link" onClick={() => onNavigate(p.key)}>{p.label}</button>
          )}
        </div>

        <div className="ftr-col">
          <span className="label ftr-head">Contact</span>
          <a className="ftr-link" href="mailto:hello@obsidian.studio">hello@obsidian.studio</a>
          <span className="ftr-link muted">Lviv, Ukraine · UTC+2</span>
        </div>

        <div className="ftr-col">
          <span className="label ftr-head">Elsewhere</span>
          <a className="ftr-link" href="#" onClick={(e) => e.preventDefault()}>Instagram</a>
          <a className="ftr-link" href="#" onClick={(e) => e.preventDefault()}>Behance</a>
          <a className="ftr-link" href="#" onClick={(e) => e.preventDefault()}>LinkedIn</a>
        </div>
      </div>

      <div className="ftr-base">
        <span>© 2026 Obsidian Studio</span>
        <span>All renders remain the property of their clients</span>
        <a href="#" onClick={(e) => e.preventDefault()}>Privacy</a>
      </div>
    </footer>);

}

Object.assign(window, { Header2, Menu2, Footer2, PAGES2 });