<section id="menu" class="relative py-32 bg-gradient-to-br from-slate-950 via-violet-950 to-slate-950 overflow-hidden">
  <!-- Cyberpunk grid background -->
  <div class="absolute inset-0 opacity-5">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNGRkZGRkYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMiAyaDR2NEgyem02IDBoNHY0SDh6bTYgMGg0djRoLTR6bTYgMGg0djRoLTR6bTYgMGg0djRoLTR6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=')]"></div>
  </div>
  
  <!-- Holographic effects -->
  <div class="absolute top-0 left-0 w-full h-20 bg-gradient-to-b from-fuchsia-500/10 to-transparent"></div>
  <div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-cyan-500/10 to-transparent"></div>
  <div class="absolute -left-40 top-1/3 w-96 h-96 rounded-full bg-fuchsia-600/20 blur-[100px] animate-float"></div>
  <div class="absolute -right-40 top-2/3 w-96 h-96 rounded-full bg-cyan-600/20 blur-[100px] animate-float animation-delay-3000"></div>
  
  <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
    <!-- Futuristic header -->
    <div class="text-center mb-24" data-aos="fade-up">
      <div class="inline-flex items-center justify-center mb-6">
        <div class="h-px w-12 bg-gradient-to-r from-transparent via-fuchsia-500 to-transparent"></div>
        <span class="mx-4 px-4 py-1 bg-slate-900/80 text-fuchsia-400 border border-fuchsia-500/30 rounded-md text-sm font-mono tracking-wider backdrop-blur-sm">
          <span class="inline-block w-2 h-2 bg-fuchsia-400 rounded-full mr-2 animate-pulse"></span>
          DIGITAL MENU
        </span>
        <div class="h-px w-12 bg-gradient-to-r from-transparent via-cyan-500 to-transparent"></div>
      </div>
      
      <h2 class="text-6xl font-bold text-white mb-8 relative glitch-text">
        {{ sections.menu.title }}
        <span class="absolute -inset-1 bg-fuchsia-500/10 blur-sm rounded-lg -z-10 opacity-0 group-hover:opacity-100 transition-opacity"></span>
      </h2>
      
      <div class="max-w-2xl mx-auto text-slate-300 text-lg relative">
        <p class="relative z-10">Experience our chef's visionary creations, where tradition meets innovation in every bite</p>
        <div class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent"></div>
      </div>
    </div>

    <!-- Menu categories with cyberpunk 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 tech effect -->
        <div class="relative mb-16">
          <div class="flex items-center justify-center">
            <div class="h-px w-16 bg-gradient-to-r from-transparent via-fuchsia-500 to-fuchsia-500/0"></div>
            <h3 class="inline-block text-3xl font-bold text-white px-6 py-2 relative mx-4 font-mono">
              <span class="relative z-10">{{ category.name }}</span>
              <span class="absolute inset-0 bg-slate-800/50 backdrop-blur-sm border border-fuchsia-500/20 rounded-md"></span>
              <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-fuchsia-500/20 to-cyan-500/20 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </h3>
            <div class="h-px w-16 bg-gradient-to-r from-cyan-500/0 via-cyan-500 to-transparent"></div>
          </div>
        </div>

        <!-- Menu items in a futuristic card design -->
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
          {% for item in category.items %}
          <div class="group">
            <div class="relative bg-slate-900/70 backdrop-blur-md border border-slate-700/50 rounded-lg overflow-hidden transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(192,38,211,0.2)]">
              <!-- Glowing border effect on hover -->
              <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-500/0 via-fuchsia-500/30 to-cyan-500/30 opacity-0 group-hover:opacity-100 rounded-lg blur-sm transition-opacity duration-300"></div>
              
              {% if item.media %}
              <div class="relative overflow-hidden h-56">
                <img
                  src="{{ item.media.src }}"
                  alt="{{ item.media.alt }}"
                  class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 filter saturate-[1.2]"
                />
                <!-- Cyberpunk overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-70"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-500/20 to-cyan-500/20 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                
                <!-- Futuristic price tag -->
                <div class="absolute top-4 right-4 px-3 py-1 bg-slate-900/80 text-fuchsia-400 border border-fuchsia-500/30 rounded-md font-mono backdrop-blur-sm">
                  {{ item.price }}
                </div>
                
                <!-- Dish name with tech effect -->
                <div class="absolute bottom-0 left-0 right-0 p-4">
                  <h4 class="text-xl font-bold text-white group-hover:text-fuchsia-400 transition-colors font-mono">
                    {{ item.name }}
                  </h4>
                </div>
              </div>
              {% endif %}
              
              <div class="p-6 {% if item.media %}pt-3{% endif %}">
                {% if not item.media %}
                <div class="flex justify-between items-start mb-3">
                  <h4 class="text-xl font-bold text-white group-hover:text-fuchsia-400 transition-colors font-mono">
                    {{ item.name }}
                  </h4>
                  <span class="px-3 py-1 bg-slate-800/80 text-fuchsia-400 border border-fuchsia-500/30 rounded-md font-mono backdrop-blur-sm">
                    {{ item.price }}
                  </span>
                </div>
                {% endif %}
                
                <p class="text-slate-400 text-sm">{{ item.description }}</p>
                
                <!-- Futuristic order button -->
                <div class="mt-6">
                  <button class="w-full py-2.5 bg-slate-800 text-white rounded-md font-medium transition-all duration-300 border border-slate-700 group-hover:border-fuchsia-500/50 relative overflow-hidden">
                    <span class="relative z-10 flex items-center justify-center space-x-2 font-mono">
                      <span>SELECT ITEM</span>
                      <svg class="w-4 h-4 transition-transform 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="M13 5l7 7-7 7M5 12h15"></path>
                      </svg>
                    </span>
                    <span class="absolute inset-0 w-0 bg-gradient-to-r from-fuchsia-600 to-cyan-600 group-hover:w-full transition-all duration-300"></span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Futuristic CTA button -->
    <div class="text-center mt-28">
      <a href="#full-menu" class="group relative inline-flex items-center justify-center">
        <span class="absolute inset-0 w-full h-full transition duration-300 ease-out bg-gradient-to-r from-fuchsia-600 to-cyan-600 rounded-md opacity-70 group-hover:opacity-100 blur-md group-hover:blur-lg"></span>
        <span class="relative px-8 py-4 bg-slate-900 border border-slate-700 rounded-md">
          <span class="relative flex items-center space-x-3 text-white font-bold font-mono">
            <span>EXPLORE FULL 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="M13 5l7 7-7 7M5 12h15"></path>
            </svg>
          </span>
        </span>
      </a>
    </div>
  </div>
  
  <style>
    /* Custom animations */
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(10px, -15px) scale(1.05); }
      50% { transform: translate(-10px, 10px) scale(0.95); }
      75% { transform: translate(15px, 15px) scale(1.025); }
    }
    
    .animate-float {
      animation: float 20s infinite ease-in-out;
    }
    
    .animation-delay-3000 {
      animation-delay: 3s;
    }
    
    /* Glitch text effect */
    .glitch-text {
      position: relative;
      text-shadow: 
        0 0 5px rgba(192, 38, 211, 0.5),
        0 0 10px rgba(8, 145, 178, 0.5);
    }
    
    .glitch-text::before,
    .glitch-text::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }
    
    .glitch-text::before {
      animation: glitch-anim 2s infinite linear alternate-reverse;
      text-shadow: -2px 0 #ff00ea;
      clip: rect(44px, 450px, 56px, 0);
    }
    
    .glitch-text::after {
      animation: glitch-anim-2 5s infinite linear alternate-reverse;
      text-shadow: 2px 0 #00d9ff;
      clip: rect(44px, 450px, 56px, 0);
    }
    
    @keyframes glitch-anim {
      0% { clip: rect(42px, 9999px, 44px, 0); }
      20% { clip: rect(12px, 9999px, 59px, 0); }
      40% { clip: rect(62px, 9999px, 78px, 0); }
      60% { clip: rect(22px, 9999px, 11px, 0); }
      80% { clip: rect(95px, 9999px, 23px, 0); }
      100% { clip: rect(67px, 9999px, 34px, 0); }
    }
    
    @keyframes glitch-anim-2 {
      0% { clip: rect(70px, 9999px, 46px, 0); }
      20% { clip: rect(67px, 9999px, 55px, 0); }
      40% { clip: rect(43px, 9999px, 76px, 0); }
      60% { clip: rect(59px, 9999px, 23px, 0); }
      80% { clip: rect(35px, 9999px, 56px, 0); }
      100% { clip: rect(82px, 9999px, 91px, 0); }
    }
  </style>
</section>