manoon-headless/src/components/layout/Header.tsx

"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { AnimatePresence, motion } from "framer-motion";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import { User, ShoppingBag, Menu, X } from "lucide-react";
import CartDrawer from "@/components/cart/CartDrawer";

const navLinks = [
  { href: "/products", label: "Products" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { getLineCount, toggleCart, initCheckout } = useSaleorCheckoutStore();

  const itemCount = getLineCount();

  // Initialize checkout on mount
  useEffect(() => {
    initCheckout();
  }, [initCheckout]);

  // Track scroll for header styling
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Lock body scroll when mobile menu is open
  useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [mobileMenuOpen]);

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled
            ? "bg-white/95 backdrop-blur-md shadow-sm"
            : "bg-white/80 backdrop-blur-sm"
        }`}
      >
        <div className="relative flex items-center justify-between h-[72px] px-4 lg:px-6">
          {/* Mobile Menu Button */}
          <button
            className="lg:hidden p-2 -ml-2 hover:bg-black/5 rounded-full transition-colors"
            onClick={() => setMobileMenuOpen(true)}
            aria-label="Open menu"
          >
            <Menu className="w-5 h-5" />
          </button>

          {/* Left side - Desktop Nav */}
          <nav className="hidden lg:flex items-center gap-10">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-[13px] uppercase tracking-[0.05em] text-[#1a1a1a] hover:text-[#666666] transition-colors relative group"
              >
                {link.label}
                <span className="absolute -bottom-1 left-0 w-0 h-[1px] bg-current transition-all duration-300 group-hover:w-full" />
              </Link>
            ))}
          </nav>

          {/* Logo - Centered (absolute on desktop, flex on mobile) */}
          <Link href="/" className="flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
            <Image
              src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
              alt="ManoonOils"
              width={150}
              height={40}
              className="h-7 w-auto object-contain"
              priority
            />
          </Link>

          {/* Right side - Icons */}
          <div className="flex items-center gap-1">
            <button
              className="p-2 hover:bg-black/5 rounded-full transition-colors hidden sm:block"
              aria-label="Account"
            >
              <User className="w-5 h-5" strokeWidth={1.5} />
            </button>

            <button
              className="p-2 hover:bg-black/5 rounded-full transition-colors relative"
              onClick={toggleCart}
              aria-label="Open cart"
            >
              <ShoppingBag className="w-5 h-5" strokeWidth={1.5} />
              {itemCount > 0 && (
                <span className="absolute -top-0.5 -right-0.5 bg-black text-white text-[10px] w-[18px] h-[18px] rounded-full flex items-center justify-center font-medium">
                  {itemCount > 99 ? "99+" : itemCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 z-[60] bg-white"
          >
            <div className="container h-full flex flex-col">
              {/* Mobile Header */}
              <div className="flex items-center justify-between h-[72px]">
                <Link href="/" onClick={() => setMobileMenuOpen(false)}>
                  <Image
                    src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
                    alt="ManoonOils"
                    width={150}
                    height={40}
                    className="h-7 w-auto object-contain"
                  />
                </Link>
                <button
                  className="p-2 -mr-2 hover:bg-black/5 rounded-full transition-colors"
                  onClick={() => setMobileMenuOpen(false)}
                  aria-label="Close menu"
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              {/* Mobile Navigation */}
              <nav className="flex-1 flex flex-col justify-center gap-8">
                {navLinks.map((link, index) => (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 + 0.1 }}
                  >
                    <Link
                      href={link.href}
                      onClick={() => setMobileMenuOpen(false)}
                      className="text-3xl font-medium tracking-tight hover:text-[#666666] transition-colors"
                    >
                      {link.label}
                    </Link>
                  </motion.div>
                ))}
              </nav>

              {/* Mobile Footer */}
              <div className="py-8 border-t border-[#e5e5e5]">
                <div className="flex items-center justify-between">
                  <button
                    className="flex items-center gap-2 text-sm text-[#666666] hover:text-black transition-colors"
                    onClick={() => {
                      setMobileMenuOpen(false);
                      toggleCart();
                    }}
                  >
                    <ShoppingBag className="w-5 h-5" strokeWidth={1.5} />
                    Cart ({itemCount})
                  </button>
                  <button
                    className="flex items-center gap-2 text-sm text-[#666666] hover:text-black transition-colors"
                  >
                    <User className="w-5 h-5" strokeWidth={1.5} />
                    Account
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <CartDrawer />
    </>
  );
}