---
interface Advantage {
    number: string;
    title: string;
    desc: string;
}

interface Props {
    advantages?: Advantage[];
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { advantages: advantagesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultAdvantages: Advantage[] = [
    { number: "01", title: "Оперативный выезд", desc: "Выезжаем на место в течение 30 минут. Защищаем водителя с первой минуты остановки." },
    { number: "02", title: "85% дел прекращено", desc: "Большинство дел закрываются благодаря грамотной защите на раннем этапе." },
    { number: "03", title: "Бесплатная консультация", desc: "Первичная консультация бесплатно. Объясним, как вести себя при остановке инспектором." },
    { number: "04", title: "Работа без предоплаты", desc: "Оплата только после результата. Мы уверены в эффективности ранней защиты." },
    { number: "05", title: "Полное сопровождение", desc: "Берём на себя весь процесс — от консультации при остановке до прекращения дела." },
    { number: "06", title: "Связь 24/7", desc: "На связи в любое время. Оперативно выезжаем на место при звонке клиента." }
];

const finalAdvantages = advantagesProp || defaultAdvantages;
const finalSectionLabel = sectionLabel || "Почему мы";
const finalSectionTitle = sectionTitle || "Преимущества работы с нами";
const finalSectionDesc = sectionDesc || "Защита ваших прав с первой минуты остановки";
---

<section class="advantages-section" id="advantages">
    <div class="advantages-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="advantages-grid">
            {finalAdvantages.map((adv, index) => (
                    <div class="advantage-card animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
                        <div class="advantage-number">{adv.number}</div>
                        <h3>{adv.title}</h3>
                        <p>{adv.desc}</p>
                    </div>
            ))}
        </div>
    </div>
</section>

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

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

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

    .advantage-card {
        background: linear-gradient(135deg, #0a2540, #1e3050);
        border-radius: 12px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .advantage-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(10, 37, 64, 0.3);
    }

    .advantage-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: rgba(234, 194, 110, 0.1);
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

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

    .advantage-card p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 0;
    }

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

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

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

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

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

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

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