---
import Layout from "@layouts/Layout.astro";
import { SITE_NAME } from "@constants/constants.ts";

const seo = {
  title: `Авторизация | ${SITE_NAME}`,
  description: "Войдите в систему или создайте новый аккаунт",
};
---

<Layout
  title={seo.title}
  description={seo.description}
  pagePath="/auth"
  bodyClass="bg-[#F6F7FA]"
>
  <div class="min-h-[calc(100vh-400px)] flex items-center justify-center py-12">
    <div class="w-full max-w-2xl">
      <!-- Заголовок -->
      <div class="text-center mb-12">
        <h1 class="text-3xl font-bold text-white mb-2">Авторизация</h1>
        <p class="text-gray-500 text-sm">Выберите действие для продолжения</p>
      </div>

      <!-- Карточки действий -->
      <div class="grid md:grid-cols-2 gap-6">
        <!-- Вход -->
        <a
          href="/auth/login"
          class="group bg-white border border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl hover:border-gold/50 transition-all duration-300"
        >
          <div class="text-center">
            <div
              class="w-16 h-16 bg-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gold/20 transition-colors"
            >
              <svg
                class="w-8 h-8 text-gold"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
                ></path>
              </svg>
            </div>
            <h2
              class="text-xl font-bold text-gray-900 mb-2 group-hover:text-gold transition-colors"
            >
              Вход
            </h2>
            <p class="text-gray-500 text-sm mb-4">
              Войдите в существующий аккаунт
            </p>
            <span
              class="inline-flex items-center text-gold font-medium group-hover:gap-2 transition-all"
            >
              Войти
              <svg
                class="w-4 h-4 ml-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 5l7 7-7 7"></path>
              </svg>
            </span>
          </div>
        </a>

        <!-- Регистрация -->
        <a
          href="/auth/register"
          class="group bg-white border border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl hover:border-gold/50 transition-all duration-300"
        >
          <div class="text-center">
            <div
              class="w-16 h-16 bg-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gold/20 transition-colors"
            >
              <svg
                class="w-8 h-8 text-gold"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                ></path>
              </svg>
            </div>
            <h2
              class="text-xl font-bold text-gray-900 mb-2 group-hover:text-gold transition-colors"
            >
              Регистрация
            </h2>
            <p class="text-gray-500 text-sm mb-4">Создайте новый аккаунт</p>
            <span
              class="inline-flex items-center text-gold font-medium group-hover:gap-2 transition-all"
            >
              Зарегистрироваться
              <svg
                class="w-4 h-4 ml-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 5l7 7-7 7"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
    </div>
  </div>
</Layout>
