@php
$faqs = [
    [
        'question' => 'What is an Off Plan property?',
        'answer' => 'The properties or communities that are to be developed or under the construction phase are referred to as Off Plan, whereas the ready properties are those where the building stage is finalised.'
    ],
    [
        'question' => 'What is the process of buying Off Plan in Dubai?',
        'answer' => 'You typically reserve the unit, pay a deposit, sign the SPA, and follow the developer\'s construction-linked payment plan.'
    ],
    [
        'question' => 'What options are there for an Off Plan payment plan?',
        'answer' => 'Most developers offer installment-based plans tied to construction milestones and a final payment on handover.'
    ],
    [
        'question' => 'What are the benefits of buying Off Plan property in Dubai?',
        'answer' => 'Lower prices, flexible payments, and potential for capital appreciation are key benefits.'
    ],
    [
        'question' => 'What is the difference between Off Plan and ready to move in Dubai?',
        'answer' => 'Off Plan properties are under development; ready properties are fully built and available for immediate use.'
    ]
];
@endphp

<style>
    .accordion-button {
        font-weight: 400;
        font-size: 16px !important;
        box-shadow: none;
        background-color: white;
        position: relative;
        padding-right: 2rem; /* space for icon */
    }

    .accordion-button::after {
        content: '+';
        position: absolute;
        right: 0;top: 15px;
        font-size: 16px !important;
        font-weight: 300;
        color: #999;
        transition: transform 0.3s ease, content 0.3s ease;
    }

    .accordion-button:not(.collapsed)::after {
        content: '–';top: 15px;
        transform: rotate(0deg);
    }

    .accordion-button:focus {
        border-color: transparent;
        box-shadow: none;
    }

    .accordion-body {
        font-size: 16px !important;
        color: #444;
        transition: all 0.3s ease;
    }

    .accordion-item {
        border: 0 !important;
    }

    .accordion-item:not(:first-child) {
        border-top: 1px solid #ddd !important;
    }

    .accordion-item:not(:last-child) {
        border-bottom: 0 !important;
    }
#faqAccordion .accordion-button:not(.collapsed) {
    font-size: 16px !important;
}
</style>

<div class="container my-5 text-left">
    <div class="row pt-20">
        <div class="col-12 col-sm-8 p-0">
            <p class="text-start pf fs-48 fw-400 pb-16 c-black">Got a question?</p>
            <p class="text-start fs-16 c-black lh-18 pb-20">
                We’ve got answers. Here are some of the questions we get from our clients.
            </p>
        </div>
    </div>

    <div class="accordion" id="faqAccordion">
        @foreach($faqs as $index => $faq)
            <div class="accordion-item @if($loop->first) pt-0 @endif">
                <div class="accordion-header fs-16 lh-16 p-0 m-0">
                    <button class="accordion-button collapsed bg-white px-0 fs-16 lh-16 m-0"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq{{ $index }}"
                            aria-expanded="false"
                            aria-controls="faq{{ $index }}">
                        {{ $faq['question'] }}
                    </button>
                </div>
                <div id="faq{{ $index }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body px-0 fs-16 lh-16 m-0">
                        {{ $faq['answer'] }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>