<section class="py-20 bg-base-200">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl font-bold text-center mb-12">Contact Us</h2>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-7xl mx-auto">
      <!-- Map and Address -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-0">
          <div class="w-full h-[400px] bg-base-300">
            <!-- Replace this div with actual Google Maps iframe -->
            <iframe 
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3476.9604246500566!2d47.97641612532675!3d29.37651797706745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fcf84de548c12d9%3A0x7c81a7bc151d943e!2sKuwait%20City%2C%20Kuwait!5e0!3m2!1sen!2s!4v1709764013099!5m2!1sen!2s"
              width="100%" 
              height="400" 
              style="border:0;" 
              allowFullScreen={true}
              loading="lazy" 
              referrerPolicy="no-referrer-when-downgrade"
              title="Standard Marine GCC Location"
            ></iframe>
          </div>
          <div class="p-6 text-center">
            <h3 class="text-xl font-semibold mb-4">Our Location</h3>
            <address class="not-italic">
              <p>123 Marina Boulevard</p>
              <p>Kuwait City</p>
              <p>Kuwait</p>
            </address>
          </div>
        </div>
      </div>

      <!-- Contact Form -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h3 class="card-title text-2xl mb-6">Send us a Message</h3>
          <form>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div class="form-control">
                <label class="label">
                </label>
                <input type="text" placeholder="Your Name" class="input input-bordered" required />
              </div>
              
              <div class="form-control">
                <label class="label">
                </label>
                <input type="email" placeholder="your.email@example.com" class="input input-bordered" required />
              </div>
            </div>
            
            <div class="form-control mb-4 w-full">
              <label class="label">
              </label>
              <textarea class="textarea textarea-bordered h-48 w-full" placeholder="Your message here..." required></textarea>
            </div>
            
            <div class="form-control">
              <button class="btn btn-primary">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section> 