<script setup lang="ts">
import Service from "~/components/services/service.vue";

type TService = {
  name: string
  type: 'indoor' | 'outdoor'
}

const indoorServices: TService[] = [
  // Услуги по уборке помещений
  { name: 'Генеральная уборка', type: 'indoor' },
  { name: 'Уборка после ремонта и строительства', type: 'indoor' },
  { name: 'Уборка после пожара', type: 'indoor' },
  { name: 'Уход за полами', type: 'indoor' },
  { name: 'Обеспыливание поверхностей', type: 'indoor' },
  { name: 'Высотный клининг', type: 'indoor' },
  { name: 'Влажная уборка', type: 'indoor' },
  { name: 'Уборка паром', type: 'indoor' },
  { name: 'Мытье полов', type: 'indoor' },
  { name: 'Мытье стен', type: 'indoor' },
  { name: 'Мойка потолков', type: 'indoor' },
  { name: 'Мытье окон', type: 'indoor' },
  { name: 'Мойка витрин', type: 'indoor' },
  { name: 'Мойка балконов и лоджий', type: 'indoor' },
  { name: 'Химчистка ковров на дому', type: 'indoor' },
  { name: 'Химчистка мебели', type: 'indoor' },
  { name: 'Химчистка ковролина на дому', type: 'indoor' },
  { name: 'Химчистка штор на дому', type: 'indoor' },
  { name: 'Чистка жалюзи', type: 'indoor' },
  { name: 'Химчистка матрасов на дому', type: 'indoor' },
  { name: 'Полировка полов', type: 'indoor' },
  { name: 'Шлифовка пола', type: 'indoor' },
  { name: 'Чистка вентиляции', type: 'indoor' },
  { name: 'Чистка бассейнов', type: 'indoor' },
  { name: 'Чистка кондиционеров', type: 'indoor' },
]

const outdoorServices = [
  // Услуги по уборке территории
  { name: 'Удаление граффити', type: 'outdoor' },
  { name: 'Мойка фасадов', type: 'outdoor' },
  { name: 'Подметание территории', type: 'outdoor' },
  { name: 'Уборка снега', type: 'outdoor' },
  { name: 'Уборка листвы', type: 'outdoor' },
  { name: 'Покос травы', type: 'outdoor' },
  { name: 'Уход за газоном', type: 'outdoor' }
]
</script>

<template>
<section class="py-16 bg-gray-100">
  <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16">Услуги</h2>

  <div class="col-w mx-auto px-4 md:px-16 gap-2 services__grid mb-16">
    <service
      v-for="s in indoorServices"
      :key="s.name"
      :name="s.name"
      :type="s.type"
    ></service>
  </div>

  <div class="col-w mx-auto px-4 md:px-16 mb-16 gap-2 services__grid">
    <service
      v-for="s in outdoorServices"
      :key="s.name"
      :name="s.name"
      :type="s.type"
    ></service>
  </div>
</section>
</template>

<style scoped lang="postcss">
.services__grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
