---
import Layout from '@layouts/Layout.astro';
import Pagination from '@components/base/Pagination.astro';

// Статические данные для проверки дизайна
const archivePosts = [
    {
        id: "1",
        image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?w=200&q=60",
        category: "ЗАКОНОДАТЕЛЬСТВО",
        title: "Изменения в законодательстве Ханты-Мансийского АО: что нужно знать предпринимателям в 2024 году",
        excerpt: "Обзор ключевых изменений в региональном законодательстве, влияющих на ведение бизнеса в ХМАО-Югре.",
        date: "15 марта 2026",
        slug: "/blog/izmeneniya-v-zakonodatelstve"
    },
    {
        id: "2",
        image: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=200&q=60",
        category: "УГОЛОВНОЕ ПРАВО",
        title: "Защита по экономическим преступлениям: практика 2025 года",
        excerpt: "Анализ судебной практики по делам о экономических преступлениях в регионе.",
        date: "10 марта 2026",
        slug: "/blog/zashchita-ekonomicheskie"
    },
    {
        id: "3",
        image: "https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?w=200&q=60",
        category: "ГРАЖДАНСКОЕ ПРАВО",
        title: "Споры о недвижимости: типичные ошибки и как их избежать",
        excerpt: "Разбор распространённых ошибок при сделках с недвижимостью.",
        date: "5 марта 2026",
        slug: "/blog/spory-nedvizhimost"
    },
    {
        id: "4",
        image: "https://images.unsplash.com/photo-1505664194779-8beaceb93744?w=200&q=60",
        category: "СЕМЕЙНОЕ ПРАВО",
        title: "Брачный договор: плюсы и минусы для супругов",
        excerpt: "Подробный анализ преимуществ и недостатков брачного договора.",
        date: "1 марта 2026",
        slug: "/blog/brachnyy-dogovor"
    },
    {
        id: "5",
        image: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&q=60",
        category: "БИЗНЕС",
        title: "Регистрация ИП в 2026 году: пошаговая инструкция",
        excerpt: "Актуальное руководство по регистрации индивидуального предпринимателя.",
        date: "25 февраля 2026",
        slug: "/blog/registratsiya-ip"
    },
    {
        id: "6",
        image: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=200&q=60",
        category: "НОВОСТИ",
        title: "Новые меры поддержки малого бизнеса в Югре",
        excerpt: "Обзор государственных программ поддержки предпринимателей.",
        date: "20 февраля 2026",
        slug: "/blog/podderzhka-biznesa"
    },
    {
        id: "7",
        image: "https://images.unsplash.com/photo-1589578228447-e1a4e481c6c8?w=200&q=60",
        category: "ТРУДОВОЕ ПРАВО",
        title: "Изменения в Трудовом кодексе: что ждать работодателям",
        excerpt: "Анализ новых требований к работодателям с 2026 года.",
        date: "15 февраля 2026",
        slug: "/blog/trudovoy-kodeks"
    },
    {
        id: "8",
        image: "https://images.unsplash.com/photo-1575505586569-646b2ca898fc?w=200&q=60",
        category: "НАЛОГОВОЕ ПРАВО",
        title: "Налоговые льготы для IT-компаний в 2026 году",
        excerpt: "Полный перечень льгот и преференций для IT-сектора.",
        date: "10 февраля 2026",
        slug: "/blog/nalogovye-lgoty-it"
    },
    {
        id: "9",
        image: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=200&q=60",
        category: "АДМИНИСТРАТИВНОЕ ПРАВО",
        title: "Обжалование штрафов ГИБДД: новые правила 2026 года",
        excerpt: "Изменения в процедуре обжалования административных правонарушений.",
        date: "5 февраля 2026",
        slug: "/blog/shtrafy-gibdd"
    },
    {
        id: "10",
        image: "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=200&q=60",
        category: "АРБИТРАЖ",
        title: "Досудебное урегулирование споров в арбитраже",
        excerpt: "Практические рекомендации по подготовке к арбитражному разбирательству.",
        date: "1 февраля 2026",
        slug: "/blog/arbitrazh-dosudebnoe"
    }
];
---

<Layout
    title="Архив статей — Все публикации блога"
    description="Полный архив всех статей и публикаций блога адвоката"
    pagePath="/blog/archive"
