"use client";

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

const menuItems = [
  {
    label: "Work with Thu",
    href: "/about-thu",
    submenu: [
      { label: "About Thu", href: "/about-thu" },
      { label: "Growth Adventure", href: "/grow" },
      { label: "Embodiment Circle", href: "/embodiment-circle" },
      { label: "TRE", href: "/tre" },
      { label: "Coaching", href: "/coaching" },
      { label: "Testimonials", href: "/testimonials" },
    ],
  },
  { label: "Events", href: "/events", submenu: null },
  { label: "Peace Pole", href: "/peace-pole", submenu: null },
  {
    label: "Contact Us",
    href: "/contact-thu",
    submenu: [
      { label: "Contact Thu", href: "/contact-thu" },
      { label: "Care Tent", href: "/care-tent" },
    ],
  },
];

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-nusqool-cream/95 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="flex items-center">
            <span className="text-2xl md:text-3xl font-serif text-nusqool-yellow font-bold tracking-wide">
              Nusqool
            </span>
          </Link>

          <div className="hidden lg:flex items-center space-x-8">
            {menuItems.map((item) => (
              <div
                key={item.label}
                className="relative"
                onMouseEnter={() => setActiveDropdown(item.label)}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <Link
                  href={item.href}
                  className="text-nusqool-brown hover:text-nusqool-yellow transition-colors py-2"
                >
                  {item.label}
                  {item.submenu && <span className="ml-1 text-xs">&#9660;</span>}
                </Link>
                {item.submenu && activeDropdown === item.label && (
                  <div className="absolute top-full left-0 bg-white shadow-lg rounded-sm py-2 min-w-48">
                    {item.submenu.map((subItem) => (
                      <Link
                        key={subItem.label}
                        href={subItem.href}
                        className="block px-4 py-2 text-nusqool-brown hover:bg-nusqool-cream hover:text-nusqool-yellow transition-colors"
                      >
                        {subItem.label}
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>

          <button
            className="lg:hidden text-nusqool-brown"
            onClick={() => setIsOpen(!isOpen)}
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {isOpen ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>

        {isOpen && (
          <div className="lg:hidden mt-4 pb-4 border-t border-nusqool-brown/10">
            {menuItems.map((item) => (
              <div key={item.label} className="py-2">
                <Link
                  href={item.href}
                  className="block text-nusqool-brown hover:text-nusqool-yellow py-2"
                  onClick={() => setIsOpen(false)}
                >
                  {item.label}
                </Link>
                {item.submenu && (
                  <div className="pl-4">
                    {item.submenu.map((subItem) => (
                      <Link
                        key={subItem.label}
                        href={subItem.href}
                        className="block text-nusqool-warmGray hover:text-nusqool-yellow py-1 text-sm"
                        onClick={() => setIsOpen(false)}
                      >
                        {subItem.label}
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </nav>
  );
}
