@props([
    'username' => null,
])

@php
    /*
     | Configurable Instagram feed. Renders a responsive grid of curated posts
     | with a hover overlay and caption, or the raw embed fallback, and nothing
     | at all when the feed is disabled or empty (progressive enhancement).
     */
    $feed = app(\App\Services\InstagramFeedService::class);
    $enabled = $feed->enabled();
    $posts = $enabled ? $feed->posts() : [];
    $embed = $enabled ? $feed->embed() : null;
    $hasPosts = $posts !== [];
    $handle = $username ?: $feed->username();
    $profileUrl = $feed->profileUrl();
@endphp

@if ($enabled && ($hasPosts || filled($embed)))
    <x-section data-section="instagram" tone="alt">
        <x-container>
            <div class="flex flex-wrap items-end justify-between gap-6">
                <x-section-heading
                    eyebrow="Instagram"
                    title="Síguenos en Instagram"
                    subtitle="Obras, canteras y novedades de nuestras líneas de piedra natural."
                    data-animate
                    data-animate-type="up"
                />

                <x-button
                    href="{{ $profileUrl }}"
                    variant="secondary"
                    size="md"
                    target="_blank"
                    rel="noopener noreferrer"
                    data-track="instagram_click"
                    class="shrink-0"
                >
                    <x-icon name="instagram" :size="18" />
                    {{ '@'.$handle }}
                </x-button>
            </div>

            @if ($hasPosts)
                <div class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" data-animate-group>
                    @foreach ($posts as $post)
                        <a href="{{ $post['url'] }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           data-track="instagram_click"
                           class="group relative block overflow-hidden rounded-none border border-line bg-surface-raised shadow-soft transition-all duration-base ease-out-soft hover:-translate-y-0.5 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                            <x-image
                                :src="$post['image']"
                                :alt="$post['caption'] ?: 'Publicación de Instagram'"
                                :width="800"
                                :height="800"
                                wrapper-class="aspect-square w-full"
                                img-class="h-full w-full object-cover transition-transform duration-slower ease-out-soft group-hover:scale-[1.05]"
                            />

                            <span class="pointer-events-none absolute inset-0 bg-gradient-to-t from-surface/95 via-surface/20 to-transparent opacity-0 transition-opacity duration-base ease-out-soft group-hover:opacity-100 group-focus-visible:opacity-100"
                                  aria-hidden="true"></span>

                            <span class="pointer-events-none absolute left-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-none border border-line bg-surface/70 text-on-surface backdrop-blur-sm">
                                <x-icon name="instagram" :size="18" />
                            </span>

                            @if ($post['caption'])
                                <span class="pointer-events-none absolute inset-x-0 bottom-0 translate-y-2 p-4 font-sans text-sm text-on-surface opacity-0 transition-all duration-base ease-out-soft group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100">
                                    {{ $post['caption'] }}
                                </span>
                            @endif
                        </a>
                    @endforeach
                </div>
            @elseif (filled($embed))
                <div class="mt-12" data-instagram-embed>
                    {!! $embed !!}
                </div>
            @endif
        </x-container>
    </x-section>
@endif