// components.jsx — shared chrome

function Nav({ route, go }) {
  const [time, setTime] = React.useState(formatLA());
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => setTime(formatLA()), 30000);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => { setMenuOpen(false); }, [route]);
  React.useEffect(() => {
    if (menuOpen) {
      const scrollY = window.scrollY;
      document.body.dataset.scrollLockY = String(scrollY);
      document.body.style.position = "fixed";
      document.body.style.top = -scrollY + "px";
      document.body.style.left = "0";
      document.body.style.right = "0";
      document.body.style.width = "100%";
      document.body.style.overflow = "hidden";
    } else {
      const y = parseInt(document.body.dataset.scrollLockY || "0", 10);
      document.body.style.position = "";
      document.body.style.top = "";
      document.body.style.left = "";
      document.body.style.right = "";
      document.body.style.width = "";
      document.body.style.overflow = "";
      window.scrollTo(0, y);
    }
  }, [menuOpen]);
  function formatLA() {
    const f = new Intl.DateTimeFormat("en-US", { timeZone: "America/Los_Angeles", hour: "2-digit", minute: "2-digit", hour12: false });
    return f.format(new Date()) + " · LA";
  }
  const links = [
    ["about",    "About"],
    ["work",     "Projects"],
    ["contact",  "Contact"]
  ];
  return (
    <header className="nav">
      <a className="nav-brand" onClick={(e) => { e.preventDefault(); go("home"); }} href="#home">
        <span>Esme&nbsp;Grace</span>
      </a>
      <nav className="nav-links">
        {links.map(([key, label]) => (
          <a key={key}
             className={"nav-link" + (route.startsWith(key) || (key === "work" && (route === "work" || route.startsWith("project/"))) ? " is-active" : "")}
             onClick={(e) => { e.preventDefault(); go(key); }}
             href={"#" + key}>
            {label}
          </a>
        ))}
      </nav>
      <button type="button" className={"nav-burger" + (menuOpen ? " is-open" : "")} aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)}>
        <span></span><span></span><span></span>
      </button>
      {ReactDOM.createPortal(
        <div className={"nav-mobile-menu" + (menuOpen ? " is-open" : "")}>
          {links.map(([key, label]) => (
            <a key={key}
               className={"nav-mobile-link" + (route.startsWith(key) || (key === "work" && (route === "work" || route.startsWith("project/"))) ? " is-active" : "")}
               onClick={(e) => { e.preventDefault(); go(key); }}
               href={"#" + key}>
              {label}
            </a>
          ))}
        </div>,
        document.body
      )}
    </header>
  );
}

function Footer({ go, route }) {
  return (
    <footer className="foot">
      <div className="foot-top">
        <h2>
          Tell us about<br />the <em>story</em> you<br />want to make.
        </h2>
      </div>
      <div className="foot-bot">
        <div className="col">
          <h5>Studio</h5>
          <a onClick={() => go("home")}>Home</a>
          <a onClick={() => go("work")}>Projects</a>
          <a onClick={() => go("about")}>About</a>
          <a onClick={() => go("contact")}>Contact</a>
        </div>
        {/* Membership column — hidden for now, restore by uncommenting
        <div className="col">
          <h5>Membership</h5>
          <a href="https://www.bafta.org/" target="_blank" rel="noopener">BAFTA</a><a href="https://producersguild.org/" target="_blank" rel="noopener">PGA</a><a href="https://www.televisionacademy.com/" target="_blank" rel="noopener">Television Academy</a><a href="https://www.filmindependent.org/" target="_blank" rel="noopener">Film Independent</a><a href="https://womeninfilm.org/" target="_blank" rel="noopener">Women in Film</a><a href="https://producersunited.com/" target="_blank" rel="noopener">Producers United</a><a href="https://www.sundance.org/" target="_blank" rel="noopener">Sundance Institute</a>
        </div>
        */}
        <div className="col">
          <h5>Follow us</h5>
          <a href="https://www.instagram.com/esmegracemedia?igsh=NTc4MTIwNjQ2YQ==" target="_blank" rel="noopener">Instagram</a><a href="https://www.linkedin.com/company/esme-grace/" target="_blank" rel="noopener">LinkedIn</a>
        </div>
      </div>
      <div className="foot-bottombar">
        <span>© Esme Grace, LA · LON · SYD —<br className="copyright-break" /> All Rights Reserved</span>
        <a href="https://www.santabarbaraai.com/" target="_blank" rel="noopener">Site Credit</a>
      </div>
    </footer>
  );
}

// striped placeholder image with optional label or real image
function Thumb({ label, aspect, style, src, alt }) {
  const [failed, setFailed] = React.useState(false);
  const showImg = src && !failed;
  return (
    <div className="thumb" style={{ aspectRatio: aspect, ...style }}>
      {showImg ? (
        <img src={src} alt={alt || label || ""}
          loading="lazy" decoding="async"
          onError={() => setFailed(true)}
          className="thumb-img" />
      ) : (
        <>
          <div className="stripes"></div>
          <div className="badge">{label || "FILM STILL"}</div>
        </>
      )}
    </div>
  );
}

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