<section id="testimonials" class="testimonials section light-background">
    <div class="container section-title" data-aos="fade-up">
        <h2>Testimonials</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
    </div>

    <div class="container">
        <div class="row g-5">
            @foreach ([1, 2, 3, 4] as $idx)
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="{{ $idx * 100 }}">
                    <div class="testimonial-item">
                        <img src="{{ asset('landing/assets/img/testimonials/testimonials-' . $idx . '.jpg') }}"
                            class="testimonial-img" alt="">
                        <h3>{{ ['Saul Goodman', 'Sara Wilsson', 'Jena Karlis', 'Matt Brandon'][$idx - 1] ?? 'Customer' }}
                        </h3>
                        <h4>{{ ['Ceo & Founder', 'Designer', 'Store Owner', 'Freelancer'][$idx - 1] ?? 'Customer' }}
                        </h4>
                        <div class="stars">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                class="bi bi-star-fill"></i>
                        </div>
                        <p>
                            <i class="bi bi-quote quote-icon-left"></i>
                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span>
                            <i class="bi bi-quote quote-icon-right"></i>
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