>
    <div class="relative min-h-screen py-16 mb-6 overflow-hidden">
        <!-- Декоративный фон как на странице контактов -->
        <div class="absolute inset-0 bg-gradient-to-b from-gray-50 to-white pointer-events-none"></div>
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl pointer-events-none"></div>

        <div class="relative z-10 w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
            <!-- Заголовок секции -->
            <div class="mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Архив публикаций</h2>
                <div class="w-20 h-1 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full"></div>
            </div>

            <!-- Панель фильтров и поиска -->
            <div class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50 mb-8">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <!-- Выпадающий список годов (слева) -->
                    <div class="flex items-center gap-3">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <select class="px-4 py-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-100 rounded-xl text-sm font-semibold text-gray-700 focus:outline-none focus:ring-2 focus:ring-[var(--color-blue-primary)] focus:border-transparent cursor-pointer transition-all">
                            <option value="all">Все годы</option>
                            <option value="2026">2026</option>
                            <option value="2025">2025</option>
                            <option value="2024">2024</option>
                        </select>
                    </div>

                    <!-- Поле поиска (справа) -->
                    <form class="relative flex-1 max-w-sm" action="/blog/search" method="GET">
                        <input
                            type="text"
                            name="q"
                            placeholder="Поиск статей..."
                            class="w-full px-5 py-2.5 pr-12 text-sm bg-gray-50 hover:bg-gray-100 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--color-blue-primary)] focus:border-transparent transition-all duration-300 placeholder:text-gray-400"
                        />
                        <button
                            type="submit"
                            class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 bg-[var(--color-blue-primary)] hover:bg-[var(--color-gold)] text-white rounded-lg flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-[var(--color-gold)]/30 cursor-pointer"
                            aria-label="Найти"
                        >
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>

            <div class="grid grid-cols-1">
                <!-- Основной контент -->
                <main class="w-full">
                    <!-- Список статей -->
                    <div class="space-y-4">
                        {archivePosts.map((post) => (
                            <article class="group bg-white/80 backdrop-blur-xl rounded-2xl border border-white/50 shadow-lg hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 transition-all duration-300 overflow-hidden">
                                <div class="flex flex-col sm:flex-row gap-5 p-5">
                                    <!-- Миниатюра -->
                                    <div class="flex-shrink-0">
                                        <a href={post.slug} class="block w-full sm:w-28 h-28 rounded-xl overflow-hidden group-hover:scale-110 transition-transform duration-700">
                                            <img 
                                                src={post.image} 
                                                alt={post.title} 
                                                class="w-full h-full object-cover"
                                            />
                                        </a>
                                    </div>

                                    <!-- Контент -->
                                    <div class="flex-1 flex flex-col justify-center min-w-0">
                                        <!-- Верхняя строка: категория и дата -->
                                        <div class="flex items-center gap-3 mb-2.5 flex-wrap">
                                            <span class="px-3 py-1 bg-white/95 backdrop-blur text-[var(--color-blue-primary)] text-[10px] font-bold uppercase tracking-wider rounded-full shadow-sm">
                                                {post.category}
                                            </span>
                                            <span class="flex items-center gap-1.5 text-xs text-gray-500 font-medium">
                                                <svg class="w-3.5 h-3.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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                </svg>
                                                {post.date}
                                            </span>
                                        </div>

                                        <!-- Заголовок -->
                                        <h2 class="text-lg md:text-xl font-bold text-gray-900 mb-2 leading-tight group-hover:text-[var(--color-blue-primary)] transition-colors duration-300 line-clamp-2">
                                            <a href={post.slug} class="hover:text-[var(--color-blue-primary)]">
                                                {post.title}
                                            </a>
                                        </h2>

                                        <!-- Описание и кнопка -->
                                        <div class="flex items-center gap-4 mt-auto">
                                            <p class="text-sm text-gray-600 line-clamp-1 flex-1">
                                                {post.excerpt}
                                            </p>
                                            <a 
                                                href={post.slug} 
                                                class="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2.5 bg-gray-900 text-white text-sm font-semibold rounded-lg hover:bg-[var(--color-gold)] transition-all duration-300 hover:shadow-lg hover:shadow-[var(--color-gold)]/30 group/btn whitespace-nowrap"
                                            >
                                                Читать
                                                <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>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        ))}
                    </div>

                    <!-- Пагинация -->
                    <div class="mt-10">
                        <Pagination />
                    </div>
                </main>
            </div>
        </div>
    </div>
</Layout>
