{{-- ============================================================ REVIEWS SECTION
        ============================================================ --}}

        <div id="reviewSuccess" class="review-success-message" style="display: none;">

            <i class="fa-solid fa-circle-check"></i>

            <span id="reviewSuccessText"></span>

        </div>
        <section class="reviews-section" id="reviews">
            <div class="container reviews-grid">
                <div data-aos="fade-right">
                    <p class="eyebrow">
                        <span class="eyebrow-rule"></span>
                        Customer Stories
                    </p>

                    <h2 class="section-title">
                        What Our <span class="text-gold">Customers Say.</span>
                    </h2>

                    <p class="section-desc">
                        Trust is built one customer experience at a time.
                    </p>

                    <div class="testimonial-card" id="testimonialCard">

                        <i class="fa-solid fa-quote-left quote-icon"></i>

                        <div class="stars" id="testimonialStars">

                            @if ($reviews->isNotEmpty())

                            @for ($i = 1; $i <= 5; $i++)
                                <i
                                class="fa-solid fa-star {{ $i <= $reviews->first()->rating ? 'active' : '' }}"></i>
                                @endfor

                                @endif

                        </div>

                        <p class="testimonial-text" id="testimonialText">
                            @if ($reviews->count() > 0)
                            "{{ Str::limit($reviews->first()->review, 20) }}"
                            @else
                            "No customer reviews available yet."
                            @endif
                        </p>

                        <div class="testimonial-person">

                            <div>

                                <p class="testimonial-name" id="testimonialName">

                                    @if ($reviews->isNotEmpty())
                                    {{ $reviews->first()->name }}
                                    @else
                                    Customer
                                    @endif

                                </p>

                            </div>

                        </div>

                        <div class="testimonial-dots" id="testimonialDots">

                            @foreach ($reviews as $index => $review)
                            <span class="dot {{ $index === 0 ? 'active' : '' }}"
                                data-index="{{ $index }}">
                            </span>
                            @endforeach

                        </div>

                    </div>
                </div>

                <div class="review-form-wrap" data-aos="fade-left">
                    <p class="eyebrow"><span class="eyebrow-rule"></span> Your Experience Matters</p>
                    <h2 class="section-title">Share Your <span class="text-gold">Experience.</span></h2>
                   


                    <form class="review-form" action="{{ route('store_review') }}" method="POST" id="reviewForm">

                        @csrf

                        <!-- Full Name -->
                        <div class="form-group">
                            <label for="revName">Full Name</label>
                            <input type="text" id="revName" name="name" placeholder="Your full name"
                                value="{{ old('name') }}" autocomplete="name"
                                oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
                            <small class="field-error" id="nameError"></small>
                        </div>

                        <div class="form-group">
                            <label>Rating</label>

                            <div class="star-rating" id="starRating">
                                <i class="fa-regular fa-star" data-value="1"></i>
                                <i class="fa-regular fa-star" data-value="2"></i>
                                <i class="fa-regular fa-star" data-value="3"></i>
                                <i class="fa-regular fa-star" data-value="4"></i>
                                <i class="fa-regular fa-star" data-value="5"></i>
                            </div>

                            <input type="hidden" name="rating" id="ratingInput" value="{{ old('rating', '') }}">
                            <small class="field-error" id="ratingError"></small>
                        </div>

                        <div class="form-group">
                            <label for="revText">Your Review</label>
                            <textarea id="revText" name="review" rows="4" maxlength="500" placeholder="Write your review...">{{ old('review') }}</textarea>
                            <small class="field-error" id="reviewError"></small>
                        </div>

                        <button type="submit" class="btn btn-maroon full-width" id="reviewSubmitBtn">
                            <span id="submitText">Submit Review</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </button>

                    </form>

                </div>
            </div>
        </section>