"use client";

import { headerData } from "@/data/home/headerData";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

export default function Header() {
  const { logo, navigation, buttons, mobileMenu } = headerData;
  const pathname = usePathname();
  const [isSticky, setIsSticky] = useState(false);
  const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);

  const isRouteActive = (href: string) => {
    return pathname === href;
  };

  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 50);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const openMobileMenu = () => setIsMobileMenuActive(true);
  const closeMobileMenu = () => setIsMobileMenuActive(false);

  return (
    <>
      {/* Mobile Menu */}
      <div className={`mobile-menu ${isMobileMenuActive ? "active" : ""}`}>
        {/* Close Button */}
        <div className="close-btn" onClick={closeMobileMenu}>
          <Image
            src={mobileMenu.closeIcon}
            alt={mobileMenu.closeAlt}
            width={24}
            height={24}
          />
        </div>
        <nav>
          <ul className="main-menu11 menu-style11">
            {mobileMenu.navigation.map((item, index) => (
              <li
                key={index}
                className={isRouteActive(item.href) ? "active" : ""}
              >
                <Link
                  href={item.href}
                  className={isRouteActive(item.href) ? "active" : ""}
                >
                  {item.text}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isMobileMenuActive ? "active" : ""}`}
        onClick={closeMobileMenu}
      />

      {/* Header */}
      <header className={`header-main ${isSticky ? "sticky" : ""}`}>
        <div className="header-bottom">
          <div className="container-fluid">
            <div className="row">
              {/* Logo */}
              <div className="col-lg-2 col-md-6 col-sm-6">
                <div className="header-logo">
                  <Link href={logo.href} className="logo" title={logo.title}>
                    <Image
                      src={logo.src}
                      alt={logo.alt}
                      width={120}
                      height={40}
                      style={{ width: "auto", height: "auto" }}
                    />
                  </Link>
                </div>
              </div>

              {/* Navigation Menu */}
              <div className="col-lg-7">
                <nav
                  className="main-menu11 menu-style11"
                  aria-label="Main Navigation"
                >
                  <ul>
                    {navigation.map((item, index) => (
                      <li
                        key={index}
                        className={isRouteActive(item.href) ? "active" : ""}
                      >
                        <Link
                          href={item.href}
                          className={isRouteActive(item.href) ? "active" : ""}
                        >
                          {item.text}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>

              {/* Buttons */}
              <div className="col-lg-3 col-md-6 col-sm-6">
                <div className="header-btn">
                  <Link
                    href={buttons.login.href}
                    className="login-btn"
                    aria-label={buttons.login.ariaLabel}
                  >
                    <Image
                      src={buttons.login.icon}
                      alt={buttons.login.iconAlt}
                      width={18}
                      height={18}
                      style={{ width: "auto", height: "auto" }}
                    />
                    <span>{buttons.login.text}</span>
                  </Link>
                  <Link href={buttons.signUp.href} className="btn-style1 v3">
                    {buttons.signUp.text}
                    <span>
                      <Image
                        src={buttons.signUp.icon}
                        alt={buttons.signUp.iconAlt}
                        width={20}
                        height={20}
                      />
                    </span>
                  </Link>
                  <button
                    className="hamburger-btn"
                    aria-label="Toggle Menu"
                    onClick={openMobileMenu}
                  >
                    <span />
                    <span />
                    <span />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    </>
  );
}