"use client";

import { useState } from "react";

const NAV = [
  { label: "Home", href: "#home" },
  { label: "Gallery", href: "#gallery" },
  { label: "Editorial", href: "#editorial" },
  { label: "Index", href: "#index" },
];

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

  return (
    <div
      className="relative isolate overflow-hidden text-white antialiased font-sans"
      style={{
        background:
          "linear-gradient(135deg, #4f46e5 0%, #ec4899 45%, #f59e0b 100%)",
      }}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute -top-32 -left-16 h-72 w-72 rounded-full"
        style={{ background: "#22d3ee", filter: "blur(80px)", opacity: 0.6 }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute -bottom-24 right-8 h-72 w-72 rounded-full"
        style={{ background: "#a855f7", filter: "blur(90px)", opacity: 0.55 }}
      />

      <div className="relative px-5 pt-4">
        <header
          className="mx-auto max-w-6xl rounded-2xl border border-white/25 px-3 py-2"
          style={{
            background: "rgba(255,255,255,0.12)",
            backdropFilter: "blur(22px) saturate(180%)",
            WebkitBackdropFilter: "blur(22px) saturate(180%)",
            boxShadow:
              "inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 40px -16px rgba(0,0,0,0.35)",
          }}
        >
          <div className="flex items-center gap-4">
            <a href="#" className="ml-2 flex items-center gap-2 text-[15px] font-semibold tracking-tight">
              <span aria-hidden className="grid h-7 w-7 place-items-center rounded-full bg-white/30 backdrop-blur">
                ◯
              </span>
              Mirage
            </a>

            <nav aria-label="Primary" className="hidden md:flex items-center gap-1 ml-3 text-[13.5px]">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="rounded-full px-3 py-1.5 text-white/85 hover:text-white hover:bg-white/15 focus-visible:outline-none focus-visible:bg-white/15 transition-colors"
                >
                  {item.label}
                </a>
              ))}
            </nav>

            <div className="ml-auto hidden md:flex items-center gap-2">
              <a
                href="#contact"
                className="rounded-full px-3 py-1.5 text-[13.5px] text-white/90 hover:bg-white/15"
              >
                Contact
              </a>
              <a
                href="#cta"
                className="rounded-full bg-white/95 px-4 py-1.5 text-[13px] font-semibold text-[#1e0a4a] hover:bg-white"
              >
                Book a viewing
              </a>
            </div>

            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="mirage-mobile"
              className="ml-auto md:hidden grid h-9 w-9 place-items-center rounded-full bg-white/15 hover:bg-white/25"
              aria-label="Toggle menu"
            >
              <span aria-hidden>{open ? "✕" : "☰"}</span>
            </button>
          </div>

          {open && (
            <nav
              id="mirage-mobile"
              className="md:hidden mt-2 rounded-xl border border-white/20 bg-white/10 p-2 grid gap-0.5"
              style={{ backdropFilter: "blur(12px)" }}
            >
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="rounded-lg px-3 py-2 text-[14px] hover:bg-white/15"
                >
                  {item.label}
                </a>
              ))}
              <a
                href="#cta"
                className="mt-1 rounded-full bg-white px-3 py-2 text-center text-[13px] font-semibold text-[#1e0a4a]"
              >
                Book a viewing
              </a>
            </nav>
          )}
        </header>
      </div>

      <div data-nav-context className="relative mx-auto max-w-6xl px-5 py-12">
        <p className="text-[12px] uppercase tracking-[0.22em] text-white/75">
          Studio · Atelier · 2026
        </p>
        <h1 className="mt-3 max-w-xl text-[30px] font-semibold tracking-tight">
          Soft surfaces, hard geometry.
        </h1>
      </div>
    </div>
  );
}
Glassmorphism Navbar

Soft surfaces, hard geometry.
