---
interface IncludeItem {
    icon: string;
    title: string;
    desc: string;
}

interface Props {
    includes?: IncludeItem[];
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { includes: includesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultIncludes: IncludeItem[] = [
    { icon: "📞", title: "Консультация 24/7", desc: "На связи в любое время, отвечаем на все вопросы" },
    { icon: "🚗", title: "Выезд на место остановки", desc: "Защита водителя при оформлении документов" },
    { icon: "📋", title: "Проверка законности действий", desc: "Контролируем правильность процедуры" },
    { icon: "📹", title: "Фиксация нарушений", desc: "Записываем все процессуальные ошибки инспектора" },
    { icon: "📝", title: "Проверка протокола", desc: "Анализируем правильность заполнения документов" },
    { icon: "✅", title: "Гарантия результата", desc: "Если защита не сработала — вернём деньги" }
];

const finalIncludes = includesProp || defaultIncludes;
const finalSectionLabel = sectionLabel || "Что входит";
const finalSectionTitle = sectionTitle || "Что входит в услугу";
const finalSectionDesc = sectionDesc || "Полный спектр защиты водителя до составления протокола";
---

<section class="includes-section" id="includes">
    <div class="includes-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="includes-grid">
            {finalIncludes.map((item, index) => (
                    <div class="include-item animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
                        <div class="include-icon">
                            <span style="font-size: 1.75rem;">{item.icon}</span>
                        </div>
                        <h4>{item.title}</h4>
                        <p>{item.desc}</p>
                    </div>
            ))}
        </div>
    </div>
</section>

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

    .includes-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;
    }

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

    .include-item {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.75rem;
        border: 1px solid #e2e8f0;
        text-align: center;
        transition: all 0.3s ease;
    }

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

    .include-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 1.25rem;
        background: linear-gradient(135deg, #0a2540, #1e3050);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eac26e;
    }

    .include-item h4 {
        color: #0a2540;
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
    }

    .include-item p {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
    }

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

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

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

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

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

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

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