<div class="">
    <!-- /header -->
    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
        data-image-src="{{ asset('assets/images/bg/bg22.png') }}">
        <div class="container pt-16 pt-md-18 pb-9">
            <div class="row gx-0 gy-10 align-items-center text-center text-lg-start">
                <div class="col-lg-6 col-xxl-5 position-relative" data-cues="slideInDown" data-group="page-title"
                    data-delay="700">
                    <img src="{{ asset('assets/images/svg/doodle1.svg') }}"
                        class="h-9 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
                        style="top: -9%; left: -6%" alt="doodle 1">
                    <img src="{{ asset('assets/images/svg/doodle2.svg') }}"
                        class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
                        style="bottom: 9%; right: -22%" alt="doodle 2">
                    <h1 class="display-1 fs-50 mb-4">Temukan
                        <span class="text-gradient gradient-7">aroma terbaik</span>
                        yang mencerminkan kepribadianmu.
                    </h1>
                    <p class="lead fs-24 lh-sm mb-7">
                        Koleksi parfum eksklusif kami kini tersedia untuk dibeli secara
                        online dan di toko resmi kami.</p>
                    <div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown"
                        data-group="page-title-buttons" data-delay="1800">
                        <span>
                            <a class="btn btn-lg btn-primary rounded-xl mx-1">Belanja</a>
                        </span>
                        <span>
                            <a class="btn btn-lg btn-outline-fuchsia rounded-xl mx-1">Tanya Ahli</a>
                        </span>
                    </div>
                </div>
                <div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
                    <figure>
                        <img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
                    </figure>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <div class="overflow-hidden" style="z-index:1;">
            <div class="divider text-light mx-n2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                    <g fill="currentColor">
                        <polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
                    </g>
                </svg>
            </div>
        </div>
    </section>
    <section class="wrapper bg-light">
        <div class="container pt-18 pt-md-20 pb-14 pb-md-16">
            <div class="row text-center">
                <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto position-relative">
                    <img src="{{ asset('assets/images/svg/doodle3.svg') }}"
                        class="h-11 position-absolute d-none d-lg-block" style="top: -45%; left: 23%" alt="">
                    <img src="{{ asset('assets/images/svg/doodle4.svg') }}"
                        class="h-8 position-absolute d-none d-lg-block" style="top: 6%; right: 2%" alt="">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">Merek</h2>
                    <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami menghadirkan beberapa <span
                            class="text-gradient gradient-7">merek terkenal</span> terkenal.</h3>
                </div>
            </div>
            <div class="row mb-20">
                <div class="col-xxl-11 mx-auto">
                    <div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-loop="true"
                        data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000"
                        data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
                        <div class="swiper">
                            <div class="swiper-wrapper ticker">
                                @foreach ($brands as $brand)
                                    <div class="swiper-slide px-5">
                                        <img src="{{ $brand['image'] }}" alt="{{ $brand['name'] }}" />
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-10 col-lg-7 mx-auto position-relative">
                    <img src="{{ asset('assets/images/svg/doodle5.svg') }}"
                        class="w-15 position-absolute d-none d-lg-block" data-delay="1800"
                        style="bottom: -60%; right: 10%" alt="">
                    <img src="{{ asset('assets/images/svg/doodle6.svg') }}"
                        class="h-15 position-absolute d-none d-lg-block" data-delay="1800" style="top: -40%; left: -5%"
                        alt="">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
                    <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
                            class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
                        setiap hari.</h3>
                </div>
            </div>
            <div class="row mb-lg-20 mb-xl-23">
                <div class="col-xxl-11 mx-auto">
                    @if (!empty($perfumeFeatures))
                        <div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
                            <div class="col-md-6 col-lg-4 order-lg-first">
                                @foreach (array_slice($perfumeFeatures, 0, 2) as $index => $feature)
                                    <div class="{{ $index == 0 ? 'mb-8' : '' }}">
                                        <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
                                            {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                                        </span>
                                        <h4 class="fs-20">{{ $feature['name'] }}</h4>
                                        <p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
                                    </div>
                                @endforeach
                            </div>

                            <div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
                                <figure class="mx-auto">
                                    <img src="{{ asset('assets/images/devices4.png') }}" alt="perfume">
                                </figure>
                            </div>

                            <div class="w-100 d-lg-none"></div>

                            <div class="col-md-6 col-lg-4">
                                @foreach (array_slice($perfumeFeatures, 2, 2) as $index => $feature)
                                    <div class="{{ $index == 0 ? 'mb-8' : '' }}">
                                        <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
                                            {{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}
                                        </span>
                                        <h4 class="fs-20">{{ $feature['name'] }}</h4>
                                        <p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
        data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
        <div class="container py-14 pt-md-16 pt-lg-0 pb-md-17 position-relative" style="z-index: 2;">
            <div class="row">
                <div class="col-xl-11 col-xxl-10 mx-auto">
                    <div class="mt-lg-n20 mt-xl-n22 mb-14 mb-md-16 rounded-xl">
                        <div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="165101721"></div>
                    </div>
                    <div class="position-relative">
                        <img src="{{ asset('assets/images/svg/doodle7.svg') }}"
                            class="h-7 position-absolute d-none d-lg-block" data-delay="1800"
                            style="top: -90%; right: -3%" alt="">
                        <img src="{{ asset('assets/images/svg/doodle8.svg') }}"
                            class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
                            style="top: -20%; left: -12%" alt="">
                        <h2 class="fs-16 text-uppercase text-muted mb-3 text-center">FAQ</h2>
                        <h3 class="display-3 mb-11 px-lg-8 px-xl-11 text-center">Pertanyaan yang sering diajukan
                            <span class="text-gradient gradient-7">seputar layanan </span>kami.
                        </h3>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 mb-0">
                            <div id="accordion-1" class="accordion-wrapper">
                                @foreach (array_slice($faqs, 0, ceil(count($faqs) / 2)) as $index => $faq)
                                    <div class="card accordion-item shadow-lg">
                                        <div class="card-header" id="accordion-heading-1-{{ $index }}">
                                            <button class="collapsed" data-bs-toggle="collapse"
                                                data-bs-target="#accordion-collapse-1-{{ $index }}"
                                                aria-expanded="false"
                                                aria-controls="accordion-collapse-1-{{ $index }}">{{ $faq['question'] }}</button>
                                        </div>
                                        <div id="accordion-collapse-1-{{ $index }}" class="collapse"
                                            aria-labelledby="accordion-heading-1-{{ $index }}"
                                            data-bs-target="#accordion-{{ $index }}">
                                            <div class="card-body">
                                                <p>{{ $faq['answer'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-lg-6">
                            @foreach (array_slice($faqs, ceil(count($faqs) / 2)) as $index => $faq)
                                <div id="accordion-2" class="accordion-wrapper">
                                    <div class="card accordion-item shadow-lg">
                                        <div class="card-header" id="accordion-heading-2-{{ $index }}">
                                            <button class="collapsed" data-bs-toggle="collapse"
                                                data-bs-target="#accordion-collapse-2-{{ $index }}"
                                                aria-expanded="false"
                                                aria-controls="accordion-collapse-2-{{ $index }}">{{ $faq['question'] }}</button>
                                        </div>
                                        <div id="accordion-collapse-2-{{ $index }}" class="collapse"
                                            aria-labelledby="accordion-heading-2-{{ $index }}"
                                            data-bs-target="#accordion-2">
                                            <div class="card-body">
                                                <p>{{ $faq['answer'] }}</p>
                                            </div>
                                        </div>
                                    </div>
                            @endforeach
                        </div>
                        <!-- /.accordion-wrapper -->
                    </div>
                    <!--/column -->
                </div>
                <!--/.row -->
            </div>
            <!--/column -->
        </div>
        <!--/.row -->
        <!-- /.container -->
    </section>
    <section class="wrapper bg-light">
        <div class="container py-16 py-md-18">
            <div class="row text-center">
                <div class="col-md-11 col-lg-9 col-xl-8 col-xxl-7 mx-auto position-relative">
                    <img src="{{ asset('assets/images/svg/doodle3.svg') }}"
                        class="h-11 position-absolute d-none d-lg-block" style="top: -20%; right: -12%"
                        alt="">
                    <img src="{{ asset('assets/images/svg/doodle9.svg') }}"
                        class="h-17 position-absolute d-none d-lg-block" style="bottom: 5%; left: -17%"
                        alt="">
                    <h2 class="fs-16 text-uppercase text-muted mb-3 text-center">Mengapa Harus Kami?</h2>
                    <h3 class="display-3 mb-12 text-center">Karena kami percaya <span
                            class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa harus
                        berlebihan.</h3>
                </div>
            </div>
            <div class="row d-flex align-items-start mb-19">
                <div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
                    <figure>
                        <img src="{{ asset('assets/images/devices5.png') }}" alt="image">
                    </figure>
                </div>
                <div class="col-lg-5 ms-auto">
                    @foreach ($whyChooseUs as $item)
                        <div class="d-flex flex-row mb-8">
                            <div class="card card-border-start border-primary">
                                <div class="card-body py-4">
                                    <h4 class="fs-20">{{ $loop->iteration }}. {{ $item['name'] }}</h4>
                                    <p class="m-0">{{ $item['description'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="row">
                <div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
                    <img src="{{ asset('assets/images/svg/doodle1.svg') }}"
                        class="h-9 position-absolute d-none d-lg-block" style="top: 2%; left: 9%" alt="">
                    <img src="{{ asset('assets/images/svg/doodle10.svg') }}"
                        class="h-7 position-absolute d-none d-lg-block" style="top: -45%; left: -17%" alt="">
                    <img src="{{ asset('assets/images/svg/doodle11.svg') }}"
                        class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
                        alt="">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">Pelanggan Kami yang Puas</h2>
                    <h3 class="display-3 mb-11 px-xl-10 px-xxl-13">
                        Jangan hanya percaya pada kata kami. Lihat apa yang dikatakan
                        <span class="text-gradient gradient-7">pelanggan</span> tentang kami.
                    </h3>
                </div>
            </div>
            <div class="grid mb-12">
                <div class="row isotope gy-6">
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-grape">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                                        Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus
                                        facilisis sociis natoque penatibus.”</p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Coriss Ambady</h5>
                                            <p class="mb-0">Financial Analyst</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-green">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum
                                        massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.
                                        Aenean lacinia bibendum nulla sed consectetur.”</p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Cory Zamora</h5>
                                            <p class="mb-0">Marketing Specialist</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-orange">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue
                                        laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac
                                        consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”
                                    </p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Nikolas Brooten</h5>
                                            <p class="mb-0">Sales Manager</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-pink">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus
                                        rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac
                                        elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac
                                        laoreet vitae.”</p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Coriss Ambady</h5>
                                            <p class="mb-0">Financial Analyst</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-blue">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum
                                        sociis natoque penatibus magnis dis montes, nascetur ridiculus mus.
                                        Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Jackie Sanders</h5>
                                            <p class="mb-0">Investment Planner</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                    <div class="item col-md-6 col-xl-4">
                        <div class="card shadow-none rounded-xl bg-soft-yellow">
                            <div class="card-body">
                                <blockquote class="icon mb-0">
                                    <p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit
                                        libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis
                                        parturient montes, nascetur ridiculus mus.”</p>
                                    <div class="blockquote-details">
                                        <div class="info ps-0">
                                            <h5 class="mb-1">Laura Widerski</h5>
                                            <p class="mb-0">Sales Specialist</p>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!--/column -->
                </div>
            </div>
            <!-- /.grid-view -->
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
        data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
        <div class="overflow-hidden" style="z-index:1;">
            <div class="divider divider-alt text-light mx-n2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                    <g fill="currentColor">
                        <polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
                    </g>
                </svg>
            </div>
        </div>
        <div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
            <div class="row gx-0 gy-10">
                <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
                    <img src="{{ asset('assets/images/svg/doodle2.svg') }}"
                        class="h-15 position-absolute d-none d-lg-block" style="bottom: 36%; right: -25%"
                        alt="">
                    <img src="{{ asset('assets/images/svg/doodle6.svg') }}"
                        class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
                        style="top: -20%; left: -25%" alt="">
                    <h2 class="display-3 mb-4">Manage all your bills, accounts & budgets in <span
                            class="text-gradient gradient-7">one place.</span></h2>
                    <p class="lead fs-24 lh-sm mb-7">Sandbox is available to download from both App Store and
                        Google Play Store.</p>
                    <div class="d-flex justify-content-center justify-content-lg-start">
                        <span>
                            <a href="#" class="me-2">
                                <img src="./assets/images/photos/button-appstore.svg" class="h-11 rounded-xl"
                                    alt=""></a></span>
                        <span><a href="#"><img src="./assets/images/photos/button-google-play.svg"
                                    class="h-11 rounded-xl" alt=""></a></span>
                    </div>
                </div>
                <div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
                    <figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section>

</div>
