// nav.jsx — Top nav + side index.

function Nav({ accent, onAccentClick }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [time, setTime] = React.useState("");
  const [workOpen, setWorkOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const openTimer = React.useRef(null);
  const closeTimer = React.useRef(null);

  const armOpen = () => {
    clearTimeout(closeTimer.current);
    clearTimeout(openTimer.current);
    openTimer.current = setTimeout(() => setWorkOpen(true), 500);
  };
  const keepOpen = () => {
    clearTimeout(closeTimer.current);
  };
  const scheduleClose = () => {
    clearTimeout(openTimer.current);
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setWorkOpen(false), 180);
  };
  React.useEffect(() => () => {
    clearTimeout(openTimer.current);
    clearTimeout(closeTimer.current);
  }, []);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    const update = () => {
      const d = new Date();
      const opts = { timeZone: "America/New_York", hour: "2-digit", minute: "2-digit", hour12: false };
      setTime(new Intl.DateTimeFormat("en-US", opts).format(d) + " NYC");
    };
    update();
    const t = setInterval(update, 30000);
    return () => clearInterval(t);
  }, []);

  const items = [
    ["About", "about.html"],
    ["Contact", "contact.html"],
  ];

  return (
    <header
      className="nav"
      data-scrolled={scrolled ? "1" : "0"}
      style={{ "--accent": accent }}
    >
      <a href="#top" className="nav-mark" aria-label="Full Suit Media home">
        <img className="nav-mark-logo" src="assets/logo-cards.png" alt="" aria-hidden="true" />
        <span>Full Suit Media</span>
        <span className="nav-mark-sup">®</span>
      </a>

      <nav className="nav-links">
        <div
          className="nav-drop"
          onMouseEnter={armOpen}
          onMouseLeave={scheduleClose}>
          <a href="work.html">
            <span className="nav-link-inner" data-text="Work">
              <span>Work</span>
              <span aria-hidden="true">Work</span>
            </span>
            <span className="nav-drop-caret" aria-hidden="true">▾</span>
          </a>
          <div
            className="nav-drop-panel"
            data-open={workOpen ? "1" : "0"}
            onMouseEnter={keepOpen}
            onMouseLeave={scheduleClose}>
            <div className="nav-drop-inner">
              <span className="nav-drop-label">The Four Suits</span>
              {SUITS.map((s) =>
                <a key={s.slug} href={`suit-${s.slug}.html`} className="nav-drop-item">
                  <span className="nav-drop-num">{s.num}</span>
                  <span className="nav-drop-name">{s.name}</span>
                  <span className="nav-drop-tagline">{s.tagline}</span>
                  <span className="nav-drop-arrow">→</span>
                </a>
              )}
              <a href="retainers.html" className="nav-drop-all">
                <span>Retainers</span>
                <span>→</span>
              </a>
            </div>
          </div>
        </div>
        {items.map(([label, href]) => (
          <a key={href} href={href}>
            <span className="nav-link-inner" data-text={label}>
              <span>{label}</span>
              <span aria-hidden="true">{label}</span>
            </span>
          </a>
        ))}
      </nav>

      <div className="nav-meta">
        <span className="nav-time">{time}</span>
        <a href="contact.html" className="nav-cta">
          Start a project
          <span className="nav-cta-arrow" aria-hidden="true">→</span>
        </a>
      </div>

      <button
        className="nav-burger"
        data-open={menuOpen ? "1" : "0"}
        onClick={() => setMenuOpen((o) => !o)}
        aria-label="Menu"
        aria-expanded={menuOpen}>
        <span></span><span></span><span></span>
      </button>

      <div className="nav-mobile" data-open={menuOpen ? "1" : "0"}>
        <a href="work.html" className="nav-mobile-link">Work</a>
        <div className="nav-mobile-suits">
          {SUITS.map((s) =>
          <a key={s.slug} href={`suit-${s.slug}.html`} className="nav-mobile-suit">{s.name}</a>
          )}
          <a href="retainers.html" className="nav-mobile-suit">Retainers</a>
        </div>
        <a href="about.html" className="nav-mobile-link">About</a>
        <a href="contact.html" className="nav-mobile-link">Contact</a>
        <a href="contact.html" className="nav-mobile-cta">Start a project <span aria-hidden="true">→</span></a>
      </div>
    </header>
  );
}

window.Nav = Nav;