Material_Design_Video_Player_Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative">
    <!-- Video Thumbnail & Play Button -->
    <div class="relative pb-9/16 overflow-hidden group">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <button class="p-4 md:p-6 bg-amber-500 text-white rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50" aria-label="Play Video">
          <svg class="h-8 w-8 md:h-10 md:w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8">
      <h3 class="text-2xl sm:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-3 leading-tight">
        Exclusive Tour: Discover Our Premier Service
      </h3>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg mb-5 leading-relaxed">
        Watch this short video to get a comprehensive understanding of our top-tier service, designed to cater to your specific needs. Learn about our process, benefits, and how we ensure a seamless experience from start to finish.
      </p>

      <!-- Details Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Duration:</span> 4 min 30 sec
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2v-2a2 2 0 00-2-2H4a2 2 0 00-2 2V6z"></path><path fill-rule="evenodd" d="M4 4h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm4.586 7.414a2 2 0 10-2.828 2.828L10 17.828l4.243-4.242a2 2 0 10-2.828-2.828L10 12.172l-1.414-1.414z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Format:</span> HD 1080p
          </div>
        </div>
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM1 18h18V8H1v10z"></path></svg>
            <span class="font-medium">Presenter:</span> Alex Johnson
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Relevant for:</span> All Clients
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
        <button class="px-6 py-3 bg-amber-600 text-white font-semibold rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-300 transform hover:-translate-y-0.5" aria-label="Book a Reservation">
          Book Your Reservation Now
        </button>
      </div>
    </div>
  </div>
</div>