@php
    $faqs = $faqs ?? [];
@endphp

<section class="faq-section" id="faq-section" data-inner-faq>
    <div class="max-w-[1400px] mx-auto px-5 md:px-10 lg:px-16">
        <div class="faq-section__inner grid gap-8 border-t border-[rgba(31,52,67,0.12)] pt-10 lg:grid-cols-[minmax(0,0.78fr)_minmax(0,1.22fr)] lg:gap-16 lg:pt-14">
            <div class="lg:sticky lg:top-28 lg:self-start" data-faq-intro>
                <span class="featured-categories__kicker">FAQ</span>
                <h2 class="faq-section__headline mt-4">{{ $title ?? 'What B2B buyers usually ask before sampling starts.' }}</h2>
                <p class="faq-section__note mt-5">
                    {{ $note ?? 'A practical view of private-label product development and manufacturing conversations.' }}
                </p>
            </div>

            <div class="faq-list border-y border-[rgba(31,52,67,0.12)]" data-faq-list>
                @foreach ($faqs as $index => $faq)
                    <div class="faq-item{{ $index === 0 ? ' is-active' : '' }}" data-faq-item data-faq-index="{{ $index }}">
                        <button type="button" class="faq-item__trigger" data-faq-trigger aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="faq-panel-{{ $index }}" id="faq-trigger-{{ $index }}">
                            <span class="faq-item__index">{{ sprintf('%02d', $index + 1) }}</span>
                            <span class="faq-item__question">{{ $faq['question'] }}</span>
                            <span class="faq-item__icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none">
                                    <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                                </svg>
                            </span>
                        </button>

                        <div class="faq-item__panel" id="faq-panel-{{ $index }}" role="region" aria-labelledby="faq-trigger-{{ $index }}" data-faq-panel>
                            <div class="faq-item__panel-inner" data-faq-panel-inner>
                                <p class="faq-item__answer">{{ $faq['answer'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>