"use client";

import { useEffect, useRef, useState } from "react";
import { animateNavbar } from "@/animations/navbar";
import Link from "next/link";

export default function Navbar() {
const [open, setOpen] = useState(false);
const navRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (navRef.current) {
      animateNavbar(navRef.current);
    }
  }, []);
  return (
    <header ref={navRef} className="relative z-50">
      <div className="container mx-auto">
        <nav className="flex items-center md:justify-evenly justify-center h-20">

          {/* Mobile menu button */}
          <button
            className="md:hidden p-2 absolute right-4"
            onClick={() => setOpen(!open)}
            aria-label="Toggle menu"
          >
            <span className="block w-6 h-0.5 bg-black mb-1" />
            <span className="block w-6 h-0.5 bg-black mb-1" />
            <span className="block w-6 h-0.5 bg-black" />
          </button>

          {/* Left (desktop) */}
          <div className="hidden md:flex gap-6 nav-left">
            <Link className="nav-link" href="#">Home</Link>
            <Link className="nav-link" href="#">About us</Link>
            <Link className="nav-link" href="#">How it works</Link>
          </div>

          {/* Center logo */}
          <div className="flex justify-center nav-logo">
            <span className="text-2xl text-center font-semibold py-3 px-7 bg-dark rounded-full text-white uppercase leading-5 tracking-tight font-jengle">
              Mass<br />vocacy
            </span>
          </div>

          {/* Right (desktop) */}
          <div className="hidden md:flex gap-4 nav-right">
            <Link className="nav-link" href="#">Brands</Link>
            <Link className="nav-link" href="#">Testimonials</Link>
            <Link className="nav-link" href="#">Contact us</Link>
          </div>
        </nav>
      </div>

      {/* Mobile Menu */}
      <div
        className={`md:hidden absolute left-0 top-full w-full bg-dark transition-all duration-300 ease-out
        ${open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"}`}
      >
        <div className="flex flex-col gap-6 p-8 text-center">
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">Home</Link>
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">About us</Link>
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">How it works</Link>
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">Brands</Link>
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">Testimonials</Link>
          <Link onClick={() => setOpen(false)} className="nav-link" href="#">Contact us</Link>
        </div>
      </div>
    </header>
  );
}