@php
    $slides = [];
    if (class_exists('\App\FrontpageSlide')) {
        \App\FrontpageSlide::seedDefaults();
        $slides = \App\FrontpageSlide::where('is_active', 1)->orderBy('sort_order')->get();
    }
@endphp

@if(!empty($slides) && count($slides))
    <div class="veno-slider" id="venoSlider">
        @foreach($slides as $index => $slide)
            <section class="veno-hero veno-slide {{ $index == 0 ? 'active' : '' }}">
                <div>
                    <span class="veno-hero-badge">{{ $slide->badge }}</span>
                    <h1>{{ $slide->title }}</h1>
                    <p>{{ $slide->subtitle }}</p>

                    <div class="veno-actions">
                        @if(!empty($slide->button_url))
                            <a href="{{ $slide->button_url }}" class="veno-btn-primary">
                                {{ $slide->button_text ?: 'Request Demo' }}
                            </a>
                        @endif

                        <a href="{{ route('login') }}" class="veno-btn-secondary">Sign In</a>
                    </div>
                </div>

                <div class="veno-hero-visual">
                    <img src="{{ asset($slide->image ?: 'uploads/img/veno-login-banner.png') }}" alt="{{ $slide->title }}">
                </div>
            </section>
        @endforeach
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var slides = document.querySelectorAll('.veno-slide');
            var current = 0;

            if (slides.length > 1) {
                setInterval(function () {
                    slides[current].classList.remove('active');
                    current = (current + 1) % slides.length;
                    slides[current].classList.add('active');
                }, 5000);
            }
        });
    </script>

    <style>
        .veno-slider {
            max-width: 1180px;
            margin: 0 auto 70px;
            position: relative;
        }

        .veno-slide {
            display: none !important;
            margin-bottom: 0 !important;
        }

        .veno-slide.active {
            display: grid !important;
            animation: venoFade .5s ease;
        }

        @keyframes venoFade {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
@endif