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

interface Case {
    id: number;
    title: string;
    category: string;
    categoryIcon: string;
    description: string;
    situation: string;
    result: string;
    resultLabel: string;
    duration: string;
    sum?: string;
    href: string;
}

const {
    sectionSubtitle = "НАША ПРАКТИКА",
    sectionTitle = "Последние выигранные дела",
    sectionDescription = "Каждое дело — это уникальная история с индивидуальным подходом. Вот лишь некоторые примеры нашей работы.",
    filterLabel = "Выберите категорию:",
    cases = [
        {
            id: 1,
            title: "Возврат прав после лишения по ст. 12.8 КоАП",
            category: "Водительские права",
            categoryIcon: "🚗",
            description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
            situation: "Инспекторы ДПС допустили нарушения при освидетельствовании: не были приглашены понятые, протокол составлен без присутствия двух понятых.",
            result: "Суд первой инстанции отменил постановление. Права возвращены в полном объёме.",
            resultLabel: "Лишение отменено",
            duration: "3 месяца",
            href: "/cases/driving-license-return-12-8"
        },
        {
            id: 2,
            title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
            category: "Страховые споры",
            categoryIcon: "📋",
            description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
            situation: "После аварии автомобиль клиента получил значительные повреждения. Оценка страховой оказалась занижена почти в 5 раз.",
            result: "Суд удовлетворил иск полностью. Взыскано 450 000 ₽ недоплаты + неустойка и штраф.",
            resultLabel: "Взыскано 450 000 ₽",
            duration: "5 месяцев",
            sum: "450 000 ₽",
            href: "/cases/osago-claim-450k"
        },
        {
            id: 3,
            title: "Оспаривание вины в ДТП с пострадавшим",
            category: "ДТП и разбор",
            categoryIcon: "🚨",
            description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
            situation: "На перекрёстке произошло столкновение. Инспектор ГИБДД изначально признал виновным нашего клиента.",
            result: "Благодаря видеозаписи с камеры и показаниям свидетелей удалось доказать невиновность.",
            resultLabel: "Виновность не доказана",
            duration: "4 месяца",
            href: "/cases/dti-innocence-proof"
        },
        {
            id: 4,
            title: "Защита интересов в арбитражном суде",
            category: "Судебное представительство",
            categoryIcon: "🏛️",
            description: "Представляли интересы юридического лица в споре со страховой компанией по договору КАСКО на автопарк.",
            situation: "Страховая отказала в выплате по нескольким страховым случаям, ссылаясь на нарушения условий договора.",
            result: "Суд признал отказ необоснованным. Взыскано 1 200 000 ₽ по всем эпизодам.",
            resultLabel: "Взыскано 1 200 000 ₽",
            duration: "7 месяцев",
            sum: "1 200 000 ₽",
            href: "/cases/casaco-fleet-claim"
        },
        {
            id: 5,
            title: "Возврат прав после лишения за выезд на встречку",
            category: "Водительские права",
            categoryIcon: "🚗",
            description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
            situation: "Нарушение было зафиксировано автоматической камерой. Клиент утверждал, что за рулём был другой человек.",
            result: "Суд учёл предоставленные доказательства. Лишение отменено, дело прекращено.",
            resultLabel: "Дело прекращено",
            duration: "2 месяца",
            href: "/cases/license-return-camera"
        },
        {
            id: 6,
            title: "Взыскание ущерба с виновника ДТП по КАСКО",
            category: "Страховые споры",
            categoryIcon: "🛡️",
            description: "Страховая по КАСКО выплатила не полную сумму. Разницу решили взыскать напрямую с виновника аварии.",
            situation: "Виновник ДТП отказался добровольно возмещать разницу между выплатой КАСКО и реальным ущербом.",
            result: "Суд вынес решение в пользу клиента. Взыскано 280 000 ₽ + судебные расходы.",
            resultLabel: "Взыскано 280 000 ₽",
            duration: "4 месяца",
            sum: "280 000 ₽",
            href: "/cases/casco-damage-claim"
        }
    ] as Case[],
    currentPage = 1,
    casesPerPage = 4,
    baseUrl = "/cases"
} = Astro.props as {
    sectionSubtitle?: string;
    sectionTitle?: string;
    sectionDescription?: string;
    filterLabel?: string;
    cases?: Case[];
    currentPage?: number;
    casesPerPage?: number;
    baseUrl?: string;
};

