@extends('layouts.app')

@section('title', $seoTitle)
@section('meta_description', $seoDescription)

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => route('home'),
        'ogTitle' => $seoTitle,
        'ogDescription' => $seoDescription,
    ])
@endsection

{{-- Главная по макету редизайна («Главная»): компактный hero 2:1 с двумя
     плитками справа, полоса преимуществ, категории, «Акции дня» лентой,
     тёмная плашка для продавцов и бесконечные «Рекомендации». --}}
@php($fmt = fn ($v) => number_format((float) $v, 0, '.', ' ').' ₽')
@php($sellerCta = auth()->check() ? (auth()->user()->seller() ? route('merchant.dashboard') : route('become-seller')) : route('register'))
@php($sellerCtaLabel = auth()->check() ? (auth()->user()->seller() ? 'Кабинет продавца' : 'Стать продавцом') : 'Стать продавцом')
@php($maxDeal = (int) $deals->max('discount_percent'))

@section('content')
    {{-- ============ HERO ============ --}}
    <section class="grid gap-3 lg:grid-cols-[2fr_1fr]">
        {{-- Banner slider --}}
        <div x-data="bannerSlider({{ $banners->count() }})" class="relative min-h-[200px] overflow-hidden rounded-[var(--radius-lg)] sm:min-h-[260px]">
            @forelse ($banners as $i => $banner)
                <a @if ($banner->link_url) href="{{ $banner->link_url }}" @endif
                   x-show="active === {{ $i }}" x-transition.opacity.duration.500ms
                   class="absolute inset-0 block">
                    <img src="{{ $banner->imageUrl() }}" alt="{{ $banner->title }}" class="h-full w-full object-cover">
                    @if ($banner->title || $banner->subtitle)
                        <div class="absolute inset-0 flex flex-col justify-center gap-2.5 bg-gradient-to-r from-black/45 to-transparent px-6 py-7 sm:px-9">
                            @if ($banner->title)<h2 class="max-w-[70%] text-2xl font-extrabold leading-[1.15] tracking-[-0.5px] text-white sm:text-[28px]">{{ $banner->title }}</h2>@endif
                            @if ($banner->subtitle)<p class="max-w-[420px] text-sm text-white/85">{{ $banner->subtitle }}</p>@endif
                            @if ($banner->cta_label)<span class="mt-1.5 inline-flex w-fit rounded-[var(--radius-md)] bg-white px-[18px] py-2.5 text-[13.5px] font-bold text-[var(--color-primary)]">{{ $banner->cta_label }}</span>@endif
                        </div>
                    @endif
                </a>
            @empty
                {{-- Fallback hero when no banners are uploaded yet --}}
                <div class="absolute inset-0 flex flex-col justify-center gap-2.5 overflow-hidden bg-[var(--color-primary)] px-6 py-7 sm:px-9">
                    <span class="pointer-events-none absolute -right-16 -top-16 h-64 w-64 rounded-full bg-white/[0.07]"></span>
                    <span class="pointer-events-none absolute -bottom-24 right-10 h-52 w-52 rounded-full bg-white/[0.06]"></span>
                    <h1 class="relative max-w-[480px] text-2xl font-extrabold leading-[1.15] tracking-[-0.5px] text-white sm:text-[28px]">Всё, что вы любите — в одном месте</h1>
                    <p class="relative max-w-[420px] text-sm text-white/85">Товары всех категорий от проверенных продавцов.</p>
                    <a href="{{ route('catalog.index') }}" class="relative mt-1.5 inline-flex w-fit rounded-[var(--radius-md)] bg-white px-[18px] py-2.5 text-[13.5px] font-bold text-[var(--color-primary)] transition hover:bg-[var(--color-primary-soft)]">Перейти в каталог</a>
                </div>
            @endforelse

            @if ($banners->count() > 1)
                <div class="absolute bottom-3.5 left-1/2 flex -translate-x-1/2 gap-2">
                    @foreach ($banners as $i => $banner)
                        <button type="button" @click="go({{ $i }})" :class="active === {{ $i }} ? 'bg-white w-6' : 'bg-white/50 w-2'"
                                class="h-2 rounded-full transition-all" aria-label="Слайд {{ $i + 1 }}"></button>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Две плитки: товар дня и приглашение продавцам --}}
        <div class="grid grid-cols-2 gap-2 sm:gap-3 lg:grid-cols-1 lg:grid-rows-2">
            @if ($spotlight)
                <a href="{{ $spotlight->url() }}"
                   class="relative flex min-h-[96px] items-center gap-3 overflow-hidden rounded-[var(--radius-lg)] bg-[var(--color-warning-soft)] px-3.5 py-3.5 sm:px-5 sm:py-[18px] transition hover:shadow-[inset_0_0_0_1.5px_#E8B98A]">
                    <span class="min-w-0 flex-1">
                        <span class="block text-[10.5px] font-bold uppercase tracking-[0.8px] text-[var(--color-warning)]">
                            Товар дня@if ($spotlight->onSale()) · −{{ $spotlight->discount_percent }}%@endif
                        </span>
                        <span class="mt-1 line-clamp-2 block text-sm font-bold leading-[1.25] text-[var(--color-ink)] sm:text-[15px]">{{ $spotlight->title }}</span>
                        <span class="mt-1 block text-[13px] font-semibold text-[var(--color-warning)]">{{ $fmt($spotlight->onSale() ? $spotlight->salePrice() : $spotlight->price) }}</span>
                    </span>
                    @if ($img = $spotlight->primaryImage())
                        <img src="{{ $img->previewUrl() }}" alt="" class="hidden h-[76px] w-[76px] shrink-0 rounded-[var(--radius-md)] bg-white object-contain p-1 sm:block">
                    @endif
                </a>
            @endif

            <a href="{{ $sellerCta }}"
               class="relative flex min-h-[96px] items-center gap-3 overflow-hidden rounded-[var(--radius-lg)] bg-[var(--color-success-soft)] px-3.5 py-3.5 sm:px-5 sm:py-[18px] transition hover:shadow-[inset_0_0_0_1.5px_#8CC9A4] @unless ($spotlight) col-span-2 lg:col-span-1 lg:row-span-2 @endunless">
                <span class="min-w-0 flex-1">
                    <span class="block text-[10.5px] font-bold uppercase tracking-[0.8px] text-[var(--color-success)]">Продавцам · 0 ₽</span>
                    <span class="mt-1 block text-sm font-bold leading-[1.25] text-[var(--color-ink)] sm:text-[15px]">Откройте магазин бесплатно</span>
                </span>
                <i data-lucide="store" class="hidden h-8 w-8 shrink-0 text-[var(--color-success)] opacity-70 sm:block"></i>
            </a>
        </div>
    </section>

    {{-- ============ TRUST STRIP ============ --}}
    {{-- Одна полоса с внутренними разделителями, как в макете; на телефоне — 2×2. --}}
    <section class="mt-4 grid grid-cols-2 overflow-hidden rounded-[10px] border border-[var(--color-line)] lg:grid-cols-4">
        @foreach ([
            ['truck', 'Быстрая доставка', 'По всей России'],
            ['shield-check', 'Защита покупателя', 'Гарантия возврата'],
            ['refresh-ccw', 'Лёгкий возврат', '14 дней на возврат'],
            ['headset', 'Поддержка 24/7', 'Живые люди, быстро'],
        ] as [$icon, $title, $sub])
            <div class="-ml-px -mt-px flex items-center gap-3 border-l border-t border-[var(--color-line)] px-4 py-3.5 sm:px-[18px]">
                <i data-lucide="{{ $icon }}" class="hidden h-5 w-5 shrink-0 text-[var(--color-primary)] sm:block"></i>
                <div class="min-w-0">
                    <div class="text-[13.5px] font-bold text-[var(--color-ink)]">{{ $title }}</div>
                    <div class="mt-0.5 text-xs text-[var(--color-muted)]">{{ $sub }}</div>
                </div>
            </div>
        @endforeach
    </section>

    {{-- ============ CATEGORY TILES ============ --}}
    @if ($catTiles->isNotEmpty())
        <section class="mt-8">
            <div class="mb-3.5 flex items-baseline justify-between gap-3.5">
                <h2 class="text-[22px] font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">Категории</h2>
                <a href="{{ route('catalog.index') }}" class="text-[13px] font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">Все категории →</a>
            </div>
            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3 lg:grid-cols-8">
                @foreach ($catTiles as $cat)
                    <a href="{{ route('catalog.category', $cat->path) }}"
                       class="group flex items-center gap-2.5 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-3 py-3 transition hover:border-[var(--color-line-strong)] hover:shadow-[var(--shadow-hover)] lg:flex-col lg:gap-2 lg:px-2 lg:py-4">
                        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-[10px] bg-[var(--color-primary-soft)] text-[15px] font-extrabold text-[var(--color-primary)]">
                            @if ($cat->icon)
                                <i data-lucide="{{ $cat->icon }}" class="h-5 w-5"></i>
                            @else
                                {{ mb_substr($cat->name, 0, 1) }}
                            @endif
                        </span>
                        <span class="min-w-0 text-[13px] font-semibold leading-tight text-[var(--color-ink)] group-hover:text-[var(--color-primary)] lg:text-center">{{ $cat->name }}</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ============ DEALS OF THE DAY ============ --}}
    @if ($deals->isNotEmpty())
        {{-- Витрина-карусель: бесконечная прокрутка в одну сторону, шаг настраивается
             в панели (Настройки → Главная страница). Остаётся обычным скролл-контейнером,
             поэтому на телефоне работает пролистывание пальцем; скроллбар прячет .marquee.
             Стрелки — в шапке блока, по бокам карточек их сознательно нет. На ПК
             в ширину помещается ровно шесть карточек — как сетка на макете. --}}
        {{-- Наведение слушаем только у мыши: на тач-экране pointerenter приходит на
             касание, а парная pointerleave — не всегда, и лента замерла бы. Палец
             обрабатывается отдельно, через touchstart/touchend на самой ленте. --}}
        <section class="mt-8" x-data="dealsRail({ delay: {{ $dealsRotateSeconds }} })"
                 @pointerenter="$event.pointerType === 'mouse' && pause('pointer')"
                 @pointerleave="$event.pointerType === 'mouse' && resume('pointer')"
                 @focusin="pause('focus')" @focusout="resume('focus')">
            <div class="mb-3.5 flex items-center justify-between gap-3">
                <div class="flex items-baseline gap-3.5">
                    <h2 class="text-[22px] font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">Акции дня</h2>
                    @if ($maxDeal > 0)
                        <span class="rounded-[var(--radius-sm)] bg-[var(--color-sale-soft)] px-2 py-[3px] text-[12.5px] font-bold text-[var(--color-sale)]">до −{{ $maxDeal }}%</span>
                    @endif
                </div>
                <div class="flex shrink-0 items-center gap-3">
                    {{-- На телефоне стрелок нет — там листают пальцем. --}}
                    <div x-show="canLoop" x-cloak class="hidden items-center gap-1.5 sm:flex">
                        <button type="button" @click="step(-1)" aria-label="Предыдущие акции"
                                class="grid h-8 w-8 place-items-center rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white text-[var(--color-slate)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                            <i data-lucide="chevron-left" class="h-4 w-4"></i>
                        </button>
                        <button type="button" @click="step(1)" aria-label="Следующие акции"
                                class="grid h-8 w-8 place-items-center rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white text-[var(--color-slate)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                            <i data-lucide="chevron-right" class="h-4 w-4"></i>
                        </button>
                    </div>
                    <a href="{{ route('deals.index') }}" class="whitespace-nowrap text-[13px] font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">Все акции →</a>
                </div>
            </div>
            <div x-ref="rail" @scroll.passive="onScroll()"
                 @touchstart.passive="hold()" @touchend.passive="release()" @touchcancel.passive="release()"
                 class="marquee -mx-4 flex gap-3 px-4 pb-2 sm:mx-0 sm:px-0">
                @foreach ($deals as $deal)
                    <div class="flex w-[160px] shrink-0 flex-col sm:w-[200px] lg:w-[calc((100%-60px)/6)]">
                        <div class="flex-1"><x-product-card :product="$deal" /></div>
                        @if ($deal->sale_ends_at)
                            <div x-data="dealCountdown('{{ $deal->sale_ends_at->toIso8601String() }}')" x-show="text" x-cloak
                                 class="mt-1.5 flex items-center justify-center gap-1.5 rounded-[var(--radius-sm)] bg-[var(--color-sale-soft)] py-1 text-xs font-bold text-[var(--color-sale)]">
                                <i data-lucide="clock" class="h-3.5 w-3.5"></i> <span x-text="text"></span>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ============ SHOPS MARQUEE ============ --}}
    @include('partials.home.shops-marquee')

    {{-- ============ SLOGAN / CTA ============ --}}
    <section class="mt-8 flex flex-col items-start gap-4 rounded-[var(--radius-lg)] bg-[var(--color-dark)] px-6 py-[22px] text-white sm:flex-row sm:items-center sm:gap-5 sm:px-7">
        <div class="min-w-0 flex-1">
            <div class="text-[17px] font-bold">Бесплатная площадка для продавцов и покупателей</div>
            <div class="mt-[3px] text-[13px] text-white/65">Регистрация ничего не стоит — начните покупать или продавать уже сегодня.</div>
        </div>
        @guest
            <button type="button" @click="$store.authModal.show()" class="shrink-0 whitespace-nowrap rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-[11px] text-[13.5px] font-semibold text-white transition hover:bg-[#3765E8]">Зарегистрироваться</button>
        @else
            <a href="{{ $sellerCta }}" class="shrink-0 whitespace-nowrap rounded-[var(--radius-md)] bg-[var(--color-primary)] px-5 py-[11px] text-[13.5px] font-semibold text-white transition hover:bg-[#3765E8]">{{ $sellerCtaLabel }}</a>
        @endguest
    </section>

    {{-- ============ RECOMMENDATIONS (infinite feed) ============ --}}
    {{-- Порция ленты по умолчанию — 24 товара: ровно целые ряды при 2, 3, 4 и 6
         колонках (5 колонок не берём). --}}
    <section class="mt-8" x-data="recFeed({ url: '{{ route('home.feed') }}', next: {{ $feedNextPage }}, hasMore: {{ $feedHasMore ? 'true' : 'false' }} })">
        <div class="mb-3.5 flex items-baseline justify-between">
            <h2 class="text-[22px] font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">Рекомендации для вас</h2>
        </div>
        @if ($recommended->isNotEmpty())
            <div x-ref="grid" class="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 xl:grid-cols-6">
                @foreach ($recommended as $product)
                    <x-product-card :product="$product" />
                @endforeach
            </div>
            <div x-ref="sentinel" class="h-8"></div>
            <div x-show="loading" x-cloak class="py-6 text-center text-[13px] text-[var(--color-muted)]">Загрузка…</div>
            <div x-show="!hasMore" x-cloak class="py-6 text-center text-[13px] text-[var(--color-muted)]">Вы посмотрели все рекомендации</div>
        @else
            <p class="text-[13.5px] text-[var(--color-muted)]">Пока нет товаров для показа.</p>
        @endif
    </section>
@endsection