"use client";
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import useSticky from '@/hooks/useSticky';
import NavItems from './NavItems';
import MobileMenu from './MobileMenu';
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';

const Header = () => {
    const sticky = useSticky();
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [isPopupOpen, setIsPopupOpen] = useState(false);

    useEffect(() => {
        const handleOpenPopup = () => setIsPopupOpen(true);
        window.addEventListener('openContactPopup', handleOpenPopup);
        return () => window.removeEventListener('openContactPopup', handleOpenPopup);
    }, []);

    const toggleMobileMenu = () => {
        setIsMobileMenuOpen(!isMobileMenuOpen);
    };

    return (
        <>
            <header className="homepage1-body">
                <div id="vl-header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
                    <div className="container headerfix">
                        <div className="row align-items-center row-bg3">
                            <div className="col-lg-3 col-md-6 col-6">
                                <div className="vl-logo">
                                    <Link href="/">
                                        <img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
                                    </Link>
                                </div>
                            </div>
                            <div className="col-lg-6 d-none d-lg-block">
                                <div className="vl-main-menu text-center">
                                    <nav className="vl-mobile-menu-active">
                                        <NavItems themeBtn="vl-btn1" />
                                    </nav>
                                </div>
                            </div>
                            <div className="col-lg-3 col-md-6 col-6 text-end">
                                <div className="vl-hero-btn d-none d-lg-block text-end">
                                    <span className="vl-btn-wrap text-end">
                                        <button
                                            onClick={() => setIsPopupOpen(true)}
                                            className="vl-btn1"
                                            style={{ border: 'none' }}
                                            suppressHydrationWarning
                                        >
                                            Get Started Now <i className="fa-solid fa-angle-right"></i>
                                        </button>
                                    </span>
                                </div>
                                <div className="vl-header-action-item d-block d-lg-none">
                                    <button type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu} suppressHydrationWarning>
                                        <i className="fa-solid fa-bars-staggered"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <MobileMenu isMobileMenuOpen={isMobileMenuOpen} toggleMobileMenu={toggleMobileMenu} themeBtn="vl-btn1" />
            <ContactPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} />
        </>
    );
};

export default Header;