<template>
  <section>
    <UiHeading tag="h1" size="300" class="text-three">
      Книги для тебя, если ты не знаешь...
    </UiHeading>
    <ul class="flex mt-20 flex-row items-center justify-between gap-10">
      <li
        class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
        v-for="({ img, text }, index) in questions.data"
        :key="index"
      >
        <UiParagraph class="text-center" size="250">
          {{ text }}
        </UiParagraph>
        <img :src="`${img}`" alt="Вопрос" width="101" height="101" />
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import UiHeading from '@/components/Typography/UiHeading.vue'
import UiParagraph from '@/components/Typography/UiParagraph.vue'
import { reactive } from 'vue'

const questions = reactive({
  data: [
    {
      img: '/img/svg/ellipse1.svg',
      text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
    },
    {
      img: '/img/svg/ellipse2.svg',
      text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
    },
    {
      img: '/img/svg/ellipse3.svg',
      text: 'Как относиться к сексу и на сколько важна девичья невинность?',
    },
    {
      img: '/img/svg/ellipse4.svg',
      text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
    },
    {
      img: '/img/svg/ellipse5.svg',
      text: 'Как выработать стратегию долгосрочных отношений?',
    },
    {
      img: '/img/svg/ellipse6.svg',
      text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
    },
  ],
})
</script>
