"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown } from "lucide-react";

export function MegaMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="relative z-50 flex items-center justify-center w-full h-[300px] border border-border rounded-2xl bg-[#050505]">
      <div 
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
        className="relative"
      >
        <button className="flex items-center gap-1 rounded-md px-4 py-2 text-sm font-medium hover:bg-muted transition-colors">
          Products <ChevronDown className="h-3 w-3 opacity-50" />
        </button>

        <AnimatePresence>
          {isOpen && (
            <motion.div 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 10 }}
              transition={{ duration: 0.2 }}
              className="absolute top-full left-1/2 -translate-x-1/2 w-[400px] rounded-xl border border-border bg-[#0a0a0a] p-4 shadow-2xl mt-2 grid grid-cols-2 gap-2"
            >
              <div className="col-span-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                Platform
              </div>
              <a href="#" className="flex flex-col gap-1 rounded-lg p-3 hover:bg-[#151515] transition-colors text-left">
                <span className="text-sm font-medium text-foreground">Analytics</span>
                <span className="text-xs text-muted-foreground">Real-time data tracking</span>
              </a>
              <a href="#" className="flex flex-col gap-1 rounded-lg p-3 hover:bg-[#151515] transition-colors text-left">
                <span className="text-sm font-medium text-foreground">Automation</span>
                <span className="text-xs text-muted-foreground">Build complex workflows</span>
              </a>
              <a href="#" className="flex flex-col gap-1 rounded-lg p-3 hover:bg-[#151515] transition-colors text-left">
                <span className="text-sm font-medium text-foreground">Security</span>
                <span className="text-xs text-muted-foreground">Enterprise-grade protection</span>
              </a>
              <a href="#" className="flex flex-col gap-1 rounded-lg p-3 hover:bg-[#151515] transition-colors text-left">
                <span className="text-sm font-medium text-foreground">Integrations</span>
                <span className="text-xs text-muted-foreground">Connect your entire stack</span>
              </a>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}