"use client";

import { useState } from "react";
import Link from "next/link";
import { Menu, X, Play } from "lucide-react";
import { Logo } from "./Logo";
import { APP_URL, BRAND } from "@/lib/site";

const NAV = [
  { href: "/#features", label: "ویژگی‌ها" },
  { href: "/download", label: "دانلود و نصب" },
  { href: "/faq", label: "سوال‌ها" },
  { href: "/support", label: "پشتیبانی" },
];

export function Nav() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-50 glass">
      <nav className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
        <Link href="/" className="flex items-center gap-2">
          <Logo size={34} />
          <span className="text-lg font-extrabold gold-text">{BRAND.nameFa}</span>
        </Link>

        <div className="hidden items-center gap-6 md:flex">
          {NAV.map((n) => (
            <Link key={n.href} href={n.href} className="text-sm text-cream/80 hover:text-cream">
              {n.label}
            </Link>
          ))}
        </div>

        <div className="flex items-center gap-2">
          <a
            href={APP_URL}
            className="hidden items-center gap-1.5 rounded-xl btn-gold px-4 py-2 text-sm sm:flex"
          >
            <Play size={16} /> بازی در مرورگر
          </a>
          <button
            className="rounded-lg p-2 text-cream md:hidden"
            onClick={() => setOpen((v) => !v)}
            aria-label="منو"
          >
            {open ? <X size={22} /> : <Menu size={22} />}
          </button>
        </div>
      </nav>

      {open && (
        <div className="border-t border-gold/10 px-4 pb-4 md:hidden">
          <div className="flex flex-col gap-1 pt-2">
            {NAV.map((n) => (
              <Link
                key={n.href}
                href={n.href}
                onClick={() => setOpen(false)}
                className="rounded-lg px-3 py-2 text-cream/85 hover:bg-navy-800"
              >
                {n.label}
              </Link>
            ))}
            <a href={APP_URL} className="mt-2 flex items-center justify-center gap-1.5 rounded-xl btn-gold px-4 py-2.5">
              <Play size={16} /> بازی در مرورگر
            </a>
          </div>
        </div>
      )}
    </header>
  );
}