"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 loading="eager" src="/assets/images/logo/white-logo-2.png" alt="Metatroncube Software Solution — Digital Agency Waterloo, Canada" width="260" height="78" 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" aria-label="Main navigation">
                                    <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" style={{ zIndex: 1100 }}>
                                    <button
                                        className="hamburger-btn"
                                        onClick={toggleOffcanvas}
                                        aria-label={isOpen ? "Close navigation menu" : "Open navigation menu"}
                                        aria-expanded={isOpen}
                                        aria-controls="mobile-offcanvas"
                                    >
                                        {isOpen ? (
                                            <i className="fa-solid fa-xmark" aria-hidden="true"></i>
                                        ) : (
                                            <i className="fa-solid fa-bars-staggered" aria-hidden="true"></i>
                                        )}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header1;
