"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
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 Navbar() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
        {/* Left: Brand */}
        <div className="flex items-center">
          <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={400}
              height={50}
              style={{ height: "40px", width: "auto" }}
              className="object-contain"
              priority
            />
          </Link>
        </div>

        <div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.label}
              href={link.href}
              className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
            >
              {link.label}
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
            </Link>
          ))}
        </div>

        {/* Right: Actions */}
        <div className="flex items-center justify-end gap-3">
          <Link
            href="/#download"
            className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
          >
            Get App
          </Link>

          {/* 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>
      </div>

      {/* Mobile Drawer */}
      {mobileOpen && (
        <div className="md:hidden bg-[#4d046a] border-t border-white/10">
          <div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
            {NAV_LINKS.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
                onClick={() => setMobileOpen(false)}
              >
                {link.label}
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
}