<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<!-- Banner -->
<section class="page-banner">
  <div class="max-w-[1200px] mx-auto px-6">
    <h1>Contact Our Team</h1>
    <p>Let's Plan Your Auspicious Brahmin Celebration Together</p>
  </div>
</section>

<!-- Grid Layout -->
<section class="py-24 bg-cream">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_1.3fr] gap-16 items-start">
      
      <!-- Left Column: Info Card -->
      <div class="flex flex-col gap-8">
        <div>
          <h2 class="font-title text-[2.2rem] text-charcoal mb-3">Get In Touch</h2>
          <p class="text-[1.05rem] text-charcoal-light font-light leading-relaxed mb-2.5">
            Based in Palakkad, Kerala, <strong>On Call</strong> delivers premium vegetarian catering services across South India and beyond. Reach out to us to plan your event or book a consultation.
          </p>
          <p class="text-[0.85rem] text-charcoal-light font-light leading-relaxed">
            FSSAI License No.: <span class="font-medium text-charcoal">11318009000303</span> &nbsp;|&nbsp;
            GSTIN: <span class="font-medium text-charcoal">32ADGPG1075N1ZM</span>
          </p>
        </div>

        <!-- 2-col grid on mobile, stacked on desktop sidebar -->
        <div class="grid grid-cols-2 lg:grid-cols-1 gap-2.5 lg:gap-5">

          <!-- Detail: Office -->
          <div class="bg-gold-light border border-gold/15 rounded-md p-2.5 lg:p-6 flex flex-col lg:flex-row gap-2 lg:gap-4 items-start">
            <div class="text-saffron bg-white p-1.5 lg:p-2.5 rounded-full shadow-sm flex items-center justify-center flex-shrink-0">
              <i data-lucide="map-pin" class="w-3.5 h-3.5 lg:w-[22px] lg:h-[22px]"></i>
            </div>
            <div>
              <h3 class="text-[0.75rem] lg:text-[1.05rem] font-semibold text-charcoal mb-0.5 lg:mb-1">Registered Office</h3>
              <p class="text-[0.68rem] lg:text-[0.95rem] text-charcoal-light font-light leading-snug lg:leading-relaxed">
                "Bharathwa", 7/784-1,<br />L.N. Puram,<br />
                Palakkad &ndash; 678 005, Kerala
              </p>
            </div>
          </div>

          <!-- Detail: Phone -->
          <div class="bg-gold-light border border-gold/15 rounded-md p-2.5 lg:p-6 flex flex-col lg:flex-row gap-2 lg:gap-4 items-start">
            <div class="text-saffron bg-white p-1.5 lg:p-2.5 rounded-full shadow-sm flex items-center justify-center flex-shrink-0">
              <i data-lucide="phone" class="w-3.5 h-3.5 lg:w-[22px] lg:h-[22px]"></i>
            </div>
            <div>
              <h3 class="text-[0.75rem] lg:text-[1.05rem] font-semibold text-charcoal mb-0.5 lg:mb-1">Call / WhatsApp</h3>
              <p class="text-[0.68rem] lg:text-[0.95rem] text-charcoal-light font-light leading-snug lg:leading-relaxed">
                <a href="tel:+919847094284" class="hover:text-saffron transition-colors">+91 98470 94284</a><br />
                <a href="tel:+919846972884" class="hover:text-saffron transition-colors">+91 98469 72884</a><br />
                <a href="tel:+919746922284" class="hover:text-saffron transition-colors">+91 97469 22284</a>
              </p>
            </div>
          </div>

          <!-- Detail: Email -->
          <div class="bg-gold-light border border-gold/15 rounded-md p-2.5 lg:p-6 flex flex-col lg:flex-row gap-2 lg:gap-4 items-start">
            <div class="text-saffron bg-white p-1.5 lg:p-2.5 rounded-full shadow-sm flex items-center justify-center flex-shrink-0">
              <i data-lucide="mail" class="w-3.5 h-3.5 lg:w-[22px] lg:h-[22px]"></i>
            </div>
            <div>
              <h3 class="text-[0.75rem] lg:text-[1.05rem] font-semibold text-charcoal mb-0.5 lg:mb-1">Email Inquiries</h3>
              <p class="text-[0.68rem] lg:text-[0.95rem] text-charcoal-light font-light leading-snug lg:leading-relaxed">
                <a href="mailto:geekayoncall@gmail.com" class="hover:text-saffron transition-colors break-all">geekayoncall@gmail.com</a><br />
                <a href="https://www.geekayoncall.com" target="_blank" class="hover:text-saffron transition-colors">geekayoncall.com</a>
              </p>
            </div>
          </div>

          <!-- Detail: Hours -->
          <div class="bg-gold-light border border-gold/15 rounded-md p-2.5 lg:p-6 flex flex-col lg:flex-row gap-2 lg:gap-4 items-start">
            <div class="text-saffron bg-white p-1.5 lg:p-2.5 rounded-full shadow-sm flex items-center justify-center flex-shrink-0">
              <i data-lucide="clock" class="w-3.5 h-3.5 lg:w-[22px] lg:h-[22px]"></i>
            </div>
            <div>
              <h3 class="text-[0.75rem] lg:text-[1.05rem] font-semibold text-charcoal mb-0.5 lg:mb-1">Office Hours</h3>
              <p class="text-[0.68rem] lg:text-[0.95rem] text-charcoal-light font-light leading-snug lg:leading-relaxed">
                Mon – Sun:<br />8:00 AM – 9:00 PM IST
              </p>
            </div>
          </div>

        </div>


      </div>

      <!-- Right Column: Inquiry Form Card -->
      <div>
        <div class="bg-white border border-gold/15 rounded-md p-4 lg:p-10 shadow-lg" id="form-card-container">
          <div id="inquiry-form-view">
            <h2 class="font-title text-[1.35rem] lg:text-[1.8rem] text-charcoal mb-1 lg:mb-2">Send Booking Inquiry</h2>
            <p class="text-[0.78rem] lg:text-[0.95rem] text-charcoal-light font-light mb-4 lg:mb-8">
              Fill in the form below and our lead coordinator will contact you within 24 hours.
            </p>

            <form id="contact-form" class="flex flex-col gap-3 lg:gap-[22px]">
              <div class="grid grid-cols-2 lg:grid-cols-2 gap-3 lg:gap-5">
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Full Name</label>
                  <input 
                    type="text" 
                    name="name" 
                    required 
                    placeholder="Shri / Smt" 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  />
                </div>
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Phone Number</label>
                  <input 
                    type="tel" 
                    name="phone" 
                    required 
                    placeholder="10 digit no." 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  />
                </div>
              </div>

              <div class="grid grid-cols-2 lg:grid-cols-2 gap-3 lg:gap-5">
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Email Address</label>
                  <input 
                    type="email" 
                    name="email" 
                    required 
                    placeholder="name@example.com" 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  />
                </div>
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Event Date</label>
                  <input 
                    type="date" 
                    name="eventDate" 
                    required 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  />
                </div>
              </div>

              <div class="grid grid-cols-2 lg:grid-cols-2 gap-3 lg:gap-5">
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Event Type</label>
                  <select 
                    name="eventType" 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron bg-white rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  >
                    <option value="Wedding">Wedding (Vivaha)</option>
                    <option value="Upanayanam">Upanayanam</option>
                    <option value="Catering">Sattvik Catering</option>
                    <option value="Pooja / Homam">Pooja &amp; Homam</option>
                    <option value="Seemantham">Seemantham</option>
                    <option value="Others">Others</option>
                  </select>
                </div>
                <div>
                  <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Guests</label>
                  <select 
                    name="guests" 
                    class="w-full px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron bg-white rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200"
                  >
                    <option value="50-100">50 – 100</option>
                    <option value="150" selected>150 (Standard)</option>
                    <option value="200-300">200 – 300</option>
                    <option value="300-500">300 – 500</option>
                    <option value="500-1000">500 – 1000</option>
                    <option value="1000+">1000+</option>
                  </select>
                </div>
              </div>

              <div>
                <label class="block text-[0.68rem] lg:text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 lg:mb-1.5 tracking-wider">Special Requirements / Traditions</label>
                <textarea 
                  name="message" 
                  placeholder="Gotra, traditions, menu preferences..." 
                  class="w-full min-h-[80px] lg:min-h-[120px] px-2.5 py-2 lg:px-4 lg:py-3 text-[0.8rem] lg:text-base border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-3 focus:ring-saffron-light transition-all duration-200 resize-y"
                ></textarea>
              </div>

              <button type="submit" class="w-full lg:w-auto inline-flex items-center justify-center gap-1 lg:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 lg:px-7 lg:py-3.5 rounded-full font-medium text-[0.62rem] lg:text-[0.95rem] tracking-[0.05em] uppercase shadow-[0_4px_14px_rgba(227,30,36,0.3)] hover:-translate-y-0.5 mt-1 lg:mt-2 transition-all duration-400">
                <i data-lucide="send" class="w-3.5 h-3.5 lg:w-4 lg:h-4"></i>
                Submit Inquiry
              </button>
            </form>
          </div>

          <!-- Success Card -->
          <div id="success-view" class="hidden text-center py-10 flex flex-col items-center justify-center gap-4">
            <i data-lucide="check-circle" class="w-16 h-16 text-[#2e7d32] animate-float mb-3"></i>
            <h2 class="font-title text-[2.2rem] text-[#2e7d32]">Inquiry Sent!</h2>
            <p class="text-[1.1rem] text-charcoal-light font-light leading-relaxed max-w-[450px] mx-auto">
              Thank you, <strong id="success-name">Name</strong>. Your inquiry for a <strong id="success-event">EventType</strong> ceremony on <strong id="success-date">EventDate</strong> has been received successfully. Our lead event coordinator will contact you on <strong id="success-phone">Phone</strong> to finalize the setup.
            </p>
            <button id="reset-inquiry-btn" class="inline-flex items-center justify-center gap-1 lg:gap-2 bg-transparent text-gold-dark hover:bg-gold-light hover:text-gold-dark border border-gold px-2.5 py-2 lg:px-7 lg:py-3 rounded-full font-medium text-[0.62rem] lg:text-[0.95rem] tracking-[0.05em] uppercase hover:-translate-y-0.5 mt-5 transition-all duration-400">
              Send Another Inquiry
            </button>
          </div>
        </div>
      </div>


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

