---
interface Plan {
    badge: string;
    title: string;
    price: string;
    features: string[];
    btnText: string;
    btnClass: string;
    popular?: boolean;
}

interface Props {
    plans?: Plan[];
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { plans: plansProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultPlans: Plan[] = [
    { badge: "Базовый", title: "Телефонная консультация", price: "Бесплатно", features: ["Разбор вашей ситуации", "Рекомендации по поведению", "Оценка перспектив дела", "Консультация 24/7"], btnText: "Позвонить сейчас", btnClass: "" },
    { badge: "Популярный", title: "Выезд + защита на месте", price: "от 8 000 ₽", features: ["Выезд в течение 30 минут", "Защита при оформлении", "Проверка законности действий", "Фиксация нарушений", "Проверка протокола"], btnText: "Вызвать юриста", btnClass: "gold", popular: true },
    { badge: "Премиум", title: "Полное сопровождение", price: "от 15 000 ₽", features: ["Всё из популярного пакета", "Представительство в суде", "Обжалование решения", "Приоритетная поддержка", "Гарантия возврата"], btnText: "Обсудить дело", btnClass: "" }
];

const finalPlans = plansProp || defaultPlans;
const finalSectionLabel = sectionLabel || "Стоимость";
const finalSectionTitle = sectionTitle || "Сколько стоит защита водителя";
const finalSectionDesc = sectionDesc || "Прозрачные цены без скрытых платежей";
---

<section class="pricing-section" id="pricing">
    <div class="pricing-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="pricing-grid">
            {finalPlans.map((plan, index) => (
                    <div class={`pricing-card ${plan.popular ? 'featured' : ''} animate-on-scroll`} data-animation="fade-up" data-delay={100 + index * 100}>
                        <div class={`pricing-badge ${plan.popular ? 'popular' : ''}`}>{plan.badge}</div>
                        <h3>{plan.title}</h3>
                        <div class="price">
                            <span class="price-value">{plan.price}</span>
                        </div>
                        <ul class="pricing-features">
                            {plan.features.map(feature => <li>{feature}</li>)}
                        </ul>
                        <a href="#contact" class={`pricing-btn ${plan.btnClass}`}>{plan.btnText}</a>
                    </div>
            ))}
        </div>
    </div>
</section>

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

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

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .pricing-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 2.5rem 2rem;
        border: 1px solid #e2e8f0;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
    }

    .pricing-card:hover {
        border-color: rgba(234, 194, 110, 0.3);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
    }

    .pricing-card.featured {
        border-color: #eac26e;
        box-shadow: 0 12px 30px rgba(234, 194, 110, 0.2);
    }

    .pricing-badge {
        display: inline-block;
        padding: 0.4rem 1rem;
        background: rgba(10, 37, 64, 0.1);
        color: #0a2540;
        border-radius: 100px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 1.25rem;
    }

    .pricing-badge.popular {
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        color: #0a2540;
    }

    .pricing-card h3 {
        color: #0a2540;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 1rem 0;
    }

    .price {
        margin-bottom: 1.5rem;
    }

    .price-value {
        font-size: 2rem;
        font-weight: 800;
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .pricing-features {
        list-style: none;
        padding: 0;
        margin: 0 0 2rem 0;
        text-align: left;
    }

    .pricing-features li {
        padding: 0.5rem 0;
        color: #475569;
        font-size: 0.9rem;
        position: relative;
        padding-left: 1.5rem;
    }

    .pricing-features li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: #eac26e;
        font-weight: 700;
    }

    .pricing-btn {
        display: inline-block;
        padding: 0.875rem 2rem;
        background: linear-gradient(135deg, #0a2540, #1e3050);
        color: #eac26e;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        border: 1px solid rgba(234, 194, 110, 0.3);
    }

    .pricing-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(10, 37, 64, 0.3);
    }

    .pricing-btn.gold {
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        color: #0a2540;
        border: none;
    }

    .pricing-btn.gold:hover {
        box-shadow: 0 8px 20px rgba(234, 194, 110, 0.4);
    }

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

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

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

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

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

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

        .pricing-card.featured {
            order: -1;
        }

        .pricing-features {
            text-align: left;
        }
    }

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

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