<template>
  <el-container class="landing-container">
    <el-main class="hero-section">
      <el-row :gutter="20" class="header-row">
        <el-col>
          <RouterLink to="/">
            <img
              src="@/assets/qr-code-logo-200x200.jpg"
              width="200"
              height="200"
              alt="QR-код логотип"
            />
          </RouterLink>
        </el-col>
        <el-col>
          <h1>Создайте уникальный QR-код для связи</h1>
          <p>
            Люди смогут отправлять вам сообщения, сканируя этот QR-код, без необходимости раскрывать
            ваши контактные данные.
          </p>
          <el-button tag="RouterLink" to="/create" type="primary" size="large"
            >Создать QR-код</el-button
          >
        </el-col>
      </el-row>
    </el-main>

    <!-- Где использовать? -->
    <el-main id="setup" class="setup-section">
      <h2>Где использовать?</h2>
      <p>
        QR-код можно будет разместить на вашем автомобиле, на входной двери или на ошейнике вашего
        питомца — это позволит окружающим легко связаться с вами в случае необходимости, при этом
        ваши контактные данные останутся конфиденциальными.
      </p>
    </el-main>

    <!-- Примеры использования -->
    <el-main id="examples" class="examples-section">
      <h2>Примеры использования</h2>
      <div class="examples-container">
        <div class="example-block">
          <p>Автомобиль: получайте уведомления о проблемах с парковкой или фарами.</p>
          <img src="@/assets/examples/car-200x200.jpg" width="150" height="150" alt="Автомобиль" />
        </div>
        <div class="example-block">
          <p>Питомец: помогите вернуть потерявшегося питомца.</p>
          <img src="@/assets/examples/dog-200x200.jpg" width="150" height="150" alt="Питомец" />
        </div>
        <div class="example-block">
          <p>Квартира: оставляйте инструкции для курьеров или соседей.</p>
          <img src="@/assets/examples/door-200x200.jpg" width="150" height="150" alt="Квартира" />
        </div>
      </div>
    </el-main>

    <!-- Простота настройки -->
    <el-main id="settings" class="setup-section">
      <h2>Простота настройки</h2>
      <p>Создайте QR-код, выберите доступные действия и начните использовать.</p>

      <div class="centered-button-container">
        <el-button tag="RouterLink" to="/create" type="primary" size="large" class="large-button"
          >Создать QR-код</el-button
        >
      </div>
    </el-main>

    <!-- Подвал -->
    <el-footer class="footer">
      <p>НаСвязи © 2024</p>
    </el-footer>
  </el-container>
</template>

<style scoped>
.landing-container {
  font-family: Arial, sans-serif;
  max-width: 950px;
  margin: 0 auto;
}

.hero-section {
  text-align: center;
  padding: 50px 20px;
  background-color: #f5f5f5;
}

.setup-section {
  padding: 30px 20px;
}

.examples-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.example-block {
  text-align: center;
  padding: 10px 0;
}

.example-block img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Центрирование кнопки */
.centered-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

.large-button {
  font-size: 18px;
  padding: 15px 40px;
}

/* Стили для десктопной версии */
@media (min-width: 768px) {
  .examples-container {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
  }
}

.footer {
  text-align: center;
  padding: 10px;
  border-top: 1px solid #333;
}
</style>
<script setup lang="ts"></script>
