"use client";

import { headerData } from "@/data/onepage/headerData";
import Image from "next/image";
import Link from "next/link";
import { Link as ScrollLink, Events } from "react-scroll";
import { useEffect, useState } from "react";

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

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

    handleScroll();
    window.addEventListener("scroll", handleScroll);

    // Listen to react-scroll events
    Events.scrollEvent.register("begin", (to: string) => {
      setActiveSection(to);
    });

    Events.scrollEvent.register("end", (to: string) => {
      setActiveSection(to);
    });

    return () => {
      window.removeEventListener("scroll", handleScroll);
      Events.scrollEvent.remove("begin");
      Events.scrollEvent.remove("end");
    };
  }, []);

  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={activeSection === item.href ? "active" : ""}
              >
                <ScrollLink
                  to={item.href}
                  spy={true}
                  smooth={true}
                  offset={-80}
                  duration={500}
                  activeClass="active"
                  className="nav-link"
                  style={{ cursor: "pointer" }}
                >
                  {item.text}
                </ScrollLink>
              </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={activeSection === item.href ? "active" : ""}
                      >
                        <ScrollLink
                          to={item.href}
                          spy={true}
                          smooth={true}
                          offset={-80}
                          duration={500}
                          activeClass="active"
                          className="nav-link"
                          style={{ cursor: "pointer" }}
                        >
                          {item.text}
                        </ScrollLink>
                      </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>
    </>
  );
}