@extends('front.layout.app')
@section('title', 'Our Store')
@section('content')

    <section class="inner-banner">
        <img src="{{ $data->cmsImages('banner_image') ?? '' }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <h1>{{ $data->content['banner_heading'] ?? '' }}</h1>
            </div>
        </div>
    </section>

    <section class="faq-section padd-y pb-0">
        <div class="container">
            <div class="col-md-12" data-aos="fade-up">
                <div class="col-md-12">
                    <div id="accordion">
                        @foreach ($faqs as $index => $faq)
                            <div class="card">
                                <div id="heading{{ $index }}">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link {{ $index == 0 ? '' : 'collapsed' }}"
                                            data-toggle="collapse" data-target="#collapse{{ $index }}"
                                            aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ $index }}">
                                            <span></span>
                                            {{ $faq->heading }}
                                            <i class="fas fa-angle-up"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapse{{ $index }}" class="collapse {{ $index == 0 ? 'show' : '' }}"
                                    aria-labelledby="heading{{ $index }}" data-parent="#accordion">
                                    <div class="card-body">
                                        <p>
                                            {{ $faq->description }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('front.include.gallery')
@endsection