---
const features = [
    {
        title: "Тщательный анализ",
        description: "Детальное изучение каждого документа и обстоятельства дела для выявления всех возможных рисков и преимуществ.",
        icon: "search"
    },
    {
        title: "Защита интересов",
        description: "Бескомпромиссная позиция в суде и на переговорах. Ваша безопасность и правовая чистота — мой главный приоритет.",
        icon: "shield"
    },
    {
        title: "Честный диалог",
        description: "Прямая коммуникация о перспективах дела. Без ложных надежд, только факты и профессиональная оценка.",
        icon: "message"
    }
];

const iconPaths: Record<string, string> = {
    search: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607z",
    shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
    message: "M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
};
---

<section class="relative py-24 overflow-hidden bg-[#0a0e27] -mx-4 md:mx-0">
    <!-- Декоративный фон -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"></div>
        <!-- Сетка -->
        <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 50px 50px;"></div>
    </div>

    <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
        <!-- Заголовок -->
        <div class="text-center mb-16 max-w-3xl mx-auto">
            <span class="inline-block px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-sm font-bold uppercase tracking-wider mb-6">
                Принципы работы
            </span>
            <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight">
                Профессиональное <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] to-amber-400">кредо</span>
            </h2>
            <p class="text-gray-400 text-lg leading-relaxed">
                Мой подход базируется на трех столпах: глубокая аналитика, абсолютная конфиденциальность и ориентация на результат. Я не даю пустых обещаний, я предоставляю юридическую защиту высшего класса.
            </p>
        </div>

        <!-- Карточки -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
                    <div class="group relative bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-8 hover:bg-white/10 hover:border-[var(--color-gold)]/30 transition-all duration-500 hover:-translate-y-2">
                        <!-- Номер -->
                        <div class="absolute top-6 right-6 text-6xl font-bold text-white/5 group-hover:text-[var(--color-gold)]/10 transition-colors">
                            0{index + 1}
                        </div>

                        <!-- Иконка -->
                        <div class="relative w-14 h-14 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-xl flex items-center justify-center mb-6 shadow-lg shadow-[var(--color-gold)]/20 group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-7 h-7 text-[var(--color-navy)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[feature.icon]}/>
                            </svg>
                        </div>

                        <h3 class="text-xl font-bold text-white mb-3 group-hover:text-[var(--color-gold)] transition-colors">
                            {feature.title}
                        </h3>

                        <p class="text-gray-400 leading-relaxed text-sm">
                            {feature.description}
                        </p>

                        <!-- Линия подчеркивания при hover -->
                        <div class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-[var(--color-gold)] to-transparent group-hover:w-full transition-all duration-500 rounded-b-2xl"></div>
                    </div>
            ))}
        </div>
    </div>
</section>
