@php
    /*
     | "Origen" storytelling: full-bleed cantera/nature photos that stack on
     | scroll (same sticky mechanism as the journey section). It reinforces that
     | the stone is 100% natural — extracted from the quarry — and not the
     | synthetic laja sold in local markets. Content is admin-managed through
     | the `origin_panels` setting; the list below is the fallback used before
     | seeding.
     */
    $settings = app(\App\Services\SettingsService::class);

    $panels = $settings->get('origin_panels', [
        [
            'image' => 'images/seed/hero-cantera.jpg',
            'alt' => 'Cantera de piedra laja natural en Perú',
            'eyebrow' => 'Nuestro origen',
            'title' => 'Piedra natural, no fabricada',
            'copy' => 'Extraemos piedra laja de cantera peruana: conserva su veta, su tono y su textura. No es la laja sintética que se ofrece en los mercados locales.',
        ],
        [
            'image' => 'images/real/hero/2.jpg',
            'alt' => 'Frente de cantera de piedra laja',
            'eyebrow' => 'La cantera',
            'title' => 'Nace en la montaña',
            'copy' => 'Cada bloque se extrae siguiendo la veta natural. Su origen define su dureza, su color y su comportamiento en obra.',
        ],
        [
            'image' => 'images/real/hero/4.jpg',
            'alt' => 'Piedra natural seleccionada en cantera',
            'eyebrow' => 'Tu obra',
            'title' => 'Directo de la cantera',
            'copy' => 'Sin intermediarios: piedra 100% natural, seleccionada pieza por pieza y despachada con trazabilidad a todo el Perú.',
        ],
    ]);

    /*
     | Hero-style stacked display: split the panel title on its first comma (or,
     | failing that, its first space) so the trailing clause can overlap the
     | first line the way the hero headline does. Titles without a natural break
     | fall back to a single line.
     */
    $headingParts = function (string $title): array {
        $separator = str_contains($title, ',') ? ',' : ' ';

        if (! str_contains($title, $separator)) {
            return [$title, null];
        }

        [$first, $rest] = explode($separator, $title, 2);

        $first = trim($first).($separator === ',' ? ',' : '');
        $rest = trim($rest);

        return $rest === '' ? [$first, null] : [$first, $rest];
    };

    /*
     | Alternating plate side: the stacked origin panels interleave the text
     | plate LEFT / RIGHT / LEFT — the client asked for "izquierda derecha
     | izquierda", so the "La cantera" panel (index 1) lands on the right.
     | Driven by panel index so the order is explicit and trivial to change.
     */
    $plateSides = ['left', 'right', 'left'];
@endphp

<section data-section="origin"
         data-journey
         data-tone="light"
         class="relative w-full bg-surface text-on-surface">
    <ol data-journey-list class="relative">
        @foreach ($panels as $index => $panel)
            <li data-journey-panel
                data-journey-sticky
                style="z-index: {{ $index + 1 }}"
                class="sticky top-0 isolate flex min-h-[calc(100svh_+_7rem)] w-full items-center overflow-hidden bg-surface lg:min-h-[100svh]">
                {{-- Overscanned layer so the parallax drift never exposes the edges. --}}
                <div data-journey-photo class="absolute -inset-[12%]">
                    <x-image
                        :src="\App\Support\MediaPath::url($panel['image'] ?? null, 'images/seed/hero-cantera.jpg')"
                        :alt="$panel['alt'] ?? $panel['title'] ?? null"
                        :width="1920"
                        :height="1280"
                        :loading="$index === 0 ? 'eager' : 'lazy'"
                        :fetchpriority="$index === 0 ? 'high' : null"
                        wrapper-class="h-full w-full"
                        img-class="h-full w-full object-cover"
                        data-journey-image="1"
                    />
                </div>

                {{-- Dark veil + dark plate: the client explicitly asked for a DARK
                     effect here — a cream wash dulls the photo. Light text on the
                     dark plate keeps AA contrast while the image stays rich. --}}
                <div class="pointer-events-none absolute inset-0 bg-brand-950/45"></div>

                <x-container class="relative z-10 w-full pb-12 pt-[calc(var(--header-height)_+_1.5rem)] lg:pb-16 lg:pt-0">
                    @php
                        $plateSide = $plateSides[$index % count($plateSides)] ?? 'left';
                    @endphp
                    <div class="max-w-4xl border border-brand-800 bg-brand-950/85 p-6 backdrop-blur-sm sm:p-9 lg:p-10 {{ $plateSide === 'right' ? 'lg:ml-auto' : 'lg:mr-auto' }}">
                        <p class="font-sans text-sm font-bold uppercase tracking-[0.18em] text-accent-300">{{ $panel['eyebrow'] ?? null }}</p>
                        @php [$headingFirst, $headingSecond] = $headingParts((string) ($panel['title'] ?? '')); @endphp
                        <h2 class="mt-3 max-w-4xl font-serif text-[clamp(1.9rem,4.2vw,3.4rem)] font-normal uppercase leading-[0.85] tracking-[-0.02em]">
                            <span class="block text-accent-300">{{ $headingFirst }}</span>
                            @if ($headingSecond)
                                <span class="relative z-10 -mt-[0.22em] block pl-[0.5em] text-cream">{{ $headingSecond }}</span>
                            @endif
                        </h2>
                        <p class="mt-4 max-w-xl font-sans text-base leading-relaxed text-cream/85">{{ $panel['copy'] ?? null }}</p>
                    </div>
                </x-container>
            </li>
        @endforeach

        {{-- Optional closing panel: the section that follows joins the same
             stack so the origin panels visibly recede underneath it instead of
             simply scrolling away. Rendered only when the slot has content. --}}
        @php $tailHtml = isset($tail) ? (string) $tail : ''; @endphp
        @if (trim(strip_tags($tailHtml)) !== '')
            <li data-journey-panel
                data-journey-sticky
                style="z-index: {{ count($panels) + 1 }}"
                class="sticky top-0 isolate flex min-h-[100svh] w-full items-center overflow-hidden bg-surface">
                {!! $tailHtml !!}
            </li>
        @endif
    </ol>
</section>