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

// export default function HeroCarosoul() {
//   const [currentSlide, setCurrentSlide] = useState(0);
//   const [category, setCategory] = useState('all');
//   const [location, setLocation] = useState('');
//   const [searchQuery, setSearchQuery] = useState('');

//   // Background images for carousel
//   const backgroundImages = [
//     '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
//     '/denisse-leon-0k795_HZzns-unsplash.jpg',
//     '/event-mng.jpeg',
//   ];

//   // Categories for dropdown
//   const categories = [
//     { value: 'all', label: 'All Categories' },
//     { value: 'matrimonial', label: 'Matrimonial' },
//     { value: 'electronics', label: 'Electronics' },
//     { value: 'vehicles', label: 'Vehicles' },
//     { value: 'property', label: 'Property' },
//     { value: 'jobs', label: 'Jobs' },
//     { value: 'services', label: 'Services' },
//     { value: 'events', label: 'Event Services' },
//   ];

//   // Auto-slide effect
//   useEffect(() => {
//     const timer = setInterval(() => {
//       setCurrentSlide((prev) => (prev + 1) % backgroundImages.length);
//     }, 5000);
//     return () => clearInterval(timer);
//   }, [backgroundImages.length]);

//   const handleSearch = (e) => {
//     e.preventDefault();
//     console.log({ searchQuery, category, location });
//     // Add your search logic here
//   };

//   return (
//     <section className="relative h-[600px] overflow-hidden">
//       {/* Background Image Carousel with Fade Effect */}
//       <div className="absolute inset-0">
//         {backgroundImages.map((image, index) => (
//           <div
//             key={index}
//             className={`absolute inset-0 transition-opacity duration-1000 ${
//               index === currentSlide ? 'opacity-100' : 'opacity-0'
//             }`}
//           >
//             <div
//               className="absolute inset-0 bg-cover bg-center"
//               style={{ backgroundImage: `url(${image})` }}
//             />
//             {/* Dark overlay for better text visibility */}
//             <div className="absolute inset-0 bg-black/60" />
//           </div>
//         ))}
//       </div>

//       {/* Carousel Indicators */}
//       <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex gap-2 z-20">
//         {backgroundImages.map((_, index) => (
//           <button
//             key={index}
//             onClick={() => setCurrentSlide(index)}
//             className={`w-3 h-3 rounded-full transition-all ${
//               index === currentSlide
//                 ? 'bg-white w-8'
//                 : 'bg-white/50 hover:bg-white/75'
//             }`}
//             aria-label={`Go to slide ${index + 1}`}
//           />
//         ))}
//       </div>

//       {/* Hero Content */}
//       <div className="relative z-10 h-full flex items-center">
//         <div className="container mx-auto px-4">
//           <div className="max-w-4xl mx-auto text-center">
//             {/* Main Heading */}


//       <div className="container mx-auto px-4 py-18 text-center relative z-10">

//     <h2 className="text-5xl md:text-6xl font-extrabold text-white mb-4 drop-shadow-lg">
//       One Platform for 
//       <span className="block xtext-brand-green font-bold mt-2 bg-gradient-to-r from-red-500 to-green-500 bg-clip-text text-transparent">
//       {/* <span className="block text-brand-green font-bold mt-2 "> */}
//         Partner, Local Deals & Events
//       </span>
//     </h2>

//     <p className="max-w-3xl mx-auto text-lg md:text-xl text-white mb-0">
//       Find trusted matrimonial matches, discover local classified ads,
//       and connect with verified event service providers — all in one secure,
//       easy-to-use platform.
//     </p>
//     </div>       
      
//             {/* <h1 className="text-5xl md:text-6xl font-extrabold text-white mb-4 drop-shadow-lg">
//               One Platform for
//             </h1>
//             <p className="text-xl md:text-2xl text-white/95 mb-8 drop-shadow-md">
//               Discover{' '}
//               <span className="text-green-400 font-semibold">
//                 matrimonial matches
//               </span>
//               ,{' '}
//               <span className="text-red-400 font-semibold">
//                 local classifieds
//               </span>
//               , and{' '}
//               <span className="text-yellow-400 font-semibold">
//                 event services
//               </span>
//             </p> */}

//             {/* Unified Search Bar */}
//             <form onSubmit={handleSearch} className="w-full max-w-5xl mx-auto">
//               <div className="bg-white rounded-full shadow-2xl overflow-hidden">
//                 <div className="flex flex-col md:flex-row items-stretch">
//                   {/* Search Input */}
//                   <div className="flex-1 flex items-center px-6 py-4 border-b md:border-b-0 md:border-r border-gray-200">
//                     <svg
//                       className="w-5 h-5 text-gray-400 mr-3"
//                       fill="none"
//                       stroke="currentColor"
//                       viewBox="0 0 24 24"
//                     >
//                       <path
//                         strokeLinecap="round"
//                         strokeLinejoin="round"
//                         strokeWidth={2}
//                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
//                       />
//                     </svg>
//                     <input
//                       type="text"
//                       value={searchQuery}
//                       onChange={(e) => setSearchQuery(e.target.value)}
//                       placeholder="What are you looking for?"
//                       className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-base"
//                     />
//                   </div>

