import React from "react";
import Link from "next/link";
import NavMenu from "./NavMenu";
import useSticky from "@/hooks/useSticky";

const Header3 = () => {
    const sticky = useSticky();

    const openOffcanvas = () => {
        document.querySelector(".offcanvas__info")?.classList.add("info-open");
        document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
    };

    const openSearch = () => {
        document.querySelector(".df-search-area")?.classList.add("opened");
        document.querySelector(".body-overlay")?.classList.add("opened");
    };

    return (
        <header>
            <div className="container-fluid bg-color-1">
                <div className="header-top">
                    <div className="header-top-contact-info">
                        <span className="email p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
                            <i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
                            <a href="mailto:info@Metatron.com">info@Metatron.com</a>
                        </span>
                        <span className="time p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
                            <i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
                            Hours: Mon - Sat: 10.00 AM - 4.00 PM
                        </span>
                    </div>
                    <div className="header-top-socials">
                        <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
                        <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
                        <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
                        <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
                    </div>
                </div>
            </div>
            <div id="header-sticky" className={`header-area header-style-three ${sticky ? 'sticky' : ''}`}>
                <div className="large-container">
                    <div className="mega-menu-wrapper">
                        <div className="header-main">
                            <div className="header-left">
                                <div className="header-logo">
                                    <Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
                                </div>
                            </div>
                            <div className="header-right d-flex justify-content-end">
                                <div className="mean__menu-wrapper d-none d-lg-block">
                                    <div className="main-menu">
                                        <nav id="mobile-menu"><NavMenu /></nav>
                                    </div>
                                </div>
                                <div
                                    className="search-toggle-open header-search my-auto"
                                    onClick={openSearch}
                                >
                                    <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
                                </div>
                                <div className="header-shopping-cart my-auto">
                                    <div className="cart-icon"><Link href="/shop"><i className="fa-solid fa-cart-shopping"></i></Link></div>
                                </div>
                                <div
                                    className="header__hamburger d-xl-block my-auto"
                                    onClick={openOffcanvas}
                                >
                                    <div className="sidebar__toggle">
                                        <a className="bar-icon" href="javascript:void(0)">
                                            <i className="fa-solid fa-bars"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header3;