<template>
  <div class="w-full h-full bg-neutral-50">
    <AppFlatSection>
      <div class="flex gap-12 items-center">
        <!-- Left: Image Group -->
        <div class="flex flex-row gap-4 justify-center relative">
          <img src="/ap.webp" alt="Image 1" class="w-40 h-60 object-cover rounded-lg"/>
          <img src="/sauna.webp" alt="Image 2" class="w-40 h-60 object-cover rounded-lg translate-y-6"/>
        </div>

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

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

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