disclosure-bureau/web/components/mobile-nav.tsx

"use client";

/**
 * MobileNav — hamburger button + slide-in drawer for narrow viewports.
 *
 * The desktop SiteHeader holds the full primary nav inline; on mobile that
 * cluster overflows past the viewport edge. This drawer keeps the brand
 * always visible and tucks the rest behind a hamburger.
 *
 * Behaviour:
 * - Opens on hamburger click, closes on backdrop click, ESC, link click,
 *   or close button.
 * - Locks body scroll while open so the page underneath doesn't jiggle.
 * - Marks the active nav link via usePathname (mirrors NavLink).
 * - aria-modal="true" + dialog role + escape handling for screen readers.
 *
 * The locale toggle and auth pill live inside the panel so the mobile
 * surface offers every action the desktop navbar does.
 */
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Menu, X } from "lucide-react";
import { AuthBar } from "./auth-bar";
import { LocaleToggleClient } from "./locale-toggle-client";

interface NavItem {
  href: string;
  label: string;
}

const COPY = {
  "pt-br": { open: "Abrir menu", close: "Fechar menu", section: "Navegação" },
  en:      { open: "Open menu", close: "Close menu",   section: "Navigation" },
} as const;

export function MobileNav({
  locale,
  items,
}: { locale: "pt-br" | "en"; items: NavItem[] }) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname() || "/";
  const closeBtnRef = useRef<HTMLButtonElement>(null);
  const t = COPY[locale];

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    // Lock body scroll while the panel is open.
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    // Move focus to the close button so VoiceOver / TalkBack announce the
    // dialog and keyboard users can dismiss it with one press.
    closeBtnRef.current?.focus();
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  function isActive(href: string): boolean {
    return pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={t.open}
        aria-expanded={open}
        aria-controls="mobile-nav-panel"
        className="inline-flex items-center justify-center w-10 h-10 rounded-md text-[#e7ecf3] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
      >
        <Menu size={22} aria-hidden="true" />
      </button>

      {open && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label={t.section}
          id="mobile-nav-panel"
          className="fixed inset-0 z-50"
        >
          {/* Backdrop */}
          <button
            type="button"
            aria-label={t.close}
            onClick={() => setOpen(false)}
            className="absolute inset-0 bg-[#0a0e1a]/80 backdrop-blur-sm"
          />
          {/* Panel */}
          <div className="absolute top-0 right-0 h-full w-[85vw] max-w-sm bg-[#0d1220] border-l border-[rgba(224,192,128,0.20)] shadow-2xl flex flex-col">
            <div className="flex items-center justify-between px-4 py-4 border-b border-[rgba(224,192,128,0.15)]">
              <span className="font-display text-lg text-[#e7ecf3]">
                <span className="text-[#e0c080] mr-1" aria-hidden="true">▍</span>
                The Disclosure Bureau
              </span>
              <button
                ref={closeBtnRef}
                type="button"
                onClick={() => setOpen(false)}
                aria-label={t.close}
                className="inline-flex items-center justify-center w-10 h-10 rounded-md text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
              >
                <X size={20} aria-hidden="true" />
              </button>
            </div>

            <nav aria-label={t.section} className="flex-1 overflow-y-auto px-2 py-3">
              <ul className="flex flex-col">
                {items.map((it) => {
                  const active = isActive(it.href);
                  return (
                    <li key={it.href}>
                      <Link
                        href={it.href}
                        onClick={() => setOpen(false)}
                        aria-current={active ? "page" : undefined}
                        className={
                          active
                            ? "block px-3 py-3 rounded-md text-[15px] font-mono text-[#e0c080] bg-[rgba(224,192,128,0.10)] border-l-2 border-[#e0c080]"
                            : "block px-3 py-3 rounded-md text-[15px] font-mono text-[#e7ecf3] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] border-l-2 border-transparent transition-colors"
                        }
                      >
                        {it.label}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </nav>

            <div className="px-4 py-4 border-t border-[rgba(224,192,128,0.15)] flex items-center justify-between gap-3 flex-wrap">
              <LocaleToggleClient current={locale} variant="navbar" />
              <AuthBar locale={locale} />
            </div>
          </div>
        </div>
      )}
    </>
  );
}