@extends('layouts.app')

@section('title', __('shop.tagline'))

@section('content')

    {{-- ---------------------------------------------------------- hero rail --}}
    <section data-hero class="relative h-[70vh] min-h-[480px] w-full overflow-hidden bg-primary">
        @forelse ($banners as $index => $banner)
            <div data-slide
                 class="absolute inset-0 transition-opacity duration-1000 ease-soft {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}"
                 aria-hidden="{{ $index === 0 ? 'false' : 'true' }}">
                @if ($banner->image_path)
                    <img src="{{ media($banner->image_path) }}" alt="" class="h-full w-full object-cover"
                         @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif>
                @endif

                {{-- Scrim darkens the inline-START edge, where the copy sits:
                     left in English, right in Arabic. Real photography is
                     brighter than a flat panel, so it is heavier than it was. --}}
                <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/45 to-transparent rtl:bg-gradient-to-l"></div>

                <div class="absolute inset-0 flex items-center">
                    {{-- justify-start and text-start are direction-aware, so one
                         rule puts the copy on the left in English and the right in
                         Arabic without a second stylesheet. Both are also the
                         browser default; they are named here so the alignment
                         reads as a decision rather than an accident. --}}
                    <div class="shell flex justify-start">
                        <div class="max-w-2xl text-start">
                            <p class="u-label-sm mb-4 text-secondary-fixed">{{ __('shop.brand') }}</p>

                            {{-- text-white is explicit: the base h1 rule paints
                                 headings olive, and an inherited colour loses to
                                 a rule that names the element directly. --}}
                            <h1 class="font-display text-white text-[clamp(2.25rem,6vw,3.75rem)] font-bold leading-[1.1] tracking-[-0.02em]">
                                {{ $banner->heading }}
                            </h1>

                            @if ($banner->subheading)
                                <p class="mt-stack-sm text-body-lg font-light text-surface-container-highest">
                                    {{ $banner->subheading }}
                                </p>
                            @endif

                            <a href="{{ $banner->cta_url ?: route('catalogue') }}" class="btn-gold mt-stack-md">
                                {{ $banner->cta_label ?: __('home.shop_now') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="flex h-full items-center">
                <div class="shell flex justify-start">
                    <h1 class="max-w-2xl text-start font-display text-white text-[clamp(2.25rem,6vw,3.75rem)] font-bold">
                        {{ __('shop.tagline') }}
                    </h1>
                </div>
            </div>
        @endforelse

        @if ($banners->count() > 1)
            <div class="absolute bottom-6 start-0 end-0 flex items-center justify-center gap-2">
                @foreach ($banners as $index => $banner)
                    <button type="button" data-dot aria-label="{{ $index + 1 }}"
                            class="h-2 rounded-full transition-all duration-300 {{ $index === 0 ? 'w-8 bg-secondary-fixed' : 'w-2 bg-white/50' }}"></button>
                @endforeach
            </div>

            {{-- rtl:rotate-180 keeps "previous" pointing back, whichever way the page reads. --}}
            <button type="button" data-step="-1" aria-label="&laquo;"
                    class="absolute top-1/2 start-4 -translate-y-1/2 rounded-full bg-black/25 p-2 text-white hover:bg-black/45">
                <svg class="h-6 w-6 rtl:rotate-180" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" d="M15 19l-7-7 7-7"/></svg>
            </button>
            <button type="button" data-step="1" aria-label="&raquo;"
                    class="absolute top-1/2 end-4 -translate-y-1/2 rounded-full bg-black/25 p-2 text-white hover:bg-black/45">
                <svg class="h-6 w-6 rtl:rotate-180" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 5l7 7-7 7"/></svg>
            </button>
        @endif
    </section>

    {{-- --------------------------------------------------------- categories --}}
    <section class="shell pt-stack-lg">
        <div class="text-center">
            <p class="u-label-sm text-secondary">{{ __('home.categories_eyebrow') }}</p>
            <h2 class="mt-2 text-headline-lg-mobile md:text-headline-lg">{{ __('home.categories_heading') }}</h2>
        </div>

        <div class="mt-stack-md grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
            @foreach ($categories as $category)
                <a href="{{ route('category', $category) }}"
                   class="group relative aspect-square overflow-hidden rounded-lg border border-outline-variant/60
                          transition-all duration-300 ease-soft hover:-translate-y-1 hover:border-secondary/60 hover:shadow-ambient">
                    @if ($category->image_path)
                        <img src="{{ media($category->image_path) }}" alt="" loading="lazy"
                             class="h-full w-full object-cover transition-transform duration-500 ease-soft group-hover:scale-105">
                    @else
                        <span class="block h-full w-full bg-primary-container"></span>
                    @endif
                    <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-primary/95 to-transparent p-3 pt-8">
                        <span class="u-label-sm block text-center text-secondary-fixed">{{ $category->name }}</span>
                    </span>
                </a>
            @endforeach
        </div>
    </section>

    {{-- ------------------------------------------------------------ shelves --}}
    @foreach ($shelves as $shelf)
        <section class="shell pt-stack-lg" id="{{ $shelf->slug }}">
            <x-section-heading :title="$shelf->name" :eyebrow="$shelf->tagline"
                               :href="route('category', $shelf)" />

            <div class="grid grid-cols-2 gap-4 md:gap-gutter lg:grid-cols-4">
                @foreach ($shelf->products as $product)
                    <x-product-card :product="$product" />
                @endforeach
            </div>
        </section>
    @endforeach

    <x-leaf-rule class="mt-stack-lg" />

    {{-- ------------------------------------------------------------ promise --}}
    <section class="shell pb-stack-lg">
        <h2 class="text-center text-headline-md">{{ __('home.promise_heading') }}</h2>

        <ul class="mx-auto mt-stack-md grid max-w-4xl gap-stack-md sm:grid-cols-2">
            @foreach (['halal', 'cut', 'chill', 'chef'] as $key)
                <li class="flex gap-3 border-s border-outline-variant/70 ps-4">
                    <p class="text-body-md text-on-surface-variant">{{ __("home.promise.{$key}") }}</p>
                </li>
            @endforeach
        </ul>

        <p class="mt-stack-md text-center font-label text-label-lg uppercase text-secondary">
            {{ __('home.delivery_note', ['amount' => money(config('shop.free_delivery_over'))]) }}
        </p>
    </section>
@endsection