39490-vm/src/components/layout/Navbar.tsx

import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { ShoppingCart, Heart, Search, Menu, X, Phone } from "lucide-react";
import { useCartStore } from "@/stores/cartStore";
import logo from "@/assets/logo.png";

export default function Navbar() {
  const { totalItems, wishlist, openDrawer } = useCartStore();
  const [searchQuery, setSearchQuery] = useState("");
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const navigate = useNavigate();

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      navigate(`/products?search=${encodeURIComponent(searchQuery.trim())}`);
      setMobileMenuOpen(false);
    }
  };

  const navLinks = [
    { label: "الرئيسية", href: "/" },
    { label: "منتجاتنا", href: "/products" },
    { label: "العروض", href: "/products?filter=offers" },
    { label: "الجديد", href: "/products?filter=new" },
  ];

  return (
    <>
      {/* Top bar */}
      <div className="bg-orange-500 text-white text-sm py-2 px-4 hidden md:block">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <span className="font-medium">🚚 توصيل مجاني للطلبات فوق 5000 ريال</span>
          <div className="flex items-center gap-3">
            <Phone size={14} />
            <span dir="ltr">+967 777 017 092</span>
          </div>
        </div>
      </div>

      {/* Main Navbar */}
      <nav className="bg-white shadow-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between h-16 gap-4">
            {/* Logo */}
            <Link to="/" className="flex items-center gap-2 shrink-0">
              <img src={logo} alt="صلاح مول" className="w-10 h-10 rounded-xl" />
              <div className="hidden sm:block">
                <span className="text-xl font-black text-orange-500">صلاح مول</span>
                <div className="text-xs text-gray-400 leading-none">متجرك المفضل</div>
              </div>
            </Link>

            {/* Search bar - desktop */}
            <form onSubmit={handleSearch} className="flex-1 max-w-xl hidden md:flex">
              <div className="flex w-full rounded-xl overflow-hidden border-2 border-orange-200 focus-within:border-orange-400 transition-colors">
                <input
                  type="text"
                  placeholder="ابحث عن منتج..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="flex-1 px-4 py-2.5 text-sm outline-none bg-gray-50 text-right"
                />
                <button
                  type="submit"
                  className="bg-orange-500 hover:bg-orange-600 text-white px-5 transition-colors flex items-center gap-2"
                >
                  <Search size={18} />
                  <span className="text-sm font-semibold">بحث</span>
                </button>
              </div>
            </form>

            {/* Actions */}
            <div className="flex items-center gap-2">
              <Link
                to="/wishlist"
                className="relative p-2.5 rounded-xl hover:bg-red-50 text-gray-600 hover:text-red-500 transition-colors"
                title="المفضلة"
              >
                <Heart size={22} />
                {wishlist.length > 0 && (
                  <span className="absolute -top-0.5 -left-0.5 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center font-bold">
                    {wishlist.length}
                  </span>
                )}
              </Link>

              <button
                onClick={openDrawer}
                className="relative p-2.5 rounded-xl hover:bg-orange-50 text-gray-600 hover:text-orange-500 transition-colors"
                title="السلة"
              >
                <ShoppingCart size={22} />
                {totalItems > 0 && (
                  <span className="absolute -top-0.5 -left-0.5 bg-orange-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center font-bold">
                    {totalItems}
                  </span>
                )}
              </button>

              {/* Mobile menu toggle */}
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="md:hidden p-2.5 rounded-xl hover:bg-gray-100 text-gray-600 transition-colors"
              >
                {mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
              </button>
            </div>
          </div>

          {/* Desktop nav links */}
          <div className="hidden md:flex items-center gap-1 pb-2">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                to={link.href}
                className="px-4 py-1.5 rounded-lg text-sm font-semibold text-gray-600 hover:text-orange-500 hover:bg-orange-50 transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>
        </div>

        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="md:hidden border-t border-gray-100 bg-white animate-slide-in">
            {/* Mobile search */}
            <form onSubmit={handleSearch} className="p-4">
              <div className="flex rounded-xl overflow-hidden border-2 border-orange-200">
                <input
                  type="text"
                  placeholder="ابحث عن منتج..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="flex-1 px-4 py-2.5 text-sm outline-none bg-gray-50 text-right"
                />
                <button
                  type="submit"
                  className="bg-orange-500 text-white px-4 flex items-center"
                >
                  <Search size={18} />
                </button>
              </div>
            </form>
            <div className="flex flex-col pb-4 px-4 gap-1">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  to={link.href}
                  onClick={() => setMobileMenuOpen(false)}
                  className="px-4 py-2.5 rounded-xl text-sm font-semibold text-gray-700 hover:text-orange-500 hover:bg-orange-50 transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          </div>
        )}
      </nav>
    </>
  );
}