const totalPages = Math.ceil(cases.length / casesPerPage);
const startIndex = (currentPage - 1) * casesPerPage;
const endIndex = startIndex + casesPerPage;
const paginatedCases = cases.slice(startIndex, endIndex);

// Получаем уникальные категории
const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.category)))];
---

<section class="cases-section">
    <div class="site-container">
        <!-- Заголовок -->
        <div class="cases-header">
            <span class="cases-subtitle animate-on-scroll" data-animation="fade-up">{sectionSubtitle}</span>
            <h2 class="cases-title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
            <p class="cases-desc animate-on-scroll" data-animation="fade-up" data-delay="150">{sectionDescription}</p>
        </div>

        <!-- Фильтры -->
        <div class="cases-filters animate-on-scroll" data-animation="fade-up" data-delay="200">
            <span class="cases-filter-label">{filterLabel}</span>
            <div class="cases-filter-buttons">
                {categories.map((category, index) => (
                    <button 
                        class="cases-filter-btn {index === 0 ? 'active' : ''}" 
                        data-filter={index === 0 ? 'all' : category}
                    >
                        {index > 0 && <span class="cases-filter-btn-icon">{cases.find((c: Case) => c.category === category)?.categoryIcon}</span>}
                        {category}
                    </button>
                ))}
            </div>
        </div>

        <!-- Список кейсов -->
        <div class="cases-list">
            {paginatedCases.map((caseItem: Case, index: number) => (
                <article class="case-card animate-on-scroll" data-animation="slide-up" data-delay={index * 100 + 300} data-category={caseItem.category}>
                    <div class="case-card__inner">
                        <!-- Верхняя часть -->
                        <div class="case-card__header">
                            <div class="case-card__category">
                                <span class="case-card__category-icon">{caseItem.categoryIcon}</span>
                                <span class="case-card__category-text">{caseItem.category}</span>
                            </div>
                            <h3 class="case-card__title">{caseItem.title}</h3>
                        </div>

                        <!-- Описание -->
                        <p class="case-card__desc">{caseItem.description}</p>

                        <!-- Ситуация -->
                        <div class="case-card__situation">
                            <div class="case-card__situation-label">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="M12 16v-4"/>
                                    <path d="M12 8h.01"/>
                                </svg>
                                Ситуация
                            </div>
                            <p class="case-card__situation-text">{caseItem.situation}</p>
                        </div>

                        <!-- Результат -->
                        <div class="case-card__result">
                            <div class="case-card__result-header">
                                <div class="case-card__result-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 6L9 17l-5-5"/>
                                    </svg>
                                    Результат
                                </div>
                                <span class="case-card__result-badge">{caseItem.resultLabel}</span>
                            </div>
                            <p class="case-card__result-text">{caseItem.result}</p>
                        </div>

                        <!-- Мета-информация -->
                        <div class="case-card__meta">
                            <div class="case-card__meta-item">
                                <svg class="case-card__meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="M12 6v6l4 2"/>
                                </svg>
                                <span class="case-card__meta-text">Срок: {caseItem.duration}</span>
                            </div>
                            {caseItem.sum && (
                                <div class="case-card__meta-item case-card__meta-item--sum">
                                    <svg class="case-card__meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                                    </svg>
                                    <span class="case-card__meta-text case-card__meta-text--sum">Сумма: {caseItem.sum}</span>
                                </div>
                            )}
                        </div>

                        <!-- Кнопка -->
                        <a href={caseItem.href} class="case-card__link">
                            <span>Подробнее о деле</span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 12h14"/>
                                <path d="m12 5 7 7-7 7"/>
                            </svg>
                        </a>
                    </div>
                </article>
            ))}
        </div>

        <!-- Пагинация -->
        {totalPages > 1 && (
            <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                baseUrl={baseUrl}
            />
        )}

        <!-- CTA -->
        <CTA
            icon="help"
            title="Нужна помощь с похожей ситуацией?"
            description="Расскажите о вашей проблеме — мы найдём решение. Первая консультация бесплатно."
            btnText="Получить консультацию"
        />
    </div>
