"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import Logo from "./Logo";

const links = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
  { href: "/events", label: "Events" },
  { href: "/knowledge", label: "Knowledge" },
  { href: "/blog", label: "Blog" },
  { href: "/gallery", label: "Gallery" },
  { href: "/why-join", label: "Why Join" },
  { href: "/contact", label: "Contact" },
];

export default function Navbar() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href);

  return (
    <header className="nav">
      <div className="container nav__inner">
        <nav className={`nav__bar ${scrolled ? "nav__bar--scrolled" : ""}`}>
          <Link href="/" className="nav__brand">
            <Logo size={38} />
          </Link>

          <ul className="nav__links">
            {links.map((l) => (
              <li key={l.href}>
                <Link
                  href={l.href}
                  className={`nav__link ${isActive(l.href) ? "nav__link--active" : ""}`}
                >
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>

          <div className="nav__actions">
            <Link href="/why-join" className="btn-primary btn-primary--sm nav__login">
              Member Login
            </Link>
            <button
              onClick={() => setOpen((v) => !v)}
              className="nav__toggle"
              aria-label="Menu"
            >
              <span className={`nav__toggle-box ${open ? "is-open" : ""}`}>
                <span className="nav__bar-line nav__bar-line--1" />
                <span className="nav__bar-line nav__bar-line--2" />
                <span className="nav__bar-line nav__bar-line--3" />
              </span>
            </button>
          </div>
        </nav>

        {open && (
          <div className="nav__mobile">
            <ul className="nav__mobile-list">
              {links.map((l) => (
                <li key={l.href}>
                  <Link
                    href={l.href}
                    onClick={() => setOpen(false)}
                    className={`nav__mobile-link ${
                      isActive(l.href) ? "nav__mobile-link--active" : ""
                    }`}
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
              <li className="nav__mobile-cta">
                <Link
                  href="/why-join"
                  onClick={() => setOpen(false)}
                  className="btn-primary nav__mobile-login"
                >
                  Member Login
                </Link>
              </li>
            </ul>
          </div>
        )}
      </div>
    </header>
  );
}