{{-- About Innovations — Partner Labs Section --}}
@php
$labs = __('about.innovations.labs.items');
$collaborations = __('about.innovations.collaborations');
@endphp

<x-atoms.section-wrapper>
    <x-atoms.title
        :title="__('about.innovations.labs.title')"
        align="center"
        class="mb-16" />

    {{-- Labs --}}
    <div class="space-y-20">
        @foreach($labs as $labIndex => $lab)
        <article class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start" data-appear-from-bottom>
            {{-- Lab logo --}}
            <div class="lg:col-span-3 flex justify-center lg:justify-start">
                @if(!empty($lab['image']))
                <div class="w-40 h-40 flex items-center justify-center bg-white rounded-lg p-4">
                    <img
                        src="{{ asset($lab['image']) }}"
                        alt="{{ $lab['image_alt'] ?? $lab['image_label'] ?? $lab['title'] }}"
                        class="w-full h-full object-contain"
                        loading="lazy">
                </div>
                @endif
            </div>

            {{-- Lab content --}}
            <div class="lg:col-span-9">
                <h2 class="text-2xl md:text-3xl font-regular text-foreground mb-6">
                    {{ $lab['title'] }}
                </h2>
                @foreach($lab['descriptions'] as $paragraph)
                <p class="text-foreground/80 leading-[--gold] lg:text-lg mb-4">
                    {{ $paragraph }}
                </p>
                @endforeach
            </div>
        </article>

        {{-- Collaborations after last lab (ImVIA) --}}
        @if($labIndex === count($labs) - 1 && !empty($collaborations))
        <div class="mt-12" data-appear-from-bottom>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($collaborations as $collab)
                <div class="bg-glassmorphism border border-muted rounded-lg overflow-hidden">
                    @if(!empty($collab['image']))
                    <div class="w-full aspect-video overflow-hidden">
                        <img
                            src="{{ asset($collab['image']) }}"
                            alt="{{ $collab['image_alt'] ?? $collab['title'] }}"
                            class="w-full h-full object-cover"
                            loading="lazy">
                    </div>
                    @endif
                    <div class="p-4 md:p-6">
                        <h3 class="text-lg font-semibold text-foreground mb-3">
                            {{ $collab['title'] }}
                        </h3>
                        @foreach($collab['descriptions'] as $desc)
                        <p class="text-sm text-muted-foreground leading-[--gold] mb-2">
                            {{ $desc }}
                        </p>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
        @endforeach
    </div>
</x-atoms.section-wrapper>