@php
    $faqInfo = $sectionData->where('section', 'faq')->first();
    $faqInfo = (!empty($faqInfo->content) ? json_decode($faqInfo->content) : '');
@endphp

@if (!empty($faq) && $faq->isNotEmpty())
<section class="py-13 md:py-18 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid gap-12 lg:grid-cols-2 lg:gap-16 items-start">
            {{-- Left Column: Title & Subtitle --}}
            <div class="flex flex-col items-center lg:items-start text-center lg:text-left" data-aos="fade-right" data-aos-duration="1000">
                <span class="mb-4 rounded-full bg-purple-100 dark:bg-purple-900 px-4 py-1.5 text-sm font-semibold uppercase text-purple-600 dark:text-purple-400">
                    {{ !empty($faqInfo->subtitle) ? $faqInfo->subtitle : 'Frequently Asked Questions' }}
                </span>
                <h2 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white mt-2">
                    {{ !empty($faqInfo->title) ? $faqInfo->title : 'Got Questions? We Have Answers.' }}
                </h2>
                <p class="mt-4 text-lg text-gray-600 dark:text-gray-400 max-w-xl">
                    Find quick and easy answers to the most common questions about our services. If you can't find what you're looking for, please reach out to us directly.
                </p>
                <a href="https://gplinkbuilder.com/contact"
                    class="mt-8 relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gray-800 dark:bg-gray-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:bg-gray-700 dark:hover:bg-gray-600">
                    <span class="relative z-10">Contact Us</span>
                    <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span>
                </a>
            </div>

            {{-- Right Column: Animated Accordion --}}
            <div class="space-y-6" data-aos="fade-left" data-aos-duration="1000">
                @foreach ($faq as $key => $row)
                <div class="group overflow-hidden rounded-xl bg-white dark:bg-gray-800 transition-all duration-300 shadow-lg border border-gray-200 dark:border-gray-700">
                    <input class="hidden peer" type="radio" name="faqAccordion" id="faqAccordionHeading-{{ $key + 1 }}" {{ $loop->index == 0 ? 'checked' : '' }} />
                    <label for="faqAccordionHeading-{{ $key + 1 }}" class="flex cursor-pointer items-center justify-between px-6 py-5 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-100 transition-colors duration-200">
                            {{ !empty($row->title) ? $row->title : 'Question Title' }}
                        </span>
                        <div class="ml-4 flex h-8 w-8 shrink-0 items-center justify-center text-gray-500 dark:text-gray-400 transition-transform duration-300 group-hover:rotate-180 peer-checked:rotate-180">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </div>
                    </label>
                    <div class="max-h-0 overflow-hidden duration-500 ease-in-out peer-checked:max-h-screen">
                        <div class="px-6 pb-6 text-base text-gray-600 dark:text-gray-400">
                            {!! !empty($row->description) ? $row->description : 'Answer content goes here.' !!}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif