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

<!-- Attractions 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">Nearby Attractions</h1>
    <p class="text-gray-600">Explore the beauty and culture around Lake Palace Resort</p>
  </div>
</section>

<!-- Attractions Grid -->
<section class="py-16 container mx-auto grid grid-cols-1 md:grid-cols-2 gap-10">

  <!-- Malarikkal -->
  <a href="https://www.keralatourism.org/photo-gallery/malarikkal/2313/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/malarikkal.jpg' %}" alt="Malarikkal Water Lily Fields" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Malarikkal (Water Lily Fields)</h3>
      <p class="text-gray-700">A hidden gem near Kumarakom, famous for its pink water lilies blooming across paddy fields (Aug–Oct). Perfect for boat rides, photography, and birdwatching.</p>
    </div>
  </a>

  <!-- Kumarakom Bird Sanctuary -->
  <a href="https://www.keralatourism.org/destination/kumarakom-bird-sanctuary/525/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/kumarakom.jpg' %}" alt="Kumarakom Bird Sanctuary" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Kumarakom Bird Sanctuary</h3>
      <p class="text-gray-700">A paradise for bird lovers, spread across 14 acres by Vembanad Lake. Spot migratory birds and enjoy serene walks through nature.</p>
    </div>
  </a>

  <!-- Vembanad Lake -->
  <a href="https://www.keralatourism.org/destination/vembanad-lake-kumarakom/111/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/vembanad.jpg' %}" alt="Vembanad Lake" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Vembanad Lake</h3>
      <p class="text-gray-700">The largest lake in Kerala, offering houseboat cruises, stunning sunsets, and peaceful backwater experiences.</p>
    </div>
  </a>

  <!-- Pathiramanal Island -->
  <a href="https://www.keralatourism.org/destination/pathiramanal-alappuzha/536/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/pathiramanal.jpg' %}" alt="Pathiramanal Island" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Pathiramanal Island</h3>
      <p class="text-gray-700">A beautiful island on Vembanad Lake accessible by boat, rich in flora, fauna, and birdlife. A peaceful escape for nature lovers.</p>
    </div>
  </a>

  <!-- Aruvikkuzhi Waterfalls -->
  <a href="https://www.keralatourism.org/destination/aruvikuzhi-waterfalls/116/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/aruvikuzhi.jpg' %}" alt="Aruvikkuzhi Waterfalls" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Aruvikkuzhi Waterfalls</h3>
      <p class="text-gray-700">A scenic waterfall surrounded by rubber plantations. Perfect for picnics, short treks, and nature lovers.</p>
    </div>
  </a>

  <!-- Thazhathangady Juma Masjid -->
  <a href="https://www.keralatourism.org/destination/juma-masjid-thazhathangadi/465/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/thangalangady.jpg' %}" alt="Thazhathangady Juma Masjid" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Thazhathangady Juma Masjid</h3>
      <p class="text-gray-700">One of the oldest mosques in India, known for its intricate wooden carvings and rich cultural history.</p>
    </div>
  </a>

  <!-- Ettumanoor Mahadeva Temple -->
  <a href="https://www.keralatourism.org/destination/ettumanoor-mahadeva-temple/469/" target="_blank" class="bg-white shadow rounded overflow-hidden block hover:shadow-lg transition">
    <img src="{% static 'img/atu.jpg' %}" alt="Ettumanoor Mahadeva Temple" class="w-full h-64 md:h-72 object-cover">
    <div class="p-6">
      <h3 class="font-bold text-2xl mb-2">Ettumanoor Mahadeva Temple</h3>
      <p class="text-gray-700">A famous Lord Shiva temple with beautiful murals and traditional Kerala architecture. A must-visit spiritual spot.</p>
    </div>
  </a>

</section>

{% endblock %}