@extends('frontend.app')

@section('frontend_app')
    <!----Page Banner-->
      <section>
          <div class="relative bg-cover bg-center h-48" style="background-image: url('{{ asset('assets/images/pages/bg_contact_us.webp') }}');">
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
            <div class="relative z-10 max-w-4xl mx-auto h-full flex flex-col justify-center items-center px-4">
              <h2 class="text-3xl font-semibold mb-4 text-center text-white">Contact Us</h2>
              <div class="text-white text-sm flex items-center space-x-2">
                <i class="fas fa-home text-white"></i>
                <a href="{{ url('/') }}" class="hover:underline">Home</a>
                <span class="text-gray-300">/</span>
                <span class="font-semibold">Contact Us</span>
              </div>
            </div>
          </div>
    </section>
    <!----form section and info-->

    <!-- Contact Section -->
    <section class="max-w-6xl mx-auto px-4 py-16 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
      <!-- LEFT: Office Information -->
      <div class="">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Office Information</h2>

        <div class="space-y-5 text-gray-700 text-base">
          <div class="flex items-start gap-3 ">
            <i class="fas fa-map-marker-alt text-primary mt-1 text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-2 py-1 rounded-md"></i>
            <div>
              <p>B-210, 2nd Floor, Elante Offices</p>
              <p>Industrial Area Phase - 1, Chandigarh</p>
              <p>Postal Code - 160002, India</p>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <i class="fab fa-whatsapp text-primary mt-1 text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-2 py-1 rounded-md"></i>
            <p>Whatsapp: <a href="https://wa.me/918558806719" class="hover:underline">918558806719</a></p>
          </div>

          <div class="flex items-start gap-3">
            <i class="fas fa-phone-alt text-primary mt-1 mt-1 text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-2 py-1 rounded-md"></i>
            <div>
              <p>1800-121-0134</p>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <i class="fas fa-envelope text-primary mt-1 text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-2 py-1 rounded-md"></i>
            <p><a href="mailto:care@realstate.com" class="hover:underline">care@realstate.com</a></p>
          </div>
        </div>
      </div>

      <!-- RIGHT: Contact Form -->
      <div class="bg-white p-6 rounded-xl shadow-md">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Get in Touch</h2>
        @if(session('success'))
              <div class="bg-green-100 text-green-700 p-3 rounded mb-4">
                  {{ session('success') }}
              </div>
        @endif
        <form class="space-y-5" action="{{ route('contact.store') }}" method="POST">
          @csrf
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
            <input type="text" id="name" name="name" placeholder="John Doe" class="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" required>
          </div>

          <div>
            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
            <input type="email" id="email" name="email" placeholder="john@example.com" class="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" required>
          </div>

          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
            <input type="tel" id="phone" name="number" placeholder="+91 9876543210" class="mt-1 w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" required>
          </div>

          <button type="submit" class="text-sm md:text-base inline-flex items-center justify-center gap-x-2 bg-[var(--primary-color)] text-white px-6 py-3 rounded-md focus:outline-none hover:scale-95 transition-all duration-200">
            Submit
          </button>
        </form>
      </div>
    </section>

    <!-- Google Map Section -->
    <section class="max-w-6xl mx-auto pt-3 py-16">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">Our Location</h2>

      <div class="w-full h-96 rounded-xl overflow-hidden shadow-md">
        <iframe 
          class="w-full h-full border-0"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3430.016335812614!2d76.81251597511427!3d30.70464807459767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fedccf0b2e3ed%3A0x87ff2df15630aa4!2sElante%20Offices%2C%20Industrial%20Area%20Phase%20I%2C%20Chandigarh%2C%20160002!5e0!3m2!1sen!2sin!4v1690950202569!5m2!1sen!2sin" 
          allowfullscreen="" 
          loading="lazy" 
          referrerpolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>
    </section>

@endsection