{% extends "base.html" %}
{% load static %}
{% block title %}Amenities - Lake Palace Resort{% endblock %}

{% block content %}
<section class="pt-32 pb-16 bg-[#FFBDC5] px-4"> <!-- added more top padding -->
  <div class="container mx-auto text-center">
    <h2 class="text-3xl sm:text-2xl font-bold mb-10 text-[#004C48]">Our Amenities</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">

      <!-- Swimming Pool -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="top">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75c1.5-1.5 3.75-1.5 5.25 0s3.75 1.5 5.25 0 3.75-1.5 5.25 0 3.75 1.5 5.25 0M2.25 15c1.5-1.5 3.75-1.5 5.25 0s3.75 1.5 5.25 0 3.75-1.5 5.25 0 3.75 1.5 5.25 0" />
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">Swimming Pool</h3>
        <p class="text-gray-700 text-sm">Relax in our infinity pool with serene lake views.</p>
      </div>

      <!-- High-Speed Wi-Fi -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="top">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15.75a4.5 4.5 0 017.5 0m-10-4.5a9 9 0 0112.5 0m-15-4.5a13.5 13.5 0 0117.5 0M12 21h.01" />
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">High-Speed Wi-Fi</h3>
        <p class="text-gray-700 text-sm">Stay connected throughout your stay with fast internet access.</p>
      </div>

      <!-- Parking -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="left">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.5l1.5-6A2.25 2.25 0 016.75 6h10.5A2.25 2.25 0 0119.5 7.5l1.5 6M4.5 19.5h15m-12-6h9" />
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">Parking</h3>
        <p class="text-gray-700 text-sm">Secure parking available for all guests.</p>
      </div>

      <!-- Event Hall -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="right">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 8h18M3 12h18M3 16h18" />
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">Event Hall</h3>
        <p class="text-gray-700 text-sm">Perfect venue for weddings, conferences, and parties.</p>
      </div>

      <!-- Fine Dining -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="top">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="9" y1="8" x2="9" y2="16" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="8" y1="8" x2="10" y2="8" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="8" y1="10" x2="10" y2="10" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="15" y1="8" x2="15" y2="16" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="14" y1="8" x2="16" y2="8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">Fine Dining</h3>
        <p class="text-gray-700 text-sm">Experience authentic Kerala delicacies and world cuisines.</p>
      </div>

      <!-- Bathtub -->
      <div class="bg-white shadow-md hover:shadow-lg transition rounded-xl p-6 amenity-card" data-animate="left">
        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 mb-4 text-[#004C48]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 13.5V16.5C21 17.328 20.328 18 19.5 18H4.5C3.672 18 3 17.328 3 16.5V13.5M21 13.5C21 12.672 20.328 12 19.5 12H4.5C3.672 12 3 12.672 3 13.5" />
        </svg>
        <h3 class="text-xl font-semibold mb-2 text-[#004C48]">Bathtub</h3>
        <p class="text-gray-700 text-sm">Relax in rooms equipped with modern bathtubs.</p>
      </div>

    </div>
  </div>
</section>
{% endblock %}