---
interface Service {
    title: string;
    description: string;
    icon: string;
    price: string;
    popular?: boolean;
}

const services: Service[] = [
    {
        title: "Сопровождение ДТП",
        description: "Выезд на место аварии, фиксация повреждений, общение с ГИБДД и страховыми. Защита от необоснованных претензий.",
        icon: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636", // Крест (авария)
        price: "от 5 000 ₽",
        popular: true
    },
    {
        title: "Лишение прав",
        description: "Защита при лишении водительских удостоверений (пьяное вождение, превышение скорости, выезд на встречку).",
        icon: "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", // Треугольник
        price: "от 15 000 ₽"
    },
    {
        title: "Штрафы ГИБДД",
        description: "Обжалование штрафов с камер и инспекторов. Снижение суммы, отмена за нарушением процедуры.",
        icon: "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", // Документ
        price: "от 3 000 ₽"
    },
    {
        title: "Страховые споры",
        description: "Взыскание с ОСАГО/КАСКО, независимая экспертиза, споры о КБМ. Работа с недобросовестными страховыми.",
        icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z", // Щит
        price: "от 10 000 ₽"
    },
    {
        title: "Повторное лишение",
        description: "Сложные случаи повторного нарушения. Исключение обстоятельств, смягчающих наказание.",
        icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", // Часы (время)
        price: "от 20 000 ₽"
    },
    {
        title: "Ущерб при ДТП",
        description: "Взыскание ущерба с виновника, возмещение утраты товарной стоимости, аренда подменного авто.",
        icon: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z", // Деньги
        price: "% от суммы"
    }
];
---

<section id="services" class="py-24 bg-gray-50 relative overflow-hidden">
    <!-- Фоновая декорация "Разметка" -->
    <div class="absolute top-0 left-0 w-full h-4 flex">
        <div class="flex-1 h-full bg-white"></div>
        <div class="flex-1 h-full bg-[var(--color-gold)]"></div>
        <div class="flex-1 h-full bg-[var(--color-navy)]"></div>
    </div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 pt-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-block px-4 py-2 bg-[var(--color-gold)]/10 text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider rounded-full mb-4">
                Виды услуг
            </span>
            <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                Комплексная защита <span class="text-[var(--color-blue-primary)]">водителей</span>
            </h2>
            <p class="text-gray-600 text-lg">
                От консультации до представления интересов в суде. Работаем со всеми категориями дел.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
                    <div class={`group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 ${service.popular ? 'border-[var(--color-gold)]' : 'border-transparent'}`}>
                        {service.popular && (
                                <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-[var(--color-gold)] text-white text-xs font-bold uppercase rounded-full shadow-lg">
                                    Самое востребованное
                                </div>
                        )}

                        <!-- Иконка -->
                        <div class="w-14 h-14 bg-gray-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-[var(--color-blue-primary)] transition-colors duration-300">
                            <svg class="w-7 h-7 text-[var(--color-blue-primary)] group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d={service.icon}/>
                            </svg>
                        </div>

                        <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-[var(--color-blue-primary)] transition-colors">
                            {service.title}
                        </h3>

                        <p class="text-gray-600 text-sm leading-relaxed mb-6">
                            {service.description}
                        </p>

                        <div class="flex items-center justify-between pt-6 border-t border-gray-100">
                            <span class="text-lg font-black text-[var(--color-gold)]">{service.price}</span>
                            <button class="text-sm font-bold text-gray-400 hover:text-[var(--color-blue-primary)] transition-colors flex items-center gap-2 group/btn">
                                Подробнее
                                <svg class="w-4 h-4 transform group-hover/btn:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                </svg>
                            </button>
                        </div>
                    </div>
            ))}
        </div>
    </div>
</section>
