@props([
    'questions',
])

@if(count($questions))

    <div class="bg-gray-100 p-4 sm:px-8 md:px-20 md:py-16">
        <h3 class="leading-tight text-3xl font-bold text-primary-900">Useful information</h3>
        <div class="flex flex-col lg:flex-row border-t border-t-gray-200 gap-x-8 pt-8 mt-8 gap-y-6">

        @if(isset($questions[0]) && count($questions[0]))
            <div class="flex flex-col gap-6 w-full lg:w-[50%]">
                @foreach($questions[0] as $question => $answer)
                        <div class="flex items-start gap-3 box-border">
                            @svg('img/icons/question-mark-circle', 'text-gray-400 w-full max-w-[24px]')

                            <div>
                                <h4 class="leading-none text-xl font-bold text-gray-900">{{$question}}</h4>
                                <p class="text-base text-gray-800 mt-2">{{ $answer }}</p>
                            </div>
                        </div>
                @endforeach
            </div>
        @endif

        @if(isset($questions[1]) && count($questions[1]))
            <div class="flex flex-col gap-6 w-full lg:w-[50%]">
                @foreach($questions[1] as $question => $answer)
                        <div class="flex items-start gap-3 box-border">
                            @svg('img/icons/question-mark-circle', 'text-gray-400 w-full max-w-[24px]')

                            <div>
                                <h4 class="leading-none text-xl font-bold text-gray-900">{{$question}}</h4>
                                <p class="text-base text-gray-800 mt-2">{{ $answer }}</p>
                            </div>
                        </div>
                @endforeach
            </div>
        @endif

        </div>
    </div>

@endif