/* Top nav — minimal, links back to portfolio */

function Header() {
  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 100,
        background: "rgba(241, 236, 221, 0.85)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div
        className="wrap"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "16px 32px",
          maxWidth: "var(--max-w)",
          margin: "0 auto",
        }}
      >
        <a
          href="/"
          style={{
            textDecoration: "none",
            color: "var(--page-fg)",
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            fontFamily: "var(--font-mono)",
            fontSize: 13,
          }}
        >
          <span
            style={{ display: "inline-block", transform: "translateY(-1px)" }}
          >
            ←
          </span>
          <span>akshilshah.com</span>
        </a>
        <nav
          style={{
            display: "flex",
            gap: 24,
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            textTransform: "uppercase",
            letterSpacing: "0.06em",
          }}
          className="header-nav"
        >
          <a href="#scenario" style={navLink}>
            Scenario
          </a>
          <a href="#process" style={navLink}>
            Process
          </a>
          <a href="#architecture" style={navLink}>
            System
          </a>
          <a href="#results" style={navLink}>
            Results
          </a>
          <a href="#learnings" style={navLink}>
            Learnings
          </a>
          <a href="#role" style={navLink}>
            My Role
          </a>
        </nav>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .header-nav { display: none !important; }
        }
      `}</style>
    </header>
  )
}

const navLink = {
  textDecoration: "none",
  color: "var(--page-muted)",
  transition: "color 150ms",
}

window.Header = Header