{% extends 'base.html' %}
{% block title %}Menu | Circle{% endblock %}
{% block content %}

  <!-- MENU HERO – minimal, with circle accent -->
  <section class="hero-bg pt-28 pb-16 relative overflow-hidden">
    <div class="absolute -top-20 -right-20 w-96 h-96 rounded-full border border-amber-200/10 opacity-20"></div>
    <div class="absolute bottom-10 left-10 w-64 h-64 rounded-full border border-amber-200/10 opacity-10"></div>
    <div class="max-w-7xl mx-auto px-6 text-center relative z-10">
      <div class="inline-block px-4 py-1.5 border border-amber-200/20 rounded-full text-amber-200/70 text-xs tracking-[0.2em] uppercase bg-black/20 backdrop-blur-sm mb-5">
        <i class="fas fa-circle mr-2 text-amber-300/40"></i> our offerings
      </div>
      <h1 class="text-4xl md:text-6xl font-light text-white tracking-tight">
        <span class="text-amber-200/90 gold-glow">the menu</span> 
        <span class="block text-2xl md:text-3xl font-light text-gray-400 mt-2">seasonal · curated · circle</span>
      </h1>
      <div class="w-16 h-0.5 bg-amber-200/30 mx-auto mt-6"></div>
      <p class="text-gray-400 max-w-2xl mx-auto mt-5 text-sm md:text-base leading-relaxed">
        A modern tasting journey that changes with the rhythm of nature. Each plate is a circle of flavor, texture, and artistry.
      </p>
    </div>
  </section>

  <!-- MENU GRID – full menu with categories (modern vibe) -->
  <section class="py-16 md:py-20 bg-[#0e0b0a]">
    <div class="max-w-6xl mx-auto px-6">

      <!-- category: small plates -->
      <div class="mb-16">
        <div class="divider-circle mb-8">
          <i class="fas fa-circle"></i>
          <span class="text-amber-200/60 text-xs tracking-[0.25em] uppercase font-light">to begin</span>
          <i class="fas fa-circle"></i>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <!-- item -->
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">burrata & fig</h4>
              <p class="text-gray-400 text-sm">aged balsamic · basil · sourdough crisp</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">28</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">yellowtail crudo</h4>
              <p class="text-gray-400 text-sm">yuzu · chili · crispy shallot</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">32</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">smoked scallop</h4>
              <p class="text-gray-400 text-sm">cauliflower purée · hazelnut · brown butter</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">42</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">beef tartare</h4>
              <p class="text-gray-400 text-sm">capers · egg yolk · grilled bread</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">36</span>
          </div>
        </div>
      </div>

      <!-- category: mains -->
      <div class="mb-16">
        <div class="divider-circle mb-8">
          <i class="fas fa-circle"></i>
          <span class="text-amber-200/60 text-xs tracking-[0.25em] uppercase font-light">main courses</span>
          <i class="fas fa-circle"></i>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">wagyu tataki</h4>
              <p class="text-gray-400 text-sm">ponzu · daikon · crispy garlic</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">58</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">wood-fired branzino</h4>
              <p class="text-gray-400 text-sm">lemon · herbs · charred asparagus</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">46</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">miso-glazed cod</h4>
              <p class="text-gray-400 text-sm">bok choy · ginger · sesame</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">52</span>
          </div>
          <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
            <div class="w-12 h-12 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
              <i class="fas fa-circle text-xs"></i>
            </div>
            <div>
              <h4 class="text-white font-light text-lg">lamb rack</h4>
              <p class="text-gray-400 text-sm">mint gremolata · spring vegetables</p>
            </div>
            <span class="ml-auto text-amber-200/70 text-sm font-light">64</span>
          </div>
        </div>
      </div>

      <!-- category: sweets & drinks -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
        <!-- desserts -->
        <div>
          <div class="divider-circle mb-6">
            <i class="fas fa-circle"></i>
            <span class="text-amber-200/60 text-xs tracking-[0.25em] uppercase font-light">sweets</span>
            <i class="fas fa-circle"></i>
          </div>
          <div class="space-y-3">
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">dark chocolate fondant</h4>
                <p class="text-gray-400 text-xs">sea salt · olive oil · vanilla ice cream</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">18</span>
            </div>
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">yuzu tart</h4>
                <p class="text-gray-400 text-xs">meringue · citrus · edible flowers</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">16</span>
            </div>
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">cheese selection</h4>
                <p class="text-gray-400 text-xs">artisanal · honey · quince</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">22</span>
            </div>
          </div>
        </div>

        <!-- drinks -->
        <div>
          <div class="divider-circle mb-6">
            <i class="fas fa-circle"></i>
            <span class="text-amber-200/60 text-xs tracking-[0.25em] uppercase font-light">cocktails & wine</span>
            <i class="fas fa-circle"></i>
          </div>
          <div class="space-y-3">
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">circle old fashioned</h4>
                <p class="text-gray-400 text-xs">bourbon · demerara · orange bitters</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">24</span>
            </div>
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">yuzu spritz</h4>
                <p class="text-gray-400 text-xs">prosecco · yuzu · mint</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">20</span>
            </div>
            <div class="flex items-center gap-4 p-4 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm glow-card">
              <div class="w-10 h-10 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 flex-shrink-0">
                <i class="fas fa-circle text-[8px]"></i>
              </div>
              <div>
                <h4 class="text-white font-light">sommelier's pick (red)</h4>
                <p class="text-gray-400 text-xs">biodynamic · medium body</p>
              </div>
              <span class="ml-auto text-amber-200/70 text-sm font-light">18/glass</span>
            </div>
          </div>
        </div>
      </div>

      <!-- note: seasonal / market -->
      <div class="mt-16 text-center border-t border-gold/10 pt-10">
        <p class="text-gray-500 text-xs tracking-[0.15em] uppercase">
          <i class="fas fa-circle text-amber-200/30 mr-2"></i> ingredients sourced daily · menu evolves with the season
        </p>
        <p class="text-gray-600 text-[10px] mt-2 tracking-widest">* all prices in USD · 20% service charge included</p>
      </div>
    </div>
  </section>

  <!-- RESERVATION CTA (same as landing, keeps consistency) -->
  <section class="py-16 relative overflow-hidden border-t border-gold/10 bg-[#0e0b0a]">
    <div class="absolute inset-0 bg-gradient-to-b from-[#0e0b0a] to-[#1a1410]"></div>
    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
      <div class="w-16 h-16 rounded-full border border-amber-200/20 mx-auto flex items-center justify-center mb-5 bg-black/40 backdrop-blur-sm">
        <i class="fas fa-circle text-amber-200/40 text-2xl"></i>
      </div>
      <h2 class="text-3xl md:text-4xl font-light text-white">experience the <span class="text-amber-200/90">circle</span></h2>
      <p class="text-gray-400 max-w-lg mx-auto mt-3 text-sm">Reserve your table and let our menu tell a story.</p>
      <div class="mt-8 flex flex-wrap justify-center gap-4">
        <a href="{% url 'book_table' %}" class="bg-amber-200/10 border border-amber-200/30 text-amber-200/90 px-8 py-3.5 rounded-full hover:bg-amber-200/20 transition-all text-sm uppercase tracking-[0.15em] inline-flex items-center gap-3">
          <i class="far fa-calendar-alt"></i> book now
        </a>
        <a href="tel:+9779800000000" class="border border-white/10 text-gray-400 px-8 py-3.5 rounded-full hover:border-amber-200/30 hover:text-amber-200/70 transition-all text-sm uppercase tracking-[0.15em]">
          <i class="fas fa-phone-alt mr-2 text-amber-200/30"></i> +977 980 000 0000
        </a>
      </div>
    </div>
  </section>

{% endblock %}