@props(['hero'])
@php($slides = [
    [
        'kicker' => 'Education, Charts & GIS',
        'title' => 'Visual learning systems for classrooms and institutions',
        'text' => 'Maps, charts, globes and GIS-backed learning aids built for schools, colleges and training programs.',
        'image' => 'https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1800&q=80',
        'stat' => 'Education first',
        'label' => 'Maps, charts, GIS',
    ],
    [
        'kicker' => 'Medical & Nursing Training',
        'title' => 'Simulation tools for confident clinical practice',
        'text' => 'CPR manikins, anatomical models and nursing trainers for medical colleges, hospitals and skill labs.',
        'image' => 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1800&q=80',
        'stat' => 'Skill labs',
        'label' => 'Models and manikins',
    ],
    [
        'kicker' => 'Laboratory Infrastructure',
        'title' => 'Scientific equipment for practical experimentation',
        'text' => 'Lab instruments, testing tools and setup essentials for schools, colleges and research environments.',
        'image' => 'https://images.unsplash.com/photo-1582719471384-894fbb16e074?auto=format&fit=crop&w=1800&q=80',
        'stat' => 'Lab ready',
        'label' => 'Instruments and setup',
    ],
])

<section class="v2-hero v2-hero-slider" aria-labelledby="home2-hero-title" data-v2-hero-slider>
    <div class="v2-slider-stage">
        @foreach($slides as $slide)
            <article class="v2-slide @if($loop->first) active @endif" data-v2-slide>
                <img src="{{ $slide['image'] }}" alt="{{ $slide['title'] }}" @if(!$loop->first) loading="lazy" @endif>
                <div class="v2-slide-overlay"></div>
            </article>
        @endforeach
    </div>

    <div class="v2-slider-shell">
        <div class="v2-slider-copy">
            @foreach($slides as $slide)
                <div class="v2-slide-copy @if($loop->first) active @endif" data-v2-slide-copy>
                    <p class="v2-eyebrow">{{ $slide['kicker'] }}</p>
                    <h1 id="{{ $loop->first ? 'home2-hero-title' : 'home2-hero-title-' . $loop->iteration }}">{{ $slide['title'] }}</h1>
                    <p>{{ $slide['text'] }}</p>
                </div>
            @endforeach
            <div class="v2-actions">
                <a class="v2-button v2-button-primary" href="{{ route('products') }}">Explore Products</a>
                <a class="v2-button v2-button-light" href="{{ route('quote') }}">Request Quote</a>
            </div>
        </div>

        <div class="v2-slider-dashboard" aria-label="Hero slide controls">
            <div class="v2-slider-metric">
                <span data-v2-slide-number>01</span>
                <strong data-v2-slide-stat>{{ $slides[0]['stat'] }}</strong>
                <small data-v2-slide-label>{{ $slides[0]['label'] }}</small>
            </div>
            <div class="v2-slider-controls">
                <button type="button" data-v2-slider-prev aria-label="Previous hero slide">←</button>
                <button type="button" data-v2-slider-next aria-label="Next hero slide">→</button>
            </div>
            <div class="v2-slider-dots">
                @foreach($slides as $slide)
                    <button class="@if($loop->first) active @endif" type="button" data-v2-slider-dot="{{ $loop->index }}" aria-label="Show {{ $slide['kicker'] }} slide">
                        <span></span>
                    </button>
                @endforeach
            </div>
        </div>
    </div>

    <div class="v2-slider-bottom-strip" aria-hidden="true">
        <span>Educational institutions</span>
        <span>Medical colleges</span>
        <span>Nursing skill labs</span>
        <span>Laboratories</span>
    </div>
</section>