"use client";

import Link from "next/link";
import { useState } from "react";
import BrandLogo from "@/components/brand-logo";

const LINKS = [
  { label: "Events", href: "/events" },
  { label: "Merch", href: "/shop" },
  { label: "Bash", href: "/bash" },
  { label: "Features", href: "/features" },
  { label: "Pricing", href: "/pricing" },
  { label: "Gallery", href: "/gallery" },
  { label: "Blog", href: "/blog" },
  { label: "About", href: "/about" },
];

export default function SiteNav({ transparent = false }: { transparent?: boolean }) {
  const [open, setOpen] = useState(false);

  return (
    <header className={transparent ? "bg-transparent" : "bg-bg border-b border-line"}>
      <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
        <Link href="/" className="flex items-center" aria-label="VibePass Tickets — home">
          <BrandLogo size="sm" showTagline />
        </Link>

        {/* Full link list only from `lg` up — 7 links plus both CTAs at full
            text doesn't fit in the 640–1023px range without overflowing. */}
        <nav className="hidden lg:flex items-center gap-6 text-sm font-medium">
          {LINKS.map((l) => (
            <Link key={l.href} href={l.href} className="text-white/70 hover:text-white">
              {l.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-1.5 lg:gap-2">
          {/* Always visible, even on phone — a clear CTA shouldn't hide behind
              the hamburger menu. Collapses to an icon-only button below `lg`
              (its full label plus "Get tickets" plus the logo/nav doesn't fit
              otherwise) and expands to full text from `lg` up. */}
          <Link
            href="/dashboard/events/new"
            aria-label="Launch an Event"
            title="Launch an Event"
            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line text-white/80 hover:text-white hover:border-white/30 lg:h-auto lg:w-auto lg:gap-1.5 lg:px-4 lg:py-2"
          >
            <svg viewBox="0 0 24 24" className="h-4 w-4 lg:hidden" fill="none" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            </svg>
            <span className="hidden text-sm font-semibold whitespace-nowrap lg:inline">
              Launch an Event
            </span>
          </Link>
          <Link
            href="/#tickets"
            className="inline-block whitespace-nowrap rounded-full bg-brand-green px-3 py-1.5 text-xs font-semibold text-white hover:bg-brand-green-h lg:px-4 lg:py-2 lg:text-sm"
          >
            Get tickets
          </Link>
          {/* Mobile/tablet menu toggle — for the nav links list only, both
              CTAs above are already visible without opening it. */}
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            className="lg:hidden inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line text-white"
          >
            <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" aria-hidden="true">
              {open ? (
                <path
                  d="M6 6l12 12M18 6L6 18"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              ) : (
                <path
                  d="M4 7h16M4 12h16M4 17h16"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile/tablet dropdown */}
      {open && (
        <div className="lg:hidden border-t border-line bg-bg">
          <nav className="max-w-6xl mx-auto px-4 py-4 flex flex-col gap-1">
            {LINKS.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                onClick={() => setOpen(false)}
                className="rounded-lg px-3 py-3 text-base font-medium text-white/80 hover:bg-panel hover:text-white"
              >
                {l.label}
              </Link>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}