{% extends 'base.html' %}
{% block title %}Book a Table | Circle{% endblock %}
{% block content %}

  <!-- HERO -->
  <section class="hero-bg pt-28 pb-14 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> secure your seat
      </div>
      <h1 class="text-4xl md:text-6xl font-light text-white tracking-tight">
        <span class="text-amber-200/90 gold-glow">book</span>
        <span class="block text-2xl md:text-3xl font-light text-gray-400 mt-2">your table at 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-xl mx-auto mt-5 text-sm md:text-base leading-relaxed">
        Intimate. Seasonal. Unforgettable. Fill in your details and we'll hold your circle.
      </p>
    </div>
  </section>

  <!-- MAIN CONTENT -->
  <section class="py-16 md:py-20 bg-[#0e0b0a]">
    <div class="max-w-6xl mx-auto px-6">
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-10">

        <!-- BOOKING FORM (3/5) -->
        <div class="lg:col-span-3">
          <div class="menu-card rounded-3xl p-6 md:p-8 border border-gold/10">

            <!-- success message -->
            {% if messages %}
              {% for message in messages %}
              <div class="mb-6 flex items-center gap-3 bg-amber-200/10 border border-amber-200/30 text-amber-200/90 px-5 py-4 rounded-2xl text-sm">
                <i class="fas fa-check-circle text-amber-300/70 text-lg"></i>
                <span>{{ message }}</span>
              </div>
              {% endfor %}
            {% endif %}

            <h2 class="text-2xl font-light text-white mb-1 flex items-center gap-3">
              <i class="fas fa-circle text-amber-200/30 text-xs"></i> reservation details
            </h2>
            <p class="text-gray-500 text-xs tracking-widest mb-6 border-b border-gold/10 pb-4">we confirm within 2 hours</p>

            <form method="POST" class="space-y-6">
              {% csrf_token %}

              <!-- name & email -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                  <label class="form-label block mb-1.5"><i class="far fa-user mr-1 text-amber-200/30"></i> full name</label>
                  <input type="text" name="name" required placeholder="e.g. Aarav Sharma" class="form-input w-full rounded-full px-5 py-3.5 text-sm">
                </div>
                <div>
                  <label class="form-label block mb-1.5"><i class="far fa-envelope mr-1 text-amber-200/30"></i> email</label>
                  <input type="email" name="email" required placeholder="you@example.com" class="form-input w-full rounded-full px-5 py-3.5 text-sm">
                </div>
              </div>

              <!-- phone & guests -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                  <label class="form-label block mb-1.5"><i class="fas fa-phone-alt mr-1 text-amber-200/30"></i> phone</label>
                  <input type="tel" name="phone" placeholder="+977 980 000 0000" class="form-input w-full rounded-full px-5 py-3.5 text-sm">
                </div>
                <div>
                  <label class="form-label block mb-1.5"><i class="fas fa-user-group mr-1 text-amber-200/30"></i> guests</label>
                  <select name="guests" class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none">
                    <option value="1">1 guest</option>
                    <option value="2" selected>2 guests</option>
                    <option value="3">3 guests</option>
                    <option value="4">4 guests</option>
                    <option value="5">5 guests</option>
                    <option value="6">6+ guests (please call)</option>
                  </select>
                </div>
              </div>

              <!-- date & time -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                  <label class="form-label block mb-1.5"><i class="far fa-calendar-alt mr-1 text-amber-200/30"></i> date</label>
                  <input type="date" name="date" required class="form-input w-full rounded-full px-5 py-3.5 text-sm">
                </div>
                <div>
                  <label class="form-label block mb-1.5"><i class="far fa-clock mr-1 text-amber-200/30"></i> time</label>
                  <select name="time" class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none">
                    <option>5:00 PM</option>
                    <option>5:30 PM</option>
                    <option>6:00 PM</option>
                    <option selected>6:30 PM</option>
                    <option>7:00 PM</option>
                    <option>7:30 PM</option>
                    <option>8:00 PM</option>
                    <option>8:30 PM</option>
                    <option>9:00 PM</option>
                    <option>9:30 PM</option>
                    <option>10:00 PM</option>
                  </select>
                </div>
              </div>

              <!-- occasion -->
              <div>
                <label class="form-label block mb-1.5"><i class="fas fa-star mr-1 text-amber-200/30"></i> occasion</label>
                <select name="occasion" class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none">
                  <option value="">None / regular dining</option>
                  <option>Birthday</option>
                  <option>Anniversary</option>
                  <option>Business dinner</option>
                  <option>Date night</option>
                  <option>Celebration</option>
                  <option>Other</option>
                </select>
              </div>

              <!-- seating preference -->
              <div>
                <span class="form-label block mb-2"><i class="fas fa-circle mr-1 text-amber-200/30"></i> seating preference</span>
                <div class="flex flex-wrap gap-4">
                  <label class="flex items-center gap-2 text-gray-300 text-sm cursor-pointer">
                    <input type="radio" name="seating" value="indoor" checked class="accent-amber-300 w-4 h-4"> indoor
                  </label>
                  <label class="flex items-center gap-2 text-gray-300 text-sm cursor-pointer">
                    <input type="radio" name="seating" value="outdoor" class="accent-amber-300 w-4 h-4"> outdoor
                  </label>
                  <label class="flex items-center gap-2 text-gray-300 text-sm cursor-pointer">
                    <input type="radio" name="seating" value="top-floor" class="accent-amber-300 w-4 h-4"> top floor
                  </label>
                </div>
              </div>

              <!-- dietary needs -->
              <div>
                <span class="form-label block mb-2"><i class="fas fa-leaf mr-1 text-amber-200/30"></i> dietary needs</span>
                <div class="flex flex-wrap gap-3">
                  <label class="flex items-center gap-2 text-gray-400 text-xs cursor-pointer border border-white/10 px-3 py-1.5 rounded-full hover:border-amber-200/30 transition-colors has-[:checked]:border-amber-200/40 has-[:checked]:text-amber-200/70">
                    <input type="checkbox" name="dietary" value="vegetarian" class="accent-amber-300 w-3 h-3"> vegetarian
                  </label>
                  <label class="flex items-center gap-2 text-gray-400 text-xs cursor-pointer border border-white/10 px-3 py-1.5 rounded-full hover:border-amber-200/30 transition-colors has-[:checked]:border-amber-200/40 has-[:checked]:text-amber-200/70">
                    <input type="checkbox" name="dietary" value="vegan" class="accent-amber-300 w-3 h-3"> vegan
                  </label>
                  <label class="flex items-center gap-2 text-gray-400 text-xs cursor-pointer border border-white/10 px-3 py-1.5 rounded-full hover:border-amber-200/30 transition-colors has-[:checked]:border-amber-200/40 has-[:checked]:text-amber-200/70">
                    <input type="checkbox" name="dietary" value="gluten-free" class="accent-amber-300 w-3 h-3"> gluten-free
                  </label>
                  <label class="flex items-center gap-2 text-gray-400 text-xs cursor-pointer border border-white/10 px-3 py-1.5 rounded-full hover:border-amber-200/30 transition-colors has-[:checked]:border-amber-200/40 has-[:checked]:text-amber-200/70">
                    <input type="checkbox" name="dietary" value="halal" class="accent-amber-300 w-3 h-3"> halal
                  </label>
                  <label class="flex items-center gap-2 text-gray-400 text-xs cursor-pointer border border-white/10 px-3 py-1.5 rounded-full hover:border-amber-200/30 transition-colors has-[:checked]:border-amber-200/40 has-[:checked]:text-amber-200/70">
                    <input type="checkbox" name="dietary" value="nut-allergy" class="accent-amber-300 w-3 h-3"> nut allergy
                  </label>
                </div>
              </div>

              <!-- special requests -->
              <div>
                <label class="form-label block mb-1.5"><i class="fas fa-pen mr-1 text-amber-200/30"></i> special requests</label>
                <textarea name="requests" rows="3" placeholder="Anything we should know — flowers, cake, seating arrangements …" class="form-input w-full rounded-2xl px-5 py-3.5 text-sm resize-none"></textarea>
              </div>

              <!-- submit -->
              <div class="pt-4 border-t border-gold/10 flex flex-col sm:flex-row items-start sm:items-center gap-4">
                <button type="submit" 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 active:scale-95 transition-all text-sm uppercase tracking-[0.15em] inline-flex items-center gap-3 group">
                  <i class="fas fa-check-circle group-hover:scale-110 transition-transform"></i> confirm booking
                </button>
                <p class="text-gray-600 text-[10px] tracking-widest"><i class="far fa-circle mr-1"></i> no card required · free cancellation 24h before</p>
              </div>
            </form>
          </div>
        </div>

        <!-- SIDEBAR (2/5) -->
        <div class="lg:col-span-2 space-y-6">

          <!-- hours -->
          <div class="menu-card rounded-3xl p-6 border border-gold/10">
            <h3 class="text-amber-200/60 text-xs tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
              <i class="fas fa-circle text-amber-200/30"></i> hours
            </h3>
            <div class="space-y-2 text-sm text-gray-300">
              <div class="flex justify-between border-b border-white/5 pb-2">
                <span class="text-gray-400">dinner</span><span>6:00 PM – 11:00 PM</span>
              </div>
              <div class="flex justify-between border-b border-white/5 pb-2">
                <span class="text-gray-400">bar</span><span>5:00 PM – 1:00 AM</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-400">closed</span><span class="text-amber-200/40">tuesdays</span>
              </div>
            </div>
            <p class="text-gray-600 text-[10px] tracking-widest mt-4"><i class="far fa-circle mr-1"></i> last seating at 10:30 PM</p>
          </div>

          <!-- contact -->
          <div class="menu-card rounded-3xl p-6 border border-gold/10">
            <h3 class="text-amber-200/60 text-xs tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
              <i class="fas fa-circle text-amber-200/30"></i> contact
            </h3>
            <div class="space-y-3 text-sm">
              <div class="flex items-center gap-3 text-gray-300">
                <i class="fas fa-phone-alt text-amber-200/30 w-5"></i>
                <a href="tel:+9779800000000" class="hover:text-amber-200/70 transition-colors">+977 980 000 0000</a>
              </div>
              <div class="flex items-center gap-3 text-gray-300">
                <i class="far fa-envelope text-amber-200/30 w-5"></i>
                <a href="mailto:reserve@circle.nyc" class="hover:text-amber-200/70 transition-colors">reserve@circle.nyc</a>
              </div>
              <div class="flex items-start gap-3 text-gray-300">
                <i class="fas fa-map-pin text-amber-200/30 w-5 mt-0.5"></i>
                <span>42 Mercer Street<br>Kathmandu, Nepal</span>
              </div>
            </div>
          </div>

          <!-- experience highlights -->
          <div class="menu-card rounded-3xl p-6 border border-gold/10 space-y-4">
            <h3 class="text-amber-200/60 text-xs tracking-[0.2em] uppercase flex items-center gap-2">
              <i class="fas fa-circle text-amber-200/30"></i> what to expect
            </h3>
            <div class="flex items-start gap-3 text-sm text-gray-300">
              <div class="w-8 h-8 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-leaf text-amber-200/50 text-xs"></i>
              </div>
              <div>
                <p class="text-white font-light">seasonal tasting menu</p>
                <p class="text-gray-500 text-xs mt-0.5">crafted fresh each day</p>
              </div>
            </div>
            <div class="flex items-start gap-3 text-sm text-gray-300">
              <div class="w-8 h-8 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-wine-glass-alt text-amber-200/50 text-xs"></i>
              </div>
              <div>
                <p class="text-white font-light">curated wine pairing</p>
                <p class="text-gray-500 text-xs mt-0.5">natural & biodynamic labels</p>
              </div>
            </div>
            <div class="flex items-start gap-3 text-sm text-gray-300">
              <div class="w-8 h-8 rounded-full bg-amber-200/10 border border-amber-200/20 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-fire text-amber-200/50 text-xs"></i>
              </div>
              <div>
                <p class="text-white font-light">open hearth cooking</p>
                <p class="text-gray-500 text-xs mt-0.5">live fire · wood smoked</p>
              </div>
            </div>
          </div>

          <!-- private events nudge -->
          <div class="menu-card rounded-3xl p-6 border border-gold/10 glow-card">
            <div class="flex items-center gap-2 text-amber-200/70 mb-2">
              <i class="fas fa-circle text-amber-200/30 text-xs"></i>
              <span class="text-xs tracking-[0.15em] uppercase">private events</span>
            </div>
            <p class="text-gray-400 text-sm leading-relaxed">Celebrating something special? Inquire about a full buyout or chef's tasting experience.</p>
            <a href="{% url 'contact' %}" class="inline-block mt-3 text-amber-200/60 border border-amber-200/20 px-5 py-2 rounded-full text-xs hover:bg-amber-200/10 transition-all">
              inquire now <i class="fas fa-arrow-right ml-1"></i>
            </a>
          </div>

          <p class="text-center text-gray-600 text-[10px] tracking-widest border-t border-gold/10 pt-4">
            <i class="fas fa-circle text-amber-200/20 mr-1"></i> walk-ins welcome · bar seating available
          </p>
        </div>

      </div>
    </div>
  </section>

{% endblock %}