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

const {
    title = "Комплексные юридические услуги",
    subtitle = "Полный спектр правовой защиты в Сургуте и ХМАО-Югре. От консультации до представления в Верховном Суде РФ."
} = Astro.props;

const priorities = [
    { name: "Гражданское право", icon: "⚖️", desc: "Договоры, имущество, наследство" },
    { name: "Семейное право", icon: "👨‍👩‍👧‍👦", desc: "Разводы, алименты, раздел имущества" }
];
---

<section class="relative min-h-[80vh] flex items-center bg-gradient-to-br from-[var(--color-navy)] via-[#1a1f3d] to-[#0f172a] overflow-hidden">
    <!-- Декоративные элементы -->
    <div class="absolute top-0 right-0 w-1/2 h-full bg-[var(--color-gold)] opacity-5 rounded-l-full blur-3xl transform translate-x-1/4"></div>
    <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[var(--color-blue-primary)] opacity-10 rounded-full blur-3xl"></div>

    <div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 py-24">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <!-- Левая колонка -->
            <div>
                <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur border border-[var(--color-gold)]/30 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-6">
                    <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
                    Полный спектр услуг
                </div>

                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight mb-6">
                    {title.split(' ').slice(0, -2).join(' ')} <br />
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)]">
                        {title.split(' ').slice(-2).join(' ')}
                    </span>
                </h1>

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

                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="#civil-family" class="px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-white font-bold rounded-xl transition-all shadow-lg shadow-[var(--color-gold)]/30 hover:-translate-y-1">
                        Основные направления
                    </a>
                    <a href="#all-services" class="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">
                        Все отрасли
                    </a>
                </div>
            </div>

            <!-- Правая колонка: Карточки приоритетов -->
            <div class="relative">
                <div class="absolute -inset-4 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-blue-primary)] rounded-3xl opacity-20 blur-2xl"></div>

                <div class="relative space-y-6">
                    <div class="text-white/60 text-sm font-bold uppercase tracking-wider mb-4 text-center">
                        Приоритетные направления в 2024
                    </div>

                    {priorities.map((item, idx) => (
                            <div class="group bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 hover:bg-white/10 hover:border-[var(--color-gold)]/50 transition-all duration-300 cursor-pointer transform hover:translate-x-2">
                                <div class="flex items-center gap-4">
                                    <div class="w-14 h-14 bg-[var(--color-gold)]/20 rounded-xl flex items-center justify-center text-2xl group-hover:bg-[var(--color-gold)] group-hover:scale-110 transition-all">
                                        {item.icon}
                                    </div>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <h3 class="text-xl font-bold text-white">{item.name}</h3>
                                            <span class="px-2 py-0.5 bg-[var(--color-gold)] text-[var(--color-navy)] text-[10px] font-black uppercase rounded">TOP</span>
                                        </div>
                                        <p class="text-gray-400 text-sm mt-1">{item.desc}</p>
                                    </div>
                                </div>
                            </div>
                    ))}

                    <div class="bg-gradient-to-r from-[var(--color-gold)]/20 to-transparent border border-[var(--color-gold)]/30 rounded-xl p-4 flex items-center gap-3">
                        <div class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></div>
                        <span class="text-[var(--color-gold)] text-sm font-bold">Сейчас принимаем новые дела по этим направлениям</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
