@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">{{ $eyebrow }}</p>
        <h1 class="display-hero mt-6 max-w-5xl">{!! nl2br(e(str_replace(' to ', "\nto ", $title))) !!}</h1>
        @if ($summary)
            <p class="mt-8 max-w-xl text-base leading-relaxed text-cream/85 md:text-lg">{{ $summary }}</p>
        @endif
        <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, $primaryCtaPath) }}">{{ $primaryCtaLabel }} <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, $secondaryCtaPath) }}">{{ $secondaryCtaLabel }}</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>
    <button class="inline-edit-trigger" type="button" wire:click="edit">{{ __('admin.content.edit_section') }}</button>
    @if ($editing)
        <div class="inline-edit-backdrop" role="presentation">
            <section class="inline-edit-modal" role="dialog" aria-modal="true" aria-labelledby="home-hero-edit-title">
                <div class="inline-edit-modal__header">
                    <div><p class="eyebrow">{{ strtoupper($locale) }}</p><h2 id="home-hero-edit-title">{{ $locale === 'ar' ? 'تعديل قسم البطل' : 'Edit Hero section' }}</h2></div>
                    <button type="button" wire:click="cancel" aria-label="{{ __('Close') }}">×</button>
                </div>
                <form wire:submit="save">
                    <label><span>{{ __('Eyebrow') }}</span><input type="text" wire:model="eyebrow">@error('eyebrow') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('Title') }}</span><input type="text" wire:model="title" required>@error('title') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('Summary') }}</span><textarea wire:model="summary" rows="5"></textarea>@error('summary') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('admin.content.primary_cta_label') }}</span><input type="text" wire:model="primaryCtaLabel" required>@error('primaryCtaLabel') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('admin.content.primary_cta_path') }}</span><input type="text" wire:model="primaryCtaPath" required>@error('primaryCtaPath') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('admin.content.secondary_cta_label') }}</span><input type="text" wire:model="secondaryCtaLabel" required>@error('secondaryCtaLabel') <small>{{ $message }}</small> @enderror</label>
                    <label><span>{{ __('admin.content.secondary_cta_path') }}</span><input type="text" wire:model="secondaryCtaPath" required>@error('secondaryCtaPath') <small>{{ $message }}</small> @enderror</label>
                    <div class="inline-edit-modal__actions"><button class="button button--dark" type="submit" wire:loading.attr="disabled">{{ __('admin.content.save_changes') }}</button><button class="button button--quiet" type="button" wire:click="cancel">{{ __('admin.content.cancel') }}</button></div>
                </form>
            </section>
        </div>
    @endif
</section>