{% extends 'base.html' %}
{% load static %}
{% block title %}Contact Us - Lake Palace Resort{% endblock %}
{% block content %}

<!-- Contact Us Heading -->
<section class="pt-32 pb-16 bg-white">
  <div class="container mx-auto text-center px-4">
    <h1 class="text-4xl font-bold mb-4 text-gray-800">Contact Us</h1>
    <p class="text-gray-600">We’d Love to Hear From You</p>
  </div>
</section>

<!-- Contact Form -->
<!-- Contact Section -->
<section class="pt-32 pb-20 bg-[#FFBDC5]">
  <div class="container mx-auto px-6 md:px-12">
    <div class="grid md:grid-cols-2 gap-12 items-start">

      <!-- Left: Contact Information -->
      <div class="bg-white rounded-xl shadow-lg p-8">
        <h2 class="text-3xl font-bold text-[#004C48] mb-6">Contact Information</h2>

        <ul class="space-y-5 text-gray-700">
          <li class="flex items-center gap-4">
            <span>Pallichira, Kumarakom P.O,Kottayam, Kerala</span>
          </li>
          <li class="flex items-center gap-4">
            <span>+91 98953 66741</span>
          </li>
          <li class="flex items-center gap-4">
            <a href="mailto:lakepalaceresorts@gmail.com" class="text-[#004C48] hover:underline">lakepalaceresorts@gmail.com</a>
          </li>
        </ul>
          <div class="mt-8">
  <h3 class="text-2xl font-semibold text-[#004C48] mb-3">Follow Us On:</h3>

  <div class="flex justify-start gap-4 text-2xl">
    <!-- Facebook -->
    <a href="https://www.facebook.com/Lakepalacefamilyresorts/" target="_blank" class="text-blue-600 hover:text-blue-800">
      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M22.675 0h-21.35C.597 0 0 .597 0 1.325v21.351C0 23.403.597 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.658-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.31h3.587l-.467 3.622h-3.12V24h6.116C23.403 24 24 23.403 24 22.676V1.325C24 .597 23.403 0 22.675 0z"/>
      </svg>
    </a>

    <!-- Instagram -->
    <a href="https://www.instagram.com/lakepalaceresortskumarakom/" target="_blank" class="text-pink-500 hover:text-pink-700">
      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 1.987.246 2.45.414.584.21 1.004.464 1.443.902.439.439.693.859.902 1.443.168.463.358 1.244.414 2.45.058 1.266.07 1.645.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.246 1.987-.414 2.45-.21.584-.464 1.004-.902 1.443-.439.439-.859.693-1.443.902-.463.168-1.244.358-2.45.414-1.266.058-1.645.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-1.987-.246-2.45-.414-.584-.21-1.004-.464-1.443-.902-.439-.439-.693-.859-.902-1.443-.168-.463-.358-1.244-.414-2.45C2.175 15.747 2.163 15.368 2.163 12s.012-3.584.07-4.85c.056-1.206.246-1.987.414-2.45.21-.584.464-1.004.902-1.443.439-.439.859-.693 1.443-.902.463-.168 1.244-.358 2.45-.414C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.773.131 4.675.308 3.73.632c-.95.324-1.756.76-2.568 1.573C.33 2.936-.106 3.742-.43 4.69c-.324.945-.501 2.043-.56 3.322C-.013 8.332 0 8.741 0 12s-.013 3.668.072 4.948c.059 1.279.236 2.377.56 3.322.324.948.76 1.754 1.573 2.568.814.814 1.62 1.25 2.568 1.573.945.324 2.043.501 3.322.56 1.28.059 1.689.072 4.948.072s3.668-.013 4.948-.072c1.279-.059 2.377-.236 3.322-.56.948-.324 1.754-.76 2.568-1.573.814-.814 1.25-1.62 1.573-2.568.324-.945.501-2.043.56-3.322.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.279-.236-2.377-.56-3.322-.324-.948-.76-1.754-1.573-2.568-.814-.814-1.62-1.25-2.568-1.573-.945-.324-2.043-.501-3.322-.56C15.668.013 15.259 0 12 0z"/>
        <circle cx="12" cy="12" r="3.5"/>
      </svg>
    </a>

    <!-- WhatsApp -->
    <a href="https://wa.me/919895366741" target="_blank" class="text-green-500 hover:text-green-700">
      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path d="M16 .4C7.2.4.1 7.5.1 16.3c0 2.8.7 5.6 2.1 8L0 32l8.1-2.1c2.3 1.2 4.9 1.9 7.8 1.9 8.8 0 15.9-7.1 15.9-15.9S24.8.4 16 .4zm0 28.8c-2.5 0-4.9-.7-7-2l-.5-.3-4.8 1.3 1.3-4.7-.3-.5c-1.3-2.1-2-4.5-2-7 0-7.4 6-13.4 13.4-13.4 3.6 0 6.9 1.4 9.4 3.9s3.9 5.9 3.9 9.4c0 7.4-6 13.4-13.4 13.4zm7.4-9.9c-.4-.2-2.3-1.1-2.6-1.2s-.6-.2-.8.2c-.2.4-.9 1.2-1.1 1.4-.2.2-.4.3-.8.1s-1.6-.6-3-1.9c-1.1-1-1.9-2.3-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.5-.6.2-.2.3-.4.4-.6.1-.2 0-.5 0-.6s-.8-1.9-1.1-2.6c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4s-1.2 1.2-1.2 2.8 1.3 3.2 1.4 3.4c.2.2 2.6 4 6.3 5.6.9.4 1.6.6 2.1.8.9.3 1.7.3 2.3.2.7-.1 2.3-1 2.6-2 .3-1 .3-1.8.2-2-.2-.1-.5-.2-.9-.4z"/>
      </svg>
    </a>
  </div>
