{% extends 'base.html' %}
{% block title %}Home - Circle{% endblock %}

{% block content %}

  <!-- HERO section – modern circle motif, dark & warm -->
  <section class="hero-bg min-h-screen flex items-center relative overflow-hidden pt-20">
    <!-- abstract circle decorations -->
    <div class="absolute -top-20 -right-20 w-96 h-96 rounded-full border border-amber-200/10 opacity-30"></div>
    <div class="absolute bottom-10 left-10 w-64 h-64 rounded-full border border-amber-200/10 opacity-20"></div>
    <div class="absolute top-1/3 left-1/4 w-2 h-2 bg-amber-200/40 rounded-full blur-sm"></div>
    <div class="absolute bottom-1/4 right-1/3 w-3 h-3 bg-amber-300/30 rounded-full blur-md"></div>

    <div class="max-w-7xl mx-auto px-6 py-20 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
      <!-- left text -->
      <div class="space-y-6">
        <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">
          <i class="fas fa-circle mr-2 text-amber-300/40"></i> est. 2026
        </div>
        <h1 class="text-5xl md:text-7xl font-light leading-[1.1] tracking-tight text-white">
          <span class="block">where</span>
          <span class="block text-amber-200/90 gold-glow">flavors</span>
          <span class="block">meet <span class="text-amber-200/60">·</span> circle</span>
        </h1>
        <p class="text-gray-400 max-w-md text-lg leading-relaxed border-l-2 border-amber-200/30 pl-5">
          Modern gastronomy in a warm, intimate setting. Every plate tells a story.
        </p>
        <div class="flex flex-wrap gap-4 pt-4">
          <a href="{% url 'menu' %}" class="group inline-flex items-center gap-2 bg-amber-200/10 backdrop-blur-sm 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.12em]">
            <span>discover menu</span>
            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
          </a>
          <a href="{% url 'reservations' %}" class="inline-flex items-center gap-2 text-gray-400 border border-white/5 px-8 py-3.5 rounded-full hover:border-amber-200/30 hover:text-amber-200/80 transition-all text-sm uppercase tracking-[0.12em]">
            <i class="far fa-clock"></i> <span>reserve</span>
          </a>
        </div>
      </div>

      <!-- right visual – modern circular card with image placeholder & circle motif -->
      <div class="relative flex justify-center lg:justify-end">
        <div class="w-80 h-80 md:w-96 md:h-96 rounded-full circle-ring bg-[#1e1714] flex items-center justify-center overflow-hidden border-2 border-amber-200/20 relative">
          <!-- abstract food representation (modern geometric) -->
          <div class="absolute inset-0 bg-gradient-to-br from-amber-900/20 to-transparent"></div>
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-48 h-48 rounded-full border border-amber-200/20 flex items-center justify-center flex-col bg-black/30 backdrop-blur-sm">
              <i class="fas fa-utensils text-5xl text-amber-200/40 mb-2"></i>
              <span class="text-amber-200/40 text-xs tracking-[0.2em]">signature</span>
              <span class="text-amber-200/60 text-sm font-light">degustation</span>
            </div>
          </div>
          <!-- floating tiny circles -->
          <div class="absolute top-6 right-8 w-8 h-8 rounded-full bg-amber-200/5 border border-amber-200/20"></div>
          <div class="absolute bottom-10 left-6 w-12 h-12 rounded-full bg-amber-200/5 border border-amber-200/10"></div>
          <div class="absolute top-1/2 -left-4 w-16 h-16 rounded-full border border-amber-200/10 bg-black/20 backdrop-blur-sm flex items-center justify-center text-amber-200/30 text-xs">
            <i class="fas fa-circle text-amber-200/20"></i>
          </div>
        </div>
        <!-- floating badge -->
        <div class="absolute -bottom-6 -right-2 bg-black/70 backdrop-blur-md border border-amber-200/20 px-5 py-3 rounded-full flex items-center gap-3 shadow-xl">
          <span class="w-2 h-2 bg-amber-300 rounded-full animate-pulse"></span>
          <span class="text-xs tracking-widest text-amber-200/80">#circle dining</span>
        </div>
      </div>
    </div>
  </section>

  <!-- AMBIENT / MODERN VIBE – feature grid with circle theme -->
  <section class="py-24 bg-[#0e0b0a] relative">
    <div class="max-w-7xl mx-auto px-6">
      <div class="text-center mb-16">
        <span class="text-amber-200/50 text-xs tracking-[0.3em] uppercase"><i class="fas fa-circle mr-2"></i>experience</span>
        <h2 class="text-3xl md:text-5xl font-light text-white mt-3">modern <span class="text-amber-200/80">circle</span> vibe</h2>
        <div class="w-12 h-0.5 bg-amber-200/30 mx-auto mt-5"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- card 1 -->
        <div class="glow-card menu-card rounded-3xl p-8 text-center backdrop-blur-sm">
          <div class="w-16 h-16 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center mx-auto mb-5">
            <i class="fas fa-wine-glass-alt text-amber-200/60 text-2xl"></i>
          </div>
          <h3 class="text-xl font-light text-white mb-2">curated wine</h3>
          <p class="text-gray-400 text-sm leading-relaxed">Natural & biodynamic selections that echo the circle of seasons.</p>
          <div class="mt-5 text-amber-200/40 text-xs tracking-widest">— 12 labels —</div>
        </div>

        <!-- card 2 -->
        <div class="glow-card menu-card rounded-3xl p-8 text-center backdrop-blur-sm">
          <div class="w-16 h-16 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center mx-auto mb-5">
            <i class="fas fa-leaf text-amber-200/60 text-2xl"></i>
          </div>
          <h3 class="text-xl font-light text-white mb-2">farm to circle</h3>
          <p class="text-gray-400 text-sm leading-relaxed">Seasonal, local ingredients crafted with precision and soul.</p>
          <div class="mt-5 text-amber-200/40 text-xs tracking-widest">— zero waste —</div>
        </div>

        <!-- card 3 -->
        <div class="glow-card menu-card rounded-3xl p-8 text-center backdrop-blur-sm">
          <div class="w-16 h-16 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center mx-auto mb-5">
            <i class="fas fa-fire text-amber-200/60 text-2xl"></i>
          </div>
          <h3 class="text-xl font-light text-white mb-2">open hearth</h3>
          <p class="text-gray-400 text-sm leading-relaxed">Live fire cooking adds depth, smoke, and a touch of theatre.</p>
          <div class="mt-5 text-amber-200/40 text-xs tracking-widest">— wood fired —</div>
        </div>
      </div>
    </div>
  </section>

  <!-- MENU PREVIEW – modern minimal with circle highlights -->
  <section class="py-24 bg-[#12100e] border-t border-gold/10">
    <div class="max-w-6xl mx-auto px-6">
      <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
        <div>
          <span class="text-amber-200/50 text-xs tracking-[0.2em] uppercase"><i class="fas fa-circle mr-2"></i>menu</span>
          <h2 class="text-3xl md:text-4xl font-light text-white mt-2">signature <span class="text-amber-200/80">circles</span></h2>
        </div>
        <a href="{% url 'menu' %}" class="text-amber-200/60 border border-amber-200/20 px-6 py-2 rounded-full text-sm hover:bg-amber-200/10 transition-all inline-flex items-center gap-2 mt-4 md:mt-0">
          <span>full menu</span> <i class="fas fa-arrow-right text-xs"></i>
        </a>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- dish 1 -->
        <div class="flex items-center gap-5 p-5 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm">
          <div class="w-14 h-14 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 text-xl flex-shrink-0">
            <i class="fas fa-circle"></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">42</span>
        </div>
        <!-- dish 2 -->
        <div class="flex items-center gap-5 p-5 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm">
          <div class="w-14 h-14 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 text-xl flex-shrink-0">
            <i class="fas fa-circle"></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">58</span>
        </div>
        <!-- dish 3 -->
        <div class="flex items-center gap-5 p-5 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm">
          <div class="w-14 h-14 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 text-xl flex-shrink-0">
            <i class="fas fa-circle"></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">28</span>
        </div>
        <!-- dish 4 -->
        <div class="flex items-center gap-5 p-5 rounded-2xl border border-white/5 hover:border-amber-200/20 transition-all bg-black/20 backdrop-blur-sm">
          <div class="w-14 h-14 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center text-amber-200/40 text-xl flex-shrink-0">
            <i class="fas fa-circle"></i>
          </div>
          <div>
            <h4 class="text-white font-light text-lg">dark chocolate fondant</h4>
            <p class="text-gray-400 text-sm">sea salt · olive oil · vanilla ice cream</p>
          </div>
          <span class="ml-auto text-amber-200/70 text-sm">18</span>
        </div>
      </div>
    </div>
  </section>

  <!-- RESERVATION / CTA – circular modern -->
  <section class="py-20 relative overflow-hidden border-t border-gold/10">
    <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-20 h-20 rounded-full border border-amber-200/20 mx-auto flex items-center justify-center mb-6 bg-black/40 backdrop-blur-sm">
        <i class="fas fa-circle text-amber-200/40 text-3xl"></i>
      </div>
      <h2 class="text-4xl md:text-5xl font-light text-white">reserve your <span class="text-amber-200/90">circle</span></h2>
      <p class="text-gray-400 max-w-lg mx-auto mt-4 text-lg">An intimate dining experience. Tables are limited — secure yours.</p>
      <div class="mt-10 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-10 py-4 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-10 py-4 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 class="mt-8 flex justify-center gap-6 text-amber-200/20 text-xs tracking-[0.2em]">
        <span><i class="fas fa-circle mr-1"></i> dinner 6–11pm</span>
        <span><i class="fas fa-circle mr-1"></i> bar 5pm–1am</span>
      </div>
    </div>
  </section>
  {% endblock %}