<template>
  <section class="w-full">
    <!-- ❶ two-column card ----------------------------->
    <div class="grid gap-8 lg:grid-cols-2 bg-white rounded-lg overflow-hidden">
      <!-- ◀ left half : image carousel -->
      <AppThumbnailCarousel></AppThumbnailCarousel>

      <!-- ▶ right half : text (top) & icons (bottom) -->
      <div class="flex flex-col h-full p-6">
        <!-- title + intro copy -->
        <div class="flex flex-col gap-4">
          <div>
            <h2 class="text-3xl font-bold text-neutral-900 mb-2">
              {{ rt(apartment.title) }}
            </h2>
            <p class="text-neutral-700">
              {{
                rt(apartment.subtitle)
              }}
            </p>
          </div>

          <AppFeaturesGrid :features="apartment.features"/>
        </div>
        <div class="flex-1"></div>
        <div class="flex justify-end">
          <div class="flex flex-row gap-4 ">
            <UButton
                :to="variantPath('contact')"
                size="md"
                color="primary"
                variant="outline"
                trailing-icon="i-heroicons-envelope"
            >
              {{ t('button.contact') }}
            </UButton>

            <UButton
                :to="variantPath('book')"
                size="md"
                color="primary"
                variant="solid"
                trailing-icon="i-heroicons-globe-alt"
            >
              {{ t('button.book') }}
            </UButton>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import type {Apartment} from '@/composables/useApartments'

const {t, tm, rt} = useVariantData()

defineProps<{ apartment: Apartment }>()
const { variantPath } = useVariantPath()
</script>