<template>
  <div class="max-w-screen-sm mx-auto px-4 md:px-0 font-sans text-gray-800">
    <!-- Hero Section -->
    <section class="text-center py-12">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <RouterLink to="/">
          <img
            src="/images/qr-code-logo-200x200.jpg"
            width="200"
            height="200"
            alt="QR‑код логотип"
            class="mx-auto"
          />
        </RouterLink>
        <div>
          <h1 class="text-3xl font-bold">Создайте уникальный QR‑код для связи</h1>
          <p class="mt-2 text-lg text-gray-600 text-justify">
            Люди смогут отправлять вам сообщения, сканируя этот QR‑код, без необходимости раскрывать
            ваши контактные данные.
          </p>
          <Button
            icon="pi pi-qrcode"
            label="Создать QR‑код"
            to="/create"
            as="router-link"
            class="p-button-lg mt-4"
          />
        </div>
      </div>
    </section>

    <hr />

    <!-- Where to Use Section -->
    <section id="setup" class="py-8 text-center">
      <h2 class="text-2xl font-semibold">Где использовать?</h2>
      <p class="mt-2 text-lg text-gray-600 text-justify">
        QR‑код можно будет разместить на вашем автомобиле, на входной двери или на ошейнике вашего
        питомца — это позволит окружающим легко связаться с вами в случае необходимости, при этом
        ваши контактные данные останутся конфиденциальными.
      </p>
    </section>

    <ExamplesSection id="examples" />

    <!-- Simple Setup Section -->
    <section id="settings" class="py-8 text-center">
      <h2 class="text-2xl font-semibold">Легкость настройки</h2>
      <p class="mt-2 text-lg text-gray-600 text-justify">
        Создайте QR‑код, выберите доступные действия и начните использовать.
      </p>
      <div class="flex justify-center mt-6">
        <Button
          icon="pi pi-qrcode"
          label="Создать QR‑код"
          to="/create"
          as="router-link"
          class="p-button-lg"
        />
      </div>
    </section>

    <!-- Footer -->
    <footer class="py-4 border-t text-center">
      <p>НаСвязи © 2024</p>
    </footer>
  </div>
</template>

<script setup lang="ts"></script>
