<script setup lang="ts">
import PureCitySvg from "assets/pure-city.svg";
import Client from "./client.vue"

const clients = [
  {
    name: 'МО Озеро долгое',
    fullName: 'МЕСТНАЯ АДМИНИСТРАЦИЯ ВНУТРИГОРОДСКОГО МУНИЦИПАЛЬНОГО ОБРАЗОВАНИЯ ГОРОДА ФЕДЕРАЛЬНОГО ЗНАЧЕНИЯ САНКТ-ПЕТЕРБУРГА МУНИЦИПАЛЬНЫЙ ОКРУГ ОЗЕРО ДОЛГОЕ',
    logo: '/images/clients/mo-ozero-dolgoe.jpg'
  },
  {
    name: 'МО Юнтолово',
    fullName: 'МЕСТНАЯ АДМИНИСТРАЦИЯ ВНУТРИГОРОДСКОГО МУНИЦИПАЛЬНОГО ОБРАЗОВАНИЯ ГОРОДА ФЕДЕРАЛЬНОГО ЗНАЧЕНИЯ САНКТ-ПЕТЕРБУРГА МУНИЦИПАЛЬНЫЙ ОКРУГ ЮНТОЛОВО',
    logo: '/images/clients/mo-untolovo.jpg'
  },
  {
    name: 'Приморский район',
    fullName: 'АДМИНИСТРАЦИЯ ПРИМОРСКОГО РАЙОНА САНКТ-ПЕТЕРБУРГА',
    logo: '/images/clients/primorskiy-rayon.gif'
  }
]
</script>

<template>
  <section class="py-16 bg-white">
    <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16 flex items-center gap-8">
      <img :src="PureCitySvg" class="h-16">
      Наши клиенты
    </h2>

    <div class="flex flex-col sm:flex-row col-w mx-auto px-4 md:px-16 gap-2 lg:gap-16 justify-between lg:justify-start items-center sm:items-stretch">
      <client
        v-for="c in clients"
        :name="c.name"
        :full-name="c.fullName"
        :logo="c.logo"
      ></client>
    </div>
</section>
</template>

<style scoped lang="postcss">

</style>
