@php($slides = [
    ['path' => '../html-design/assets/images/farm-landscape.jpg', 'alt' => 'Egyptian agricultural fields at sunrise'],
    ['path' => '../html-design/assets/images/about/about-hero.jpg', 'alt' => 'Farmer tending cultivated herb rows'],
    ['path' => '../html-design/assets/images/products-hero.jpg', 'alt' => 'Premium herbs, spices, seeds and natural oils'],
    ['path' => '../html-design/assets/images/empowerment/empowerment-hero.jpg', 'alt' => 'Farmer walking through a cultivated field'],
])
<section class="relative h-[100svh] min-h-160 w-full overflow-hidden" data-home-slider-root>
    <div class="home-slider" data-home-slider aria-roledescription="carousel" aria-label="Seed Nest agricultural imagery" tabindex="0">
        @foreach ($slides as $index => $slide)<figure class="home-slider-slide {{ $index === 0 ? 'is-active' : '' }}" data-home-slide aria-hidden="{{ $index === 0 ? 'false' : 'true' }}"><img class="home-slider-media" src="{{ Vite::asset($slide['path']) }}" alt="{{ $slide['alt'] }}" @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif></figure>@endforeach
    </div>
    <div class="absolute inset-0 bg-gradient-to-b from-olive/55 via-olive/30 to-olive/85"></div>
    <div class="container-page relative z-10 flex h-full flex-col justify-end pb-20 text-cream md:pb-28"><p class="eyebrow text-cream/85">{{ data_get($section, 'data.eyebrow') }}</p><h1 class="display-hero mt-6 max-w-5xl">{!! nl2br(e(str_replace(' to ', "\nto ", (string) data_get($section, 'data.title')))) !!}</h1><p class="mt-8 max-w-xl text-base leading-relaxed text-cream/85 md:text-lg">{{ data_get($section, 'data.summary') }}</p><div class="mt-10 flex flex-wrap gap-3"><a class="group inline-flex items-center gap-2 rounded-sm bg-cream px-7 py-3.5 text-xs font-medium uppercase tracking-[.18em] text-olive transition-colors hover:bg-cream/90" href="{{ app(\App\Support\Settings\Settings::class)->publicUrl($locale, data_get($section, 'data.primary_cta_path')) }}">{{ data_get($section, 'data.primary_cta_label') }} <span class="rtl-flip transition-transform group-hover:translate-x-1">→</span></a><a class="inline-flex items-center gap-2 rounded-sm border border-cream/40 px-7 py-3.5 text-xs font-medium uppercase tracking-[.18em] text-cream" href="{{ app(\App\Support\Settings\Settings::class)->publicUrl($locale, data_get($section, 'data.secondary_cta_path')) }}">{{ data_get($section, 'data.secondary_cta_label') }}</a></div></div>
    <div class="home-slider-controls" aria-label="{{ __('Hero slide controls') }}"><button class="home-slider-arrow" type="button" data-home-slider-previous aria-label="{{ __('Show previous hero slide') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m14 6-6 6 6 6"/></svg></button><div class="home-slider-pagination" aria-label="{{ __('Hero slide pagination') }}">@foreach ($slides as $index => $slide)<button class="home-slider-dot {{ $index === 0 ? 'is-active' : '' }}" type="button" data-home-slider-dot aria-label="{{ __('Show hero slide') }} {{ $index + 1 }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}"></button>@endforeach</div><button class="home-slider-arrow" type="button" data-home-slider-next aria-label="{{ __('Show next hero slide') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m10 6 6 6-6 6"/></svg></button></div>
    <div class="absolute bottom-6 right-6 z-10 hidden items-center gap-3 text-[11px] uppercase tracking-[.2em] text-cream/70 md:flex md:right-10"><span class="block h-px w-12 bg-cream/40"></span>{{ __('Scroll') }}</div>
</section>