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

const { title = "Проверьте свои штрафы" } = Astro.props;
---

<section id="fine-check" class="py-24 bg-white relative overflow-hidden">
    <!-- Декоративный фон -->
    <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-50 to-transparent"></div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <!-- Левая часть: форма -->
            <div>
                <span class="inline-block px-4 py-2 bg-red-50 text-red-600 text-xs font-bold uppercase tracking-wider rounded-full mb-4">
                    Онлайн проверка
                </span>
                <h2 class="text-4xl font-bold text-gray-900 mb-6">{title}</h2>
                <p class="text-gray-600 mb-8 leading-relaxed">
                    Узнайте о своих штрафах ГИБДД за 30 секунд. Мы подгрузим данные из официальных баз и рассчитаем риски.
                </p>

                <form class="space-y-6 bg-gray-50 p-8 rounded-3xl border border-gray-100" onsubmit="event.preventDefault(); alert('В реальном проекте здесь будет интеграция с API ГИБДД');">
                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Номер водительского удостоверения</label>
                        <input
                                type="text"
                                placeholder="00 00 000000"
                                class="w-full px-4 py-4 bg-white border border-gray-200 rounded-xl text-lg font-bold text-gray-900 placeholder-gray-300 focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all uppercase tracking-widest"
                        >
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Гос. номер ТС (необязательно)</label>
                        <div class="relative">
                            <input
                                    type="text"
                                    placeholder="А 000 АА 86"
                                    class="w-full px-4 py-4 bg-white border border-gray-200 rounded-xl text-lg font-bold text-gray-900 placeholder-gray-300 focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all uppercase"
                            >
                            <div class="absolute right-4 top-1/2 -translate-y-1/2">
                                <span class="text-2xl">🚗</span>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="w-full py-4 bg-[var(--color-navy)] text-white font-bold rounded-xl hover:bg-[var(--color-gold)] transition-colors shadow-lg flex items-center justify-center gap-3">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Проверить штрафы
                    </button>

                    <p class="text-xs text-gray-400 text-center">
                        Данные обрабатываются конфиденциально. Проверка бесплатна.
                    </p>
                </form>
            </div>

            <!-- Правая часть: преимущества с "табло" -->
            <div class="relative">
                <!-- Декоративное "табло" как на дороге -->
                <div class="absolute -top-8 -right-8 w-32 h-32 bg-[var(--color-gold)] rounded-3xl rotate-12 opacity-20"></div>

                <div class="relative bg-gradient-to-br from-[var(--color-navy)] to-[#1e293b] rounded-3xl p-8 md:p-12 shadow-2xl">
                    <h3 class="text-white font-bold text-2xl mb-8 flex items-center gap-3">
                        <svg class="w-8 h-8 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Что мы проверим:
                    </h3>

                    <ul class="space-y-6">
                        {[
                            "Штрафы ГИБДД (камеры и инспекторы)",
                            "Судебные задолженности",
                            "Лишение прав (действующие решения)",
                            "Запрет на регистрационные действия",
                            "Судимости по ДТП"
                        ].map((item, i) => (
                                <li class="flex items-center gap-4 text-gray-300">
                                    <div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-[var(--color-gold)] font-bold text-sm flex-shrink-0">
                                        {i + 1}
                                    </div>
                                    <span class="text-lg">{item}</span>
                                </li>
                        ))}
                    </ul>

                    <div class="mt-8 pt-8 border-t border-white/10">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-400 text-sm">Время проверки:</span>
                            <span class="text-[var(--color-gold)] font-bold">~30 секунд</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>