{% extends 'base.html' %}
{% block title %}Reservations | Circle{% endblock %}
{% block content %}
  <!-- RESERVATIONS HERO -->
  <section class="hero-bg pt-28 pb-12 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 table
      </div>
      <h1 class="text-4xl md:text-6xl font-light text-white tracking-tight">
        <span class="text-amber-200/90 gold-glow">reserve</span> 
        <span class="block text-2xl md:text-3xl font-light text-gray-400 mt-2">intimate dining · circle experience</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">
        We look forward to welcoming you. Please fill in the details below and we’ll confirm your reservation within 2 hours.
      </p>
    </div>
  </section>

  <!-- RESERVATION FORM + INFO SIDEBAR (grid) -->
  <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">
        <!-- FORM – takes 3/5 on large screens -->
        <div class="lg:col-span-3">
          <div class="menu-card rounded-3xl p-6 md:p-8 backdrop-blur-sm border border-gold/10">
            <h2 class="text-2xl font-light text-white mb-2 flex items-center gap-3">
              <i class="fas fa-circle text-amber-200/30 text-xs"></i> 
              <span>reservation details</span>
            </h2>
            <p class="text-gray-500 text-xs tracking-widest mb-6 border-b border-gold/10 pb-4">fill in the circle</p>
            
            <form class="space-y-6">
              <!-- 2 cols: 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" placeholder="e.g. James Cooper" 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" 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" 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 class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none bg-[#0e0b0a]">
                    <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" value="2026-06-30" 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 class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none bg-[#0e0b0a]">
                    <option value="17:00">5:00 PM</option>
                    <option value="17:30">5:30 PM</option>
                    <option value="18:00">6:00 PM</option>
                    <option value="18:30" selected>6:30 PM</option>
                    <option value="19:00">7:00 PM</option>
                    <option value="19:30">7:30 PM</option>
                    <option value="20:00">8:00 PM</option>
                    <option value="20:30">8:30 PM</option>
                    <option value="21:00">9:00 PM</option>
                    <option value="21:30">9:30 PM</option>
                    <option value="22:00">10:00 PM</option>
                  </select>
                </div>
              </div>

              <!-- special occasion / notes -->
              <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 rows="3" placeholder="Dietary preferences, celebration, seating preference …" class="form-input w-full rounded-2xl px-5 py-3.5 text-sm resize-none"></textarea>
              </div>

              <!-- dining preference (radio) -->
              <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-5 text-sm">
                  <label class="flex items-center gap-2 text-gray-300">
                    <input type="radio" name="seating" value="indoor" checked class="w-4 h-4"> indoor
                  </label>
                  <label class="flex items-center gap-2 text-gray-300">
                    <input type="radio" name="seating" value="outdoor" class="w-4 h-4"> outdoor (weather permitting)
                  </label>
                  <label class="flex items-center gap-2 text-gray-300">
                    <input type="radio" name="seating" value="top-floor" class="w-4 h-4"> top floor
                  </label>
                </div>
              </div>

              <!-- submit -->
              <div class="pt-4 border-t border-gold/10">
                <button type="submit" class="w-full sm:w-auto 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 justify-center gap-3 group">
                  <i class="fas fa-check-circle group-hover:scale-105 transition-transform"></i> 
                  <span>confirm reservation</span>
                </button>
                <p class="text-gray-600 text-[10px] tracking-widest mt-3"><i class="far fa-circle mr-1"></i> we’ll reply within 2 hours</p>
              </div>
            </form>
          </div>
        </div>

        <!-- SIDEBAR – info / hours / contact (2/5) -->
        <div class="lg:col-span-2 space-y-6">
          <!-- hours card -->
          <div class="menu-card rounded-3xl p-6 backdrop-blur-sm 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>
            <div class="mt-4 text-[10px] text-gray-500 tracking-widest">
              <i class="far fa-circle mr-1"></i> last seating at 10:30 PM
            </div>
          </div>

          <!-- contact card -->
          <div class="menu-card rounded-3xl p-6 backdrop-blur-sm 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-center gap-3 text-gray-300">
                <i class="fas fa-map-pin text-amber-200/30 w-5"></i>
                <span>42 Mercer St, NYC</span>
              </div>
            </div>
          </div>

          <!-- private dining / events -->
          <div class="menu-card rounded-3xl p-6 backdrop-blur-sm border border-gold/10 glow-card">
            <div class="flex items-center gap-3 text-amber-200/70">
              <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 mt-2 leading-relaxed">Celebrate in our intimate circle. Inquire about buyouts and chef’s tasting menus.</p>
            <a href="#" 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>

          <!-- small note: walk-ins -->
          <div 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
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA / SECONDARY – consistency with other pages -->
  <section class="py-12 relative overflow-hidden border-t border-gold/10 bg-[#0e0b0a]">
    <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
      <div class="w-14 h-14 rounded-full border border-amber-200/20 mx-auto flex items-center justify-center mb-4 bg-black/40 backdrop-blur-sm">
        <i class="fas fa-circle text-amber-200/40 text-xl"></i>
      </div>
      <h2 class="text-2xl md:text-3xl font-light text-white">join the <span class="text-amber-200/90">circle</span></h2>
      <p class="text-gray-400 max-w-lg mx-auto mt-2 text-sm">Follow us for seasonal menus, events, and behind the scenes.</p>
      <div class="mt-5 flex flex-wrap justify-center gap-4">
        <a href="#" class="border border-white/10 text-gray-400 px-6 py-2.5 rounded-full hover:border-amber-200/30 hover:text-amber-200/70 transition-all text-xs uppercase tracking-[0.15em]">
          <i class="fab fa-instagram mr-2"></i> instagram
        </a>
        <a href="#" class="border border-white/10 text-gray-400 px-6 py-2.5 rounded-full hover:border-amber-200/30 hover:text-amber-200/70 transition-all text-xs uppercase tracking-[0.15em]">
          <i class="fab fa-facebook-f mr-2"></i> facebook
        </a>
      </div>
    </div>
  </section>

  {% endblock %}