---
import { PHONE_NUMBER } from '@constants/constants.ts';

interface Props {
    title?: string;
    subtitle?: string;
}

const {
    title = "Защита при ДТП и нарушениях ПДД",
    subtitle = "Срочная юридическая помощь при авариях, лишении прав и штрафах. Выезд на место ДТП в течение 20 минут по Сургуту."
} = Astro.props;
---

<section class="relative min-h-[90vh] flex items-center overflow-hidden bg-[var(--color-navy)]">
    <!-- Динамичный фон с "дорожной" тематикой -->
    <div class="absolute inset-0 z-0">
        <!-- Изображение аварии/дороги (размытое) -->
        <img
                src="https://images.unsplash.com/photo-1569346656677-16611334d5b9?q=80&w=2000&auto=format&fit=crop"
                alt="ДТП"
                class="w-full h-full object-cover opacity-30 scale-110 animate-slow-zoom"
        />
        <!-- Градиенты -->
        <div class="absolute inset-0 bg-gradient-to-r from-[var(--color-navy)] via-[var(--color-navy)]/95 to-transparent"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-[var(--color-navy)] via-transparent to-transparent"></div>

        <!-- Декоративные "полосы дороги" -->
        <div class="absolute bottom-0 left-0 right-0 h-32 flex items-end justify-center opacity-20">
            <div class="w-full max-w-4xl flex justify-between px-8">
                {[...Array(5)].map(() => (
                        <div class="w-16 h-2 bg-[var(--color-gold)] mb-8 animate-pulse"></div>
                ))}
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-20">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Левая колонка: Контент -->
            <div class="max-w-2xl">
                <!-- Тег срочности -->
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-red-400 text-xs font-bold uppercase tracking-wider mb-6 animate-pulse">
                    <span class="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
                    Круглосуточный выезд на ДТП
                </div>

                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight mb-6">
                    {title.split(' ').map((word, i) =>
                        i === 1 ? <span class="text-[var(--color-gold)]">{word}</span> : word + ' '
                    )}
                </h1>

                <p class="text-gray-300 text-lg md:text-xl leading-relaxed mb-8 border-l-4 border-[var(--color-gold)] pl-6">
                    {subtitle}
                </p>

                <div class="flex flex-col sm:flex-row gap-4 mb-12">
                    <button data-consultation-modal class="group flex items-center justify-center gap-3 px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-white font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:-translate-y-1 cursor-pointer">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        Получить консультацию
                    </button>
                    <a href="tel:{PHONE_NUMBER}" class="group flex items-center justify-center gap-3 px-8 py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-red-600/30 hover:-translate-y-1">
                        <svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        Срочный вызов
                    </a>
                    <a href="#calculator" class="flex items-center justify-center gap-3 px-8 py-4 bg-white/10 backdrop-blur border border-white/20 text-white font-bold rounded-xl hover:bg-white/20 transition-all">
                        Рассчитать стоимость
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                    </a>
                </div>

                <!-- Быстрые ссылки -->
                <div class="flex flex-wrap gap-4 text-sm text-gray-400">
                    <a href="#fine-check" class="flex items-center gap-2 hover:text-[var(--color-gold)] transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        Проверить штрафы
                    </a>
                    <span class="text-gray-600">|</span>
                    <a href="#docs" class="flex items-center gap-2 hover:text-[var(--color-gold)] transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Какие документы нужны
                    </a>
                </div>
            </div>

            <!-- Правая колонка: Срочная карточка -->
            <div class="hidden lg:block relative">
                <div class="absolute -inset-4 bg-[var(--color-gold)]/20 rounded-3xl blur-2xl animate-pulse"></div>
                <div class="relative bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-8 shadow-2xl">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center shadow-lg shadow-red-500/30">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-bold text-xl">ДТП произошло?</h3>
                            <p class="text-gray-400 text-sm">Не подписывайте протокол без адвоката!</p>
                        </div>
                    </div>

                    <ul class="space-y-4 text-gray-300 mb-6">
                        <li class="flex items-start gap-3">
                            <span class="w-6 h-6 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center text-xs flex-shrink-0 mt-0.5">1</span>
                            <span>Вызовите ГИБДД (для оформления)</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="w-6 h-6 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center text-xs flex-shrink-0 mt-0.5">2</span>
                            <span>Не признавайте вину</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="w-6 h-6 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center text-xs flex-shrink-0 mt-0.5">3</span>
                            <span>Позвоните нам: <span class="text-[var(--color-gold)] font-bold">{PHONE_NUMBER}</span></span>
                        </li>
                    </ul>

                    <div class="bg-red-500/10 border border-red-500/20 rounded-xl p-4 text-center">
                        <span class="text-red-400 text-xs uppercase tracking-wider block mb-1">Время реакции</span>
                        <span class="text-white font-bold text-2xl">15-20 минут</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes slow-zoom {
        0%, 100% { transform: scale(1.1); }
        50% { transform: scale(1.15); }
    }
    .animate-slow-zoom {
        animation: slow-zoom 20s ease-in-out infinite;
    }
    
    /* Центрирование заголовка на мобильных устройствах */
    @media (max-width: 767px) {
        h1 {
            text-align: center;
        }
    }
    
    /* Центрирование блока "Круглосуточный выезд на ДТП" и добавление отступа сверху на мобильных устройствах */
    @media (max-width: 767px) {
        .container > div:first-child > div:first-child > div:first-child {
            text-align: center;
            margin-top: 2rem; /* Увеличиваем отступ сверху */
        }
    }
</style>
