import Link from "next/link";
import Menu from "../Menu";
import MobileMenu from "../MobileMenu";
import OffcanvusMenu from "../OffcanvusMenu";
import SearchPopup from "../SearchPopup";
import { useEffect, useState } from "react";

export default function Header4({
  scroll,
  isMobileMenu,
  handleMobileMenu,
  transparent = true,
  isSearch,
  isOffcanvus,
  handleOffcanvus,
  handleSearch,
}) {
  const [sessionAccess, setSessionAccess] = useState(false);

  // Placeholder logic for session access
  // Adjust sessionAccess state as needed based on your logic

  return (
    <>
      <header
        className={`tg-header__style-four ${
          transparent ? "transparent-header" : ""
        }`}
      >
        <div className="tg-header__top tg-header__top-three">
          <div className="container">
            <div className="row">
              <div className="col-lg-6">
                <ul className="tg-header__top-info tg-header__top-info-three list-wrap">
                  <li>
                    <i className="flaticon-phone-call" />
                    <Link href="tel:+14702604117">(470) 260-4117</Link>
                  </li>
                  <li>
                    <i className="flaticon-pin" />
                    <Link
                      href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6"
                      target="_blank"
                    >
                      Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA
                    </Link>
                  </li>
                </ul>
              </div>
              <div className="col-lg-6">
                <ul className="tg-header__top-right tg-header__top-right-three list-wrap">
                  <li>
                    <i className="flaticon-envelope" />
                    <Link
                      href="mailto:support@rankrunners.net
"
                    >
                      support@rankrunners.net
                    </Link>
                  </li>
                  <li>
                    <i className="flaticon-time" />
                    Mon-Fri: 08:00am - 06:00pm
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          id="sticky-header"
          className={`tg-header__area  tg-header__area-four ${
            scroll ? "sticky-menu" : ""
          }`}
        >
          <div className="container">
            <div className="row">
              <div className="col-12">
                <div className="tgmenu__wrap">
                  <nav className="tgmenu__nav">
                    <div className="logo">
                      <Link href="/">
                        <img src="/assets/img/logo/logo.png" alt="Logo" />
                      </Link>
                    </div>
                    <div className="tgmenu__navbar-wrap tgmenu__main-menu d-none d-lg-flex">
                      <Menu />
                    </div>
                    <div className="tgmenu__action tgmenu__action-four d-none d-md-block">
                      <ul className="list-wrap">
                        <li className="header-btn">
                          {sessionAccess && (
                            <Link href="/client-area" className="btn">
                              User Area
                            </Link>
                          )}
                          {!sessionAccess && (
                            <Link href="/schedule" className="btn">
                              book a discovery call
                            </Link>
                          )}
                        </li>
                      </ul>
                    </div>
                    <div
                      className="mobile-nav-toggler mobile-nav-toggler-two"
                      onClick={handleMobileMenu}
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 18 18"
                        fill="none"
                      >
                        <path
                          d="M0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M0 9C0 7.89543 0.895431 7 2 7C3.10457 7 4 7.89543 4 9C4 10.1046 3.10457 11 2 11C0.895431 11 0 10.1046 0 9Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M0 16C0 14.8954 0.895431 14 2 14C3.10457 14 4 14.8954 4 16C4 17.1046 3.10457 18 2 18C0.895431 18 0 17.1046 0 16Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M7 2C7 0.895431 7.89543 0 9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.89543 11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M14 2C14 0.895431 14.8954 0 16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16Z"
                          fill="currentcolor"
                        />
                      </svg>
                    </div>
                  </nav>
                </div>
                {/* Mobile Menu*/}
                <div className="tgmobile__menu">
                  <nav className="tgmobile__menu-box">
                    <div className="close-btn" onClick={handleMobileMenu}>
                      <i className="fas fa-times" />
                    </div>
                    <div className="nav-logo" onClick={handleMobileMenu}>
                      <Link href="/">
                        <img src="/assets/img/logo/logo.png" alt="Logo" />
                      </Link>
                    </div>
                    <div className="tgmobile__menu-outer">
                      <MobileMenu handleMobileMenu={handleMobileMenu} />
                    </div>
                    <div className="tgmobile__menu-bottom">
                      <div className="contact-info">
                        <ul className="list-wrap">
                          <li>
                            <Link
                              href="mailto:support@rankrunners.net"
                              target="_blank"
                              onClick={handleMobileMenu}
                            >
                              support@rankrunners.net
                            </Link>
                          </li>
                          <li>
                            <Link
                              href="tel:+14702604117"
                              onClick={handleMobileMenu}
                            >
                              (470) 260-4117
                            </Link>
                          </li>
                        </ul>
                      </div>
                      <div className="social-links">
                        <ul className="list-wrap">
                          <li>
                            <Link
                              href="https://www.facebook.com/profile.php?id=61561349362241"
                              target="_blank"
                              onClick={handleMobileMenu}
                            >
                              <i className="fab fa-facebook-f" />
                            </Link>
                          </li>
                          <li>
                            <Link
                              href="https://x.com/Rankrunnersseo"
                              target="_blank"
                              onClick={handleMobileMenu}
                            >
                              <i className="fab fa-twitter" />
                            </Link>
                          </li>
                          <li>
                            <Link
                              href="https://www.instagram.com/rankrunnersseo/"
                              target="_blank"
                              onClick={handleMobileMenu}
                            >
                              <i className="fab fa-instagram" />
                            </Link>
                          </li>
                          <li>
                            <Link
                              href="https://www.linkedin.com/company/rankrunnersseo/"
                              target="_blank"
                              onClick={handleMobileMenu}
                            >
                              <i className="fab fa-linkedin-in" />
                            </Link>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </nav>
                </div>
                <div
                  className="tgmobile__menu-backdrop"
                  onClick={handleMobileMenu}
                />
                {/* End Mobile Menu */}
              </div>
            </div>
          </div>
        </div>
        {/* header-search */}
        <SearchPopup isSearch={isSearch} handleSearch={handleSearch} />
        {/* header-search-end */}
        {/* offCanvas-menu */}
        <OffcanvusMenu
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
        />
        {/* offCanvas-menu-end */}
      </header>
    </>
  );
}