// Header / nav (English only)
function SiteNav({ scrollTo }) {
  const T = window.TOKENS;
  const C = window.SITE_CONTENT;
  const nav = C.nav;
  return (
    <header style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 100,
      padding: "16px 32px",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: "12px",
      letterSpacing: "0.04em",
      background: `${T.bg}D0`,
      backdropFilter: "blur(12px)",
      borderBottom: `1px solid ${T.rule}`,
      color: T.ink,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <span style={{
          width: "8px", height: "8px", borderRadius: "50%",
          background: T.green, boxShadow: `0 0 12px ${T.green}`,
          animation: "navPulse 2s ease-in-out infinite"
        }}></span>
        <span style={{ fontWeight: 500 }}>filibertocanino.it</span>
      </div>
      <nav style={{ display: "flex", gap: "28px" }}>
        {[
          ["now", nav.now], ["path", nav.path], ["domains", nav.domains], ["contact", nav.contact]
        ].map(([id, label]) => (
          <a key={id} href={`#${id}`}
            onClick={(e) => { e.preventDefault(); scrollTo(id); }}
            style={{ color: T.ink, textDecoration: "none", opacity: 0.75, transition: "opacity .2s, color .2s" }}
            onMouseEnter={e => { e.currentTarget.style.color = T.orange; e.currentTarget.style.opacity = 1; }}
            onMouseLeave={e => { e.currentTarget.style.color = T.ink; e.currentTarget.style.opacity = 0.75; }}
          >{label}</a>
        ))}
      </nav>
      <a href={C.contact.linkedin} target="_blank" rel="noopener" style={{
        padding: "6px 14px",
        border: `1px solid ${T.ruleHi}`,
        borderRadius: "100px",
        color: T.ink,
        textDecoration: "none",
        fontSize: "11px",
        fontWeight: 500,
        letterSpacing: "0.05em",
        transition: "all .2s",
      }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = T.orange; e.currentTarget.style.color = T.orange; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = T.ruleHi; e.currentTarget.style.color = T.ink; }}
      >LinkedIn ↗</a>
    </header>
  );
}

window.SiteNav = SiteNav;