"use client";

import { useState } from "react";

const NAV = [
  { label: "PLAY", href: "#play" },
  { label: "ROSTER", href: "#roster" },
  { label: "EVENTS", href: "#events" },
  { label: "STORE", href: "#store" },
  { label: "RANKED", href: "#ranked" },
];

export function GamingNavbar() {
  const [open, setOpen] = useState(false);

  return (
    <div
      className="bg-[#0a0011] text-white antialiased relative overflow-hidden"
      style={{ fontFamily: "var(--font-geist-mono), ui-monospace, monospace" }}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "linear-gradient(180deg, rgba(255,0,140,0.1) 0%, transparent 30%), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px)",
        }}
      />

      <header
        className="relative border-b-2"
        style={{
          borderImage:
            "linear-gradient(90deg, transparent, #ff0098 30%, #00f6ff 70%, transparent) 1",
        }}
      >
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-5">
          <a
            href="#"
            className="flex items-center gap-3 text-[16px] font-black tracking-tight"
            aria-label="Apex League home"
          >
            <span
              aria-hidden
              className="grid h-9 w-9 place-items-center text-black font-black"
              style={{
                clipPath:
                  "polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%)",
                background:
                  "linear-gradient(135deg, #ff0098 0%, #00f6ff 100%)",
              }}
            >
              X
            </span>
            <span>
              APEX<span className="text-[#00f6ff]">/</span>LEAGUE
            </span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-1 ml-4 text-[12.5px] font-bold tracking-wider"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="relative px-3 py-2 text-white/75 hover:text-white transition-colors focus-visible:outline-none focus-visible:text-white group"
              >
                <span
                  aria-hidden
                  className="absolute inset-x-2 -bottom-px h-0.5 origin-left scale-x-0 bg-[#00f6ff] transition-transform group-hover:scale-x-100"
                  style={{
                    boxShadow: "0 0 12px #00f6ff",
                  }}
                />
                {item.label}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-3">
            <span className="flex items-center gap-2 rounded-sm border border-white/15 bg-white/5 px-2.5 py-1 text-[11px] font-bold tracking-wider">
              <span aria-hidden className="text-[#facc15]">◆</span>
              4,820
            </span>
            <a
              href="#play"
              className="inline-flex items-center gap-2 px-5 py-2 text-[13px] font-black uppercase tracking-wider text-black hover:brightness-110 active:scale-95 transition"
              style={{
                clipPath:
                  "polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%)",
                background:
                  "linear-gradient(135deg, #ff0098 0%, #00f6ff 100%)",
              }}
            >
              ▶ PLAY NOW
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="apex-mobile"
            className="md:hidden ml-auto rounded-sm border border-white/15 px-3 py-1.5 text-[12px] font-bold tracking-wider"
          >
            {open ? "✕ CLOSE" : "▤ MENU"}
          </button>
        </div>

        {open && (
          <nav
            id="apex-mobile"
            className="md:hidden border-t border-white/10 bg-[#0a0011] px-5 py-3 grid gap-1 text-[13px] font-bold tracking-wider"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="border-l-2 border-transparent px-3 py-2 text-white/80 hover:border-[#00f6ff] hover:bg-white/5 hover:text-white"
              >
                {item.label}
              </a>
            ))}
            <a
              href="#play"
              className="mt-3 inline-flex items-center justify-center gap-2 py-2.5 text-black"
              style={{
                background:
                  "linear-gradient(135deg, #ff0098 0%, #00f6ff 100%)",
              }}
            >
              ▶ PLAY NOW
            </a>
          </nav>
        )}
      </header>

      <div data-nav-context className="relative mx-auto max-w-6xl px-5 py-8">
        <p className="text-[11px] text-[#00f6ff] uppercase tracking-[0.2em]">
          SEASON 14 — CRYOFIRE LIVE
        </p>
        <h1 className="mt-2 text-[28px] font-black uppercase tracking-tight">
          Drop in. Outlast the storm. Take the crown.
        </h1>
      </div>
    </div>
  );
}
Gaming Navbar

Drop in. Outlast the storm. Take the crown.
