/* Nav, footer, HUD, curtain */

function SubwayCurtain() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    window.__curtain = (cb) => {
      const el = ref.current;
      if (!el) { cb && cb(); return; }
      el.classList.remove("in","out");
      void el.offsetWidth;
      el.classList.add("in");
      setTimeout(() => {
        cb && cb();
        requestAnimationFrame(() => {
          el.classList.remove("in");
          el.classList.add("out");
          setTimeout(() => el.classList.remove("out"), 600);
        });
      }, 500);
    };
    return () => { window.__curtain = null; };
  }, []);

  const cells = Array.from({length: 160});
  return (
    <div ref={ref} className="subway-transition">
      {cells.map((_,i) => {
        const row = Math.floor(i/16), col = i%16;
        const d = (row + col) * 18;
        return <div key={i} className="cell" style={{transitionDelay: d + "ms"}}/>;
      })}
    </div>
  );
}

function Nav({ path, navigate }) {
  const links = [
    { href: "social", label: "212 Social" },
    { href: "talent",       label: "212 Talent" },
    { href: "contact",      label: "Contact" }
  ];
  return (
    <nav className="nav">
      <a
        className="brand"
        href="#home"
        onClick={(e)=>{e.preventDefault(); navigate("home");}}
        data-cursor="hover" data-cursor-label="HOME"
      >212</a>
      <ul>
        {links.map(l => (
          <li key={l.href}>
            <a
              href={"#"+l.href}
              aria-current={path === l.href ? "page" : undefined}
              onClick={(e)=>{e.preventDefault(); navigate(l.href);}}
              data-cursor="hover"
            >{l.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

function NYCClock() {
  const [time, setTime] = React.useState(() => nyTimeString());
  React.useEffect(() => {
    const id = setInterval(() => setTime(nyTimeString()), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hud">
      <span className="dot" />
      <span>NYC {time}</span>
    </div>
  );
}
function nyTimeString() {
  try {
    return new Date().toLocaleTimeString("en-US", {
      timeZone: "America/New_York",
      hour12: false,
      hour: "2-digit", minute: "2-digit", second: "2-digit"
    });
  } catch(_) { return "--:--:--"; }
}

Object.assign(window, { SubwayCurtain, Nav, NYCClock });