const { Button, Icon } = window.AntelopeDashDesignSystem_4664c0;

function SiteNav({ onNav }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: "about", label: "About" },
    { id: "races", label: "The Races" },
    { id: "info", label: "Event Info" },
    { id: "faq", label: "FAQ", href: "faq.html" },
  ];
  return (
    <nav style={{ position: "sticky", top: 0, zIndex: 50, background: "#fff", boxShadow: "var(--shadow-md)" }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto", padding: "0 24px", display: "flex", justifyContent: "space-between", alignItems: "center", height: 88 }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); onNav?.("top"); }} style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <span style={{ height: 64, width: 64, borderRadius: "9999px", overflow: "hidden", background: "var(--slate-800)", border: "2px solid var(--slate-800)", boxShadow: "var(--shadow-sm)", flex: "none", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <img src="./assets/logo-header.png" alt="Antelope Dash" style={{ height: "100%", width: "100%", objectFit: "cover" }} />
          </span>
          <span>
            <span style={{ display: "block", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.02em", color: "var(--slate-800)", lineHeight: 1 }}>ANTELOPE DASH</span>
            <span style={{ display: "block", fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 12, letterSpacing: "0.1em", color: "var(--copper-600)", marginTop: 2 }}>TRAIL RACES</span>
          </span>
        </a>

        <div className="ad-nav-desktop" style={{ alignItems: "center", gap: 32 }}>
          {links.map((l) => (
            <a key={l.id} href={l.href || `#${l.id}`} onClick={(e) => { if (!l.href) { e.preventDefault(); onNav?.(l.id); } }}
               style={{ color: "var(--slate-500)", fontWeight: 600, textDecoration: "none", fontFamily: "var(--font-body)" }}
               onMouseEnter={(e) => (e.currentTarget.style.color = "var(--copper-600)")}
               onMouseLeave={(e) => (e.currentTarget.style.color = "var(--slate-500)")}>{l.label}</a>
          ))}
          <Button variant="primary" size="sm" as="a" href="https://ultrasignup.com/register.aspx?did=135646" target="_blank">Register Now</Button>
        </div>

        <button className="ad-nav-mobile-btn" onClick={() => setOpen((v) => !v)} aria-label="Menu"
          style={{ background: "none", border: "none", cursor: "pointer", color: "var(--slate-600)", padding: 8 }}>
          <Icon name="menu" size={26} />
        </button>
      </div>
      {open && (
        <div className="ad-nav-mobile-menu" style={{ background: "#fff", borderTop: "1px solid var(--slate-100)", padding: "8px 16px 24px", boxShadow: "var(--shadow-xl)" }}>
          {links.map((l) => (
            <a key={l.id} href={l.href || `#${l.id}`} onClick={(e) => { if (!l.href) { e.preventDefault(); onNav?.(l.id); } setOpen(false); }}
               style={{ display: "block", padding: "10px 12px", borderRadius: 6, fontWeight: 600, color: "var(--slate-700)", textDecoration: "none" }}>{l.label}</a>
          ))}
          <Button variant="primary" fullWidth as="a" href="https://ultrasignup.com/register.aspx?did=135646" target="_blank" className="ad-mt">Register Now</Button>
        </div>
      )}
    </nav>
  );
}
window.SiteNav = SiteNav;