Mega Menu

"use client";
import { useEffect, useState } from "react";
import { ChevronDown, Sparkles, Zap, Layers, Image } from "lucide-react";

type State = "closed" | "open";

const SECTIONS = [
{ icon: Sparkles, title: "視覺效果", desc: "Framer / GSAP / Three.js" },
{ icon: Zap, title: "互動模式", desc: "Search / Modal / Carousel" },
{ icon: Layers, title: "Apple 系列", desc: "iOS 風格組件" },
{ icon: Image, title: "視差與滾動", desc: "Scrollytelling 範本" },
];

export function MegaMenu({ state = "closed" }: { state?: State }) {
const [open, setOpen] = useState(state === "open");
useEffect(() => setOpen(state === "open"), [state]);

return (
  <div className="relative w-full max-w-lg">
    <nav className="flex items-center gap-4 border-b border-border px-3 py-2 text-xs">
      <span className="font-medium">Lab</span>
      <button
        onMouseEnter={() => setOpen(true)}
        onClick={() => setOpen((o) => !o)}
        className="inline-flex items-center gap-1 hover:text-lab-accent"
      >
        產品 <ChevronDown className="h-3 w-3" />
      </button>
      <a className="hover:text-lab-accent">定價</a>
      <a className="hover:text-lab-accent">文件</a>
    </nav>
    {open && (
      <div
        onMouseLeave={() => setOpen(false)}
        className="absolute inset-x-0 top-full z-10 mt-1 rounded-lg border border-border bg-background p-4 shadow-2xl animate-in fade-in slide-in-from-top-2 duration-150"
      >
        <div className="grid grid-cols-2 gap-3">
          {SECTIONS.map((s, i) => (
            <a
              key={i}
              className="flex gap-3 rounded-md p-2 hover:bg-lab-accent/5"
            >
              <s.icon className="mt-0.5 h-4 w-4 text-lab-accent" />
              <div>
                <p className="text-xs font-medium text-foreground">{s.title}</p>
                <p className="text-[11px] text-muted-foreground">{s.desc}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    )}
  </div>
);
}