{{-- Homepage Products Section --}}
<section class="w-full px-4">
    <div class="mx-auto max-w-7xl">
        <x-atoms.title
            :subject="__('home.products_section.subject')"
            :title="__('home.products_section.title')"
            :subtitle="__('home.products_section.subtitle')"
            align="center"
            class="mb-12" />

        {{-- Three product cards with video --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
            @php
            $cards = [
            ['label' => __('home.product_canvas.portique_label'), 'video' => 'videos/portique.webm', 'poster' => null],
            ['label' => __('home.product_canvas.detections_label'), 'video' => 'videos/segmented_wastes.webm', 'poster' => null],
            ['label' => __('home.product_canvas.computer_label'), 'video' => 'videos/computers.webm', 'poster' => null],
            ];
            @endphp

            @foreach ($cards as $card)
            <x-molecules.card-border :transparent="true" class="flex flex-col items-center bg-glassmorphism">
                <div class="w-full aspect-square rounded-lg overflow-hidden mb-4">
                    <video
                        class="w-full h-full object-cover"
                        autoplay
                        loop
                        muted
                        playsinline
                        preload="metadata"
                        @if($card['poster']) poster="{{ asset($card['poster']) }}" @endif>
                        <source src="{{ asset($card['video']) }}" type="video/webm">
                    </video>
                </div>
                <p class="text-sm md:text-base font-medium text-center">{{ $card['label'] }}</p>
            </x-molecules.card-border>
            @endforeach
        </div>

        <div class="flex justify-center mb-8">
            <x-atoms.button-link href="{{ localized_route('products.wasoria-box') }}">
                {{ __('home.products_section.cta') }}
            </x-atoms.button-link>
        </div>
    </div>
</section>