"use client";

import * as React from "react";
import { ArrowRight, Boxes, ChevronDown, Cpu, Layers, Sparkles, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

const SECTIONS = [
  {
    label: "Product",
    groups: [
      {
        title: "Build",
        links: [
          { icon: Boxes, label: "Components", hint: "400+ ready to copy" },
          { icon: Layers, label: "Templates", hint: "Full-page starters" },
          { icon: Sparkles, label: "Themes", hint: "Drop-in palettes" },
        ],
      },
      {
        title: "Automate",
        links: [
          { icon: Cpu, label: "MCP server", hint: "Install from your editor" },
          { icon: Zap, label: "CLI", hint: "One-command installs" },
        ],
      },
    ],
  },
  { label: "Pricing", groups: [] },
  { label: "Docs", groups: [] },
];

export function MegaMenu({ className }: { className?: string }) {
  const [open, setOpen] = React.useState<string | null>(null);

  return (
    <div
      className={cn("relative w-full rounded-xl border bg-card", className)}
      onMouseLeave={() => setOpen(null)}
    >
      <nav className="flex items-center gap-1 px-4 py-3">
        <span className="me-4 text-sm font-semibold tracking-tight">Acme</span>

        {SECTIONS.map((section) => (
          <button
            key={section.label}
            onMouseEnter={() => setOpen(section.groups.length ? section.label : null)}
            className={cn(
              "flex items-center gap-1 rounded-md px-3 py-1.5 text-sm transition-colors",
              open === section.label
                ? "bg-accent text-foreground"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            {section.label}
            {section.groups.length > 0 && (
              <ChevronDown
                className={cn(
                  "size-3.5 transition-transform",
                  open === section.label && "rotate-180"
                )}
              />
            )}
          </button>
        ))}

        <button className="ms-auto h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground">
          Get started
        </button>
      </nav>

      {SECTIONS.filter((section) => section.label === open).map((section) => (
        <div
          key={section.label}
          className="grid gap-6 border-t p-6 duration-200 animate-in fade-in slide-in-from-top-1 md:grid-cols-[repeat(2,minmax(0,1fr))_18rem]"
        >
          {section.groups.map((group) => (
            <div key={group.title} className="space-y-3">
              <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                {group.title}
              </h4>
              <ul className="space-y-1">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href="#"
                      className="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-accent"
                    >
                      <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border bg-background">
                        <link.icon className="size-4 text-muted-foreground" />
                      </span>
                      <span className="min-w-0">
                        <span className="block text-sm font-medium">{link.label}</span>
                        <span className="block text-xs text-muted-foreground">{link.hint}</span>
                      </span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div className="flex flex-col justify-between rounded-xl border bg-muted/40 p-4">
            <div>
              <span className="inline-flex rounded-full bg-primary px-2 py-0.5 text-[10px] font-medium text-primary-foreground">
                New
              </span>
              <h4 className="mt-2 text-sm font-medium">3D component pack</h4>
              <p className="mt-1 text-xs text-muted-foreground">
                Fourteen WebGL and CSS 3D components, ready to drop in.
              </p>
            </div>
            <a href="#" className="mt-4 inline-flex items-center gap-1 text-xs font-medium hover:underline">
              Explore
              <ArrowRight className="size-3 rtl:rotate-180" />
            </a>
          </div>
        </div>
      ))}
    </div>
  );
}
Related components
