astro_avtourist/frontend/src/components/services/ArticlesList.astro

---
interface Article {
    icon: string;
    title: string;
    desc: string;
    chance: string;
}

interface Props {
    articles?: Article[];
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { articles: articlesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultArticles: Article[] = [
    { icon: "🍺", title: "Ст. 12.8 — Управление в состоянии опьянения", desc: "Оспариваем результаты освидетельствования, проверяем соблюдение процедуры медосвидетельствования.", chance: "Высокий шанс" },
    { icon: "🚫", title: "Ст. 12.26 — Отказ от медосвидетельствования", desc: "Анализируем законность требований о прохождении освидетельствования, ищем нарушения процедуры.", chance: "Высокий шанс" },
    { icon: "🚦", title: "Ст. 12.12 — Проезд на красный свет", desc: "Проверяем работу камер, анализируем материалы дела, ищем свидетелей.", chance: "Средний шанс" },
    { icon: "🔄", title: "Ст. 12.15 — Выезд на встречную полосу", desc: "Анализируем дорожную разметку, знаки, показания инспекторов.", chance: "Высокий шанс" },
    { icon: "🚗", title: "Ст. 12.27 — Оставление места ДТП", desc: "Доказываем отсутствие умысла или необходимость покинуть место по уважительной причине.", chance: "Средний шанс" },
    { icon: "⚠️", title: "Другие статьи", desc: "Работаем с любыми статьями КоАП — каждая ситуация индивидуальна и требует анализа.", chance: "Зависит от дела" }
];

const finalArticles = articlesProp || defaultArticles;
const finalSectionLabel = sectionLabel || "Работаем со статьями";
const finalSectionTitle = sectionTitle || "По каким статьям КоАП возвращаем права";
const finalSectionDesc = sectionDesc || "Оспариваем лишение по всем основным статьям КоАП РФ";
---

<section class="articles-section" id="articles">
    <div class="articles-section-inner">
        <div class="section-header animate-on-scroll" data-animation="fade-up">
            <span class="section-label center">{finalSectionLabel}</span>
            <h2>{finalSectionTitle}</h2>
            <p class="section-desc">{finalSectionDesc}</p>
        </div>
        <div class="articles-grid">
            {finalArticles.map((article, index) => (
                    <div class="article-card animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
                        <div class="article-icon">{article.icon}</div>
                        <h3>{article.title}</h3>
                        <p>{article.desc}</p>
                        <span class="article-chance">{article.chance}</span>
                    </div>
            ))}
        </div>
    </div>
</section>

<style>
    .articles-section {
        background: #ffffff;
        padding: 2.5rem 0;
    }

    .articles-section-inner {
        max-width: var(--site-max-width, 1400px);
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .section-header {
        text-align: center;
        margin-bottom: 2rem;
    }

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

    .section-label.center {
        display: flex;
        justify-content: center;
    }

    .section-header h2 {
        color: #0a2540;
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
        font-weight: 800;
        margin: 0 0 1rem 0;
        line-height: 1.2;
    }

    .section-desc {
        color: #64748b;
        font-size: 1.05rem;
        max-width: 650px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .articles-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .article-card {
        background: #f8fafc;
        border-radius: 12px;
        padding: 1.75rem;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .article-card:hover {
        border-color: rgba(234, 194, 110, 0.3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
    }

    .article-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .article-card h3 {
        color: #0a2540;
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0 0 0.75rem 0;
    }

    .article-card p {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .article-chance {
        display: inline-block;
        padding: 0.4rem 0.75rem;
        background: rgba(234, 194, 110, 0.1);
        color: #ce9f40;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    @media (max-width: 1024px) {
        .articles-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .articles-section {
            padding: 3.5rem 0;
        }

        .articles-section-inner {
            padding: 0 1rem;
        }

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

        .articles-grid {
            grid-template-columns: 1fr;
        }

        .article-card {
            text-align: center;
        }

        .article-icon {
            display: flex;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .articles-section {
            padding: 2.5rem 0;
        }

        .articles-section-inner {
            padding: 0 0.75rem;
        }
    }
</style>