@if(isset($heroSlides) && $heroSlides->count())
        <!-- hero slider area start -->
        <section class="slider-area">
            <div class="hero-slider-active slick-dot-style">
                @foreach($heroSlides as $slide)
                    @php
                        $title = ___($slide, 'title');
                        $description = ___($slide, 'description');
                        $buttonText = ___($slide, 'button_text');
                        $buttonUrl = $slide->button_url;
                        $isRight = ($slide->text_direction ?? 'left') === 'right';
                        $contentClass = $isRight
                            ? 'hero-slider-content slide-2 float-md-end float-none'
                            : 'hero-slider-content slide-1';
                        $imageSrc = $slide->image
                            ? (str_starts_with($slide->image, 'http') || str_starts_with($slide->image, '/')
                                ? $slide->image
                                : '/storage/' . ltrim($slide->image, '/'))
                            : '';
                        $href = null;
                        if ($buttonText && $buttonUrl) {
                            $href = preg_match('#^(https?:)?//#i', $buttonUrl) ? $buttonUrl : __url($buttonUrl);
                        }
                    @endphp
                    <div class="hero-single-slide hero-overlay">
                        <div class="hero-slider-item bg-img" data-bg="{{ $imageSrc }}">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="{{ $contentClass }}">
                                            @if($title)
                                                <h2 class="slide-title">{{ $title }}</h2>
                                            @endif
                                            @if($description)
                                                <h4 class="slide-desc">{{ $description }}</h4>
                                            @endif
                                            @if($href)
                                                <a href="{{ $href }}" class="btn btn-hero">{{ $buttonText }}</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
        <!-- hero slider area end -->
        @endif