"use client";

import { useState } from "react";

const NAV = [
  "Store",
  "Mac",
  "iPad",
  "iPhone",
  "Watch",
  "Vision",
  "AirPods",
  "TV & Home",
  "Entertainment",
  "Accessories",
  "Support",
];

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

  return (
    <div
      className="bg-[#f5f5f7] text-[#1d1d1f] antialiased"
      style={{
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif',
      }}
    >
      <header className="sticky top-0 z-40 border-b border-black/5 bg-[rgba(245,245,247,0.72)] backdrop-blur-xl">
        <div className="mx-auto flex h-11 max-w-5xl items-center justify-between gap-1 px-4">
          <a
            href="#"
            className="grid h-11 w-9 place-items-center rounded-md text-[18px] hover:opacity-80"
            aria-label="Apple home"
          >
            <span aria-hidden>◐</span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden lg:flex items-center flex-1 justify-center gap-0.5 text-[12px] font-normal text-[#1d1d1f]/85"
          >
            {NAV.map((label) => (
              <a
                key={label}
                href={`#${label.toLowerCase().replace(/\s/g, "-")}`}
                className="rounded-md px-3 py-2 hover:text-[#1d1d1f] focus-visible:outline-none focus-visible:text-[#1d1d1f]"
              >
                {label}
              </a>
            ))}
          </nav>

          <div className="hidden lg:flex items-center gap-1">
            <button
              type="button"
              className="grid h-11 w-9 place-items-center text-[14px] hover:opacity-80"
              aria-label="Search"
            >
              <span aria-hidden>⌕</span>
            </button>
            <button
              type="button"
              className="grid h-11 w-9 place-items-center text-[14px] hover:opacity-80"
              aria-label="Bag"
            >
              <span aria-hidden>⌫</span>
            </button>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="apple-mobile"
            className="lg:hidden grid h-11 w-9 place-items-center hover:opacity-80"
            aria-label="Toggle menu"
          >
            <span aria-hidden className="block h-3 w-4 relative">
              <span className={`absolute left-0 top-0 h-px w-full bg-current ${open ? "translate-y-1.5 rotate-45" : ""} transition-transform`} />
              <span className={`absolute left-0 top-3 h-px w-full bg-current ${open ? "-translate-y-1.5 -rotate-45" : ""} transition-transform`} />
            </span>
          </button>
        </div>

        {open && (
          <div
            id="apple-mobile"
            className="lg:hidden border-t border-black/5 bg-[rgba(245,245,247,0.94)] backdrop-blur-xl"
          >
            <nav className="mx-auto max-w-5xl px-5 py-2 divide-y divide-black/5">
              {NAV.map((label) => (
                <a
                  key={label}
                  href={`#${label.toLowerCase().replace(/\s/g, "-")}`}
                  className="flex items-center justify-between py-3 text-[17px] font-medium tracking-tight"
                >
                  {label}
                  <span aria-hidden className="text-[#86868b]">›</span>
                </a>
              ))}
            </nav>
          </div>
        )}
      </header>

      <div className="bg-black text-white">
        <div data-nav-context className="mx-auto max-w-5xl px-4 py-8 text-center">
          <p className="text-[12px] tracking-wide text-white/70">Holiday</p>
          <h1 className="mt-1 text-[28px] font-semibold tracking-tight">
            The gift of MacBook Air.
          </h1>
          <div className="mt-2 flex justify-center gap-4 text-[13px]">
            <a href="#" className="text-[#2997ff] hover:underline">
              Learn more →
            </a>
            <a href="#" className="text-[#2997ff] hover:underline">
              Buy →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
Apple-Inspired Navbar

The gift of MacBook Air.
