"use client";

//  File:    mobile-menu.tsx
//  Path:    apps/web/components/mobile-menu.tsx
//  Project: AI Risk Index — airiskindex.io
//  Author:  Simon-Pierre Boucher
//  Contact: contact@spboucher.ai
//  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.
//
//  Description: Mobile right-side drawer menu (portal, scroll lock, Escape/overlay close).


import Link from "next/link";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { LogoMark } from "./logo";

export function MobileMenu({ items }: { items: ReadonlyArray<readonly [string, string]> }): JSX.Element {
  const [open, setOpen] = useState(false);

  // Close on Escape; lock scroll while open.
  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <div className="sm:hidden">
      <button
        type="button"
        aria-expanded={open}
        aria-label={open ? "Close menu" : "Open menu"}
        onClick={() => setOpen((value) => !value)}
        className="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface-1)] text-[var(--ink)]"
      >
        {open ? (
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M2 4.5h12M2 8h12M2 11.5h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        )}
      </button>

      {/* Portal to <body>: the blurred sticky header is a containing block for
          fixed descendants, which would trap and stretch the drawer. */}
      {open &&
        createPortal(
          <>
            <button
              type="button"
              aria-label="Close menu"
              onClick={() => setOpen(false)}
              className="fixed inset-0 z-40 cursor-default bg-black/25 backdrop-blur-[2px]"
            />
          {/* Drawer sliding in from the right */}
          <nav className="fixed right-0 top-0 z-50 flex h-dvh w-72 max-w-[85vw] animate-[drawer-in_180ms_ease-out] flex-col border-l border-[var(--border)] bg-[var(--surface-1)] shadow-2xl">
            <div className="flex items-center justify-between border-b border-[var(--grid)] px-5 py-3.5">
              <span className="flex items-center gap-2.5 font-semibold tracking-tight">
                <LogoMark size={20} />
                AI Risk Index
              </span>
              <button
                type="button"
                aria-label="Close menu"
                onClick={() => setOpen(false)}
                className="flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--border)] text-[var(--ink)]"
              >
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                </svg>
              </button>
            </div>
            <ul className="flex-1 overflow-y-auto px-5 py-2">
              {items.map(([href, label]) => (
                <li key={href} className="border-b border-[var(--grid)] last:border-b-0">
                  <Link
                    href={href}
                    onClick={() => setOpen(false)}
                    className="block py-3.5 text-base font-medium text-[var(--ink)] active:bg-[var(--wash)]"
                  >
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
            <p className="border-t border-[var(--grid)] px-5 py-4 text-xs text-[var(--muted)]">
              <a href="mailto:contact@spboucher.ai" className="hover:underline">
                contact@spboucher.ai
              </a>
            </p>
          </nav>
          </>,
          document.body,
        )}
    </div>
  );
}
