@props([])

@php
    // Optional background video still takes precedence over the photo carousel.
    $heroMedia = app(\App\Services\HeroMediaService::class);
    $heroVideo = $heroMedia->url();

    $configured = app(\App\Services\HeroSlidesService::class)->slides();

    // Three full-bleed photos; the copy stays fixed across all of them.
    $images = [];

    for ($index = 0; $index < 3; $index++) {
        $images[] = $configured[$index] ?? asset('images/real/hero/'.($index + 1).'.jpg');
    }

    /*
     | The copy is admin-managed through the `hero_*` settings; the defaults
     | below mirror the original hardcoded copy so the HTML is unchanged until
     | the admin edits these from the panel. Images/video stay as they were.
     */
    $settings = app(\App\Services\SettingsService::class);

    $heroTitleLine1 = $settings->get('hero_title_line1', 'PIEDRA LAJA');
    $heroTitleLine2 = $settings->get('hero_title_line2', 'NATURAL');
    $heroSubtitle = $settings->get('hero_subtitle', '100% natural de canteras peruanas');
    $heroCtaLabel = $settings->get('hero_cta_label', 'Descubre nuestra colección');
    $heroCtaUrl = $settings->get('hero_cta_url', route('products.index'));
    $heroNextLabel = $settings->get('hero_next_label', 'Siguiente');
@endphp

<section data-section="hero"
         data-tone="dark"
         class="hero-viewport relative overflow-hidden bg-surface text-cream">
    {{-- Background layer: photo carousel + grain + edge-only gradients. --}}
    <div data-hero-bg class="absolute inset-0">
        <div data-hero-slideshow class="absolute inset-0">
            @foreach ($images as $index => $image)
                <div data-hero-slide class="absolute inset-0 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}">
                    <img src="{{ $image }}" alt="" width="1920" height="1280"
                         @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif
                         decoding="async" class="h-full w-full object-cover grayscale contrast-[1.05]">
                </div>
            @endforeach
        </div>

        @if ($heroVideo)
            <video data-hero-video autoplay muted loop playsinline preload="metadata" poster="{{ $images[0] }}"
                   aria-hidden="true"
                   class="absolute inset-0 h-full w-full object-cover motion-reduce:hidden">
                <source src="{{ $heroVideo }}" type="{{ $heroMedia->mimeType($heroVideo) }}">
            </video>
        @endif

        <div class="pointer-events-none absolute inset-0 z-[2] bg-surface/20" aria-hidden="true">
        <div class="pointer-events-none absolute inset-0 z-[2] opacity-[0.12] mix-blend-overlay"
             style="background-image:url({{ asset('images/noise.svg') }})"
             aria-hidden="true"></div>
        <div class="absolute inset-x-0 bottom-0 z-[2] h-2/3 bg-gradient-to-b from-transparent via-surface/55 to-surface/95"></div>
        <div class="absolute inset-x-0 top-0 z-[2] h-48 bg-gradient-to-b from-surface/85 to-transparent"></div>
    </div>

    {{-- Fixed copy, anchored bottom-left. --}}
    <div class="absolute inset-0 z-10 flex items-end">
        <div class="w-full px-8 pb-12 sm:px-10 lg:px-12 lg:pb-16 xl:px-16">
            {{-- Two stacked words: the first sits behind in a muted tone, the
                 second is indented and overlaps the line above. --}}
            <h1 data-hero="title" class="hero-text-shadow font-serif text-display font-normal">
                <span data-hero-line class="block text-accent-text">{{ $heroTitleLine1 }}</span>
                <span data-hero-line class="relative z-10 -mt-[0.24em] block pl-[0.55em] text-cream">{{ $heroTitleLine2 }}</span>
            </h1>

            <p data-hero="subtitle" data-hero-rest class="hero-text-shadow mt-5 max-w-xl font-sans text-sm leading-relaxed text-warm-gray">
                {{ $heroSubtitle }}
            </p>

            <div data-hero="actions" data-hero-rest class="mt-6">
                <span class="inline-flex">
                    <x-button href="{{ $heroCtaUrl }}" variant="outline-light" size="md">
                        {{ $heroCtaLabel }}
                        <x-icon name="arrow-up-right" :size="16" />
                    </x-button>
                </span>
            </div>
        </div>
    </div>

    {{-- Forward control: manual advance (the slider also auto-advances). --}}
    <button type="button"
            data-hero-next
            aria-label="Ver la siguiente imagen"
            class="absolute right-4 top-1/2 z-20 flex -translate-y-1/2 cursor-pointer items-center gap-2 whitespace-nowrap font-sans text-sm font-medium text-accent-500 transition-colors duration-base ease-out-soft hover:text-accent-text sm:right-6 sm:gap-3 md:text-base lg:right-10">
        <span>{{ $heroNextLabel }}</span>
        <x-icon name="arrow-right" :size="18" />
    </button>
</section>