"use client";

import { useState } from "react";

const NAV = [
  { label: "Markets", href: "#markets" },
  { label: "Portfolio", href: "#portfolio" },
  { label: "Wealth", href: "#wealth" },
  { label: "Research", href: "#research" },
];

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

  return (
    <div className="bg-[#0a1024] text-[#e8eaf2] font-sans antialiased">
      <header className="border-b border-white/5 bg-[#0a1024]">
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-8 px-6">
          <a
            href="#"
            className="flex items-center gap-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d6b06b] rounded-sm"
            aria-label="Aurelius Capital home"
          >
            <span
              aria-hidden
              className="inline-block h-5 w-5 rotate-45 border border-[#d6b06b]"
              style={{
                background: "linear-gradient(135deg, #d6b06b 0%, #8e6a1f 100%)",
              }}
            />
            <span className="text-[15px] font-medium tracking-[0.04em] uppercase">
              Aurelius
            </span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-7 text-[13px] tracking-wide"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="relative text-[#c4c8d8] hover:text-white transition-colors after:absolute after:left-0 after:bottom-[-22px] after:h-[2px] after:w-full after:bg-[#d6b06b] after:opacity-0 hover:after:opacity-100 focus-visible:outline-none focus-visible:text-white"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-4">
            <span className="flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-[11.5px] tabular-nums">
              <span
                aria-hidden
                className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400"
              />
              S&amp;P 5,832.91 <span className="text-emerald-400">+0.42%</span>
            </span>
            <a
              href="#login"
              className="inline-flex items-center gap-2 rounded-full bg-[#d6b06b] px-4 py-1.5 text-[13px] font-medium text-[#0a1024] hover:bg-[#e6c281] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d6b06b] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a1024]"
            >
              Client login
              <span aria-hidden>→</span>
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="aurelius-mobile"
            className="ml-auto md:hidden inline-flex items-center gap-2 rounded-full border border-white/15 px-3 py-1.5 text-[12px] uppercase tracking-wider hover:border-[#d6b06b]"
          >
            {open ? "Close" : "Menu"}
          </button>
        </div>

        {open && (
          <div
            id="aurelius-mobile"
            className="md:hidden border-t border-white/5 bg-[#0a1024]"
          >
            <nav className="px-6 py-4 grid gap-1">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="flex items-center justify-between border-b border-white/5 py-2.5 text-[14px] text-[#c4c8d8]"
                >
                  {item.label}
                  <span aria-hidden className="text-[#d6b06b]">→</span>
                </a>
              ))}
              <a
                href="#login"
                className="mt-3 inline-flex items-center justify-center rounded-full bg-[#d6b06b] px-4 py-2.5 text-[13px] font-medium text-[#0a1024]"
              >
                Client login
              </a>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-6 py-10">
        <p className="text-[11px] uppercase tracking-[0.22em] text-[#d6b06b]">
          Private Wealth · Est. 1947
        </p>
        <h1 className="mt-3 max-w-xl text-[26px] font-light leading-tight text-white">
          The discipline of compounding, applied across generations.
        </h1>
      </div>
    </div>
  );
}
Premium Fintech Navbar

The discipline of compounding, applied across generations.
