@php
    $milestones = collect(config('gerg.timeline', []))
        ->sortBy('year')
        ->values()
        ->all();
    $years = collect($milestones)->pluck('year')->unique()->values()->all();
@endphp

<section id="our-progress" class="bg-slate-50 py-20 lg:py-28">
    <div class="mx-auto max-w-7xl px-4 lg:px-8">
        <div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
            <div class="text-center sm:text-left">
                <p class="text-sm font-bold uppercase tracking-widest text-gerg-500">Our Progress</p>
                <h2 class="section-heading mt-2">Milestones</h2>
                <p class="section-subheading sm:max-w-xl">{{ config('gerg.progress_subtitle') }}</p>
            </div>
            <div class="flex items-center justify-center gap-2 sm:justify-end">
                <button type="button" class="progress-carousel__prev flex h-11 w-11 items-center justify-center rounded-full border border-gerg-200 bg-white text-gerg-700 shadow-sm transition hover:border-gerg-500 hover:bg-gerg-50" aria-label="Previous milestone">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button type="button" class="progress-carousel__next flex h-11 w-11 items-center justify-center rounded-full border border-gerg-200 bg-white text-gerg-700 shadow-sm transition hover:border-gerg-500 hover:bg-gerg-50" aria-label="Next milestone">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>
            </div>
        </div>

        {{-- Year axis --}}
        <div class="mt-10 hidden overflow-x-auto pb-2 sm:block" aria-hidden="true">
            <div class="flex min-w-max items-center gap-0 px-4">
                @foreach ($years as $year)
                    <div class="flex items-center">
                        <span class="rounded-full bg-gerg-500 px-4 py-1.5 text-sm font-bold text-white shadow-md">{{ $year }}</span>
                        @if (! $loop->last)
                            <span class="mx-2 h-0.5 w-16 bg-gradient-to-r from-gerg-500 to-gerg-300 sm:w-24 lg:w-32"></span>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Horizontal carousel --}}
        <div
            id="progress-carousel"
            class="progress-carousel relative mt-6"
            data-autoplay="4500"
        >
            <div class="pointer-events-none absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-slate-50 to-transparent sm:w-16"></div>
            <div class="pointer-events-none absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-slate-50 to-transparent sm:w-16"></div>

            <div
                id="progress-carousel-viewport"
                class="overflow-x-auto scroll-smooth pb-4 scrollbar-none [scrollbar-width:none] [-ms-overflow-style:none]"
            >
                <div id="progress-carousel-track" class="flex w-max gap-5 px-4 sm:gap-6 sm:px-2">
                    @php $lastYear = null; @endphp
                    @foreach ($milestones as $index => $item)
                        @php
                            $imagePath = $item['image'] ?? null;
                            $hasImage = $imagePath && file_exists(public_path($imagePath));
                            $showYearLabel = $item['year'] !== $lastYear;
                            $lastYear = $item['year'];
                        @endphp

                        @if ($showYearLabel && $index > 0)
                            <div class="flex w-px shrink-0 self-stretch bg-gerg-200" aria-hidden="true"></div>
                        @endif

                        <article
                            class="progress-card relative flex w-[300px] shrink-0 flex-col overflow-hidden rounded-2xl border border-gerg-100 bg-white shadow-md transition hover:border-gerg-300 hover:shadow-xl hover:shadow-gerg-500/10 sm:w-[320px]"
                            data-progress-card
                            data-year="{{ $item['year'] }}"
                        >
                            <div class="flex items-center gap-4 border-b border-gerg-50 bg-gerg-50/50 p-4">
                                <div class="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white p-2 shadow-sm ring-1 ring-gerg-100">
                                    @if ($hasImage)
                                        <img
                                            src="{{ asset($imagePath) }}"
                                            alt="{{ $item['title'] }}"
                                            class="max-h-full max-w-full object-contain"
                                            loading="lazy"
                                        >
                                    @else
                                        <span class="text-xs font-bold text-gerg-500">GERG</span>
                                    @endif
                                </div>
                                <div class="min-w-0 flex-1">
                                    <span class="text-xs font-semibold uppercase tracking-wide text-gerg-500">Year {{ $item['year'] }}</span>
                                    <h3 class="mt-1 font-display text-base font-bold leading-snug text-gerg-900">
                                        {{ $item['title'] }}
                                    </h3>
                                </div>
                            </div>

                            <div class="relative flex flex-1 flex-col p-5 sm:p-6">
                                <span class="absolute right-5 top-2 font-serif text-5xl leading-none text-gerg-100 select-none" aria-hidden="true">"</span>
                                <p class="relative flex-1 text-sm leading-relaxed text-slate-600">
                                    {{ $item['text'] }}
                                </p>
                                @if (!empty($item['link']))
                                    <a
                                        href="{{ $item['link']['url'] }}"
                                        target="_blank"
                                        rel="noopener"
                                        class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-gerg-600 hover:text-gerg-500 transition"
                                    >
                                        {{ $item['link']['label'] }}
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                    </a>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>

            <div class="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
                <p class="text-xs text-slate-500">
                    <span id="progress-carousel-counter">1</span> / {{ count($milestones) }} · Sorted year-wise ({{ $years[0] ?? '' }} → {{ $years[array_key_last($years)] ?? '' }})
                </p>
                <div id="progress-carousel-dots" class="flex flex-wrap justify-center gap-2"></div>
            </div>
        </div>
    </div>
</section>