"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

type NavChild={href:string;label:string};
type NavItem={href?:string;label:string;children?:NavChild[]};
const navItems:NavItem[]=[
{href:"/",label:"Startseite"},{href:"/aktuelles",label:"Aktuelles"},{href:"/termine",label:"Termine"},
{label:"Mannschaften",children:[{href:"/mannschaften",label:"Übersicht"},{href:"/mannschaften/erste-mannschaft",label:"1. Mannschaft"},{href:"/mannschaften/zweite-mannschaft",label:"2. Mannschaft"}]},
{label:"Verein",children:[{href:"/verein",label:"Übersicht"},{href:"/verein/vorstand",label:"Vorstand"},{href:"/verein/spiellokal",label:"Spiellokal"},{href:"/verein/trainingszeiten",label:"Trainings- & Spielzeiten"},{href:"/verein/satzung",label:"Satzung"}]},
{href:"/jugend",label:"Jugend"},
{label:"Archiv",children:[{href:"/archiv",label:"Übersicht"},{href:"/archiv/turniere",label:"Turniere"},{href:"/archiv/vereinsmeisterschaften",label:"Vereinsmeisterschaften"}]},
{label:"Links",children:[{href:"/links",label:"Linkübersicht"},{href:"/links/verbaende",label:"Verbände"},{href:"/links/ergebnisdienste",label:"Ergebnisdienste"}]},
{href:"/kontakt",label:"Kontakt"}];

export default function Header(){
 const pathname=usePathname(); const [mobileOpen,setMobileOpen]=useState(false); const [openMenu,setOpenMenu]=useState<string|null>(null);
 const active=(href?:string)=>href? (href==="/"?pathname==="/":pathname.startsWith(href)):false;
 return <header className="site-header"><div className="container header-inner">
 <Link className="brand" href="/" onClick={()=>setMobileOpen(false)}><span className="brand-badge" aria-hidden="true">SC</span><span className="brand-copy"><strong>SCHACHCLUB</strong><span>LAMBSHEIM</span></span></Link>
 <button type="button" className="mobile-toggle" aria-expanded={mobileOpen} aria-controls="main-navigation" onClick={()=>setMobileOpen(v=>!v)}><span className="sr-only">{mobileOpen?"Navigation schließen":"Navigation öffnen"}</span><span aria-hidden="true">{mobileOpen?"✕":"☰"}</span></button>
 <nav id="main-navigation" className={`main-nav ${mobileOpen?"is-open":""}`} aria-label="Hauptnavigation"><ul className="nav-list">
 {navItems.map(item=>!item.children? <li key={item.label}><Link className={active(item.href)?"active":""} aria-current={active(item.href)?"page":undefined} href={item.href!} onClick={()=>setMobileOpen(false)}>{item.label}</Link></li> : <li className="nav-dropdown" key={item.label}>
 <button type="button" className={item.children.some(c=>active(c.href))?"active":""} aria-expanded={openMenu===item.label} onClick={()=>setOpenMenu(openMenu===item.label?null:item.label)} onKeyDown={e=>{if(e.key==="Escape")setOpenMenu(null)}}>{item.label}<span aria-hidden="true">⌄</span></button>
 <ul className={`submenu ${openMenu===item.label?"is-open":""}`}>{item.children.map(c=><li key={c.href}><Link href={c.href} aria-current={active(c.href)?"page":undefined} onClick={()=>{setOpenMenu(null);setMobileOpen(false)}}>{c.label}</Link></li>)}</ul></li>)}
 </ul></nav></div></header>;
}