</section>

<style>
    :root {
        --color-primary: #0a2540;
        --color-primary-light: #1e3050;
        --color-accent: #eac26e;
        --color-accent-dark: #ce9f40;
        --color-accent-glow: rgba(234, 194, 110, 0.15);
        --color-light: #ffffff;
        --color-gray: #94a3b8;
        --color-gray-light: #e2e8f0;
        --color-bg: #f8fafc;
        --color-bg-alt: #f1f5f9;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
        --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .cases-section {
        padding: 6rem 1.5rem;
        background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    .site-container {
        max-width: var(--site-max-width, 1400px);
        margin: 0 auto;
    }

    /* --- Заголовок --- */
    .cases-header {
        margin-bottom: 3.5rem;
        text-align: center;
    }

    .cases-subtitle {
        display: inline-block;
        color: var(--color-accent);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 1rem;
        padding: 0.5rem 1.25rem;
        background: rgba(234, 194, 110, 0.1);
        border-radius: 6px;
    }

    .cases-title {
        color: var(--color-primary);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        margin: 0 0 1rem 0;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .cases-desc {
        color: var(--color-gray);
        font-size: 1.1rem;
        max-width: 750px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* --- Фильтры --- */
    .cases-filters {
        margin-bottom: 3rem;
        padding: 1.5rem 2rem;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;
    }

    .cases-filter-label {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-primary);
        white-space: nowrap;
    }

    .cases-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        flex: 1;
    }

    .cases-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1.25rem;
        border: 2px solid var(--color-gray-light);
        background: #ffffff;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-primary);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .cases-filter-btn:hover {
        border-color: var(--color-accent);
        background: rgba(234, 194, 110, 0.05);
    }

    .cases-filter-btn.active {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-primary);
    }

    .cases-filter-btn-icon {
        font-size: 1.1rem;
    }

    /* --- Список кейсов --- */
    .cases-list {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 3rem;
    }

    /* --- Карточка кейса --- */
    .case-card {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .case-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .case-card__inner {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        padding: 2.5rem;
        border: 1px solid var(--color-gray-light);
        box-shadow: var(--shadow-md);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .case-card__inner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .case-card:hover .case-card__inner {
        box-shadow: var(--shadow-xl);
        border-color: rgba(234, 194, 110, 0.3);
    }

    .case-card:hover .case-card__inner::before {
        opacity: 1;
    }

    /* Header */
    .case-card__header {
        margin-bottom: 1.5rem;
    }

    .case-card__category {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.9rem;
        background: rgba(234, 194, 110, 0.1);
        border-radius: 6px;
        margin-bottom: 1rem;
    }

    .case-card__category-icon {
        font-size: 1.2rem;
    }

    .case-card__category-text {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-accent-dark);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .case-card__title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-primary);
        margin: 0;
        line-height: 1.3;
        transition: color 0.3s ease;
    }

    .case-card:hover .case-card__title {
        color: var(--color-accent-dark);
    }

    /* Описание */
    .case-card__desc {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--color-gray);
        margin: 0 0 1.75rem 0;
    }

    /* Ситуация */
    .case-card__situation {
        padding: 1.25rem 1.5rem;
        background: var(--color-bg);
        border-radius: 10px;
        margin-bottom: 1.25rem;
    }

    .case-card__situation-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .case-card__situation-label svg {
        width: 18px;
        height: 18px;
    }

    .case-card__situation-text {
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--color-primary-light);
        margin: 0;
    }

    /* Результат */
    .case-card__result {
        padding: 1.25rem 1.5rem;
        background: rgba(234, 194, 110, 0.08);
        border-radius: 10px;
        border: 1px solid rgba(234, 194, 110, 0.2);
        margin-bottom: 1.25rem;
    }

    .case-card__result-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .case-card__result-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .case-card__result-label svg {
        width: 18px;
        height: 18px;
        color: #22c55e;
    }

    .case-card__result-badge {
        padding: 0.35rem 0.75rem;
        background: #22c55e;
        color: #ffffff;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .case-card__result-text {
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--color-primary);
        margin: 0;
        font-weight: 500;
    }

    /* Мета */
    .case-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--color-gray-light);
        margin-bottom: 1.5rem;
    }

    .case-card__meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--color-primary-light);
    }

    .case-card__meta-icon {
        width: 18px;
        height: 18px;
        color: var(--color-gray);
    }

    .case-card__meta-text {
        font-weight: 500;
    }

    .case-card__meta-item--sum {
        color: var(--color-accent-dark);
        font-weight: 600;
    }

    .case-card__meta-text--sum {
        color: var(--color-accent-dark);
        font-weight: 700;
    }

    /* Ссылка */
    .case-card__link {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--color-gray-light);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-primary);
        transition: color 0.3s ease;
    }

    .case-card__link svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .case-card:hover .case-card__link {
        color: var(--color-accent-dark);
    }

    .case-card:hover .case-card__link svg {
        transform: translateX(6px);
        color: var(--color-accent);
    }

    /* --- Анимации --- */
    .animate-on-scroll {
        opacity: 0;
        will-change: opacity, transform;
    }

    [data-animation="fade-up"] {
        transform: translateY(40px);
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-animation="slide-up"] {
        transform: translateY(40px);
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Адаптивность --- */
    @media (max-width: 1024px) {
        .cases-filters {
            flex-direction: column;
            align-items: flex-start;
        }

        .cases-filter-buttons {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .cases-section {
            padding: 4rem 1rem;
        }

        .cases-header {
            margin-bottom: 2.5rem;
        }

        .cases-title {
            font-size: 1.75rem;
        }

        .cases-desc {
            font-size: 1rem;
        }

        .cases-filters {
            padding: 1.25rem;
        }

        .cases-filter-label {
            width: 100%;
        }

        .cases-filter-btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }

        .case-card__inner {
            padding: 2rem 1.5rem;
        }

        .case-card__title {
            font-size: 1.3rem;
        }

        .case-card__result-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
    }

    @media (max-width: 480px) {
        .cases-section {
            padding: 3rem 0.75rem;
        }

        .cases-header {
            margin-bottom: 2rem;
        }

        .cases-subtitle {
            font-size: 0.65rem;
            letter-spacing: 2px;
        }

        .cases-title {
            font-size: 1.5rem;
        }

        .cases-filter-btn {
            padding: 0.5rem 0.75rem;
            font-size: 0.8rem;
        }

        .case-card__inner {
            padding: 1.5rem 1.25rem;
        }

        .case-card__meta {
            flex-direction: column;
            gap: 0.75rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .animate-on-scroll {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .case-card {
            opacity: 1;
            transform: none;
        }
    }
</style>

<script>
    // Анимации при скролле
    const observerOptions = {
        root: null,
        rootMargin: '0px 0px -50px 0px',
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target as HTMLElement;
                const delay = parseInt(el.dataset.delay || '0');

                setTimeout(() => {
                    el.classList.add('is-visible');
                }, delay);

                observer.unobserve(el);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.animate-on-scroll').forEach((el) => {
        observer.observe(el);
    });

    // Фильтрация кейсов
    const filterButtons = document.querySelectorAll('.cases-filter-btn') as NodeListOf<HTMLElement>;
    const caseCards = document.querySelectorAll('.case-card') as NodeListOf<HTMLElement>;

    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Обновляем активную кнопку
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            const filter = button.dataset.filter;

            // Фильтруем карточки
            caseCards.forEach(card => {
                const category = card.dataset.category;

                if (filter === 'all' || category === filter) {
                    card.style.display = 'block';
                    setTimeout(() => {
                        card.classList.add('is-visible');
                    }, 50);
                } else {
                    card.style.display = 'none';
                    card.classList.remove('is-visible');
                }
            });
        });
    });
</script>