//                   {/* Category Dropdown */}
//                   <div className="flex items-center px-6 py-4 border-b md:border-b-0 md:border-r border-gray-200 min-w-[200px]">
//                     <svg
//                       className="w-5 h-5 text-gray-400 mr-3"
//                       fill="none"
//                       stroke="currentColor"
//                       viewBox="0 0 24 24"
//                     >
//                       <path
//                         strokeLinecap="round"
//                         strokeLinejoin="round"
//                         strokeWidth={2}
//                         d="M4 6h16M4 12h16M4 18h16"
//                       />
//                     </svg>
//                     <select
//                       value={category}
//                       onChange={(e) => setCategory(e.target.value)}
//                       className="flex-1 text-gray-700 outline-none text-base bg-transparent cursor-pointer"
//                     >
//                       {categories.map((cat) => (
//                         <option key={cat.value} value={cat.value}>
//                           {cat.label}
//                         </option>
//                       ))}
//                     </select>
//                   </div>

//                   {/* Location Input */}
//                   <div className="flex items-center px-6 py-4 border-b md:border-b-0 md:border-r border-gray-200 min-w-[200px]">
//                     <svg
//                       className="w-5 h-5 text-gray-400 mr-3"
//                       fill="none"
//                       stroke="currentColor"
//                       viewBox="0 0 24 24"
//                     >
//                       <path
//                         strokeLinecap="round"
//                         strokeLinejoin="round"
//                         strokeWidth={2}
//                         d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
//                       />
//                       <path
//                         strokeLinecap="round"
//                         strokeLinejoin="round"
//                         strokeWidth={2}
//                         d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
//                       />
//                     </svg>
//                     <input
//                       type="text"
//                       value={location}
//                       onChange={(e) => setLocation(e.target.value)}
//                       placeholder="Location"
//                       className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-base"
//                     />
//                   </div>

//                   {/* Search Button */}
//                   <button
//                     type="submit"
//                     // className="px-8 py-4 bg-gradient-to-r from-green-500 to-red-500 hover:from-green-600 hover:to-red-600 text-white font-semibold transition-all duration-300 flex items-center justify-center gap-2"
//                     className="px-8 py-4  bg-brand-green hover:bg-brand-green-dark cursor-pointer text-white font-semibold transition-all duration-300 flex items-center justify-center gap-2"
//                   >
//                     <svg
//                       className="w-5 h-5"
//                       fill="none"
//                       stroke="currentColor"
//                       viewBox="0 0 24 24"
//                     >
//                       <path
//                         strokeLinecap="round"
//                         strokeLinejoin="round"
//                         strokeWidth={2}
//                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
//                       />
//                     </svg>
//                     <span className="hidden md:inline">Search</span>
//                   </button>
//                 </div>
//               </div>
//             </form>

//             {/* Quick Links */}
//             <div className="mt-8 flex flex-wrap justify-center gap-3">
//               {/* <span className="text-white/80 text-sm">Popular:</span> */}
//               {['Matrimonial', 'Electronics', 'Wedding Planning', 'Jobs'].map(
//                 (tag) => (
//                   <Link
//                     key={tag}
//                     href="#"
//                     className="px-4 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white text-sm rounded-full transition-all border border-white/20"
//                   >
//                     {tag}
//                   </Link>
//                 )
//               )}
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// }


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

