{{-- Wasoria Pilot — Dashboard laptop-frame section --}}
{{-- Scroll-pinned slideshow: GSAP ScrollTrigger pins on desktop, stacked on mobile --}}
{{-- Single responsive HTML structure matching React SPA Screen component --}}
@php
$screens = __('products.wasoria_pilot.dashboards.screens');
$screenImages = ['pilot_screen_cameras.png', 'pilot_screen_charts.png', 'pilot_screen_flow.png'];
@endphp

<section class="w-full py-20">
    <x-atoms.title
        :title="__('products.wasoria_pilot.dashboards.title')"
        :subtitle="[__('products.wasoria_pilot.dashboards.subtitle')]"
        align="center"
        class="mb-16 max-w-[800px] mx-auto" />

    {{-- Outer pin-trigger container — GSAP pins this div on desktop --}}
    <div class="w-full" data-animate="pilot-slideshow">
        <x-layouts.gradient-layout>
            {{-- Laptop frame: bg-black + rounded only on desktop --}}
            <div class="w-full max-w-7xl mx-auto lg:bg-black lg:rounded-4xl lg:p-8">
                {{-- Viewport: aspect-video + overflow-hidden + relative only on desktop --}}
                <div class="w-full lg:relative lg:aspect-video lg:overflow-hidden lg:rounded-2xl bg-white" data-slideshow-viewport>
                    {{-- Track: absolutely positioned on desktop, normal flow on mobile --}}
                    <div class="w-full lg:absolute top-0 left-0 flex flex-col gap-4" data-slideshow-track>
                        @foreach($screenImages as $index => $screen)
                        <div class="w-full aspect-video flex-shrink-0 lg:relative flex gap-4 flex-col lg:block">
                            <img src="{{ asset('images/product/' . $screen) }}"
                                alt="{{ $screens[$index]['image_alt'] ?? $screens[$index]['title'] ?? '' }}"
                                class="w-full h-full lg:object-cover"
                                width="1280"
                                height="720"
                                loading="lazy">
                            {{-- Caption: glassmorphism bar pinned to bottom on desktop, normal flow on mobile --}}
                            <div class="lg:absolute lg:inset-x-0 lg:bottom-0 z-10 lg:bg-gradient-to-t lg:from-black/70 lg:to-transparent lg:pt-12 lg:pb-5 lg:px-6">
                                <div class="lg:bg-white/10 lg:backdrop-blur-md lg:rounded-xl lg:px-5 lg:py-3 lg:border lg:border-white/15 lg:max-w-2xl lg:mx-auto">
                                    <h3 class="text-lg font-semibold lg:text-white">{{ $screens[$index]['title'] ?? '' }}</h3>
                                    <p class="text-sm text-muted-foreground lg:text-white/75">{{ $screens[$index]['description'] ?? '' }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </x-layouts.gradient-layout>
    </div>
</section>