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

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

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

    return (
        <header className="metatron-header-wrap">
            <div id="metatron-header-sticky" className={`metatron-header-area ${sticky ? "header-sticky" : ""}`}>
                <div className="container">
                    <div className="row align-items-center">
                        <div className="col-lg-3 col-md-6 col-6">
                            <div className="metatron-logo">
                                <Link href="/">
                                    <img src="/assets/img/home/footer/footer-logo-black.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '220px', height: 'auto' }} />
                                </Link>
                            </div>
                        </div>
                        <div className="col-lg-6 d-none d-lg-block">
                            <div className="metatron-main-menu text-center">
                                <nav className="metatron-nav">
                                    <NavItemsMetatron />
                                </nav>
                            </div>
                        </div>
                        <div className="col-lg-3 col-md-6 col-6">
                            <div className="metatron-header-right d-flex align-items-center justify-content-end">
                                <div className="metatron-hero-btn d-none d-lg-block text-end">
                                    <Link href="/contact" className="metatron-btn-main">
                                        Get Started Now <i className="fa-solid fa-angle-right"></i>
                                    </Link>
                                </div>
                                <div className="metatron-header-action-item d-block d-lg-none">
                                    <button type="button" className="metatron-offcanvas-toggle" onClick={() => {
                                        document.querySelector(".offcanvas__info")?.classList.add("info-open");
                                        document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
                                    }}>
                                        <i className="fa-solid fa-bars-staggered"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default HeaderMetatron;