"use client";

import { useState } from "react";

const MEGA = {
  Product: {
    columns: [
      {
        title: "Platform",
        items: [
          { name: "Workflows", desc: "Automate operations" },
          { name: "Inbox", desc: "Unified communication" },
          { name: "Insights", desc: "Realtime analytics" },
        ],
      },
      {
        title: "By role",
        items: [
          { name: "For founders", desc: "0 → 1, fast" },
          { name: "For ops", desc: "Scale without chaos" },
          { name: "For support", desc: "Reply in minutes" },
        ],
      },
      {
        title: "Featured",
        items: [
          { name: "New: Agents 2.0", desc: "Autonomous handoff" },
          { name: "Q1 changelog", desc: "21 ships, 4 launches" },
        ],
      },
    ],
  },
  Solutions: { columns: [] as never },
  Resources: { columns: [] as never },
};

const NAV = ["Product", "Solutions", "Resources", "Pricing"] as const;

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

  return (
    <div className="bg-white text-zinc-900 antialiased font-sans">
      <header
        className="sticky top-0 z-40 border-b border-zinc-100 bg-white"
        onMouseLeave={() => setHovered(null)}
      >
        <div className="mx-auto flex h-14 max-w-7xl items-center gap-8 px-6">
          <a href="#" className="flex items-center gap-2 text-[15px] font-bold tracking-tight">
            <span
              aria-hidden
              className="grid h-7 w-7 place-items-center rounded-md text-white"
              style={{
                background:
                  "linear-gradient(135deg, #0f172a 0%, #4338ca 100%)",
              }}
            >
              ◇
            </span>
            Orbit
          </a>

          <nav aria-label="Primary" className="hidden md:flex items-center gap-1 text-[13.5px]">
            {NAV.map((label) => (
              <button
                key={label}
                type="button"
                onMouseEnter={() => setHovered(label)}
                onFocus={() => setHovered(label)}
                aria-haspopup={label in MEGA ? "true" : undefined}
                aria-expanded={hovered === label}
                className="inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-zinc-700 hover:text-zinc-900 hover:bg-zinc-50 focus-visible:outline-none focus-visible:bg-zinc-50"
              >
                {label}
                {label in MEGA && <span aria-hidden className="text-[10px] mt-0.5">▾</span>}
              </button>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-2">
            <a href="#login" className="text-[13.5px] px-2 text-zinc-700 hover:text-zinc-900">
              Log in
            </a>
            <a
              href="#start"
              className="inline-flex items-center gap-1 rounded-md bg-zinc-900 px-3 py-1.5 text-[13px] font-medium text-white hover:bg-zinc-800"
            >
              Get a demo
            </a>
          </div>

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

        {hovered === "Product" && (
          <div
            onMouseEnter={() => setHovered("Product")}
            className="hidden md:block absolute inset-x-0 top-full border-t border-zinc-100 bg-white shadow-[0_24px_60px_-24px_rgba(15,23,42,0.18)]"
          >
            <div className="mx-auto grid max-w-7xl grid-cols-3 gap-8 px-6 py-8">
              {MEGA.Product.columns.map((col) => (
                <div key={col.title}>
                  <p className="text-[10.5px] font-mono uppercase tracking-[0.16em] text-zinc-500">
                    {col.title}
                  </p>
                  <ul className="mt-3 grid gap-1">
                    {col.items.map((it) => (
                      <li key={it.name}>
                        <a
                          href="#"
                          className="block rounded-lg p-3 hover:bg-zinc-50"
                        >
                          <div className="text-[13.5px] font-semibold">{it.name}</div>
                          <div className="text-[12.5px] text-zinc-500">{it.desc}</div>
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        )}

        {open && (
          <nav id="orbit-mobile" className="md:hidden border-t border-zinc-100 px-6 py-3 grid gap-1">
            {NAV.map((label) => (
              <a
                key={label}
                href={`#${label.toLowerCase()}`}
                className="flex items-center justify-between rounded-md py-2 text-[14px]"
              >
                {label}
                {label in MEGA && <span aria-hidden>▾</span>}
              </a>
            ))}
            <a href="#start" className="mt-2 rounded-md bg-zinc-900 px-3 py-2 text-center text-[13.5px] text-white">
              Get a demo
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-6 py-10">
        <h1 className="max-w-2xl text-[28px] font-semibold tracking-tight">
          One platform for operations teams that move fast.
        </h1>
        <p className="mt-2 text-[13px] text-zinc-500">
          Hover "Product" in the navbar to open the mega-menu.
        </p>
      </div>
    </div>
  );
}
Mega Menu Navbar

One platform for operations teams that move fast.
