@extends('storefront.layout')

@section('title', $sfStore->name)

@section('content')
    <h1 class="sf-visually-hidden">{{ $sfStore->name }}</h1>

    @php
        $sfSett       = is_array($sfStore->settings['storefront'] ?? null) ? $sfStore->settings['storefront'] : [];
        $heroTitle    = trim((string) ($sfSett['hero_title']    ?? '')) ?: 'Quality you can see';
        $heroSubtitle = trim((string) ($sfSett['hero_subtitle'] ?? '')) ?: 'Browse our full range and add items to your cart — visit us in store to complete your purchase.';
        $heroImage    = trim((string) ($sfSett['hero_image']    ?? ''));
    @endphp

    <section class="sf-hero-card" aria-labelledby="hero-heading">
        @php
            $heroPng = public_path('assets/storefront/hero-side.png');
            $heroBust = (int) ($sfStore->updated_at?->timestamp ?? $sfStore->getKey());
            if ($heroImage !== '') {
                $heroSrc = \Illuminate\Support\Facades\Storage::url($heroImage) . '?v=' . $heroBust;
            } elseif (file_exists($heroPng)) {
                $heroSrc = asset('assets/storefront/hero-side.png') . '?v=' . $heroBust;
            } else {
                $heroSrc = asset('assets/storefront/hero-side.svg') . '?v=' . $heroBust;
            }
        @endphp
        <div class="sf-hero-card__media" aria-hidden="true">
            <img class="sf-hero-card__img" src="{{ $heroSrc }}" alt="" aria-hidden="true" decoding="async" fetchpriority="high">
        </div>
        <div class="sf-hero-card__content">
            <h2 id="hero-heading" class="sf-hero-card__title">{{ $heroTitle }}</h2>
            <span class="sf-hero-card__rule" aria-hidden="true"></span>
            <p class="sf-hero-card__lead">{{ $heroSubtitle }}</p>
            <a class="sf-hero-card__cta" href="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}">
                Shop Now
                <svg class="sf-hero-card__arrow" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>
    </section>

    <section class="sf-offers" aria-labelledby="offers-title">
        <h2 id="offers-title" class="sf-visually-hidden">{{ __('Highlights') }}</h2>
        <div class="sf-offers__grid">
            @foreach($offerCards as $idx => $card)
                <article class="sf-offer-card">
                    @if(!empty($card['image']))
                        <div class="sf-offer-card__media">
                            <img class="sf-offer-card__thumb" src="{{ \Illuminate\Support\Facades\Storage::url($card['image']) }}" width="320" height="200" alt="">
                        </div>
                    @else
                        <div class="sf-offer-card__icon" aria-hidden="true">
                            @if($idx === 0)
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
                            @elseif($idx === 1)
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/></svg>
                            @else
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            @endif
                        </div>
                    @endif
                    <h3 class="sf-offer-card__title">{{ $card['title'] }}</h3>
                    <p class="sf-offer-card__text">{{ $card['text'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    @foreach($sfSections as $sfSection)
        @php $sfSecType = $sfSection['type'] ?? ''; @endphp

        @if($sfSecType === 'categories' && !empty($sfSection['categories']) && $sfSection['categories']->isNotEmpty())
            <section class="sf-home-block" aria-labelledby="sf-sec-cat-{{ $loop->index }}">
                <div class="sf-section-head" id="sf-sec-cat-{{ $loop->index }}">
                    <h2 class="sf-section-title">{{ $sfSection['title'] ?? __('Shop by category') }}</h2>
                    <a class="sf-section-link" href="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}">{{ __('View all') }}</a>
                </div>
                @php $catBust = (int) ($sfStore->updated_at?->timestamp ?? $sfStore->getKey()); @endphp
                <div class="sf-cat-slider" data-cat-slider aria-roledescription="carousel">
                    <button type="button" class="sf-cat-slider__arrow sf-cat-slider__arrow--prev" aria-label="{{ __('Previous categories') }}">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
                    </button>
                    <div class="sf-cat-slider__viewport">
                        <div class="sf-cat-slider__track" role="list">
                            @foreach($sfSection['categories'] as $cat)
                                @php
                                    $catNm = trim((string) $cat->name);
                                    $catLetter = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($catNm !== '' ? $catNm : '?', 0, 1));
                                    $catImg = $cat->image ? \Illuminate\Support\Facades\Storage::url($cat->image) . '?v=' . $catBust : null;
                                @endphp
                                <div class="sf-cat-slider__slide" role="listitem">
                                    <a class="sf-card sf-card--product sf-cat-slider__card" href="{{ route('storefront.shop', ['slug' => $sfStore->slug, 'category' => $cat->id]) }}">
                                        <div class="sf-card__media">
                                            @if($catImg)
                                                <img src="{{ $catImg }}" alt="{{ $cat->name }}" loading="lazy" width="400" height="300">
                                            @else
                                                <div class="sf-card__placeholder" aria-hidden="true">{{ $catLetter }}</div>
                                            @endif
                                        </div>
                                        <div class="sf-card__body">
                                            <div class="sf-card__title-row">
                                                <h2 class="sf-card__title">{{ $cat->name }}</h2>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button" class="sf-cat-slider__arrow sf-cat-slider__arrow--next" aria-label="{{ __('Next categories') }}">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
                    </button>
                </div>
            </section>

        @elseif($sfSecType === 'featured' || $sfSecType === 'custom')
            <section class="sf-home-block" aria-labelledby="sf-sec-prod-{{ $loop->index }}">
                <div class="sf-section-head" id="sf-sec-prod-{{ $loop->index }}">
                    <h2 class="sf-section-title">{{ $sfSection['title'] ?? __('Products') }}</h2>
                    <a class="sf-section-link" href="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}">{{ __('View all') }}</a>
                </div>
                @if(empty($sfSection['products']) || $sfSection['products']->isEmpty())
                    <div class="sf-empty">
                        <p class="sf-empty__title">{{ $sfSecType === 'featured' ? __('Shop coming soon') : __('No products found') }}</p>
                        <p class="sf-empty__text">{{ $sfSecType === 'featured' ? __('We are preparing our product listings. Please check back shortly.') : __('No products match this section right now.') }}</p>
                    </div>
                @else
                    <div class="sf-grid sf-grid--3 sf-home-block__grid sf-home-sec-grid"
                         data-sf-sec-grid
                         data-sec-id="{{ $sfSection['id'] ?? '' }}"
                         data-next-page="{{ route('storefront.section-products', ['slug' => $sfStore->slug, 'section_id' => $sfSection['id'] ?? '', 'page' => 2]) }}">
                        @include('storefront.partials.product-grid-items', ['products' => $sfSection['products']])
                    </div>
                    <div class="sf-home-sec-sentinel" data-sf-sec-sentinel style="height:1px"></div>
                @endif
            </section>
        @endif
    @endforeach

    @include('storefront.partials.business-home-block', ['businessHome' => $businessHome ?? null])
@endsection

@push('scripts')
<script>
(function () {
    function gapPx(track) {
        var g = parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap || '12');
        return isNaN(g) ? 12 : g;
    }
    /** Must match CSS: exactly 4 tiles visible per row */
    var CAT_SLIDER_VISIBLE = 4;
    function initCatSlider(root) {
        var viewport = root.querySelector('.sf-cat-slider__viewport');
        var track = root.querySelector('.sf-cat-slider__track');
        var prev = root.querySelector('.sf-cat-slider__arrow--prev');
        var next = root.querySelector('.sf-cat-slider__arrow--next');
        if (!viewport || !track || !prev || !next) return;
        var slides = track.querySelectorAll('.sf-cat-slider__slide');
        if (!slides.length) return;
        var index = 0;
        function maxIndex() {
            return Math.max(0, slides.length - CAT_SLIDER_VISIBLE);
        }
        function stepPx() {
            var w = slides[0].getBoundingClientRect().width;
            return w + gapPx(track);
        }
        function clamp() {
            index = Math.max(0, Math.min(maxIndex(), index));
        }
        function render() {
            clamp();
            track.style.transform = 'translateX(' + (-index * stepPx()) + 'px)';
            prev.disabled = index <= 0;
            next.disabled = index >= maxIndex();
        }
        prev.addEventListener('click', function () {
            index -= 1;
            render();
        });
        next.addEventListener('click', function () {
            index += 1;
            render();
        });
        window.addEventListener('resize', function () {
            clamp();
            render();
        });
        if (document.fonts && document.fonts.ready) {
            document.fonts.ready.then(render);
        } else {
            requestAnimationFrame(function () { requestAnimationFrame(render); });
        }
    }
    document.querySelectorAll('[data-cat-slider]').forEach(initCatSlider);
})();
</script>

<script>
(function () {
    if (!('IntersectionObserver' in window)) return;

    var grids = document.querySelectorAll('[data-sf-sec-grid]');
    if (!grids.length) return;

    function init(grid) {
        var secId = grid.getAttribute('data-sec-id') || '';
        if (!secId) return;
        var sentinel = grid.parentElement.querySelector('[data-sf-sec-sentinel]');
        if (!sentinel) return;
        var loading = false;

        async function loadNext() {
            var next = grid.getAttribute('data-next-page') || '';
            if (!next || loading) return;
            loading = true;
            try {
                var res = await fetch(next, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } });
                var data = await res.json();
                if (data && data.ok && data.html) {
                    grid.insertAdjacentHTML('beforeend', data.html);
                }
                if (!data || !data.next_page_url) {
                    obs.disconnect();
                } else {
                    grid.setAttribute('data-next-page', data.next_page_url);
                }
            } catch (e) {
                // noop
            } finally {
                loading = false;
            }
        }

        var obs = new IntersectionObserver(function (entries) {
            if (entries[0] && entries[0].isIntersecting) loadNext();
        }, { root: null, threshold: 0, rootMargin: '450px 0px 450px 0px' });
        obs.observe(sentinel);
    }

    grids.forEach(init);
})();
</script>
@endpush