"use client";

import { useState } from "react";

const UTILITY = [
  { label: "Investors", href: "#investors" },
  { label: "Newsroom", href: "#news" },
  { label: "Careers", href: "#careers", badge: "82 open" },
  { label: "Partners", href: "#partners" },
];

const PRIMARY = [
  { label: "Industries", href: "#industries" },
  { label: "Capabilities", href: "#capabilities" },
  { label: "Insights", href: "#insights" },
  { label: "About", href: "#about" },
];

const REGIONS = [
  "Global · EN",
  "United States · EN",
  "Deutschland · DE",
  "France · FR",
  "日本 · JA",
];

export function EnterpriseNavbar() {
  const [open, setOpen] = useState(false);
  const [regionOpen, setRegionOpen] = useState(false);
  const [region, setRegion] = useState(REGIONS[0]);

  return (
    <div className="bg-white text-[#0a1f44] antialiased font-sans">
      <div className="bg-[#0a1f44] text-white">
        <div className="mx-auto flex h-9 max-w-7xl items-center gap-6 px-6 text-[11.5px]">
          <nav aria-label="Utility" className="hidden lg:flex items-center gap-5">
            {UTILITY.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="inline-flex items-center gap-1.5 text-white/85 hover:text-white"
              >
                {item.label}
                {item.badge && (
                  <span className="rounded-full bg-white/15 px-1.5 py-0.5 text-[9.5px] tracking-wider">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>

          <div className="ml-auto flex items-center gap-4">
            <div className="relative">
              <button
                type="button"
                onClick={() => setRegionOpen((v) => !v)}
                aria-expanded={regionOpen}
                aria-haspopup="listbox"
                className="inline-flex items-center gap-1.5 text-white/85 hover:text-white"
              >
                <span aria-hidden>◯</span>
                {region}
                <span aria-hidden className="text-[9px]">▾</span>
              </button>
              {regionOpen && (
                <ul
                  role="listbox"
                  className="absolute right-0 top-full mt-1 w-52 rounded-md border border-zinc-200 bg-white py-1 text-[12px] text-[#0a1f44] shadow-lg z-50"
                >
                  {REGIONS.map((r) => (
                    <li role="option" aria-selected={region === r} key={r}>
                      <button
                        type="button"
                        onClick={() => {
                          setRegion(r);
                          setRegionOpen(false);
                        }}
                        className={`w-full px-3 py-1.5 text-left hover:bg-zinc-50 ${region === r ? "font-medium" : ""}`}
                      >
                        {r}
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </div>
            <a href="#signin" className="text-white/85 hover:text-white">
              Client portal ↗
            </a>
          </div>
        </div>
      </div>

      <header className="border-b border-zinc-200">
        <div className="mx-auto flex h-16 max-w-7xl items-center gap-8 px-6">
          <a href="#" className="flex items-center gap-2.5 focus-visible:outline-none" aria-label="Halden & Reuss home">
            <span
              aria-hidden
              className="grid h-8 w-8 place-items-center rounded-sm bg-[#0a1f44] text-white text-[13px] font-bold"
            >
              H<span className="text-[#c8a96a]">R</span>
            </span>
            <span className="flex flex-col leading-tight">
              <span className="text-[14px] font-semibold tracking-wide uppercase">
                Halden &amp; Reuss
              </span>
              <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#0a1f44]/55">
                Advisory · Audit · Tax
              </span>
            </span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden lg:flex items-center gap-7 text-[13.5px]"
          >
            {PRIMARY.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="relative inline-flex items-center gap-1 text-[#0a1f44]/80 hover:text-[#0a1f44] focus-visible:outline-none focus-visible:text-[#0a1f44] py-5"
              >
                {item.label}
                <span aria-hidden className="text-[10px] mt-0.5 text-[#0a1f44]/40">▾</span>
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden lg:flex items-center gap-3">
            <button
              type="button"
              aria-label="Search"
              className="grid h-9 w-9 place-items-center rounded-full text-[#0a1f44]/70 hover:text-[#0a1f44] hover:bg-zinc-100"
            >
              <span aria-hidden>⌕</span>
            </button>
            <a
              href="#contact"
              className="inline-flex items-center gap-2 rounded-sm bg-[#0a1f44] px-4 py-2 text-[13px] font-medium text-white hover:bg-[#142d5e]"
            >
              Contact sales
              <span aria-hidden>→</span>
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="hr-mobile"
            className="lg:hidden ml-auto inline-flex items-center gap-2 rounded-sm border border-[#0a1f44]/15 px-3 py-1.5 text-[12px]"
          >
            {open ? "Close" : "Menu"}
          </button>
        </div>

        {open && (
          <div id="hr-mobile" className="lg:hidden border-t border-zinc-200 bg-white">
            <nav className="px-6 py-4 grid">
              {PRIMARY.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="flex items-center justify-between border-b border-zinc-100 py-3 text-[14px]"
                >
                  {item.label}
                  <span aria-hidden>›</span>
                </a>
              ))}
              <div className="mt-4 grid gap-1 text-[12px] text-[#0a1f44]/75">
                {UTILITY.map((item) => (
                  <a key={item.href} href={item.href} className="py-1">
                    {item.label}
                  </a>
                ))}
              </div>
              <a
                href="#contact"
                className="mt-4 inline-flex items-center justify-center gap-2 bg-[#0a1f44] px-4 py-2.5 text-[13px] text-white"
              >
                Contact sales →
              </a>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-6 py-10">
        <p className="text-[10.5px] uppercase tracking-[0.28em] text-[#0a1f44]/55">
          Sector outlook · Q2 2026
        </p>
        <h1 className="mt-3 max-w-3xl text-[28px] font-semibold tracking-tight leading-tight">
          When markets demand more, our 4,200 advisors are already at the table.
        </h1>
      </div>
    </div>
  );
}
Enterprise Navbar

When markets demand more, our 4,200 advisors are already at the table.
