// Top issue bar / nav, magazine masthead

function Nav() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  const dateStr = now.toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" }).toUpperCase();
  const timeStr = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });

  return (
    <header className="page issue-bar rule-bottom" style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(10,10,10,0.92)", backdropFilter: "blur(8px)" }}>
      <div className="left">
        <span style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 14, letterSpacing: "-0.02em", color: "var(--ink)", textTransform: "uppercase" }}>
          Producer<span style={{ color: "var(--gold)" }}>•</span>Union
        </span>
        <span className="hide-mobile">Vol. 01 · Issue 06</span>
        <span className="hide-mobile">{dateStr}</span>
      </div>
      <div className="center hide-mobile">
        <span className="dot"></span>
        <span>Live · {timeStr} PT</span>
      </div>
      <div className="right">
        <span className="hide-mobile">The Map</span>
        <span className="hide-mobile">The Tools</span>
        <span className="hide-mobile">The Founder</span>
        <button
          className="hide-mobile"
          onClick={() => document.dispatchEvent(new CustomEvent('openAssessment'))}
          style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--sans)", fontSize: 14, color: "var(--gold)", fontWeight: 600, padding: 0, letterSpacing: "-0.01em" }}
        >
          Find your stage
        </button>
        <JoinCta href={PU_LINKS.free} style={{ padding: "8px 14px", fontSize: 12 }}>
          Join free
        </JoinCta>
      </div>
    </header>
  );
}

window.Nav = Nav;