@php
    $questions = [
        [
            'id' => 1,
            'question' => 'What is the purpose of the website?',
            'answer' =>
                'The website serves as a platform to showcase the company\'s services, products, and information. It provides visitors with an overview of the company\'s offerings and allows them to learn more about its mission, values, and team.',
        ],
        [
            'id' => 2,
            'question' => 'How can I contact the company?',
            'answer' =>
                'You can contact the company by visiting the "Contact" page on the website. There, you will find contact information such as email address, phone number, and office location.',
        ],
        [
            'id' => 3,
            'question' => 'What services does the company offer?',
            'answer' =>
                'The company offers a range of services, including web development, software solutions, graphic design, and more. You can explore the services by visiting the "Services" page on the website.',
        ],
        [
            'id' => 4,
            'question' => 'How can I get in touch with the company?',
            'answer' =>
                'You can get in touch with the company by visiting the "Contact" page on the website. There, you will find contact information such as email address, phone number, and office location.',
        ],
        [
            'id' => 5,
            'question' => 'What is the purpose of the website?',
            'answer' =>
                'The purpose of the website is to provide visitors with information about the company\'s services, products, and mission. It serves as a platform to showcase the company\'s offerings and allows visitors to learn more about its mission, values, and team.',
        ],
    ];
@endphp

<x-atoms.container id="faqs" as="section" class="mt-28 scroll-mt-32">
    <span class="flex w-max text-sm text-gray-600 items-center mx-auto text-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="mr-2 size-4"
            viewBox="0 0 256 256">
            <path
                d="M232,120h-8.34A96.14,96.14,0,0,0,136,32.34V24a8,8,0,0,0-16,0v8.34A96.14,96.14,0,0,0,32.34,120H24a8,8,0,0,0,0,16h8.34A96.14,96.14,0,0,0,120,223.66V232a8,8,0,0,0,16,0v-8.34A96.14,96.14,0,0,0,223.66,136H232a8,8,0,0,0,0-16Zm-96,87.6V200a8,8,0,0,0-16,0v7.6A80.15,80.15,0,0,1,48.4,136H56a8,8,0,0,0,0-16H48.4A80.15,80.15,0,0,1,120,48.4V56a8,8,0,0,0,16,0V48.4A80.15,80.15,0,0,1,207.6,120H200a8,8,0,0,0,0,16h7.6A80.15,80.15,0,0,1,136,207.6ZM128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Z">
            </path>
        </svg>
        F.a.q
    </span>
    <h2 class="mt-6 text-gray-900 text-2xl md:text-3xl lg:text-4xl font-semibold lg:mt-8 mx-auto max-w-2xl text-center">
        Frequently Asked Questions
    </h2>
    <div class="mt-16 flex flex-col gap-8 max-w-2xl mx-auto w-full">
        @foreach ($questions as $question)
            <div wire:key="question-{{ $question['id'] }}" class="flex items-start gap-4">
                <div class="size-10 border border-gray-200/50 bg-white flex items-center justify-center rounded-lg mt-0.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-5"
                        viewBox="0 0 256 256">
                        <path
                            d="M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86ZM62,159.5a8.28,8.28,0,0,0-2.26.32L32,168l8.17-27.76a8,8,0,0,0-.63-6,64,64,0,1,1,26.26,26.26A8,8,0,0,0,62,159.5Zm153.79,28.73L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z">
                        </path>
                    </svg>
                </div>
                <div class="flex-1 flex flex-col">
                    <h3 class="font-semibold text-gray-800 flex-1 pt-2">
                        {{ $question['question'] }}
                    </h3>
                    <p class="mt-4 text-gray-700 sm:text-balance text-sm sm:text-base">
                        {{ $question['answer'] }}
                    </p>
                </div>
            </div>
        @endforeach
    </div>
</x-atoms.container>