<section id="menu" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-orange-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="menu-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#menu-dots)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.menu.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-700 mb-4">
        {{ sections.menu.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.menu.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.menu.subtitle }}
      </p>
    </div>
    
    <!-- Menu categories tabs if available -->
    {% if sections.menu.categories %}
    <div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up" data-aos-delay="100">
      {% for category in sections.menu.categories %}
      <button 
        class="px-6 py-2 rounded-full text-sm font-medium {% if loop.first %}bg-amber-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %} transition-colors duration-300" 
        data-category="{{ category.id }}"
      >
        {{ category.name }}
      </button>
      {% endfor %}
    </div>
    {% endif %}
    
    <!-- Menu items -->
    <div class="grid md:grid-cols-2 gap-8">
      {% for item in sections.menu.items %}
      <div 
        class="menu-item bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-amber-200 flex"
        data-category="{{ item.category_id|default('') }}"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 50 }}"
      >
        <!-- Item image if available -->
        {% if item.image %}
        <div class="w-1/3 relative">
          <img 
            src="{{ item.image }}" 
            alt="{{ item.name }}" 
            class="w-full h-full object-cover"
            loading="lazy"
          >
          
          <!-- Special badges -->
          {% if item.badges %}
          <div class="absolute top-2 left-2 flex flex-col gap-2">
            {% for badge in item.badges %}
            <span class="inline-block px-2 py-1 text-xs font-medium rounded-full {% if badge.type == 'special' %}bg-amber-500 text-white{% elif badge.type == 'new' %}bg-green-500 text-white{% else %}bg-white text-gray-700{% endif %}">
              {{ badge.text }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        {% endif %}
        
        <!-- Item details -->
        <div class="{% if item.image %}w-2/3{% else %}w-full{% endif %} p-6">
          <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl font-semibold text-gray-900">{{ item.name }}</h3>
            <div class="text-xl font-bold text-amber-600">{{ item.price }}</div>
          </div>
          
          <p class="text-gray-600 mb-4">{{ item.description }}</p>
          
          <!-- Item attributes if available -->
          {% if item.attributes %}
          <div class="flex flex-wrap gap-2 mb-4">
            {% for attr in item.attributes %}
            <span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-700">
              {{ attr }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
          
          <!-- Order button if available -->
          {% if item.orderable %}
          <div class="flex justify-between items-center mt-4">
            <div class="flex items-center">
              {% if item.rating %}
              <div class="flex">
                {% for i in range(1, 6) %}
                <svg class="w-4 h-4 {% if i <= item.rating %}text-yellow-400{% else %}text-gray-300{% endif %}" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                {% endfor %}
              </div>
              <span class="text-sm text-gray-500 ml-2">({{ item.review_count|default('0') }})</span>
              {% endif %}
            </div>
            <button 
              class="inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-medium bg-amber-600 text-white hover:bg-amber-700 transition-colors duration-300"
              data-item-id="{{ item.id }}"
            >
              <i class="ri-shopping-cart-line mr-2" aria-hidden="true"></i>
              {{ item.order_button_text|default('Add to Order') }}
            </button>
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Menu featured item if available -->
    {% if sections.menu.featured_item %}
    <div class="mt-24 bg-amber-600 rounded-2xl shadow-xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
      <div class="grid md:grid-cols-2 items-center">
        <div class="p-8 md:p-12">
          {% if sections.menu.featured_item.badge %}
          <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-white/20 text-white mb-4">
            {{ sections.menu.featured_item.badge }}
          </span>
          {% endif %}
          <h3 class="text-3xl font-bold text-white mb-4">{{ sections.menu.featured_item.name }}</h3>
          <p class="text-amber-100 mb-6">{{ sections.menu.featured_item.description }}</p>
          
          <!-- Price and order button -->
          <div class="flex items-center justify-between mb-8">
            <div class="text-2xl font-bold text-white">{{ sections.menu.featured_item.price }}</div>
            <button 
              class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium bg-white text-amber-600 hover:bg-amber-50 transition-colors duration-300"
              data-item-id="{{ sections.menu.featured_item.id }}"
            >
              <i class="ri-shopping-cart-line mr-2" aria-hidden="true"></i>
              {{ sections.menu.featured_item.order_button_text|default('Order Now') }}
            </button>
          </div>
          
          <!-- Attributes if available -->
          {% if sections.menu.featured_item.attributes %}
          <div class="flex flex-wrap gap-2">
            {% for attr in sections.menu.featured_item.attributes %}
            <span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-white/20 text-white">
              {{ attr }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        
        {% if sections.menu.featured_item.image %}
        <div class="aspect-[4/3] w-full h-full">
          <img 
            src="{{ sections.menu.featured_item.image }}" 
            alt="{{ sections.menu.featured_item.name }}" 
            class="w-full h-full object-cover"
            loading="lazy"
          >
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}
    
    <!-- Menu CTA if available -->
    {% if sections.menu.cta %}
    <div class="mt-16 text-center" data-aos="fade-up" data-aos-delay="300">
      <h3 class="text-2xl font-bold text-gray-900 mb-4">{{ sections.menu.cta.title }}</h3>
      <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">{{ sections.menu.cta.description }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        {% for button in sections.menu.cta.buttons %}
        <a 
          href="{{ button.url }}" 
          class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-300 {% if button.style == 'primary' %}bg-amber-600 text-white hover:bg-amber-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}"
        >
          {% if button.icon %}
          <i class="{{ button.icon }} mr-2" aria-hidden="true"></i>
          {% endif %}
          {{ button.label }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</section>
