"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const NAV_LINKS = [
  { label: "Home", href: "/" },
  { label: "Nearle for Business", href: "/businesses" },
  { label: "Nearle for People", href: "/people" },
  { label: "About", href: "/about" },
  { label: "Contact", href: "/contact" },
];

export function PremiumNavbar() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();

  return (
    <header className="w-full bg-[rgba(61,45,143,0.88)] border-b border-white/10 px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
      <div className="flex items-center justify-between w-full">
        {/* LOGO (LEFT) */}
        <Link
          href="/"
          className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
        >
          <Image
            src="/logo-light.png"
            alt="Nearle"
            width={120}
            height={30}
            className="h-7 md:h-8 w-auto object-contain"
            priority
          />
        </Link>

        {/* LINKS (CENTER) */}
        <nav className="hidden md:flex items-center gap-6 lg:gap-8">
          {NAV_LINKS.map((link) => {
            const isActive = pathname === link.href;
            return (
              <Link
                key={link.label}
                href={link.href}
                className={`relative py-1 text-sm font-bold transition-all duration-200 ${
                  isActive ? "text-white" : "text-white/70 hover:text-white"
                }`}
              >
                {link.label}
                {isActive && (
                  <span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-white rounded-full" />
                )}
              </Link>
            );
          })}
        </nav>

        {/* ACTIONS (RIGHT) */}
        <div className="hidden md:flex items-center gap-3">
          <Link
            href="#"
            className="inline-flex items-center justify-center border-2 border-white/20 text-white font-bold px-5 py-1.5 rounded-full text-xs hover:bg-white/10 active:scale-95 transition-all duration-200 whitespace-nowrap"
          >
            Login
          </Link>
          <Link
            href="/people#download-section"
            className="inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-5 py-2 rounded-full text-xs hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
          >
            Get App
          </Link>
        </div>

        {/* Mobile menu toggle */}
        <button
          className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label="Toggle menu"
        >
          <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
        </button>
      </div>

      {/* Mobile Drawer */}
      {mobileOpen && (
        <div className="absolute top-full left-0 right-0 z-50 bg-[rgba(61,45,143,0.95)] backdrop-blur-md border-b border-white/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
          {NAV_LINKS.map((link) => {
            const isActive = pathname === link.href;
            return (
              <Link
                key={link.label}
                href={link.href}
                className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
                  isActive
                    ? "bg-white/10 text-white"
                    : "text-white/70 hover:text-white hover:bg-white/5"
                }`}
                onClick={() => setMobileOpen(false)}
              >
                {link.label}
                {isActive && (
                  <span className="w-1.5 h-1.5 rounded-full bg-white" />
                )}
              </Link>
            );
          })}
          <div className="flex flex-col gap-2 pt-2 border-t border-white/10 mt-2">
            <Link
              href="#"
              onClick={() => setMobileOpen(false)}
              className="flex items-center justify-center border-2 border-white/20 text-white font-bold py-2.5 rounded-xl text-sm"
            >
              Login
            </Link>
            <Link
              href="/people#download-section"
              onClick={() => setMobileOpen(false)}
              className="flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold py-2.5 rounded-xl text-sm"
            >
              Get App
            </Link>
          </div>
        </div>
      )}
    </header>
  );
}
