"use client";

import { useState } from "react";

const NAV = [
  { label: "Products", hasMenu: true },
  { label: "Solutions", hasMenu: true },
  { label: "Developers", hasMenu: true },
  { label: "Resources", hasMenu: true },
  { label: "Pricing", hasMenu: false },
];

export function StripeInspiredNavbar() {
  const [open, setOpen] = useState(false);
  const [hovered, setHovered] = useState<string | null>(null);

  return (
    <div
      className="relative isolate text-white antialiased font-sans overflow-hidden"
      style={{
        background:
          "linear-gradient(135deg, #0a2540 0%, #0a2540 30%, #635bff 110%)",
      }}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-72 opacity-50"
        style={{
          background:
            "radial-gradient(ellipse at 80% 0%, #00d4ff 0%, transparent 60%)",
        }}
      />

      <header className="relative">
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-8 px-6">
          <a
            href="#"
            className="text-[22px] font-bold tracking-tight italic"
            aria-label="Stripe-like home"
          >
            wave|
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-1 text-[14px]"
            onMouseLeave={() => setHovered(null)}
          >
            {NAV.map((item) => (
              <button
                key={item.label}
                type="button"
                onMouseEnter={() => setHovered(item.label)}
                onFocus={() => setHovered(item.label)}
                className="flex items-center gap-1 rounded-md px-3 py-2 text-white/85 hover:text-white hover:bg-white/10 focus-visible:outline-none focus-visible:bg-white/10"
                aria-haspopup={item.hasMenu ? "true" : undefined}
                aria-expanded={hovered === item.label && item.hasMenu}
              >
                {item.label}
                {item.hasMenu && (
                  <span aria-hidden className="text-[10px] mt-0.5">▾</span>
                )}
              </button>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-1">
            <a
              href="#sales"
              className="rounded-md px-3 py-2 text-[14px] text-white/85 hover:text-white hover:bg-white/10"
            >
              Contact sales
            </a>
            <a
              href="#signin"
              className="rounded-md px-3 py-2 text-[14px] text-white/85 hover:text-white hover:bg-white/10"
            >
              Sign in
            </a>
            <a
              href="#start"
              className="inline-flex items-center gap-1 rounded-full bg-white px-4 py-1.5 text-[13.5px] font-medium text-[#0a2540] hover:bg-white/90"
            >
              Start now <span aria-hidden>→</span>
            </a>
          </div>

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

        {hovered &&
          NAV.find((n) => n.label === hovered)?.hasMenu && (
            <div
              onMouseEnter={() => setHovered(hovered)}
              onMouseLeave={() => setHovered(null)}
              className="hidden md:block absolute left-1/2 -translate-x-1/2 top-full mt-1 w-[520px] rounded-xl bg-white/95 backdrop-blur-xl text-[#0a2540] shadow-2xl ring-1 ring-black/5"
            >
              <div className="grid grid-cols-2 gap-2 p-3">
                {[
                  ["Payments", "Online payments"],
                  ["Terminal", "In-person POS"],
                  ["Billing", "Subscriptions"],
                  ["Connect", "Multi-party flows"],
                ].map(([title, desc]) => (
                  <a
                    key={title}
                    href="#"
                    className="rounded-lg p-3 hover:bg-[#0a2540]/5"
                  >
                    <div className="text-[13px] font-semibold">{title}</div>
                    <div className="text-[12px] text-[#0a2540]/70">{desc}</div>
                  </a>
                ))}
              </div>
            </div>
          )}

        {open && (
          <div
            id="wave-mobile"
            className="md:hidden border-t border-white/10 bg-[#0a2540]"
          >
            <nav className="px-6 py-4 grid gap-1">
              {NAV.map((item) => (
                <a
                  key={item.label}
                  href="#"
                  className="flex items-center justify-between border-b border-white/10 py-3 text-[15px]"
                >
                  {item.label}
                  {item.hasMenu && <span aria-hidden>▾</span>}
                </a>
              ))}
              <a
                href="#start"
                className="mt-3 inline-flex items-center justify-center rounded-full bg-white px-4 py-2.5 text-[14px] font-medium text-[#0a2540]"
              >
                Start now →
              </a>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="relative mx-auto max-w-6xl px-6 py-10">
        <p className="text-[12px] uppercase tracking-[0.2em] text-white/60">
          Financial infrastructure
        </p>
        <h1 className="mt-2 max-w-xl text-[30px] font-semibold tracking-tight">
          Move money the way the internet does.
        </h1>
      </div>
    </div>
  );
}
Stripe-Inspired Navbar

Move money the way the internet does.
