<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="t('apartments.highlight.image-left')" alt="Image 1" class="w-40 h-60 object-cover"/>
          <img :src="t('apartments.highlight.image-right')" class="w-40 h-60 object-cover mt-6" />
        </div>

        <AppTitleText i18n-key="apartments.highlight">
          <AppFeaturesGrid :features="tm('features')"/>
        </AppTitleText>
      </div>
    </AppFlatSection>

    <AppCardSection
        v-for="(apartment, index) in tm('apartments.list')"
        :key="apartment.id"
        :id="rt(apartment.id)"
        :padTop="index === 0"
    >
      <AppApartment :apartment="apartment"/>
    </AppCardSection>
  </div>
</template>

<script setup lang="ts">
const {t, tm, rt} = useVariantData()
</script>