---
const education = [
    {
        years: "1997 — 2003",
        title: "Тюменский государственный университет",
        description: "Юридический факультет, Специальность «Юриспруденция» (Диплом с отличием)"
    },
    {
        years: "2010 — 2012",
        title: "Магистратура МГЮА им. О.Е. Кутафина",
        description: "Специализация: Уголовное право и криминология"
    },
    {
        years: "2015",
        title: "Повышение квалификации",
        description: "Курс «Защита прав в Европейском Суде по правам человека» (Страсбург)"
    }
];

const additional = [
    "Ежегодные семинары Федеральной палаты адвокатов РФ",
    "Спецкурс по финансовым и налоговым преступлениям",
    "Тренинги по судебному ораторскому искусству",
    "Сертифицированный медиатор в гражданских спорах"
];
---

<section class="relative py-20 md:py-28 overflow-hidden bg-white -mx-4 md:mx-0">
    <!-- Декоративный фон -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-1/2 left-0 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></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="flex items-center gap-4 mb-16 justify-center lg:justify-start">
            <div class="w-12 h-12 bg-gradient-to-br from-[var(--color-blue-primary)] to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
                </svg>
            </div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
                Образование и <span class="text-[var(--color-blue-primary)]">квалификация</span>
            </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
            <!-- Таймлайн -->
            <div class="relative">
                <!-- Линия -->
                <div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[var(--color-blue-primary)] via-[var(--color-gold)] to-transparent"></div>

                <div class="space-y-10">
                    {education.map((item, index) => (
                            <div class="relative pl-16 group timeline-item opacity-0 translate-y-8 transition-all duration-700" style={`transition-delay: ${index * 200}ms`}>
                                <!-- Точка -->
                                <div class="absolute left-0 top-0 w-12 h-12 bg-white rounded-full border-4 border-[var(--color-blue-primary)] shadow-lg flex items-center justify-center z-10 group-hover:scale-110 transition-transform duration-300">
                                    <span class="text-[var(--color-blue-primary)] font-bold text-sm">{index + 1}</span>
                                </div>

                                <!-- Карточка -->
                                <div class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl hover:border-[var(--color-blue-primary)]/20 transition-all duration-300 group-hover:-translate-y-1">
                                <span class="inline-block px-3 py-1 bg-[var(--color-gold)]/10 text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider rounded-full mb-3">
                                    {item.years}
                                </span>
                                    <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-[var(--color-blue-primary)] transition-colors">
                                        {item.title}
                                    </h3>
                                    <p class="text-gray-600 leading-relaxed">
                                        {item.description}
                                    </p>
                                </div>
                            </div>
                    ))}
                </div>
            </div>

            <!-- Правая колонка: Дополнительная подготовка -->
            <div class="relative">
                <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-navy)] to-blue-900 rounded-3xl transform rotate-1 opacity-10"></div>
                <div class="relative bg-gradient-to-br from-[var(--color-navy)] to-[#1a1f3d] rounded-3xl p-8 md:p-10 shadow-2xl border border-white/10 overflow-hidden">
                    <!-- Декоративные элементы -->
                    <div class="absolute top-0 right-0 w-64 h-64 bg-[var(--color-gold)] opacity-10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>

                    <div class="relative z-10">
                        <h3 class="text-2xl font-bold text-white mb-8 flex items-center gap-3">
                            <span class="w-10 h-10 bg-[var(--color-gold)]/20 rounded-xl flex items-center justify-center">
                                <svg class="w-5 h-5 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-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"/>
                                </svg>
                            </span>
                            Дополнительная подготовка
                        </h3>

                        <ul class="space-y-5">
                            {additional.map((text, index) => (
                                    <li class="flex items-start gap-4 group additional-item opacity-0 translate-x-8 transition-all duration-500" style={`transition-delay: ${index * 100}ms`}>
                                        <div class="flex-shrink-0 w-6 h-6 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full flex items-center justify-center mt-0.5 shadow-lg shadow-[var(--color-gold)]/30 group-hover:scale-110 transition-transform">
                                            <svg class="w-3.5 h-3.5 text-[var(--color-navy)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                            </svg>
                                        </div>
                                        <span class="text-gray-300 leading-relaxed group-hover:text-white transition-colors">
                                        {text}
                                    </span>
                                    </li>
                            ))}
                        </ul>

                        <div class="mt-8 pt-6 border-t border-white/10">
                            <div class="flex items-center gap-3 text-[var(--color-gold)]">
                                <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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                                </svg>
                                <span class="text-sm font-bold uppercase tracking-wider">Постоянное совершенствование</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.2
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.remove('opacity-0', 'translate-y-8', 'translate-x-8');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.timeline-item, .additional-item').forEach(item => {
            observer.observe(item);
        });
    });
</script>