Animated Amenities Feature Section

<section id="amenities-section"
  class="relative overflow-hidden bg-white py-24 md:py-32 font-sans font-light text-[#1c1917]"
  style="selection-background-color: #1c1917; selection-color: white;">
  <!-- GSAP Library Imports -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

  <div class="mx-auto max-w-[1400px] px-6 md:px-12">
    <div class="flex flex-col gap-12 md:flex-row md:gap-24">

      <!-- Sticky Label Column -->
      <div class="w-full pt-2 md:w-1/4" style="border-top: 1px solid #1c1917;">
        <span class="mt-4 block text-[10px] uppercase tracking-[0.2em]">
          03 — Amenities
        </span>
      </div>

      <!-- Main Content Column -->
      <div class="w-full md:w-3/4">
        <!-- Intro Header -->
        <div class="mb-12 md:mb-20">
          <h2 class="mb-6 font-serif text-3xl font-light leading-tight text-[#1c1917] md:text-5xl lg:text-6xl">
            Designed for the hours between.
          </h2>
          <p class="max-w-xl text-sm leading-relaxed text-black/70 md:text-base">
            Resident-only spaces curated for stillness, wellness, and effortless living. A landscape of amenities that
            extends your home beyond its walls.
          </p>
        </div>

        <!-- Row 1: Living (Image Left, Text Right) -->
        <div
          class="amenity-row flex flex-col items-center gap-8 border-t border-black/10 py-12 opacity-0 md:grid md:grid-cols-12 md:gap-12 md:py-20"
          style="transform: translateY(40px);">
          <div class="w-full md:col-span-5">
            <div class="group relative aspect-[4/5] w-full overflow-hidden rounded-[2px] border border-black/10">
              <img
                src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/111ca588-31c4-44cd-8724-eacc4cbcda19_800w.jpg"
                alt="Lobby Detail"
                class="h-full w-full object-cover transition-transform duration-[1200ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105"
              />
            </div>
          </div>
          <div class="w-full md:col-span-7 md:pl-8">
            <span class="mb-8 block text-[10px] uppercase tracking-[0.2em] text-black/50">Designed for Living</span>
            <ul class="space-y-8">
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Concierge & Secure Entry</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">24/7 Service</span>
                </div>
                <span class="block text-xs font-light text-black/70">24/7 lobby presence + parcel room</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Turnkey Residences</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Furnished</span>
                </div>
                <span class="block text-xs font-light text-black/70">Integrated appliances + furnished options</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">EV Ready Parking</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Underground</span>
                </div>
                <span class="block text-xs font-light text-black/70">Secure underground facility</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Row 2: Restoration (Text Left, Image Right) -->
        <div
          class="amenity-row flex flex-col items-center gap-8 border-t border-black/10 py-12 opacity-0 md:grid md:grid-cols-12 md:gap-12 md:py-20"
          style="transform: translateY(40px);">
          <div class="w-full md:col-span-5 md:col-start-8">
            <div class="group relative aspect-[4/5] w-full overflow-hidden rounded-[2px] border border-black/10">
              <img
                src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4029113c-abfc-4e12-9bc3-f226900932c1_800w.jpg"
                alt="Wellness Spa"
                class="h-full w-full object-cover transition-transform duration-[1200ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105"
              />
            </div>
          </div>
          <div class="w-full md:col-start-1 md:col-span-7 md:row-start-1 md:pr-8">
            <span class="mb-8 block text-[10px] uppercase tracking-[0.2em] text-black/50">Designed for Restoration</span>
            <ul class="space-y-8">
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Wellness Floor</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">06:00 — 23:00</span>
                </div>
                <span class="block text-xs font-light text-black/70">Strength studio + quiet cardio suite</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Thermal Circuit</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Resident Only</span>
                </div>
                <span class="block text-xs font-light text-black/70">Rooftop plunge pool + dry sauna</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Yoga Studio</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Sessions</span>
                </div>
                <span class="block text-xs font-light text-black/70">Quiet morning sessions with mats provided</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Row 3: Gathering (Image Left, Text Right) -->
        <div
          class="amenity-row flex flex-col items-center gap-8 border-t border-black/10 py-12 opacity-0 md:grid md:grid-cols-12 md:gap-12 md:py-20"
          style="transform: translateY(40px);">
          <div class="w-full md:col-span-5">
            <div class="group relative aspect-[4/5] w-full overflow-hidden rounded-[2px] border border-black/10">
              <img
                src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/85f80b28-9ea3-463d-9bf9-bc3a61e0d51b_800w.jpg"
                alt="Rooftop Terrace"
                class="h-full w-full object-cover transition-transform duration-[1200ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105"
              />
            </div>
          </div>
          <div class="w-full md:col-span-7 md:pl-8">
            <span class="mb-8 block text-[10px] uppercase tracking-[0.2em] text-black/50">Designed for Gathering</span>
            <ul class="space-y-8">
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Rooftop Terrace</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Seasonal</span>
                </div>
                <span class="block text-xs font-light text-black/70">Outdoor kitchen + curated seating for sunset viewing</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Co-working Salon</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">WiFi 6</span>
                </div>
                <span class="block text-xs font-light text-black/70">Private work suites + library with complimentary coffee</span>
              </li>
              <li class="group cursor-default border-b border-black/10 pb-4 transition-colors hover:border-black/30">
                <div class="mb-2 flex items-baseline justify-between">
                  <span class="font-serif text-xl text-[#1c1917]">Private Screening</span>
                  <span class="hidden text-[10px] uppercase tracking-widest text-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:block">Bookable</span>
                </div>
                <span class="block text-xs font-light text-black/70">Immersive cinema room with plush lounge seating</span>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>

  <script>
    (function() {
      const initAmenities = () => {
        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
        
        gsap.registerPlugin(ScrollTrigger);

        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
          gsap.set(".amenity-row", { opacity: 1, y: 0 });
          return;
        }

        const rows = document.querySelectorAll(".amenity-row");
        rows.forEach((row) => {
          gsap.to(row, {
            y: 0,
            opacity: 1,
            duration: 1.2,
            ease: "power3.out",
            scrollTrigger: {
              trigger: row,
              start: "top 85%",
              toggleActions: "play none none none"
            },
          });
        });
      };

      if (document.readyState === 'complete') {
        initAmenities();
      } else {
        window.addEventListener('load', initAmenities);
      }
    })();
  </script>
</section>