<template>
  <UModal
    v-model:open="open"
    :ui="modalUi"
    title="Авто из Кыргызстана - под ключ !"
    scrollable
  >
    <template #body>
      <div class="promotion-modal">
        <div class="grid gap-4 sm:grid-cols-2">
          <UCard
            v-for="car in cars"
            :key="car.mark"
            class="backdrop-blur-md bg-white/10 border border-white/20"
          >
            <template #header>
              <div class="flex items-center gap-3">
                <UIcon name="i-lucide-car" class="text-xl" />
                <h3 class="text-lg font-semibold">
                  {{ car.mark }}
                </h3>
              </div>
            </template>

            <div class="flex flex-wrap gap-2">
              <span
                v-for="model in car.models"
                :key="model"
                class="
          px-3 py-1 text-sm
          rounded-full
          bg-white/15
          hover:bg-white/25
          cursor-pointer
          transition
        "
              >
                {{ model }}
              </span>
            </div>
          </UCard>
        </div>

        <UAccordion v-model="active" :items="items" />

        <UButton size="xl" href="#contacts" @click="openContacts()">
          Подробнее
        </UButton>
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
import { useSessionStorage } from '@vueuse/core'

const open = defineModel('modelValue', { type: Boolean, default: true })
const active = ref()

const modalUi = {
  content:
      'bg-[linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(/changan.jpg)] bg-cover bg-center bg-no-repeat',
}

const items: AccordionItem[] = [
  {
    label: 'Подбор автомобиля',
    icon: 'i-lucide-car',
    content: 'Помощь в выборе автомобиля, консультация независимого эксперта.',
  },
  {
    label: 'Юридическое оформление',
    icon: 'i-lucide-file-text',
    content: 'Оформление покупки с учетом требований действующего законодательства.',
  },
  {
    label: 'Доставка и страхование',
    icon: 'i-lucide-truck',
    content: 'Организация доставки автомобиля и страхового сопровождения.',
  },
]

const cars = [
  {
    mark: 'Changan',
    models: ['CS55PLUS', 'UNI-K', 'X5 PLUS', 'UNI-Z', 'Deepel', 'Другие'],
  },
  {
    mark: 'Geely',
    models: ['Monharo', 'Emgrand', 'Galaxy Starship 7', 'Atlsa', 'Другие'],
  },
]

const state = useSessionStorage('contacts', {
  contacts:
      {
        name: '',
        phone: '',
        service: '',
        comment: '',
      },
})

function openContacts() {
  open.value = false
  state.value.contacts.service = 'покупка авто'
}
</script>

<style lang="scss">
.promotion-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
