Gallery

@props([
    'eyebrow'    => 'Gallery',
    'heading'    => 'Behind the lens',
    'subheading' => 'A curated selection of work — one image in focus, the rest ready to explore.',
    'images'     => null,
    'loop'       => true,
])

@php
    $images ??= [
        ['title' => 'Golden hour on the ridge', 'category' => 'Landscape', 'tone' => 'from-primary/40 via-secondary/25 to-background'],
        ['title' => 'Studio still life', 'category' => 'Still life', 'tone' => 'from-primary/30 via-muted to-background'],
        ['title' => 'Workshop afternoon', 'category' => 'Process', 'tone' => 'from-secondary/40 via-muted to-background'],
        ['title' => 'Atrium light study', 'category' => 'Architecture', 'tone' => 'from-muted via-background to-primary/20'],
        ['title' => 'Evening skyline', 'category' => 'Landscape', 'tone' => 'from-primary/30 via-secondary/30 to-background'],
        ['title' => 'Material samples', 'category' => 'Detail', 'tone' => 'from-secondary/30 via-muted to-background'],
        ['title' => 'Prototype review', 'category' => 'Process', 'tone' => 'from-muted via-primary/20 to-secondary/25'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        {{-- Real carousel: previous/next move the featured slide and the track;
             thumbnails jump straight to a slide via the shared carousel state. --}}
        <x-ui.carousel :loop="$loop" class="mt-12 grid gap-4 lg:grid-cols-[2fr_1fr]" aria-label="{{ __($heading) }}">
            <div class="relative overflow-hidden rounded-lg border border-border bg-card shadow-sm">
                <x-ui.carousel.content>
                    @foreach ($images as $image)
                        <x-ui.carousel.item>
                            <figure data-slot="gallery-featured">
                                <div class="aspect-[4/3] w-full bg-gradient-to-br {{ $image['tone'] }}"></div>
                                <figcaption class="flex items-center justify-between gap-4 border-t border-border bg-card p-4">
                                    <p class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{{ __($image['title']) }}</p>
                                    @if (! empty($image['category']))
                                        <x-ui.badge variant="secondary" class="shrink-0">{{ __($image['category']) }}</x-ui.badge>
                                    @endif
                                </figcaption>
                            </figure>
                        </x-ui.carousel.item>
                    @endforeach
                </x-ui.carousel.content>

                <x-ui.carousel.previous />
                <x-ui.carousel.next />
            </div>

            <div class="grid grid-cols-2 content-start gap-2" role="list" aria-label="{{ __('Gallery thumbnails') }}">
                @foreach ($images as $i => $image)
                    <button
                        type="button"
                        role="listitem"
                        data-slot="gallery-thumbnail"
                        x-on:click="goTo({{ $i }})"
                        x-bind:aria-current="index === {{ $i }} ? 'true' : 'false'"
                        x-bind:class="index === {{ $i }} ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : ''"
                        class="group relative overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring"
                    >
                        <span class="sr-only">{{ __($image['title']) }}</span>
                        <div class="aspect-square w-full bg-gradient-to-br {{ $image['tone'] }}" aria-hidden="true"></div>
                    </button>
                @endforeach
            </div>
        </x-ui.carousel>
    </x-ui.container>
</x-ui.section>