"use client";

import { useState } from 'react';
import Link from 'next/link';

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => setIsOpen(!isOpen);

  return (
    <nav className={isOpen ? "nav-active" : ""}>
      <Link href="/" className="nav-logo">
        <img src="/assets/vg-fence.png" alt="VG Fence Products" style={{ height: '40px', width: 'auto' }} />
      </Link>

      {/* Hamburger Menu Toggle */}
      <button className="menu-toggle" onClick={toggleMenu} aria-label="Toggle Menu">
        <div className={isOpen ? "hamburger active" : "hamburger"}>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </button>

      <ul className={isOpen ? "nav-links active" : "nav-links"}>
        <li><Link href="/" onClick={() => setIsOpen(false)}>Home</Link></li>
        <li><Link href="/about" onClick={() => setIsOpen(false)}>About</Link></li>
        <li><Link href="/products" onClick={() => setIsOpen(false)}>Products</Link></li>
        <li><Link href="/manufacturing" onClick={() => setIsOpen(false)}>Manufacturing</Link></li>
        <li><Link href="/rentals" onClick={() => setIsOpen(false)}>Rentals</Link></li>
        <li><Link href="/blog" onClick={() => setIsOpen(false)}>Blog</Link></li>
        <li><Link href="/contact" onClick={() => setIsOpen(false)}>Contact</Link></li>
        <li className="mobile-cta-li">
          <Link href="/login" className="nav-cta" onClick={() => setIsOpen(false)} style={{ width: '100%', justifyContent: 'center' }}>
            Login
          </Link>
        </li>
      </ul>

      <Link href="/login" className="nav-cta desktop-cta">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        Login
      </Link>
    </nav>
  );
}