@php
            $faqs = \App\Models\Backend\ContentArticle::with(['translations' => function($q) use ($lang) { $q->where('article_translation_language', $lang); }])->where('article_category', 'ARTICLE')->where('article_status', 'ACTIVE')->orderBy('article_sorting')->orderBy('created_at', 'desc')->get();
            $num = 1;
            @endphp
            @if($faqs->count())
            <section class="faq-section">
                <div class="container">
                    <div class="faq-header">
                        <span class="faq-badge">FAQ</span>
                        <h1 class="faq-title">Soalan Lazim</h1>
                        <p class="faq-subtitle">Cari jawapan kepada soalan-soalan yang sering ditanya.</p>
                    </div>
            
                    <div class="faq-list" id="faq-list">
                        @foreach($faqs as $faq)
                        @php $t = $faq->translations->first(); @endphp
                        @if($t)
                        <div class="faq-item">
                            <button class="faq-question" onclick="toggleFaq(this)">
                                <span class="faq-number">{{ $num }}</span>
                                <span class="faq-text">{{ $t->article_translation_title }}</span>
                                <span class="faq-icon">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </button>
                            <div class="faq-answer">
                                <div class="faq-answer-inner">
                                    {!! $t->article_translation_content !!}
                                </div>
                                <a href="/{{ $siteSlug }}/article-web?id={{ $faq->article_code }}" class="faq-readmore">Baca selengkapnya <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                        @php $num++; @endphp
                        @endif
                        @endforeach
                    </div>
                </div>
            </section>
            
            <style>
            .faq-section {
                padding: 60px 0 80px;
                background: var(--gray-50);
                min-height: 60vh;
            }
            .faq-header {
                text-align: center;
                margin-bottom: 50px;
            }
            .faq-badge {
                display: inline-block;
                background: var(--accent-light);
                color: var(--accent);
                padding: 6px 16px;
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
                margin-bottom: 16px;
            }
            .faq-title {
                font-size: 2rem;
                font-weight: 700;
                color: var(--gray-900);
                margin: 0 0 12px;
            }
            .faq-subtitle {
                color: var(--gray-400);
                font-size: 1rem;
                margin: 0;
            }
            .faq-list {
                max-width: 800px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .faq-item {
                background: var(--white);
                border-radius: 16px;
                border: 1px solid var(--gray-200);
                overflow: hidden;
                transition: box-shadow 0.3s;
            }
            .faq-item:hover {
                box-shadow: var(--shadow-lg);
            }
            .faq-question {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 20px 24px;
                background: none;
                border: none;
                cursor: pointer;
                text-align: left;
                font-size: 1rem;
                color: var(--gray-800);
                font-weight: 500;
                transition: background 0.2s;
                position: relative;
            }
            .faq-question:hover {
                background: var(--gray-50);
            }
            .faq-question.active {
                color: var(--primary);
            }
            .faq-number {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--gray-100);
                color: var(--gray-500);
                border-radius: 8px;
                font-size: 0.8rem;
                font-weight: 600;
                flex-shrink: 0;
            }
            .faq-question.active .faq-number {
                background: var(--primary);
                color: white;
            }
            .faq-text {
                flex: 1;
            }
            .faq-icon {
                flex-shrink: 0;
                color: var(--gray-400);
                transition: transform 0.3s;
            }
            .faq-question.active .faq-icon {
                transform: rotate(180deg);
                color: var(--primary);
            }
            .faq-answer {
                display: none;
                border-top: 1px solid var(--gray-100);
            }
            .faq-answer.open {
                display: block;
            }
            .faq-answer-inner {
                padding: 20px 24px 12px;
                color: var(--gray-600);
                font-size: 0.95rem;
                line-height: 1.8;
            }
            .faq-answer-inner p { margin-bottom: 1rem; }
            .faq-answer-inner ul, .faq-answer-inner ol { padding-left: 20px; margin-bottom: 1rem; }
            .faq-answer-inner li { margin-bottom: 6px; }
            .faq-readmore {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                margin: 0 24px 20px;
                color: var(--primary);
                font-size: 0.85rem;
                font-weight: 500;
                text-decoration: none;
                transition: gap 0.2s;
            }
            .faq-readmore:hover {
                gap: 10px;
                text-decoration: underline;
            }
            @media (max-width: 768px) {
                .faq-section { padding: 30px 0 50px; }
                .faq-title { font-size: 1.4rem; }
                .faq-question { padding: 16px 18px; font-size: 0.9rem; gap: 12px; }
                .faq-answer-inner { padding: 16px 18px 10px; font-size: 0.9rem; }
                .faq-number { width: 28px; height: 28px; font-size: 0.7rem; }
            }
            @media (max-width: 480px) {
                .faq-title { font-size: 1.2rem; }
                .faq-question { padding: 14px 16px; gap: 10px; }
            }
            </style>
            
            <script>
            function toggleFaq(btn) {
                var item = btn.parentElement;
                var answer = item.querySelector('.faq-answer');
                var isOpen = answer.classList.contains('open');
            
                document.querySelectorAll('#faq-list .faq-answer.open').forEach(function(el) {
                    el.classList.remove('open');
                });
                document.querySelectorAll('#faq-list .faq-question.active').forEach(function(el) {
                    el.classList.remove('active');
                });
            
                if (!isOpen) {
                    answer.classList.add('open');
                    btn.classList.add('active');
                }
            }
            </script>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;">
                <div class="container">
                    <i class="fas fa-question-circle" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i>
                    <h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Soalan Lazim</h2>
                    <p style="color:var(--gray-400);margin:10px 0 30px;">Tiada soalan lazim buat masa ini. Sila kembali semula kemudian.</p>
                    <a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;"><i class="fas fa-arrow-left"></i> Kembali ke Laman Utama</a>
                </div>
            </section>
            @endif