import Link from 'next/link';
import { Menu } from 'lucide-react';
import { NAV, MORE_NAV, FOOTER_NAV } from '@/lib/site';

/** CSS-only disclosure menu for small screens (no client JS). */
export function MobileNav() {
  return (
    <details className="relative lg:hidden">
      <summary className="inline-flex items-center border border-rule px-2 py-1.5 text-ink-2 hover:border-accent hover:text-accent" aria-label="Open menu">
        <Menu className="h-4 w-4" aria-hidden />
      </summary>
      <nav aria-label="Mobile" className="absolute right-0 top-[calc(100%+6px)] z-40 w-56 border border-rule-strong bg-paper py-1 shadow-lg">
        {NAV.map((n) => (
          <Link key={n.href} href={n.href} className="block px-3 py-2 text-[14px] text-ink no-underline hover:bg-paper-2">
            {n.label}
          </Link>
        ))}
        <div className="my-1 border-t border-rule" />
        {[...MORE_NAV, ...FOOTER_NAV.filter((f) => !NAV.some((n) => n.href === f.href) && !MORE_NAV.some((m) => m.href === f.href))].map((n) => (
          <Link key={n.href} href={n.href} className="block px-3 py-1.5 text-[13px] text-ink-2 no-underline hover:bg-paper-2">
            {n.label}
          </Link>
        ))}
      </nav>
    </details>
  );
}