/* Repurpose case study — sticky navigation header */

function RPHeader() {
  const NAV = [
    ["Problem", "#problem"],
    ["Research", "#market"],
    ["Survey", "#survey"],
    ["Solution", "#solution"],
    ["Design", "#design"],
    ["Ethics", "#ethics"],
  ]

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 100,
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
      }}
    >
      <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="rp-header-nav"
        >
          {NAV.map(([label, href]) => (
            <a
              key={href}
              href={href}
              style={{
                textDecoration: "none",
                color: "black",
                transition: "color 150ms",
              }}
            >
              {label}
            </a>
          ))}
        </nav>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .rp-header-nav { display: none !important; }
        }
      `}</style>
    </header>
  )
}

window.RPHeader = RPHeader