import Link from "next/link"

import { Monogram } from "@/components/invite/monogram"

const links = [
  ["Introduction", "#introduction"],
  ["Our story", "#story"],
  ["Details", "#details"],
  ["Schedule", "#schedule"],
  ["FAQ", "#faq"],
  ["RSVP", "#rsvp"],
] as const

export function SiteHeader() {
  return (
    <header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop">
      <div className="flex items-center justify-between">
        <Link href="#top" aria-label="Back to top">
          <Monogram light />
        </Link>
        <nav aria-label="Invitation sections" className="hidden wedding-lg:block">
          <ul className="flex items-center gap-6">
            {links.map(([label, href]) => (
              <li key={href}>
                <Link className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white" href={href}>
                  {label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <details className="group relative wedding-lg:hidden">
          <summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
            Menu <span aria-hidden="true">☰</span>
          </summary>
          <nav aria-label="Invitation sections" className="absolute right-0 top-8 w-48 bg-wedding-ivory p-5 shadow-lg">
            <ul className="space-y-4">
              {links.map(([label, href]) => (
                <li key={href}>
                  <Link className="wedding-text-link" href={href}>{label}</Link>
                </li>
              ))}
            </ul>
          </nav>
        </details>
      </div>
    </header>
  )
}