@extends('layouts.app')
@section('title', __('Soft headwear'))
@section('content')

{{-- Hero (banners from Admin > Banners, otherwise the built-in hero) --}}
@php $heroes = $shop->banners('home_hero'); @endphp
@if ($heroes)
<section aria-label="{{ __('Featured') }}" class="-mx-1 flex snap-x snap-mandatory gap-4 overflow-x-auto px-1 pb-2">
    @foreach ($heroes as $h)<div class="w-full shrink-0 snap-center">@php $hb = $h; @endphp<x-banner :banner="$hb" class="aspect-[4/5] sm:aspect-[16/7]"/></div>@endforeach
</section>
@else
<section class="grid items-center gap-8 overflow-hidden rounded-[40px] bg-tertiary p-8 sm:p-12 lg:grid-cols-2">
    <div>
        <p class="mb-3 inline-block rounded-full bg-white/60 px-4 py-1.5 text-xs font-extrabold uppercase tracking-wider text-on-tertiary">{{ __('New season') }}</p>
        <h1 class="text-4xl font-extrabold leading-tight tracking-tight text-on-tertiary sm:text-6xl">{{ __('Dress soft.') }}<br>{{ __('Move easy.') }}</h1>
        <p class="mt-4 max-w-md text-lg text-on-tertiary-container">{{ __('Caps, bucket hats and visors in calm, wearable colours.') }}</p>
        <div class="mt-8 flex flex-wrap gap-3">
            <x-btn :href="route('shop')">{{ __('Shop now') }} <x-icon name="arrow" class="w-4 h-4"/></x-btn>
            <x-btn :href="route('shop', ['new' => 1])" variant="ghost" class="bg-white/50 border-transparent">{{ __('New arrivals') }}</x-btn>
        </div>
    </div>
    <div class="mx-auto w-full max-w-md">
        <div class="overflow-hidden ">
            @if (!empty($newArrivals[0]->image)) <img src="{{ $newArrivals[0]->image }}" alt="{{ $newArrivals[0]->name }}" class="h-full w-full object-cover"> @endif
        </div>
    </div>
</section>
@endif

{{-- Categories: image tiles. Phones: swipe sideways. Tablet and up: a grid. --}}
@if ($categories)
<section class="mt-12 sm:mt-14" aria-label="{{ __('Categories') }}">
    <x-section-heading :title="__('Shop by category')" :href="route('shop')"/>
    <div class="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 sm:mx-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:overflow-visible sm:px-0 sm:pb-0 lg:grid-cols-4">
        @foreach ($categories as $c)
            <a href="{{ route('shop', ['category' => $c->slug]) }}"
               class="group relative block w-[44vw] max-w-[220px] shrink-0 snap-start overflow-hidden rounded-[28px] bg-surface-mid shadow-soft focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:w-auto sm:max-w-none sm:rounded-[32px]">
                <div class="aspect-[4/5]">
                    @if ($c->image_url)
                        <img src="{{ $c->image_url }}" alt="" loading="lazy" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
                    @else
                        <div class="grid h-full w-full place-items-center bg-tertiary-container text-5xl font-extrabold text-on-tertiary-container" aria-hidden="true">{{ mb_strtoupper(mb_substr((string) $c->name, 0, 1)) }}</div>
                    @endif
                </div>
                <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-3 pt-12 sm:p-4 sm:pt-16">
                    <p class="line-clamp-2 text-base font-extrabold leading-tight text-white sm:text-lg">{{ $c->name }}</p>
                    @if (isset($c->product_count))
                        <p class="mt-0.5 text-xs font-semibold text-white/80">{{ trans_choice(':count product|:count products', (int) $c->product_count, ['count' => (int) $c->product_count]) }}</p>
                    @endif
                </div>
            </a>
        @endforeach
    </div>
</section>
@endif

@if ($newArrivals)
<section class="mt-16">
    <x-section-heading :title="__('New arrivals')" :href="route('shop', ['new' => 1])"/>
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">@foreach ($newArrivals as $p)<x-product-card :item="$p"/>@endforeach</div>
</section>
@endif

