---
import { heroContent } from '@components/home/hero/HeroContent';
import Layout from '@layouts/Layout.astro';
import UniversalBookingForm from '@components/booking/UniversalBookingForm.tsx';
import Modal from '@components/base/Modal.astro';
import Button from '@components/base/Button.astro';
import { authService } from '@/lib/authService';

// Получаем глобальные настройки сайта из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
const siteSettings = await pb.collection('site_settings').getFirstListItem('');
const siteUrl = siteSettings.site_url;

// Получаем данные страницы из PocketBase
const pageData = await pb.collection('pages').getFirstListItem('slug = "action"');
const title = `${pageData.title} | ${siteSettings.site_name}`;
const description = pageData.meta_description;
const canonicalLink = pageData.canonical_url ? pageData.canonical_url : `${siteUrl}/${pageData.slug}`;
---

<Layout {title} {description} {canonicalLink}>
  <div class="bg-gray-50 min-h-screen py-12 sm:py-20">
    <div class="max-w-4xl mx-auto px-6">
      <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="p-8 sm:p-12">
          <h1 class="text-center text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight">
            Sonderaktion: <span class="text-red-600">20% Rabatt</span>
          </h1>
          <p class="mt-4 text-center text-lg text-gray-600 max-w-2xl mx-auto">
            Buchen Sie jetzt Ihre nächste Fahrt mit einem unserer
            komfortablen Minivans in Berlin und sparen Sie 20%! Dieses
            exklusive Angebot gilt für alle Online-Buchungen für eine
            begrenzte Zeit.
          </p>
          <div class="mt-10">
            <h2 class="text-xl font-bold text-gray-800">
              Was Sie erhalten:
            </h2>
            <ul class="mt-4 space-y-3 text-gray-700">
              <li class="flex items-start">
                <svg class="flex-shrink-0 h-6 w-6 text-green-500 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                <span>
                  Eine komfortable und sichere Fahrt in einem modernen
                  Minivan.
                </span>
              </li>
              <li class="flex items-start">
                <svg class="flex-shrink-0 h-6 w-6 text-green-500 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                <span>
                  Professioneller und freundlicher Fahrer mit exzellenten
                  Ortskenntnissen.
                </span>
              </li>
              <li class="flex items-start">
                <svg class="flex-shrink-0 h-6 w-6 text-green-500 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                <span>
                  Pünktlichkeit und Zuverlässigkeit, auf die Sie sich
                  verlassen können.
                </span>
              </li>
            </ul>
          </div>
          <div class="mt-12 flex justify-center">
            <Button
              id="open-action-modal-btn"
              variant="danger"
              size="lg"
              fullWidth={false}
            >
              Jetzt buchen und 20% sparen!
            </Button>
          </div>
        </div>
        <div class="bg-gray-100 px-8 py-4 text-sm text-center text-gray-500">
          Das Angebot ist zeitlich begrenzt. Der Rabatt wird automatisch bei
          der Buchung angewendet.
        </div>
      </div>
    </div>
  </div>

  <Modal
    modalId="action-modal"
    triggerId="open-action-modal-btn"
    title="Buchung mit 20% Rabatt"
    maxWidth="md"
  >
    <UniversalBookingForm
      content={heroContent}
      formType="action"
      showDiscount={true}
      accentColor="red"
      client:only="solid-js"
    />
  </Modal>
</Layout>

<script>
  // Слушаем событие "Закрыть модальное окно", которое отправляет форма спустя 5 секунд
  // или при нажатии на крестик в блоке успеха
  window.addEventListener('booking-close-modal', () => {
    console.log('Получен сигнал на закрытие модального окна');

    // Предполагается, что ваш компонент Modal.astro предоставляет глобальную функцию
    // или мы закрываем его через класс

    if (window.closeModal) {
      window.closeModal('action-modal');
    } else {
      // Фолбэк, если функции нет (напрямую убираем класс)
      const modal = document.getElementById('action-modal');
      if (modal) {
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = ''; // Возвращаем скролл
      }
    }
  });

  // Слушаем ошибку для Тоста (успех уже показывается внутри формы, тост не обязателен)
  window.addEventListener('booking-error', (e) => {
    document.dispatchEvent(new CustomEvent('showToast', {
      detail: {
        message: e.detail.message,
        type: 'error'
      }
    }));
  });
</script>