"use client";

import { useState } from "react";
import Image from "next/image";
import { navigationData } from "@/data/navigation";
import { SearchIcon } from "@/components/shared/icons/SearchIcon";

export function Navbar() {
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);

  return (
    <header className="relative z-30 mx-auto flex h-[76px] max-w-[2520px] items-center justify-between px-2">
      {/* Logo */}
      <a href="#" className="flex items-center">
        <Image
          src="/images/aiero/logo-dark.png"
          alt="Aiero"
          width={109.5}
          height={19.5}
          className="h-auto w-auto"
          priority
        />
      </a>

      {/* Navigation */}
      <nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
        {navigationData.map((item) => (
          <div
            key={item.label}
            className="relative"
            onMouseEnter={() => setOpenDropdown(item.label)}
            onMouseLeave={() => setOpenDropdown(null)}
          >
            <a
              href={item.href}
              className="flex items-center gap-1 rounded-[20px] px-[18px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:bg-[#1f1f1f]"
              style={{ fontFamily: "var(--font-sora)" }}
            >
              {item.label}
              {item.children && (
                <svg className="ml-0.5 h-2 w-2 opacity-60" viewBox="0 0 8 5" fill="none">
                  <path d="M1 1L4 4L7 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </a>

            {/* Dropdown */}
            {item.children && openDropdown === item.label && (
              <div className="absolute left-0 top-full z-50 min-w-[200px] rounded-[15px] border border-[#2a2a2a] bg-[#111111] py-3 shadow-2xl">
                {item.children.map((child) => (
                  <a
                    key={child.label}
                    href={child.href}
                    className="block px-5 py-2.5 text-[12px] font-medium text-white/80 transition-colors hover:text-[#45d0bd]"
                    style={{ fontFamily: "var(--font-sora)" }}
                  >
                    {child.label}
                  </a>
                ))}
              </div>
            )}
          </div>
        ))}
      </nav>

      {/* Right Icons */}
      <div className="flex items-center gap-5">
        <button className="hidden text-white transition-colors hover:text-[#45d0bd] md:block" aria-label="Search">
          <SearchIcon className="h-[18px] w-[18px]" />
        </button>

        <a
          href="#"
          className="hidden items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:text-[#45d0bd] md:flex"
          style={{ fontFamily: "var(--font-sora)" }}
        >
          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
            <circle cx="8" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.3"/>
            <path d="M2 14.5C2 11.5 4.5 9.5 8 9.5C11.5 9.5 14 11.5 14 14.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
          </svg>
          Log in
        </a>

        <a
          href="#"
          className="aiero-button aiero-button-gradient-border rounded-full px-[22px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white"
          style={{ fontFamily: "var(--font-sora)" }}
        >
          Get in Touch
          <span className="button-inner" />
        </a>

        {/* Mobile menu button */}
        <button className="flex flex-col gap-[5px] lg:hidden" aria-label="Menu">
          <span className="h-[2px] w-[22px] bg-white" />
          <span className="h-[2px] w-[22px] bg-white" />
          <span className="h-[2px] w-[22px] bg-white" />
        </button>
      </div>
    </header>
  );
}