"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { Wordmark } from "@/components/wordmark";

const LINKS = [

  { href: "#sets", label: "The Sets", index: "01" },

  { href: "#floor", label: "The Floor", index: "02" },

  { href: "#road", label: "The Road", index: "03" },

];

export function MobileNav() {

  const [open, setOpen] = useState(false);

  useEffect(() => {

    if (!open) return;

    const onKey = (e: KeyboardEvent) => {

      if (e.key === "Escape") setOpen(false);

    };

    document.documentElement.style.overflow = "hidden";

    window.addEventListener("keydown", onKey);

    return () => {

      document.documentElement.style.overflow = "";

      window.removeEventListener("keydown", onKey);

    };

  }, [open]);

  return (

    <div className="sm:hidden">

      <button

        type="button"

        aria-label="Open menu"

        aria-expanded={open}

        onClick={() => setOpen(true)}

        className="mobile-nav-trigger flex h-12 w-12 flex-col items-end justify-center gap-[6px] text-gold"

      >

        <span className="block h-[2px] w-7 bg-gold" />

        <span className="block h-[2px] w-7 bg-gold" />

        <span className="block h-[2px] w-5 bg-gold" />

      </button>

      {open && (

        <div className="mobile-nav-sheet fixed inset-0 z-[70] flex flex-col bg-stage px-5 pb-12 pt-4">

          <div className="flex items-center justify-between">

            <span className="text-lg">

              <Wordmark />

            </span>

            <button

              type="button"

              aria-label="Close menu"

              onClick={() => setOpen(false)}

              className="flex h-12 w-12 items-center justify-center text-gold"

            >

              <span className="display text-3xl leading-none">×</span>

            </button>

          </div>

          <nav className="mt-16 flex flex-1 flex-col justify-center gap-2">

            {LINKS.map((l) => (

              <a

                key={l.href}

                href={l.href}

                onClick={() => setOpen(false)}

                className="group flex items-baseline gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker text-gold">{l.index}</span>

                <span className="display text-5xl text-bone group-active:text-gold">

                  {l.label}

                </span>

              </a>

            ))}

            <Link

              href="/about"

              onClick={() => setOpen(false)}

              className="group flex items-baseline gap-5 border-b border-[var(--line)] py-6"

            >

              <span className="kicker text-gold">04</span>

              <span className="display text-5xl text-bone group-active:text-gold">

                About

              </span>

            </Link>

          </nav>

          <p className="kicker mt-8 text-ash">Chicago Stepping. Your City.</p>

        </div>

      )}

    </div>

  );

}