"use client";
import Link from "next/link";
import { useState } from "react";
import { ChevronDown, Menu, Moon, Server, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { navGroups } from "@/lib/site-data";
import { Button } from "@/components/ui/button";

export function Navbar() {
  const [open, setOpen] = useState(false);
  return <header className="fixed inset-x-0 top-0 z-50 border-b border-white/[0.06] bg-[#050816]/80 backdrop-blur-2xl">
    <div className="section-shell flex h-20 items-center justify-between">
      <Link href="/" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary to-secondary shadow-glow"><Server className="h-5 w-5" /></span><span className="font-heading text-xl font-extrabold">SKP<span className="text-cyan-300">Host</span></span></Link>
      <nav className="hidden items-center gap-1 lg:flex">
        {navGroups.map((group) => <div className="group relative" key={group.label}><button className="flex items-center gap-1 rounded-lg px-4 py-3 text-sm text-slate-300 transition hover:bg-white/[0.05] hover:text-white">{group.label}<ChevronDown className="h-3.5 w-3.5" /></button><div className="invisible absolute left-1/2 top-full w-[580px] -translate-x-1/2 translate-y-2 opacity-0 transition-all group-hover:visible group-hover:translate-y-0 group-hover:opacity-100"><div className="grid grid-cols-2 gap-2 rounded-2xl border border-white/10 bg-[#090e1c]/95 p-3 shadow-premium backdrop-blur-2xl">{group.items.map(item => <Link key={item.href} href={item.href} className="flex gap-3 rounded-xl p-4 hover:bg-white/[0.06]"><item.icon className="mt-1 h-5 w-5 shrink-0 text-cyan-300"/><span><strong className="block text-sm">{item.title}</strong><small className="mt-1 block leading-5 text-slate-400">{item.description}</small></span></Link>)}</div></div></div>)}
        <Link href="/server-status" className="rounded-lg px-4 py-3 text-sm text-slate-300 hover:text-white">Status</Link>
      </nav>
      <div className="hidden items-center gap-2 lg:flex"><button aria-label="Toggle dark mode" className="rounded-xl border border-white/10 p-3 text-slate-300"><Moon className="h-4 w-4"/></button><Button asChild><Link href="/contact">Talk to an expert</Link></Button></div>
      <button className="rounded-xl border border-white/10 p-2.5 lg:hidden" onClick={() => setOpen(!open)} aria-label="Toggle menu">{open ? <X/> : <Menu/>}</button>
    </div>
    <AnimatePresence>{open && <motion.div initial={{opacity:0,height:0}} animate={{opacity:1,height:"auto"}} exit={{opacity:0,height:0}} className="border-t border-white/10 bg-[#050816] lg:hidden"><div className="section-shell max-h-[calc(100vh-80px)] overflow-auto py-5">{navGroups.flatMap(g=>g.items).map(item=><Link onClick={()=>setOpen(false)} href={item.href} key={item.href} className="flex items-center gap-3 border-b border-white/[0.06] py-4"><item.icon className="h-5 w-5 text-cyan-300"/><span>{item.title}</span></Link>)}<Button asChild className="mt-5 w-full"><Link href="/contact">Talk to an expert</Link></Button></div></motion.div>}</AnimatePresence>
  </header>;
}