</div>

      </div>

      <!-- Right: Contact Form -->
      <div class="bg-white rounded-xl shadow-lg p-8">
        <h3 class="text-2xl font-bold text-[#004C48] mb-6">Write to Us</h3>

        <form action="mailto:lakepalaceresorts@gmail.com" method="POST" enctype="text/plain" class="space-y-4">
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Full Name</label>
            <div class="relative">
              <input type="text" name="name" placeholder="Your Name"
                class="w-full border rounded-lg p-3 pl-10 focus:ring-[#004C48] focus:border-[#004C48]" required>
            </div>
          </div>

          <div class="grid sm:grid-cols-2 gap-4">
            <div class="relative">
              <input type="email" name="email" placeholder="Email"
                class="w-full border rounded-lg p-3 pl-10 focus:ring-[#004C48] focus:border-[#004C48]" required>
            </div>
            <div class="relative">
              <input type="text" name="phone" placeholder="Phone"
                class="w-full border rounded-lg p-3 pl-10 focus:ring-[#004C48] focus:border-[#004C48]" required>
            </div>
          </div>

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Message</label>
            <div class="relative">
              <textarea name="message" rows="5" placeholder="Hi ..."
                class="w-full border rounded-lg p-3 pl-10 focus:ring-[#004C48] focus:border-[#004C48]" required></textarea>
            </div>
          </div>

          <button type="submit"
            class="w-full bg-[#670626] text-white py-3 rounded-lg font-semibold hover:bg-[#004C48] transition">
            Send Message <i class="lnr lnr-arrow-right ml-2"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- Map Section -->
<section class="bg-white py-20">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-[#004C48] mb-12">Explore Our Location</h2>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Google Map -->
      <div class="rounded-xl overflow-hidden shadow-lg">
        <h3 class="text-xl font-semibold text-center bg-[#670626] text-white py-2">Google Map</h3>
        <iframe
          src="https://www.google.com/maps/embed?pb=..."
          width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

      <!-- 360° Street View -->
      <div class="rounded-xl overflow-hidden shadow-lg">
        <h3 class="text-xl font-semibold text-center bg-[#670626] text-white py-2">360° Street View</h3>
        <iframe
          src="https://www.google.com/maps/embed?pb=YOUR_360_URL_HERE"
          width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </div>
</section>

{% endblock %}