"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import useSticky from "@/hooks/useSticky";
import NavItemsMetatron from "./NavItemsMetatron";

const Header1 = () => {
    const sticky = useSticky();
    const [isOpen, setIsOpen] = useState(false);

    const toggleOffcanvas = () => {
        const nextState = !isOpen;
        setIsOpen(nextState);
        if (nextState) {
            document.querySelector(".offcanvas__info")?.classList.add("info-open");
            document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
        } else {
            document.querySelector(".offcanvas__info")?.classList.remove("info-open");
            document.querySelector(".offcanvas__overlay")?.classList.remove("overlay-open");
        }
    };

    // Listen for outside clicks (e.g. clicking the overlay)
    useEffect(() => {
        const handleOutsideClose = () => {
            setIsOpen(false);
        };
        const overlay = document.querySelector(".offcanvas__overlay");
        overlay?.addEventListener("click", handleOutsideClose);
        return () => overlay?.removeEventListener("click", handleOutsideClose);
    }, []);

    return (
        <header className="header-metatron-style homepage1-body">
            <div id="header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
                <div className="container-fluid headerfix px-lg-5">
                    <div className="row align-items-center row-bg3 px-lg-4">
                        <div className="col-lg-3 col-md-6 col-9">
                            <div className="vl-logo">
                                <Link href="/">
                                    <img src="/assets/img-app/logo.webp" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
                                </Link>
                            </div>
                        </div>
                        <div className="col-lg-7 d-none d-lg-block">
                            <div className="vl-main-menu text-center">
                                <nav id="mobile-menu" className="vl-mobile-menu-active main-menu-metatron">
                                    <NavItemsMetatron />
                                </nav>
                            </div>
                        </div>
                        <div className="col-lg-2 col-md-6 col-3">
                            <div className="header-action-metatron d-flex align-items-center justify-content-end">
                                <div className="header-btn-metatron d-none d-lg-block">
                                    <Link className="vl-btn1" href="/contact" style={{ textDecoration: 'none', whiteSpace: 'nowrap' }}>
                                        Get Started Now <i className="fa-solid fa-angle-right ms-2"></i>
                                    </Link>
                                </div>
                                <div className="header-hamburger-metatron d-lg-none" onClick={toggleOffcanvas} style={{ zIndex: 1100 }}>
                                    <button className="hamburger-btn">
                                        {isOpen ? (
                                            <i className="fa-solid fa-xmark"></i>
                                        ) : (
                                            <i className="fa-solid fa-bars-staggered"></i>
                                        )}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header1;