{{-- About Team — History / Timeline Section --}}
{{-- Reproduces the React OurStory component animation 1:1:
     - Vertical line grows with scroll (GSAP scaleY progress, never recedes)
     - Each card fades in (autoAlpha 0→1) when 50% enters viewport -80px
     - Year labels displayed before first event of each year
     - Cards alternate left/right with connector dot + dash
     - Image mask: gradient fade to transparent at bottom
--}}
@php
$events = __('about.team.our_story.events');
// Detect year changes for year header labels
$lastYear = null;
$eventsWithMeta = collect($events)->map(function($event, $index) use (&$lastYear) {
    $parts = explode(' ', $event['date']);
    $year = array_pop($parts);
    $month = implode(' ', $parts);
    $isFirstOfYear = ($year !== $lastYear);
    $lastYear = $year;
    return array_merge($event, [
        'year'          => $year,
        'month'         => $month,
        'index'         => $index,
        'isFirstOfYear' => $isFirstOfYear,
    ]);
})->all();
@endphp

<section class="py-20 px-4">
    <div class="max-w-7xl mx-auto">

        <x-atoms.title
            :subject="__('about.team.our_story.subject')"
            :title="__('about.team.our_story.title')"
            align="center" />

        {{-- Timeline container: animated by initTimelineAnimation() --}}
        <div class="w-full relative flex flex-col items-center" data-timeline-container>

            {{-- Absolute centered vertical line (grows with scroll via GSAP scaleY) --}}
            <div class="flex absolute h-full w-full top-0 left-0 flex-col items-center justify-center" aria-hidden="true">
                <span
                    class="h-px w-24 text-foreground"
                    style="background: linear-gradient(to right, transparent 0%, currentColor 20%, currentColor 80%, transparent 100%);"
                ></span>
                <span
                    class="h-[calc(100%-48px)] w-px text-foreground"
                    style="background: linear-gradient(to bottom, currentColor 0%, currentColor 95%, transparent 100%);"
                    data-timeline-line
                ></span>
            </div>

            {{-- Events list --}}
            <div class="w-full flex flex-col items-center mt-16 md:mt-36">

                @foreach($eventsWithMeta as $event)

                    {{-- Year label: displayed once per year --}}
                    @if($event['isFirstOfYear'])
                        <div class="my-24 text-7xl tracking-[0.2em] font-regular text-foreground select-none" aria-label="{{ $event['year'] }}">
                            {{ $event['year'] }}
                        </div>
                    @endif

                    @php $isEven = $event['index'] % 2 === 0; @endphp

                    {{-- Event row (initially invisible, GSAP fades in on scroll) --}}
                    <div
                        class="w-full md:max-w-3xl flex flex-col md:flex-row mb-12 relative"
                        data-timeline-box
                    >
                        {{-- Inner: card occupies right half (even) or left half (odd) --}}
                        <div class="flex w-full md:w-[50%] {{ $isEven ? 'md:ml-auto' : 'md:flex-row-reverse' }}">

                            {{-- Connector: dot + dash (desktop only) --}}
                            <div
                                class="hidden flex-col md:flex items-center mb-4 justify-end
                                       {{ $isEven ? 'md:flex-row -translate-x-px' : 'md:flex-row-reverse translate-x-px' }}"
                                aria-hidden="true"
                            >
                                <span class="w-2 aspect-square bg-foreground rounded-sm"></span>
                                <span class="w-4 h-px bg-foreground"></span>
                            </div>

                            {{-- Card --}}
                            <div class="rounded-lg bg-glassmorphism md:max-w-xs overflow-hidden flex-1 md:flex-none">

                                {{-- Image with bottom gradient mask --}}
                                <div class="w-full aspect-[6/5]">
                                    <div class="w-full h-full overflow-hidden">
                                        <img
                                            src="{{ asset($event['image']) }}"
                                            alt="{{ $event['alt'] ?? $event['description'] }}"
                                            class="w-full h-full object-cover"
                                            loading="lazy"
                                            style="
                                                mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
                                                -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
                                            "
                                        >
                                    </div>
                                </div>

                                {{-- Date + Title --}}
                                <div class="p-4">
                                    <x-atoms.subject class="mb-4">
                                        {{ $event['month'] }} {{ $event['year'] }}
                                    </x-atoms.subject>
                                    <div class="text-md font-medium text-gray-900 dark:text-gray-100">
                                        {{ $event['description'] }}
                                    </div>
                                </div>

                            </div>{{-- /card --}}
                        </div>{{-- /inner --}}
                    </div>{{-- /event row --}}

                @endforeach

            </div>{{-- /events list --}}
        </div>{{-- /timeline container --}}
    </div>
</section>