"use client";

import { useState } from "react";

const NAV = [
  { num: "01", label: "Work" },
  { num: "02", label: "Process" },
  { num: "03", label: "Notes" },
  { num: "04", label: "About" },
];

export function PortfolioNavbar() {
  const [open, setOpen] = useState(false);

  return (
    <div className="bg-[#fafaf7] text-[#0f0f0e] antialiased font-sans">
      <header className="border-b border-[#0f0f0e]/8">
        <div className="mx-auto flex h-16 max-w-5xl items-center gap-6 px-6">
          <a href="#" className="flex flex-col leading-tight" aria-label="Mira Solberg home">
            <span className="text-[14.5px] font-semibold tracking-tight">
              Mira Solberg
            </span>
            <span className="text-[11px] text-[#0f0f0e]/55 font-mono uppercase tracking-wider">
              Product designer · Oslo
            </span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-5 ml-auto text-[13px]"
          >
            {NAV.map((item) => (
              <a
                key={item.num}
                href={`#${item.label.toLowerCase()}`}
                className="group inline-flex items-baseline gap-1.5 text-[#0f0f0e]/70 hover:text-[#0f0f0e] transition-colors focus-visible:outline-none focus-visible:text-[#0f0f0e]"
              >
                <span className="font-mono text-[10.5px] text-[#0f0f0e]/40">{item.num}</span>
                {item.label}
              </a>
            ))}
            <span aria-hidden className="h-4 w-px bg-[#0f0f0e]/15" />
            <span className="inline-flex items-center gap-1.5 text-[12px] text-[#0f0f0e]/60">
              <span aria-hidden className="h-2 w-2 rounded-full bg-emerald-500" />
              Open to work
            </span>
            <a
              href="mailto:hi@mira.studio"
              className="inline-flex items-center gap-2 rounded-full bg-[#0f0f0e] px-3.5 py-1.5 text-[12.5px] text-[#fafaf7] hover:bg-[#1a1a18]"
            >
              hi@mira.studio
              <span aria-hidden>↗</span>
            </a>
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="mira-mobile"
            className="md:hidden ml-auto inline-flex items-center gap-2 rounded-full border border-[#0f0f0e]/20 px-3 py-1.5 text-[12px]"
          >
            <span aria-hidden className="h-2 w-2 rounded-full bg-emerald-500" />
            {open ? "Close" : "Index"}
          </button>
        </div>

        {open && (
          <nav
            id="mira-mobile"
            className="md:hidden border-t border-[#0f0f0e]/10 px-6 py-4 grid gap-1"
          >
            {NAV.map((item) => (
              <a
                key={item.num}
                href={`#${item.label.toLowerCase()}`}
                className="flex items-baseline gap-3 py-1.5"
              >
                <span className="font-mono text-[11px] text-[#0f0f0e]/40 w-6">{item.num}</span>
                <span className="text-[16px]">{item.label}</span>
              </a>
            ))}
            <a
              href="mailto:hi@mira.studio"
              className="mt-2 inline-flex items-center justify-center gap-2 rounded-full bg-[#0f0f0e] px-3 py-2 text-[13px] text-[#fafaf7]"
            >
              hi@mira.studio ↗
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-5xl px-6 py-12">
        <p className="text-[10.5px] font-mono uppercase tracking-[0.2em] text-[#0f0f0e]/55">
          Selected work — 2018 / 2026
        </p>
        <h1 className="mt-3 max-w-2xl text-[30px] font-medium tracking-tight">
          I design the calm parts of complicated products.
        </h1>
      </div>
    </div>
  );
}
Portfolio Navbar

I design the calm parts of complicated products.
