LuxuryFoodMapsComposant

<div class="font-sans antialiased text-gray-800 dark:text-gray-100 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-850 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in transition-all duration-500 transform hover:scale-[1.005]">
    <div class="md:flex md:h-[600px] lg:h-[700px]">

      <!-- Left Section: Map -->
      <div class="md:w-3/5 bg-gray-200 dark:bg-gray-700 h-96 md:h-auto overflow-hidden relative">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.259902636712!2d-73.98565158459423!3d40.74844057932785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a542e7!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1678912345678!5m2!1sen!2sus"
          width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade" aria-label="Interactive map showing restaurant locations.">
        </iframe>
        <div class="absolute top-4 left-4 p-3 bg-white dark:bg-gray-900 rounded-full shadow-lg flex items-center space-x-2 text-sm font-semibold opacity-90 backdrop-blur-sm">
            <svg class="w-5 h-5 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">Explore nearby flavors</span>
        </div>
      </div>

      <!-- Right Section: Restaurant List -->
      <div class="md:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 tracking-tight leading-tight">
            <span class="block">Sweet Spots.</span>
            <span class="block text-purple-600 dark:text-purple-400">Savory Treats.</span>
          </h2>
          <p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-8">
            Discover premium culinary experiences near you. From delightful desserts to gourmet dinners.
          </p>

          <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-300px)] overflow-y-auto pr-2 scrollbar-thumb-pink-300 scrollbar-track-purple-100 dark:scrollbar-thumb-pink-700 dark:scrollbar-track-purple-900 scrollbar-w-2">

            <!-- Restaurant Card 1 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-pink-50 dark:bg-gray-700 border border-transparent hover:border-pink-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=1" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">The Sugar Plum Bistro</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Candyland Rd, Suite A</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.9)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-pink-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 2 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-purple-50 dark:bg-gray-700 border border-transparent hover:border-purple-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=2" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mint & Basil Eatery</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">456 Green Street, Level 2</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.5)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-purple-600 hover:to-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 3 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-blue-50 dark:bg-gray-700 border border-transparent hover:border-blue-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=3" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Gourmet Glaze Cafe</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">789 Sweet Avenue, Unit B</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.8)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-blue-500 to-pink-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-blue-600 hover:to-pink-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
                  View Details
                </button>
              </div>
            </div>
            
            <!-- Restaurant Card 4 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-green-50 dark:bg-gray-700 border border-transparent hover:border-green-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=4" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jelly Bean Junction</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">101 Lollipop Lane, Apt 1</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.6)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-green-500 to-blue-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-green-600 hover:to-blue-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-300">
                  View Details
                </button>
              </div>
            </div>

          </div>
        </div>

        <div class="mt-8 flex justify-center">
          <button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-lg font-bold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700">
            Find More Restaurants
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<!-- Custom scrollbar styles for demonstration/specificity -- provided it's configured in Tailwind config for utility classes -->
<style>
  /* For Webkit browsers (Chrome, Safari) */
  .scrollbar-w-2::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-track-purple-100::-webkit-scrollbar-track {
    background: #f3e8ff;
  }

  .scrollbar-thumb-pink-300::-webkit-scrollbar-thumb {
    background-color: #fbcfe8;
    border-radius: 20px;
    border: 2px solid #f3e8ff;
  }

  .dark .scrollbar-track-purple-900::-webkit-scrollbar-track {
    background: #2a0c4e;
  }

  .dark .scrollbar-thumb-pink-700::-webkit-scrollbar-thumb {
    background-color: #be185d;
    border-radius: 20px;
    border: 2px solid #2a0c4e;
  }
</style>