<!-- Google Map Section -->
<section class="bg-white pb-16">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="rounded-md overflow-hidden shadow-lg border border-gold/15">
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.2205593172807!2d76.6594776!3d10.794412399999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba86e13c30adb07%3A0xae2c10a57e066b8a!2sGeekay%20On%20Call!5e0!3m2!1sen!2sin!4v1782297957180!5m2!1sen!2sin"
        width="100%" 
        height="420" 
        style="border:0; display:block;" 
        allowfullscreen="" 
        loading="lazy" 
        referrerpolicy="strict-origin-when-cross-origin"
        title="Geekay On Call Location - Palakkad"
      ></iframe>
    </div>
    <p class="text-center text-[0.85rem] text-charcoal-light mt-3">
      <i data-lucide="map-pin" class="inline w-3.5 h-3.5 text-saffron mr-1"></i>
      Geekay On Call &mdash; "Bharathwa", 7/784-1, L.N. Puram, Palakkad &ndash; 678 005
    </p>
  </div>
</section>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
  // Contact form prefill and submit script
  document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const serviceParam = urlParams.get('service');
    
    if (serviceParam) {
      const serviceMap = {
        wedding: 'Wedding',
        upanayanam: 'Upanayanam',
        catering: 'Catering',
        pooja: 'Pooja / Homam'
      };
      const eventSelect = document.querySelector('select[name="eventType"]');
      if (eventSelect && serviceMap[serviceParam]) {
        eventSelect.value = serviceMap[serviceParam];
      }
    }

    // Intercept submit
    const form = document.getElementById('contact-form');
    const formView = document.getElementById('inquiry-form-view');
    const successView = document.getElementById('success-view');

    const successName = document.getElementById('success-name');
    const successEvent = document.getElementById('success-event');
    const successDate = document.getElementById('success-date');
    const successPhone = document.getElementById('success-phone');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      
      const submitBtn = form.querySelector('button[type="submit"]');
      const originalBtnText = submitBtn.innerHTML;
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Submitting...';
      lucide.createIcons();

      const data = new FormData(form);
      
      fetch('<?= base_url('contact/submit') ?>', {
        method: 'POST',
        body: data
      })
      .then(response => response.json())
      .then(res => {
        if (res.success) {
          successName.textContent = data.get('name');
          successEvent.textContent = data.get('eventType');
          successDate.textContent = data.get('eventDate');
          successPhone.textContent = data.get('phone');

          formView.classList.add('hidden');
          successView.classList.remove('hidden');
          lucide.createIcons();
        } else {
          alert(res.message || 'Failed to submit inquiry.');
          submitBtn.disabled = false;
          submitBtn.innerHTML = originalBtnText;
          lucide.createIcons();
        }
      })
      .catch(err => {
        console.error(err);
        alert('An error occurred. Please try again.');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalBtnText;
        lucide.createIcons();
      });
    });

    // Reset button
    const resetBtn = document.getElementById('reset-inquiry-btn');
    resetBtn.addEventListener('click', () => {
      form.reset();
      successView.classList.add('hidden');
      formView.classList.remove('hidden');
    });
  });
</script>
<?= $this->endSection() ?>
