const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const menuItems = [
    ["Leaderboard", "#leaderboard"],
    ["Tasks", "#task"],
    ["About", "#about"],
    ["Sponsors", "#sponsors"],
    ["FAQ", "#faq"],
  ];
  const navStyle = {
    position: "sticky",
    top: 0,
    zIndex: 50,
    backdropFilter: "blur(14px) saturate(140%)",
    WebkitBackdropFilter: "blur(14px) saturate(140%)",
    background: "rgba(10,13,12,0.72)",
    borderBottom: "1px solid var(--line)",
  };
  const wrap = {
    maxWidth: 1240,
    margin: "0 auto",
    padding: "14px 28px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 24,
  };
  const leftGroup = {
    display: "flex",
    alignItems: "center",
    gap: 16,
  };
  const logo = {
    display: "flex",
    alignItems: "center",
    fontFamily: "JetBrains Mono, monospace",
    fontWeight: 700,
    fontSize: 15,
    letterSpacing: "-0.01em",
    cursor: "pointer",
  };
  const links = {
    display: "flex",
    gap: 28,
    fontSize: 14,
    color: "var(--muted)",
  };
  const linkStyle = { cursor: "pointer", transition: "color .15s" };
  const right = { display: "flex", alignItems: "center", gap: 12 };
  const menuButton = {
    display: "none",
    width: 40,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    background: "transparent",
    border: "1px solid var(--line-2)",
    color: "var(--text)",
    cursor: "pointer",
    padding: 0,
  };
  const menuPanel = {
    display: open ? "flex" : "none",
    position: "absolute",
    top: "100%",
    left: 0,
    right: 0,
    flexDirection: "column",
    padding: "8px 28px 18px",
    background: "rgba(10,13,12,0.96)",
    borderBottom: "1px solid var(--line)",
    boxShadow: "0 24px 60px rgba(0,0,0,0.45)",
  };
  const menuLink = {
    padding: "13px 0",
    borderBottom: "1px solid var(--line)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 13,
    color: "var(--text)",
  };
  const cta = {
    fontSize: 13,
    fontWeight: 600,
    color: "#06170D",
    background: "var(--accent)",
    padding: "8px 14px",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "none",
    fontFamily: "inherit",
  };
  const onLogo = (e) => {
    e.preventDefault();
    setOpen(false);
    window.scrollTo({ top: 0, behavior: "smooth" });
    if (window.history && window.history.replaceState) {
      window.history.replaceState(null, "", window.location.pathname + window.location.search);
    }
  };
  const onMenuNavigate = () => setOpen(false);

  return (
    <nav style={navStyle} data-screen-label="Nav">
      <style>{`
        @media (min-width: 841px) {
          .nav-mobile-panel { display: none !important; }
        }
        @media (max-width: 840px) {
          .nav-wrap { padding: 12px 20px !important; }
          .nav-links, .nav-right { display: none !important; }
          .nav-menu-button { display: inline-flex !important; }
        }
      `}</style>
      <div style={wrap} className="nav-wrap">
        <div style={leftGroup}>
          <a
            style={logo}
            href="#top"
            aria-label="Back to top"
            onClick={onLogo}
          >
            <span style={{ color: "var(--accent)", fontWeight: 700 }}>~/Genesis</span><span style={{ fontWeight: 400 }}>Bench</span>
          </a>
        </div>
        <div style={links} className="nav-links">
          {menuItems.map(([label, href]) => (
            <a key={href} style={linkStyle} href={href}>{label}</a>
          ))}
        </div>
        <div style={right} className="nav-right">
          <button style={cta}>{"Submit →"}</button>
        </div>
        <button
          style={menuButton}
          className="nav-menu-button"
          aria-label="Open navigation menu"
          aria-expanded={open}
          onClick={() => setOpen(v => !v)}
        >
          <span style={{ display: "flex", flexDirection: "column", gap: 5 }}>
            <span style={{ width: 18, height: 2, background: "var(--accent)", display: "block" }}></span>
            <span style={{ width: 18, height: 2, background: "var(--accent)", display: "block" }}></span>
            <span style={{ width: 18, height: 2, background: "var(--accent)", display: "block" }}></span>
          </span>
        </button>
      </div>
      <div style={menuPanel} className="nav-mobile-panel">
        {menuItems.map(([label, href]) => (
          <a key={href} style={menuLink} href={href} onClick={onMenuNavigate}>{label}</a>
        ))}
        <button style={{ ...cta, width: "100%", justifyContent: "center", marginTop: 14 }} onClick={onMenuNavigate}>{"Submit →"}</button>
      </div>
    </nav>
  );
};
window.Nav = Nav;