{{-- resources/views/customer/agency/sections/faq.blade.php --}}
<section class="faq-section" style="background: white;">
    <div class="container" style="max-width: 900px;">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 4rem;">
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: #111827;">
                        {{ $section->title }}
                    </h2>
                @endif

                @if($section->content)
                    <p style="font-size: 1.125rem; color: #6B7280; margin-top: 1rem;">
                        {{ $section->content }}
                    </p>
                @endif
            </div>
        @endif

        @php
            $faqs = $section->getConfig('faqs', [
                ['question' => 'Rezervasyon iptali nasıl yapılır?', 'answer' => 'Rezervasyon iptallerinizi, tur tarihinden en az 7 gün önce yapmanız halinde ücret iadesi yapılmaktadır. İptal talebinizi telefon veya e-posta yoluyla iletebilirsiniz.'],
                ['question' => 'Ödeme seçenekleri nelerdir?', 'answer' => 'Kredi kartı, havale/EFT ve taksitli ödeme seçenekleri mevcuttur. Tüm ödemeleriniz SSL sertifikalı güvenli ödeme altyapımız üzerinden gerçekleştirilir.'],
                ['question' => 'Çocuklar için indirim var mı?', 'answer' => '2-12 yaş arası çocuklar için %30 indirim uygulanmaktadır. 2 yaş altı bebekler için ücret alınmamaktadır.'],
                ['question' => 'Turlara rehber eşlik ediyor mu?', 'answer' => 'Evet, tüm turlarımızda profesyonel ve deneyimli rehberlerimiz sizlere eşlik etmektedir. Rehberlerimiz seyahatiniz boyunca size yardımcı olacaktır.'],
                ['question' => 'Sigorta dahil mi?', 'answer' => 'Tüm turlarımızda seyahat sağlık sigortası ve kaza sigortası dahildir. Ek olarak iptal sigortası da satın alabilirsiniz.']
            ]);
        @endphp

        <div style="display: flex; flex-direction: column; gap: 1rem;">
            @foreach($faqs as $index => $faq)
                <div
                    style="background: #F9FAFB; border-radius: 16px; overflow: hidden; border: 2px solid transparent; transition: all 0.3s;">
                    <div onclick="toggleFaq{{ $section->id }}({{ $index }})"
                         style="padding: 1.75rem 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s;">
                        <h3 style="font-size: 1.125rem; font-weight: 700; color: #111827; margin: 0; flex: 1;">
                            {{ $faq['question'] }}
                        </h3>
                        <i class="fas fa-chevron-down" id="icon{{ $section->id }}_{{ $index }}"
                           style="color: var(--primary); font-size: 1.25rem; transition: transform 0.3s;"></i>
                    </div>
                    <div id="answer{{ $section->id }}_{{ $index }}"
                         style="max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;">
                        <div
                            style="padding: 0 2rem 1.75rem 2rem; color: #6B7280; line-height: 1.8; font-size: 1.063rem;">
                            {{ $faq['answer'] }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        @if($section->getConfig('show_contact_cta', true))
            <div
                style="text-align: center; margin-top: 4rem; padding: 3rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 24px;">
                <h3 style="color: white; font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem;">
                    Başka Sorularınız mı Var?
                </h3>
                <p style="color: rgba(255,255,255,0.9); font-size: 1.125rem; margin-bottom: 2rem;">
                    Merak ettikleriniz için bize ulaşın, size yardımcı olmaktan mutluluk duyarız.
                </p>
                <a href="#contact"
                   style="background: white; color: var(--primary); padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.2s;">
                    Bize Ulaşın
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        @endif
    </div>
</section>

<script>
    function toggleFaq{{ $section->id }}(index) {
        const answer = document.getElementById('answer{{ $section->id }}_' + index);
        const icon = document.getElementById('icon{{ $section->id }}_' + index);

        if (answer.style.maxHeight && answer.style.maxHeight !== '0px') {
            answer.style.maxHeight = '0px';
            icon.style.transform = 'rotate(0deg)';
        } else {
            answer.style.maxHeight = answer.scrollHeight + 'px';
            icon.style.transform = 'rotate(180deg)';
        }
    }
</script>

<style>
    .faq-section > .container > div:last-child > div:hover {
        border-color: var(--primary);
        background: white;
    }

    .faq-section a:hover {
        transform: scale(1.05);
    }
</style>