<section id="demo" class="py-20 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="text-center max-w-3xl mx-auto mb-12">
      <h2 class="text-4xl md:text-5xl font-bold mb-4">{{ sections.demo.title }}</h2>
      <p class="text-lg text-gray-600">{{ sections.demo.subtitle }}</p>
    </div>

    <!-- Video Container -->
    <div id="video-container" 
         class="relative aspect-video rounded-xl overflow-hidden shadow-2xl"
         data-video-url="{{ sections.demo.video.src }}">
      <div class="absolute inset-0 bg-gray-900/50 flex items-center justify-center group cursor-pointer z-10" id="video-overlay">
        <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center transition-transform group-hover:scale-110">
          <i class="ri-play-fill text-4xl text-primary"></i>
        </div>
      </div>
      {% if sections.demo.video and sections.demo.video.src %}
      <!-- YouTube Video Thumbnail -->
      <div id="youtube-thumbnail" class="w-full h-full bg-cover bg-center bg-gray-800">
      </div>
      <!-- Hidden iframe for YouTube video -->
      <iframe id="youtube-player" 
              class="hidden w-full h-full absolute top-0 left-0" 
              frameborder="0" 
              allowfullscreen
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
      </iframe>
      {% else %}
      <!-- Fallback placeholder -->
      <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
        <div class="text-center">
          <i class="ri-youtube-line text-6xl text-red-500 mb-4"></i>
          <p class="text-gray-500">YouTube video not available</p>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</section>