export default function HeroCarosoul() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [category, setCategory] = useState('all');
  const [location, setLocation] = useState('');
  const [searchQuery, setSearchQuery] = useState('');

  // Background images for carousel
  const backgroundImages = [
    '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
    '/denisse-leon-0k795_HZzns-unsplash.jpg',
    '/event-mng.jpeg',
  ];

  // Categories for dropdown
  const categories = [
    { value: 'all', label: 'All Categories' },
    { value: 'matrimonial', label: 'Matrimonial' },
    { value: 'electronics', label: 'Electronics' },
    { value: 'vehicles', label: 'Vehicles' },
    { value: 'property', label: 'Property' },
    { value: 'jobs', label: 'Jobs' },
    { value: 'services', label: 'Services' },
    { value: 'events', label: 'Event Services' },
  ];

  // Auto-slide effect
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % backgroundImages.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [backgroundImages.length]);

  const handleSearch = (e) => {
    e.preventDefault();
    console.log({ searchQuery, category, location });
    // Add your search logic here
  };

  return (
    <section className="relative h-[500px] sm:h-[600px] overflow-hidden">
      {/* Background Image Carousel with Fade Effect */}
      <div className="absolute inset-0">
        {backgroundImages.map((image, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-opacity duration-1000 ${
              index === currentSlide ? 'opacity-100' : 'opacity-0'
            }`}
          >
            <div
              className="absolute inset-0 bg-cover bg-center"
              style={{ backgroundImage: `url(${image})` }}
            />
            {/* Dark overlay for better text visibility */}
            <div className="absolute inset-0 bg-black/60" />
          </div>
        ))}
      </div>

      {/* Carousel Indicators */}
      <div className="absolute bottom-4 sm:bottom-8 left-1/2 transform -translate-x-1/2 flex gap-2 z-20">
        {backgroundImages.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all ${
              index === currentSlide
                ? 'bg-white w-6 sm:w-8'
                : 'bg-white/50 hover:bg-white/75'
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>

      {/* Hero Content */}
      <div className="relative z-10 h-full flex items-center">
        <div className="container mx-auto px-4 py-8 sm:py-12">
          <div className="max-w-4xl mx-auto text-center">
            {/* Main Heading */}
            <div className="mb-6 sm:mb-8">
              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-3 sm:mb-4 drop-shadow-lg px-2">
                One Platform for 
                <span className="block font-bold mt-2 bg-gradient-to-r from-green-500 via-red-500 to-green-500 bg-clip-text text-transparent">
                  Partner, Local Deals & Events
                </span>
              </h2>

              <p className="max-w-3xl mx-auto text-sm sm:text-base md:text-lg lg:text-xl text-white px-4 sm:px-0">
                Find trusted matrimonial matches, discover local classified ads,
                and connect with verified event service providers — all in one secure,
                easy-to-use platform.
              </p>
            </div>       

            {/* Unified Search Bar */}
            <form onSubmit={handleSearch} className="w-full max-w-5xl mx-auto px-2 sm:px-4">
              {/* Desktop Search Bar - Hidden on Mobile */}
              <div className="hidden md:block bg-white rounded-full shadow-2xl overflow-hidden">
                <div className="flex items-stretch">
                  {/* Search Input */}
                  <div className="flex-1 flex items-center px-6 py-4 border-r border-gray-200">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                    <input
                      type="text"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder="What are you looking for?"
                      className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-base"
                    />
                  </div>

                  {/* Category Dropdown */}
                  <div className="flex items-center px-6 py-4 border-r border-gray-200 min-w-[200px]">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M4 6h16M4 12h16M4 18h16"
                      />
                    </svg>
                    <select
                      value={category}
                      onChange={(e) => setCategory(e.target.value)}
                      className="flex-1 text-gray-700 outline-none text-base bg-transparent cursor-pointer"
                    >
                      {categories.map((cat) => (
                        <option key={cat.value} value={cat.value}>
                          {cat.label}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Location Input */}
                  <div className="flex items-center px-6 py-4 border-r border-gray-200 min-w-[200px]">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                    </svg>
                    <input
                      type="text"
                      value={location}
                      onChange={(e) => setLocation(e.target.value)}
                      placeholder="Location"
                      className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-base"
                    />
                  </div>

                  {/* Search Button */}
                  <button
                    type="submit"
                    className="px-8 py-4 bg-brand-green hover:bg-brand-green-dark cursor-pointer text-white font-semibold transition-all duration-300 flex items-center justify-center gap-2"
                  >
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                    <span>Search</span>
                  </button>
                </div>
              </div>

              {/* Mobile Search Bar - Stacked Layout */}
              <div className="md:hidden bg-white rounded-2xl shadow-2xl overflow-hidden">
                <div className="flex flex-col">
                  {/* Search Input */}
                  <div className="flex items-center px-4 py-3 border-b border-gray-200">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                    <input
                      type="text"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder="What are you looking for?"
                      className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-sm"
                    />
                  </div>

                  {/* Category Dropdown */}
                  <div className="flex items-center px-4 py-3 border-b border-gray-200">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M4 6h16M4 12h16M4 18h16"
                      />
                    </svg>
                    <select
                      value={category}
                      onChange={(e) => setCategory(e.target.value)}
                      className="flex-1 text-gray-700 outline-none text-sm bg-transparent cursor-pointer"
                    >
                      {categories.map((cat) => (
                        <option key={cat.value} value={cat.value}>
                          {cat.label}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Location Input */}
                  <div className="flex items-center px-4 py-3 border-b border-gray-200">
                    <svg
                      className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                    </svg>
                    <input
                      type="text"
                      value={location}
                      onChange={(e) => setLocation(e.target.value)}
                      placeholder="Location"
                      className="flex-1 text-gray-700 placeholder-gray-400 outline-none text-sm"
                    />
                  </div>

                  {/* Search Button */}
                  <button
                    type="submit"
                    className="px-4 py-3 bg-brand-green hover:bg-brand-green-dark cursor-pointer text-white font-semibold transition-all duration-300 flex items-center justify-center gap-2"
                  >
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                    <span>Search</span>
                  </button>
                </div>
              </div>
            </form>

            {/* Quick Links */}
            <div className="hidden mt-6  sm:mt-8 md:flex flex-wrap justify-center gap-2 sm:gap-3 px-4">
              {['Matrimonial', 'Electronics', 'Wedding Planning', 'Jobs'].map(
                (tag) => (
                  <Link
                    key={tag}
                    href="#"
                    className="px-3 sm:px-4 py-1.5 sm:py-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white text-xs sm:text-sm rounded-full transition-all border border-white/20"
                  >
                    {tag}
                  </Link>
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}