{{-- Wasoria Box — 12-keyframe scroll-driven 3D product scene (Story 4.8) --}}
@php
$overlay = __('products.wasoria_box.scroll_overlay');
@endphp

<x-atoms.title
    :title="__('products.wasoria_box.product_title')"
    align="center"
    class="p-4 mt-12" />

{{-- Scroll trigger container: tall section that drives the 12-keyframe GSAP timeline --}}
<section
    data-product-scroll-trigger
    class="bg-background justify-center relative">
    {{-- Foreground: scroll overlay content (text + images) --}}
    <div class="w-full h-full max-w-7xl mx-auto p-4 z-10 flex flex-col gap-20">
        <div class="w-full flex justify-between items-center">
            <div class="w-full md:w-1/2 lg:w-1/3 flex flex-col ml-auto mr-auto md:mr-0">

                {{-- Section 1: Interconnected sensors --}}
                <div class="w-full mt-15">
                    <h3 class="text-3xl lg:text-4xl/normal font-regular mb-20">
                        {{ $overlay['sensors_title'] }}
                    </h3>
                    <ul class="flex gap-4 justify-center">
                        @foreach($overlay['sensors'] as $sensor)
                        <li class="w-1/2">
                            <x-molecules.image-block
                                :image="$sensor['image']"
                                :title="$sensor['title']"
                                :alt="$sensor['alt']" />
                        </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Section 2: Embedded analysis (detection reveal) --}}
                <div class="w-full mt-[40vh]">
                    <h3 class="text-3xl lg:text-4xl/normal font-regular mb-20">
                        {{ $overlay['analyse_title'] ?? '' }}
                    </h3>
                    <div data-detection-reveal-trigger class="relative w-full aspect-square overflow-hidden rounded-lg bg-blue-200 mb-10">
                        {{-- Background: image without detections --}}
                        <div class="absolute inset-0">
                            <img
                                src="{{ asset($overlay['analyse_without_detections_image']) }}"
                                alt="{{ $overlay['analyse_without_detections_alt'] }}"
                                class="w-full h-full object-cover"
                                loading="lazy" />
                        </div>
                        {{-- Foreground: masked image with detections + white divider --}}
                        <div
                            data-detection-reveal
                            class="absolute top-0 left-0 h-full overflow-hidden border-r-2 border-white/80"
                            style="width: 0%;">
                            <div class="absolute top-0 left-0 h-full aspect-square">
                                <img
                                    src="{{ asset($overlay['analyse_with_detections_image']) }}"
                                    alt="{{ $overlay['analyse_with_detections_alt'] }}"
                                    class="h-full object-cover"
                                    loading="lazy" />
                            </div>
                        </div>
                    </div>
                    @if(!empty($overlay['analyse_description']))
                    <p class="text-sm text-muted-foreground">{{ $overlay['analyse_description'] }}</p>
                    @endif
                </div>

                {{-- Section 3: Cutting-edge design --}}
                <div class="w-full mt-[40vh]">
                    <h3 class="text-3xl lg:text-4xl/normal font-regular mb-20">
                        {{ $overlay['design_title'] }}
                    </h3>
                    <ul class="flex gap-4 justify-center">
                        @foreach($overlay['design_cards'] as $card)
                        <li class="w-1/2">
                            <x-molecules.image-block
                                :image="$card['image']"
                                :title="$card['title']"
                                :alt="$card['alt']" />
                        </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Section 4: LED visual signaling --}}
                <div class="w-full mt-[40vh]">
                    <h3 class="text-3xl lg:text-4xl/normal font-regular mb-8">
                        {{ $overlay['led_title'] }}
                    </h3>
                    <p class="mb-20 text-sm text-muted-foreground">
                        {{ $overlay['led_description'] }}
                    </p>
                    <ul class="flex gap-4 flex-col">
                        <li class="flex gap-4 text-lg items-center">
                            <div class="w-10 h-10 rounded-full border border-black dark:border-white flex items-center justify-center">
                                <div class="w-8 h-8 rounded-full bg-red-500"></div>
                            </div>
                            <span>{{ $overlay['led_danger'] }}</span>
                        </li>
                        <li class="flex gap-4 text-lg items-center">
                            <div class="w-10 h-10 rounded-full border border-black dark:border-white flex items-center justify-center">
                                <div class="w-8 h-8 rounded-full bg-purple-300"></div>
                            </div>
                            <span>{{ $overlay['led_risk'] }}</span>
                        </li>
                        <li class="flex gap-4 text-lg items-center">
                            <div class="w-10 h-10 rounded-full border border-black dark:border-white flex items-center justify-center">
                                <div class="w-8 h-8 rounded-full bg-white border border-gray-300"></div>
                            </div>
                            <span>{{ $overlay['led_normal'] }}</span>
                        </li>
                    </ul>
                </div>

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

    {{-- Background: pinned 3D canvas container (absolute, behind scroll content) --}}
    <div
        data-product-scroll-pin
        class="w-full h-screen absolute top-0 left-0">
        <div
            data-scene="product-page"
            role="img"
            aria-label="{{ __('products.wasoria_box.scene_aria_label') }}"
            class="w-full h-full">
            {{-- Spinner shown while loading --}}
            <div class="scene-spinner absolute inset-0 z-10 flex items-center justify-center pointer-events-none" aria-hidden="true">
                <svg class="animate-spin h-8 w-8 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </div>
            {{-- Static fallback for no-WebGL --}}
            <p class="canvas-fallback-img text-muted-foreground text-lg absolute inset-0 flex items-center justify-center">
                {{ __('products.wasoria_box.product_title') }}
            </p>
        </div>
    </div>
</section>