---
interface Props {
    tabsData?: {
        problem: {
            title: string;
            description: string;
            description2: string;
            items: string[];
            visualNumber: string;
            visualLabel: string;
            visualNote: string;
            barWidth: number;
        };
        approach: {
            title: string;
            description: string;
            description2: string;
            items: Array<{ icon: string; title: string; desc: string }>;
            steps: string[];
        };
        stats: {
            bigStat: { number: number; label: string; barWidth: number };
            stats: Array<{ number: number; label: string; suffix: string }>;
        };
        guarantees: {
            title: string;
            description: string;
            description2: string;
            items: Array<{ title: string; desc: string }>;
        };
    };
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { tabsData: tabsDataProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultProps = {
    sectionLabel: "Подробнее об услуге",
    sectionTitle: "Защита водителей до составления протокола",
    sectionDesc: "Полная информация о юридической помощи на ранних этапах"
};

const finalSectionLabel = sectionLabel || defaultProps.sectionLabel;
const finalSectionTitle = sectionTitle || defaultProps.sectionTitle;
const finalSectionDesc = sectionDesc || defaultProps.sectionDesc;

const defaultTabsData = {
    problem: {
        title: "Остановка инспектором — критически важный момент",
        description: "Большинство водителей <strong>теряют свои права</strong> именно на этапе остановки и общения с инспектором до начала оформления протокола. В этот момент важно <strong>знать свои права</strong> и фиксировать любые нарушения.",
        description2: "Инспекторы часто допускают нарушения: не разъясняют права, проводят освидетельствование без понятых, не предоставляют информацию о порядке обжалования. <strong>Чем раньше подключится юрист — тем больше шансов на успех</strong>.",
        items: [
            "Нарушение процедуры остановки и освидетельствования",
            "Отсутствие понятых или видеофиксации",
            "Не разъяснены права водителя"
        ],
        visualNumber: "70%",
        visualLabel: "дел проиграны из-за ошибок на старте",
        visualNote: "При грамотной защите на этапе — до 85% дел закрываются",
        barWidth: 70
    },
    approach: {
        title: "Оперативная защита с первой минуты",
        description: "Мы обеспечиваем <strong>юридическое сопровождение</strong> с момента остановки инспектором. Контролируем каждый шаг: законность требований, порядок освидетельствования, правильность заполнения документов.",
        description2: "Наша задача — <strong>не допустить нарушений</strong> ещё на этапе оформления. Если протокол составлен с ошибками — это основание для прекращения дела.",
        items: [
            { icon: "📞", title: "Консультация по телефону", desc: "Правильное поведение при остановке" },
            { icon: "🚗", title: "Выезд на место", desc: "Защита при оформлении" },
            { icon: "📋", title: "Проверка протокола", desc: "Фиксация ошибок и нарушений" }
        ],
        steps: ["Звонок юристу", "Консультация", "Выезд на место", "Проверка протокола", "Прекращение дела"]
    },
    stats: {
        bigStat: { number: 85, label: "Дел прекращено на ранних этапах", barWidth: 85 },
        stats: [
            { number: 400, label: "Водителей защищены", suffix: "+" },
            { number: 12, label: "Лет практики", suffix: "" },
            { number: 30, label: "Минут — среднее время выезда", suffix: " мин" },
            { number: 100, label: "Возврат денег при неудаче", suffix: "%" }
        ]
    },
    guarantees: {
        title: "Работаем на результат",
        description: "Мы берёмся только за дела с <strong>реальными перспективами</strong>. Если защита на раннем этапе не помогла — мы вернём <strong>оплату за услугу</strong>.",
        description2: "Если протокол составлен без нарушений — мы честно скажем об этом <strong>на первой консультации</strong> и предложим стратегию защиты на следующих этапах.",
        items: [
            { title: "Бесплатная оценка", desc: "Честный анализ перспектив дела на консультации" },
            { title: "Возврат денег", desc: "Если защита не сработала — вернём оплату" },
            { title: "Договор", desc: "Официальный договор с прописанными условиями" },
            { title: "Оперативность", desc: "Выезд на место в течение 30 минут" }
        ]
    }
};

const finalTabsData = tabsDataProp || defaultTabsData;
---

<section class="about-section" id="about">
    <div class="about-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="tabs-container animate-on-scroll" data-animation="fade-up" data-delay="200">
            <div class="tabs-nav" role="tablist">
                <button class="tab-btn active" role="tab" data-tab="problem" aria-selected="true">
                    <span class="tab-icon">⚖️</span>
                    <span class="tab-text">О проблеме</span>
                </button>
                <button class="tab-btn" role="tab" data-tab="approach" aria-selected="false">
                    <span class="tab-icon">🎯</span>
                    <span class="tab-text">Наш подход</span>
                </button>
                <button class="tab-btn" role="tab" data-tab="stats" aria-selected="false">
                    <span class="tab-icon">📊</span>
                    <span class="tab-text">Статистика</span>
                </button>
                <button class="tab-btn" role="tab" data-tab="guarantees" aria-selected="false">
                    <span class="tab-icon">🛡️</span>
                    <span class="tab-text">Гарантии</span>
                </button>
            </div>

            <div class="tabs-content">
                <!-- Таб 1: О проблеме -->
                <div class="tab-panel active" id="tab-problem" role="tabpanel">
                    <div class="tab-grid">
                        <div class="tab-text">
                            <h3>{finalTabsData.problem.title}</h3>
                            <p set:html={finalTabsData.problem.description}></p>
                            <p set:html={finalTabsData.problem.description2}></p>
                            <div class="problem-list">
                                {finalTabsData.problem.items.map(item => (
                                        <div class="problem-item">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                            <span>{item}</span>
                                        </div>
                                ))}
                            </div>
                        </div>
                        <div class="tab-visual">
                            <div class="visual-card">
                                <div class="visual-number">{finalTabsData.problem.visualNumber}</div>
                                <div class="visual-label">{finalTabsData.problem.visualLabel}</div>
                                <div class="visual-bar">
                                    <div class="visual-bar-fill" style={`width: ${finalTabsData.problem.barWidth}%`}></div>
                                </div>
                                <div class="visual-note">{finalTabsData.problem.visualNote}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Таб 2: Наш подход -->
                <div class="tab-panel" id="tab-approach" role="tabpanel">
                    <div class="tab-grid">
                        <div class="tab-text">
                            <h3>{finalTabsData.approach.title}</h3>
                            <p set:html={finalTabsData.approach.description}></p>
                            <p set:html={finalTabsData.approach.description2}></p>
                            <div class="approach-list">
                                {finalTabsData.approach.items.map(item => (
                                        <div class="approach-item">
                                            <div class="approach-icon">{item.icon}</div>
                                            <div class="approach-info">
                                                <strong>{item.title}</strong>
                                                <span>{item.desc}</span>
                                            </div>
                                        </div>
                                ))}
                            </div>
                        </div>
                        <div class="tab-visual">
                            <div class="visual-card">
                                <div class="steps-mini">
                                    {finalTabsData.approach.steps.map((step, index) => (
                                            <div class={`step-mini ${index === 0 ? 'active' : ''}`}>
                                                <span class="step-mini-num">{index + 1}</span>
                                                <span>{step}</span>
                                            </div>
                                    ))}
                                </div>
                                <div class="visual-note">5 этапов до возврата ваших прав</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Таб 3: Статистика -->
                <div class="tab-panel" id="tab-stats" role="tabpanel">
                    <div class="stats-grid">
                        <div class="stat-big-card">
                            <div class="stat-big-number" data-count={finalTabsData.stats.bigStat.number}>0%</div>
                            <div class="stat-big-label">{finalTabsData.stats.bigStat.label}</div>
                            <div class="stat-bar">
                                <div class="stat-bar-fill" data-width={finalTabsData.stats.bigStat.barWidth}></div>
                            </div>
                        </div>
                        {finalTabsData.stats.stats.map(stat => (
                                <div class="stat-card">
                                    <div class="stat-number" data-count={stat.number}>0{stat.suffix}</div>
                                    <div class="stat-label">{stat.label}</div>
                                </div>
                        ))}
                    </div>
                </div>

                <!-- Таб 4: Гарантии -->
                <div class="tab-panel" id="tab-guarantees" role="tabpanel">
                    <div class="tab-grid">
                        <div class="tab-text">
                            <h3>{finalTabsData.guarantees.title}</h3>
                            <p set:html={finalTabsData.guarantees.description}></p>
                            <p set:html={finalTabsData.guarantees.description2}></p>
                            <div class="guarantees-list">
                                {finalTabsData.guarantees.items.map(item => (
                                        <div class="guarantee-item">
                                            <div class="guarantee-check">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                                            </div>
                                            <div>
                                                <strong>{item.title}</strong>
                                                <span>{item.desc}</span>
                                            </div>
                                        </div>
                                ))}
                            </div>
                        </div>
                        <div class="tab-visual">
                            <div class="visual-card guarantee-card">
                                <div class="guarantee-shield">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                        <path d="m9 12 2 2 4-4"/>
                                    </svg>
                                </div>
                                <div class="guarantee-text">100% гарантия возврата оплаты</div>
                                <div class="guarantee-subtext">при неудачном исходе дела</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

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

    .tabs-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .tabs-nav {
        display: flex;
        gap: 0.5rem;
        background: #ffffff;
        padding: 0.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.25rem;
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .tab-btn:hover {
        background: rgba(234, 194, 110, 0.1);
        color: #0a2540;
    }

    .tab-btn.active {
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        color: #0a2540;
        box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
    }

    .tab-icon {
        font-size: 1.25rem;
    }

    .tabs-container {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    .tabs-content {
        background: #ffffff;
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .tab-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2.5rem;
        align-items: start;
    }

    .tab-panel {
        display: none;
        width: 100%;
        max-width: 100%;
    }

    .tab-panel.active {
        display: block;
    }

    .tab-text {
        white-space: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }

    .tab-text h3 {
        color: #0a2540;
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
        font-weight: 800;
        margin: 0 0 1.25rem 0;
        line-height: 1.3;
    }

    .tab-text p {
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .tab-text strong {
        color: #0a2540;
        font-weight: 700;
    }

    .problem-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .problem-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: #f8fafc;
        border-radius: 8px;
        color: #0a2540;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .problem-item svg {
        width: 20px;
        height: 20px;
        color: #eac26e;
        flex-shrink: 0;
    }

    .tab-visual {
        max-width: 100%;
    }

    .visual-card {
        background: linear-gradient(135deg, #0a2540, #1e3050);
        border-radius: 12px;
        padding: 2rem;
        color: #ffffff;
    }

    .visual-number {
        font-size: 3rem;
        font-weight: 900;
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
        margin-bottom: 0.75rem;
    }

    .visual-label {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 1.5rem;
    }

    .visual-bar {
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .visual-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #eac26e, #ce9f40);
        border-radius: 4px;
        transition: width 1s ease;
    }

    .visual-note {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .approach-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .approach-item {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .approach-icon {
        font-size: 1.75rem;
        flex-shrink: 0;
    }

    .approach-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .approach-info strong {
        color: #0a2540;
        font-size: 0.95rem;
    }

    .approach-info span {
        color: #64748b;
        font-size: 0.85rem;
    }

    .steps-mini {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .step-mini {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
    }

    .step-mini-num {
        width: 32px;
        height: 32px;
        background: rgba(234, 194, 110, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #eac26e;
        flex-shrink: 0;
    }

    .step-mini.active .step-mini-num {
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        color: #0a2540;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .stat-big-card {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, #0a2540, #1e3050);
        border-radius: 12px;
        padding: 2.5rem;
        text-align: center;
    }

    .stat-big-number {
        font-size: 4rem;
        font-weight: 900;
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
        margin-bottom: 0.5rem;
    }

    .stat-big-label {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 1.5rem;
    }

    .stat-bar {
        height: 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        overflow: hidden;
    }

    .stat-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #eac26e, #ce9f40);
        border-radius: 6px;
        transition: width 1.5s ease;
        width: 0%;
    }

    .stat-card {
        background: #f8fafc;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 800;
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
        margin-bottom: 0.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
        color: #64748b;
    }

    .guarantees-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .guarantee-item {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .guarantee-check {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #eac26e, #ce9f40);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .guarantee-check svg {
        width: 18px;
        height: 18px;
        color: #0a2540;
    }

    .guarantee-item strong {
        display: block;
        color: #0a2540;
        font-size: 0.95rem;
        margin-bottom: 0.15rem;
    }

    .guarantee-item span {
        color: #64748b;
        font-size: 0.85rem;
    }

    .guarantee-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 280px;
    }

    .guarantee-shield {
        width: 80px;
        height: 80px;
        background: rgba(234, 194, 110, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    .guarantee-shield svg {
        width: 40px;
        height: 40px;
        color: #eac26e;
    }

    .guarantee-text {
        font-size: 1.25rem;
        font-weight: 800;
        color: #eac26e;
        margin-bottom: 0.5rem;
    }

    .guarantee-subtext {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
    }

    @media (max-width: 1024px) {
        .tab-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .tabs-content {
            padding: 2rem;
        }
    }

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

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

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

        .tabs-nav {
            flex-direction: column;
            gap: 0.35rem;
        }

        .tab-btn {
            justify-content: flex-start;
            padding: 0.75rem 1rem;
        }

        .tabs-content {
            padding: 1.5rem;
        }

        .tab-grid {
            gap: 1.5rem;
        }

        .tab-text h3 {
            font-size: 1.25rem;
        }

        .stat-big-number {
            font-size: 3rem;
        }

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

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

        .about-section-inner {
            padding: 0 0.75rem;
        }

        .tabs-content {
            padding: 1.25rem;
        }

        .tab-text h3 {
            font-size: 1.1rem;
        }

        .tab-text p {
            font-size: 0.9rem;
        }
    }
</style>