<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">
          <NuxtImg :src="l.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
          <NuxtImg :src="l.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
        </div>

        <AppTitleText :title="l.highlight.title" :text="l.highlight.description">
          <AppHighlights/>
        </AppTitleText>
      </div>
    </AppFlatSection>

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

    >
      <AppApartment :apartment="apartment" :index="index" :id="g.apartments[index].id"/>
    </AppCardSection>
  </div>
</template>

<script setup lang="ts">
useSeoLinking()
const {g, l} = useContentInjected()

useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})
</script>