<template>
  <div class="w-full h-full bg-neutral-50">
    <AppFlatSection>
      <div class="flex flex-col md:flex-row items-center gap-8">
        <!-- Left: Image Group -->
        <div class="flex flex-row gap-4 justify-center relative">
          <img :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
          <img :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
        </div>

        <AppTitleText :title="c.apartments.highlight.title" :text="c.apartments.highlight.description">
          <AppFeaturesGrid :features="c.landing.features.list"/>
        </AppTitleText>
      </div>
    </AppFlatSection>

    <AppCardSection
        v-for="(apartment, index) in c.apartments.list"
        :key="apartment.id"
        :padTop="index === 0"

    >
      <AppApartment :apartment="apartment" :id="apartment.id"/>
    </AppCardSection>
  </div>
</template>

<script setup lang="ts">
const {c} = useContent()
</script>