@props([
    'slides' => [],
])

@php
    $slideList = collect($slides)
        ->filter(fn ($row) => filled($row['src'] ?? null))
        ->values()
        ->all();
    $gallerySizes = (string) (config('media.contexts.gallery.sizes')
        ?: '(max-width: 640px) 100vw, (max-width: 1023px) 50vw, 25vw');
    $viewLabel = __('site.hero_gallery_view');
@endphp

<section
    class="rayan-masonry"
    aria-label="{{ __('site.nav_home') }}"
>
    <div class="site-container rayan-masonry__inner">
        @if (count($slideList) === 0)
            <p class="rayan-masonry__empty eca-theme-text-muted">{{ __('site.hero_gallery_empty') }}</p>
        @else
            <div class="rayan-masonry__grid" data-reveal-group>
                @foreach ($slideList as $index => $slide)
                    @php
                        $url = $slide['url'] ?? null;
                        $target = $slide['target'] ?? '_self';
                        $title = trim((string) ($slide['title'] ?? ''));
                        $subtitle = trim((string) ($slide['subtitle'] ?? $slide['alt'] ?? ''));
                        if ($subtitle !== '' && $subtitle === $title) {
                            $subtitle = '';
                        }
                        $alt = (string) ($slide['alt'] ?? $title);
                        $delayMs = min($index * 50, 600);
                        $hasTip = $title !== '' || $subtitle !== '' || filled($url);
                    @endphp

                    <div
                        @class([
                            'rayan-masonry__item',
                            'rayan-masonry__item--static' => ! filled($url),
                            'rayan-masonry__item--has-tip' => $hasTip,
                        ])
                        data-reveal="card"
                        data-reveal-item
                        style="--reveal-delay: {{ $delayMs }}ms; --reveal-duration: 600ms; --reveal-distance: 48px;"
                    >
                        <img
                            src="{{ $slide['src'] }}"
                            @if (! empty($slide['srcset'])) srcset="{{ $slide['srcset'] }}" @endif
                            sizes="{{ $slide['sizes'] ?? $gallerySizes }}"
                            alt="{{ $alt }}"
                            class="rayan-masonry__img"
                            loading="{{ $index < 4 ? 'eager' : 'lazy' }}"
                            decoding="async"
                            @if ($index < 2) fetchpriority="high" @endif
                        />

                        @if ($hasTip)
                            <div class="rayan-masonry__tip">
                                <div class="rayan-masonry__tip-veil" aria-hidden="true"></div>
                                <div class="rayan-masonry__tip-panel">
                                    @if ($title !== '')
                                        <p class="rayan-masonry__tip-title">{{ $title }}</p>
                                    @endif
                                    @if ($subtitle !== '')
                                        <p class="rayan-masonry__tip-subtitle">{{ $subtitle }}</p>
                                    @endif
                                    @if (filled($url))
                                        <a
                                            href="{{ $url }}"
                                            target="{{ $target }}"
                                            @if ($target === '_blank') rel="noopener noreferrer" @endif
                                            class="rayan-masonry__tip-cta"
                                            aria-label="{{ $title !== '' ? $title.' — '.$viewLabel : $viewLabel }}"
                                        >
                                            <span>{{ $viewLabel }}</span>
                                            <svg class="rayan-masonry__tip-cta-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                                <path d="M7.5 4.5 13 10l-5.5 5.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>