<turbo-stream action="replace" target="modal"><template>
  <turbo-frame data-controller="modal" class="fixed inset-0 z-90" id="modal">
  <div class="fixed inset-0 z-50 overflow-auto" data-aos="fade-up" data-aos-duration="300">
    <!-- Overlay -->
    <div class="fixed inset-0 bg-opacity-30 backdrop-blur-sm transition-opacity" data-action="click->modal#hide"></div>
    <!-- Modal Content -->
    <div class="relative min-h-screen flex items-center justify-center p-4">
      <div class="bg-white w-full max-w-7xl rounded-2xl shadow-xl relative max-h-[90vh] flex flex-col" 
            data-action="click->modal#preventBubble">
          <!-- Header with title and close button -->
          <div class="p-6 flex justify-between items-start rounded-t-2xl bg-gradient-to-r from-primary-600 to-primary-500 border-none">
            <div class="flex flex-col">
              <div class="text-xl font-bold text-gray-100">See Pantry Aide in Action</div>
                <div class="text-gray-300 mt-1">Discover how our app simplifies meal planning and grocery shopping</div>
            </div>
            <button type="button" 
                   class="bg-white rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-all shadow-sm w-10 h-10 flex items-center justify-center ml-4 flex-shrink-0" 
                   data-action="modal#hide">
              <i class="ph ph-x text-xl"></i>
            </button>
          </div>
        <!-- Modal body -->
        <div class="flex-grow overflow-auto ">
          
    <div class="flex flex-col overflow-hidden">
      <div class="p-4 md:p-6 bg-gradient-to-b from-primary-50 to-white">
        <!-- Video container with premium styling -->
        <div class="relative pb-[56.25%] h-0 rounded-xl overflow-hidden shadow-xl border-4 border-white">
          <video controls="controls" autoplay="autoplay" class="absolute top-0 left-0 w-full h-full" poster="https://pantry-aide-media.s3.us-east-1.amazonaws.com/pa/demo_thumbnail.png" src="https://pantry-aide-media.s3.us-east-1.amazonaws.com/pa/pantry_aide_demo.mp4"></video>
        </div>
        <!-- Feature highlights -->
        <div class="mt-6 md:mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
          <div class="bg-white p-4 md:p-5 rounded-xl shadow-lg border border-gray-50 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
            <div class="bg-primary-100 p-3 rounded-full w-fit mb-3 text-center">
              <i class="ph ph-chef-hat text-primary-600 text-xl"></i>
            </div>
            <h3 class="font-bold text-gray-800 text-lg">Custom Meal Plans</h3>
            <p class="text-gray-600 mt-2">Personalized plans tailored to your preferences</p>
          </div>
          <div class="bg-white p-4 md:p-5 rounded-xl shadow-lg border border-gray-50 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
            <div class="bg-primary-100 p-3 rounded-full w-fit mb-3 text-center">
              <i class="ph ph-shopping-cart text-primary-600 text-xl"></i>
            </div>
            <h3 class="font-bold text-gray-800 text-lg">Smart Shopping</h3>
            <p class="text-gray-600 mt-2">Save time and money on your grocery trips</p>
          </div>
          <div class="bg-white p-4 md:p-5 rounded-xl shadow-lg border border-gray-50 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
            <div class="bg-primary-100 p-3 rounded-full w-fit mb-3 text-center">
              <i class="ph ph-device-mobile text-primary-600 text-xl"></i>
            </div>
            <h3 class="font-bold text-gray-800 text-lg">Always Available</h3>
            <p class="text-gray-600 mt-2">Access your meal plans anytime, anywhere</p>
          </div>
        </div>
      </div>
      <!-- Footer with call to action -->
      <div class="p-4 md:p-6 border-t border-primary-100 bg-white flex flex-col sm:flex-row justify-between items-center gap-4 rounded-b-2xl">
        <p class="text-primary-600 font-medium flex items-center">
          <i class="ph ph-gift mr-2 text-lg"></i> Try limited meal planning for free, or unlock all premium features with a 7-day free trial
        </p>
        <div class="flex gap-4 w-full sm:w-auto">
          <a class="btn btn-primary flex-1 sm:flex-auto justify-center" href="/users/sign_up">
            Get Started Free
</a>          <button type="button" class="btn btn-outline flex-1 sm:flex-auto justify-center" data-action="modal#hide">
            Close
          </button>
        </div>
      </div>
    </div>

        </div>
      </div>
    </div>
  </div>
</turbo-frame></template></turbo-stream> 