"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

export default function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  // SCROLL HEADER
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <header
        className={`lk-header-main position-fixed top-0 start-0 w-100 z-3 ${
          scrolled ? "lk-header-scrolled" : ""
        }`}
      >
        <div className="container-fluid wrapheader">
          <div className="d-flex align-items-center justify-content-between py-2">
            {/* LOGO */}
            <Link href="/">
              <img src="/assets/logo.png" alt="" className="lk-logo-img" />
            </Link>

            {/* CENTER MENU */}
            <ul className="lk-menu-list d-flex align-items-center gap-5 list-unstyled mb-0">
              <li>
                <Link href="/" className="lk-menu-link">
                  Home
                </Link>
              </li>

              <li>
                <Link href="/our-brand" className="lk-menu-link">
                  Our Brand
                </Link>
              </li>

              <li>
                <Link href="/about" className="lk-menu-link">
                  About us
                </Link>
              </li>

              <li>
                <Link href="/career" className="lk-menu-link">
                  Career
                </Link>
              </li>

              <li>
                <Link href="/contact" className="lk-menu-link">
                  Contact
                </Link>
              </li>
            </ul>

            {/* TOGGLE BUTTON */}
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="border-0 bg-transparent p-0"
            >
              {menuOpen ? (
                /* CLOSE ICON */
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="34"
                  height="34"
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M18 6L6 18"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                  <path
                    d="M6 6L18 18"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                </svg>
              ) : (
                /* MENU ICON */
                <img
                  src="/assets/icons/togglemenu.svg"
                  alt=""
                  className="lk-logo-imgicon"
                />
              )}
            </button>
          </div>
        </div>
      </header>

      {/* ONLY SAY HELLO CARD */}
      <div className={`lk-hello-wrapper ${menuOpen ? "active" : ""}`}>
        <div className="lk-hello-card">
          <h4 className="mb-4 fw-bold">
            <img src="/assets/icons/sayhello.svg" alt="" /> Say hello!
          </h4>

          <div className="d-flex gap-2 mb-4">
            <img src="/assets/card1.png" alt="" className="lk-card-img" />

            <img src="/assets/card2.png" alt="" className="lk-card-img" />

            <img src="/assets/card3.png" alt="" className="lk-card-img" />
          </div>

          <p className="text-dark mb-3 small">
            <span>
              <img src="/assets/icons/locationheader.svg" alt="" /> 410
              Sandtown, California <br /> 94001, USA
            </span>
          </p>

          <a href="mailto:info@example.com" className="text-dark small">
            <span>
              <img src="/assets/icons/email.svg" alt="" /> info@example.com
            </span>
          </a>
        </div>
      </div>

  
    </>
  );
}