@if ($mid = $shop->banners('home_mid'))
<section class="mt-16 grid gap-4 {{ count($mid) > 1 ? 'md:grid-cols-2' : '' }}" aria-label="{{ __('Promotions') }}">
    @foreach ($mid as $mb)<x-banner :banner="$mb" class="aspect-[16/9] sm:aspect-[16/6]" tone="bg-accent-container text-on-accent-container"/>@endforeach
</section>
@endif

{{-- Bento promo --}}
<section class="mt-16 grid gap-4 md:grid-cols-3">
    <div class="rounded-[40px] bg-primary p-8 text-on-primary md:col-span-2">
        <p class="text-sm font-extrabold uppercase tracking-wider text-tertiary">{{ __('First order') }}</p>
        <p class="mt-2 text-4xl font-extrabold">{{ __('15% off') }}</p>
        <p class="mt-2 text-on-primary-container">{{ __('Use code :code at checkout.', ['code' => 'WELCOME15']) }}</p>
        <div class="mt-6"><x-btn :href="route('shop')" variant="soft">{{ __('Start shopping') }}</x-btn></div>
    </div>
    <div class="grid gap-4">
        <a href="{{ route('shop', ['sale' => 1]) }}" class="rounded-[40px] bg-accent-container p-8 text-on-accent-container hover:opacity-90">
            <p class="text-2xl font-extrabold">{{ __('Sale') }}</p><p class="mt-1">{{ __('Shop the markdowns') }}</p>
        </a>
        @if ($threshold)
        <div class="rounded-[40px] bg-tertiary-container p-8 text-on-tertiary-container">
            <x-icon name="truck" class="w-7 h-7"/>
            <p class="mt-2 text-lg font-extrabold">{{ __('Free delivery over :amount', ['amount' => $shop->money->format($threshold)]) }}</p>
        </div>
        @endif
    </div>
</section>

@if ($bestsellers)
<section class="mt-16">
    <x-section-heading :title="__('Bestsellers')" :href="route('shop')"/>
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">@foreach ($bestsellers as $p)<x-product-card :item="$p"/>@endforeach</div>
</section>
@endif

{{-- Only real, approved reviews are ever shown. --}}
@if ($reviews)
<section class="mt-16">
    <x-section-heading :title="__('Loved by customers')"/>
    <div class="grid gap-4 md:grid-cols-3">
        @foreach ($reviews as $r)
            <figure class="rounded-[32px] bg-surface-mid p-6">
                <x-stars :rating="$r->rating"/>
                @if ($r->title)<p class="mt-3 font-extrabold text-primary">{{ $r->title }}</p>@endif
                <blockquote class="mt-1 text-on-surface-variant">{{ $r->body }}</blockquote>
                <figcaption class="mt-4 text-sm font-bold text-primary">{{ $r->first_name }} กค <a class="font-medium underline" href="{{ route('product', $r->slug) }}">{{ $r->product_name }}</a></figcaption>
            </figure>
        @endforeach
    </div>
</section>
@endif

<section id="newsletter" class="mt-16 rounded-[40px] bg-tertiary-container p-8 sm:p-12">
    <h2 class="text-2xl font-extrabold text-on-tertiary sm:text-3xl">{{ __('Get the soft launch list') }}</h2>
    <p class="mt-2 text-on-tertiary-container">{{ __('New drops and the occasional offer. No spam.') }}</p>
    <form method="POST" action="{{ route('newsletter') }}" class="mt-6 flex max-w-lg flex-col gap-3 sm:flex-row">
        @csrf
        <label for="nl-email" class="sr-only">{{ __('Email') }}</label>
        <input id="nl-email" name="email" type="email" required value="{{ old('email') }}" placeholder="{{ __('you@example.com') }}" class="min-h-[48px] flex-1 rounded-full border border-outline-variant bg-white px-5 focus:outline-none focus:ring-2 focus:ring-primary">
        <x-btn type="submit">{{ __('Subscribe') }}</x-btn>
    </form>
    @error('email')<p class="mt-2 text-sm text-error">{{ $message }}</p>@enderror
</section>
@endsection