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

<section class="py-16 px-4">
    <div class="max-w-5xl mx-auto">
        <div class="relative bg-gradient-to-r from-red-600 to-red-700 rounded-3xl p-8 md:p-12 overflow-hidden shadow-2xl shadow-red-600/30">
            <!-- Пульсирующие круги -->
            <div class="absolute top-1/2 left-8 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 animate-pulse"></div>
            <div class="absolute bottom-0 right-0 w-64 h-64 bg-red-800 rounded-full blur-3xl translate-x-1/3 translate-y-1/3"></div>

            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
                <div class="text-center md:text-left">
                    <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-white text-xs font-bold uppercase tracking-wider mb-4">
                        <span class="w-2 h-2 bg-white rounded-full animate-ping"></span>
                        Случилось ДТП прямо сейчас?
                    </div>
                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-2">Не действуйте без адвоката!</h2>
                    <p class="text-red-100">Одна ошибка в протоколе может стоить вам прав или крупной суммы.</p>
                </div>

                <div class="flex flex-col items-center gap-4">
                    <a href={PHONE_HREF} class="group flex items-center gap-3 px-8 py-4 bg-white text-red-600 font-black text-xl rounded-2xl shadow-xl hover:shadow-2xl hover:scale-105 transition-all">
                        <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>
                        {PHONE_NUMBER}
                    </a>
                    <span class="text-white/80 text-sm font-medium">Выезд в течение 15 минут по Сургуту</span>
                </div>
            </div>
        </div>
    </div>
</section>
