<template>
  <UContainer>
    <UPageHero :title="page?.title" :description="page?.description" />

    <p class="text-muted py-4 text-center">{{ page?.remarks }}</p>

    <UTabs :items="page?.services.map((s) => ({ ...s, slot: s.id }))">
      <template
        v-for="service in page?.services"
        :key="service.id"
        #[service.id]
      >
        <UPricingPlans :plans="service.plans" />
      </template>
    </UTabs>
  </UContainer>
</template>

<script lang="ts" setup>
const { data: page } = await useLocalizedCollection("webDev");
</script>

<style></style>
