---
interface FAQ {
    question: string;
    answer: string;
}

interface Props {
    faqs?: FAQ[];
    sectionLabel?: string;
    sectionTitle?: string;
    sectionDesc?: string;
}

const { faqs: faqsProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;

const defaultFAQs: FAQ[] = [
    { question: "Что делать, если меня остановил инспектор?", answer: "Сразу <strong>позвоните нам</strong>. Мы объясним, как правильно себя вести, что можно и нельзя говорить. Не подписывайте документы без консультации с юристом." },
    { question: "Как быстро вы можете выехать на место?", answer: "Наш специалист выезжает в течение <strong>30 минут</strong> после звонка. Мы работаем по всему Сургуту и пригороду." },
    { question: "Можно ли прекратить дело до суда?", answer: "Да, если протокол составлен с <strong>процессуальными нарушениями</strong> — это основание для прекращения дела. В 85% случаев дело закрывается на раннем этапе." },
    { question: "Какие гарантии результата?", answer: "Мы работаем <strong>без предоплаты</strong> — оплата только после результата. Если защита не сработала — вернём деньги за услугу." },
    { question: "Нужно ли моё присутствие при оформлении?", answer: "<strong>Да</strong>, вы должны быть на месте. Но с нашим юристом вы будете защищены — мы контролируем каждый шаг инспектора." },
    { question: "Что если я уже подписал протокол?", answer: "Даже если вы подписали протокол, мы можем <strong>оспорить его</strong> при наличии процессуальных нарушений. Звоните — разберёмся в ситуации." }
];

const finalFAQs = faqsProp || defaultFAQs;
const finalSectionLabel = sectionLabel || "Вопросы";
const finalSectionTitle = sectionTitle || "Частые вопросы";
const finalSectionDesc = sectionDesc || "Ответы на популярные вопросы о защите водителей";
---

<section class="faq-section" id="faq">
    <div class="faq-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="faq-list">
            {finalFAQs.map((faq, index) => (
                    <details class="faq-item animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
                        <summary>
                            <span class="faq-question">{faq.question}</span>
                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </summary>
                        <div class="faq-answer">
                            <p set:html={faq.answer}></p>
                        </div>
                    </details>
            ))}
        </div>
    </div>
</section>

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

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

    .faq-list {
        max-width: 800px;
        margin: 0 auto;
    }

    .faq-item {
        border-bottom: 1px solid #e2e8f0;
    }

    .faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.5rem 0;
        cursor: pointer;
        list-style: none;
    }

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-question {
        color: #0a2540;
        font-size: 1.05rem;
        font-weight: 600;
        flex: 1;
    }

    .faq-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: #eac26e;
        transition: transform 0.3s ease;
    }

    .faq-item[open] .faq-icon {
        transform: rotate(180deg);
    }

    .faq-answer {
        padding: 0 0 1.5rem 0;
    }

    .faq-answer p {
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.7;
        margin: 0;
    }

    .faq-answer strong {
        color: #0a2540;
    }

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

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

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

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

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