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

  <!-- CONTACT 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> get in touch
      </div>
      <h1 class="text-4xl md:text-6xl font-light text-white tracking-tight">
        <span class="text-amber-200/90 gold-glow">connect</span> 
        <span class="block text-2xl md:text-3xl font-light text-gray-400 mt-2">with the 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">
        We'd love to hear from you. Whether it's a question, feedback, or a special request — reach out.
      </p>
    </div>
  </section>

  <!-- CONTACT GRID: FORM + INFO + MAP -->
  <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>send a message</span>
            </h2>
            <p class="text-gray-500 text-xs tracking-widest mb-6 border-b border-gold/10 pb-4">we reply within 24 hours</p>
            
            <form class="space-y-5">
              <!-- 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>

              <!-- subject -->
              <div>
                <label class="form-label block mb-1.5"><i class="far fa-comment mr-1 text-amber-200/30"></i> subject</label>
                <select class="form-input w-full rounded-full px-5 py-3.5 text-sm appearance-none bg-[#0e0b0a]">
                  <option value="general">General inquiry</option>
                  <option value="reservation">Reservation help</option>
                  <option value="events">Private events / buyouts</option>
                  <option value="feedback">Feedback & suggestions</option>
                  <option value="press">Press / media</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <!-- message -->
              <div>
                <label class="form-label block mb-1.5"><i class="fas fa-pen mr-1 text-amber-200/30"></i> message</label>
                <textarea rows="5" placeholder="Tell us what's on your mind …" 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">
                <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-paper-plane group-hover:translate-x-1 transition-transform"></i> 
                  <span>send message</span>
                </button>
                <p class="text-gray-600 text-[10px] tracking-widest mt-3"><i class="far fa-circle mr-1"></i> we’ll get back to you soon</p>
              </div>
            </form>
          </div>
        </div>

        <!-- SIDEBAR – info / hours / social (2/5) -->
        <div class="lg:col-span-2 space-y-6">
          <!-- location 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> visit us
            </h3>
            <div class="space-y-3 text-sm">
              <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>New York, NY 10013</span>
              </div>
              <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:hello@circle.nyc" class="hover:text-amber-200/70 transition-colors">hello@circle.nyc</a>
              </div>
            </div>
          </div>

          <!-- 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>

          <!-- social 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> follow the circle
            </h3>
            <div class="flex gap-4">
              <a href="#" class="w-10 h-10 rounded-full border border-amber-200/20 flex items-center justify-center text-amber-200/50 hover:bg-amber-200/10 hover:text-amber-200/80 transition-all">
                <i class="fab fa-instagram"></i>
              </a>
              <a href="#" class="w-10 h-10 rounded-full border border-amber-200/20 flex items-center justify-center text-amber-200/50 hover:bg-amber-200/10 hover:text-amber-200/80 transition-all">
                <i class="fab fa-facebook-f"></i>
              </a>
              <a href="#" class="w-10 h-10 rounded-full border border-amber-200/20 flex items-center justify-center text-amber-200/50 hover:bg-amber-200/10 hover:text-amber-200/80 transition-all">
                <i class="fab fa-x-twitter"></i>
              </a>
              <a href="#" class="w-10 h-10 rounded-full border border-amber-200/20 flex items-center justify-center text-amber-200/50 hover:bg-amber-200/10 hover:text-amber-200/80 transition-all">
                <i class="fab fa-tiktok"></i>
              </a>
            </div>
            <p class="text-gray-500 text-[10px] tracking-widest mt-3">#circle dining · #modernvibe</p>
          </div>
        </div>
      </div>

      <!-- MAP SECTION – full width below -->
      <div class="mt-12">
        <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">find us</span>
          <i class="fas fa-circle"></i>
        </div>
        <div class="map-placeholder rounded-3xl p-8 md:p-12 text-center border border-gold/10 relative overflow-hidden">
          <!-- decorative circles -->
          <div class="absolute -top-10 -right-10 w-40 h-40 rounded-full border border-amber-200/5"></div>
          <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full border border-amber-200/5"></div>
          <div class="relative z-10">
            <i class="fas fa-map-marked-alt text-5xl text-amber-200/30 mb-4"></i>
            <p class="text-gray-400 text-sm max-w-md mx-auto">42 Mercer Street · New York, NY 10013</p>
            <div class="flex flex-wrap justify-center gap-4 mt-4">
              <a href="https://maps.google.com/?q=42+Mercer+Street+New+York+NY+10013" target="_blank" rel="noopener" class="text-xs border border-amber-200/20 text-amber-200/60 px-5 py-2 rounded-full hover:bg-amber-200/10 transition-all inline-flex items-center gap-2">
                <i class="fas fa-directions"></i> get directions
              </a>
              <a href="tel:+9779800000000" class="text-xs border border-amber-200/20 text-amber-200/60 px-5 py-2 rounded-full hover:bg-amber-200/10 transition-all inline-flex items-center gap-2">
                <i class="fas fa-phone-alt"></i> call us
              </a>
            </div>
            <!-- mini map indicator -->
            <div class="mt-6 flex justify-center gap-2 text-amber-200/20 text-xs">
              <span class="w-2 h-2 rounded-full bg-amber-200/30"></span>
              <span class="w-2 h-2 rounded-full bg-amber-200/10"></span>
              <span class="w-2 h-2 rounded-full bg-amber-200/10"></span>
              <span class="w-2 h-2 rounded-full bg-amber-200/10"></span>
            </div>
          </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%}