<section id="menu" class="relative py-32 bg-gradient-to-tr from-indigo-50 via-purple-50 to-pink-50 overflow-hidden">
  <!-- Decorative background elements -->
  <div class="absolute inset-0 opacity-10">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM4QjVDRjYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTIgMmg0djRIMnptNiAwaDR2NEg4em02IDBoNHY0aC00em02IDBoNHY0aC00em02IDBoNHY0aC00eiIvPjwvZz48L2c+PC9zdmc+')]"></div>
  </div>
  
  <!-- Animated gradient blobs -->
  <div class="absolute top-1/4 right-1/4 w-80 h-80 bg-gradient-to-r from-purple-300/30 to-indigo-300/30 rounded-full mix-blend-multiply filter blur-3xl animate-float"></div>
  <div class="absolute bottom-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-pink-300/30 to-rose-300/30 rounded-full mix-blend-multiply filter blur-3xl animate-float animation-delay-3000"></div>
  
  <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
    <!-- Modern header with gradient text -->
    <div class="text-center mb-20" data-aos="fade-up">
      <span class="inline-flex items-center px-4 py-1.5 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 text-indigo-700 rounded-full text-sm font-medium tracking-wide mb-4 ring-1 ring-indigo-500/20">
        <span class="w-2 h-2 bg-indigo-500 rounded-full mr-2 animate-pulse"></span>
        Exquisite Cuisine
      </span>
      <h2 class="text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600">
        {{ sections.menu.title }}
      </h2>
      <p class="max-w-2xl mx-auto text-slate-600 text-lg">
        Experience our chef's masterful creations, crafted with passion and the finest seasonal ingredients
      </p>
    </div>

    <!-- Menu categories with modern design -->
    <div class="space-y-32">
      {% for category in sections.menu.categories %}
      <div data-aos="fade-up" data-aos-delay="{{ loop.index * 100 }}">
        <!-- Category header with glass effect -->
        <div class="relative mb-16">
          <div class="absolute inset-0 bg-gradient-to-r from-indigo-400/20 via-purple-400/20 to-pink-400/20 blur-lg rounded-full"></div>
          <div class="relative backdrop-blur-sm bg-white/30 rounded-full py-4 px-8 inline-block">
            <h3 class="text-3xl font-bold text-slate-800 relative">
              {{ category.name }}
              <span class="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></span>
            </h3>
          </div>
        </div>

        <!-- Menu items in a modern glass card design -->
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
          {% for item in category.items %}
          <div class="group perspective">
            <div class="relative h-full transition-all duration-500 preserve-3d hover:rotate-y-3 hover:rotate-x-3">
              <!-- Card with glass morphism effect -->
              <div class="relative bg-white/70 backdrop-blur-md rounded-2xl overflow-hidden shadow-lg border border-white/20 transition-all duration-300 hover:shadow-2xl">
                <!-- Gradient border on hover -->
                <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 rounded-2xl -z-10 blur transition-opacity duration-300"></div>
                
                <div class="p-6">
                  {% if item.media %}
                  <div class="relative mb-6 overflow-hidden rounded-xl">
                    <img
                      src="{{ item.media.src }}"
                      alt="{{ item.media.alt }}"
                      class="h-52 w-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <!-- Overlay gradient on hover -->
                    <div class="absolute inset-0 bg-gradient-to-t from-indigo-900/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    
                    <!-- Floating badge -->
                    <div class="absolute top-4 right-4 px-3 py-1 bg-white/80 backdrop-blur-sm text-indigo-700 rounded-full font-medium shadow-lg transform -translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                      {{ item.price }}
                    </div>
                  </div>
                  {% endif %}
                  
                  <div class="space-y-4">
                    <h4 class="text-xl font-bold text-slate-800 group-hover:text-indigo-600 transition-colors">
                      {{ item.name }}
                    </h4>
                    
                    <p class="text-slate-600 text-sm">{{ item.description }}</p>
                    
                    <!-- Interactive elements -->
                    <div class="pt-4 flex items-center justify-between">
                      <span class="{% if not item.media %}px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full font-medium{% else %}hidden{% endif %}">
                        {{ item.price }}
                      </span>
                      
                      <!-- Order button with gradient -->
                      <button class="px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg font-medium transform transition hover:shadow-lg hover:scale-105 w-full {% if not item.media %}ml-4{% endif %}">
                        Order Now
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Modern CTA button with gradient and animation -->
    <div class="text-center mt-24">
      <a href="#full-menu" class="group relative inline-flex items-center justify-center overflow-hidden rounded-full p-0.5">
        <span class="absolute inset-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 group-hover:bg-gradient-to-r group-hover:from-indigo-600 group-hover:via-purple-600 group-hover:to-pink-600 transition-all duration-500"></span>
        <span class="relative rounded-full bg-white px-8 py-4 transition-all duration-300 ease-out group-hover:bg-opacity-0">
          <span class="relative flex items-center space-x-3 text-indigo-700 group-hover:text-white font-bold">
            <span>Explore Complete Menu</span>
            <svg class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </span>
        </span>
      </a>
    </div>
  </div>
  
  <style>
    /* Custom animations */
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(20px, -30px) scale(1.05); }
      50% { transform: translate(-20px, 20px) scale(0.95); }
      75% { transform: translate(30px, 30px) scale(1.025); }
    }
    
    .animate-float {
      animation: float 25s infinite ease-in-out;
    }
    
    .animation-delay-3000 {
      animation-delay: 3s;
    }
    
    /* 3D card effect */
    .perspective {
      perspective: 1000px;
    }
    
    .preserve-3d {
      transform-style: preserve-3d;
    }
    
    .rotate-y-3 {
      transform: rotateY(3deg);
    }
    
    .rotate-x-3 {
      transform: rotateX(3deg);
    }
  </style>
</section>