@extends('layouts.app')

@section('title', $page->meta_title)
@section('description', $page->meta_description)

@section('content')

    <div class="border-b border-black">

        {{-- Hero --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black border-b border-black min-h-[calc(100vh-102px)]">
            <div class="flex flex-col justify-center gap-8 px-8 py-16 lg:px-16">
                <svg viewBox="0 0 135 124" class="rotating-star w-[173px] h-[159px] text-[#f3d121]" aria-hidden="true" fill="currentColor">
                    <path d="m88.4 0 4 28.9 29.7-5.2-14.3 25.7L135 62l-27.2 12.6 14.3 25.7-29.7-5.2-4 28.9-20.9-21.1L46.6 124l-4-28.9-29.7 5.2 14.3-25.7L0 62l27.2-12.6-14.3-25.7 29.7 5.2 4-28.9 20.9 21.1L88.4 0z"/>
                </svg>

                <h1
                    class="font-display font-semibold text-6xl lg:text-[72px]  leading-tight"
                    aria-label="Ό,τι φαντάζεσαι, το τυπώνουμε"
                    data-controller="appear"
                    data-appear-visible-class="is-visible"
                >
                    Ό,τι <span class="text-dance" data-text="φαντάζεσαι">φαντάζεσαι</span>,<br>
                    το <span class="text-dance [--dance-delay:200ms]" data-text="τυπώνουμε">τυπώνουμε</span>
                </h1>
            </div>

            <div class="relative flex flex-col items-center justify-center px-8 py-10 lg:px-10" data-controller="carousel">
                @if($heroProducts->isNotEmpty())
                    <button
                        type="button"
                        data-action="carousel#prev"
                        aria-label="Προηγούμενο προϊόν"
                        class="absolute left-4 lg:left-8 top-1/2 z-10 -translate-y-1/2 hover:-translate-x-1 transition duration-500"
                    >
                        <x-ui.icon name="arrow-left" :size="62" class="[&_path]:stroke-2" />
                    </button>

                    <div class="w-full h-full">
                        @foreach($heroProducts as $product)
                            <div
                                data-carousel-target="slide"
                                class="{{ $loop->first ? '' : 'hidden' }} group h-full flex flex-col justify-center pb-8 relative"
                            >
                                <div class="relative flex items-center justify-center">
                                    <a href="{{ $product['href'] }}" class="block border border-black bg-white flex items-center justify-center overflow-hidden max-w-xs xl:max-w-sm">
                                        @if($product['image'])
                                            <img
                                                src="{{ $product['image'] }}"
                                                alt="{{ $product['name'] }}"
                                                width="400"
                                                height="400"
                                                loading="eager"
                                                fetchpriority="high"
                                                preload="{{ $loop->first ? true : false }}"
                                                class="w-full h-full object-cover"
                                            >
                                        @else
                                            <span class="text-neutral-500 text-sm">{{ __('storefront.product.no_image') }}</span>
                                        @endif
                                    </a>

                                    @if ($product['hasCustomFields'] ?? false)
                                        <x-ui.button
                                            :href="$product['href']"
                                            size="md"
                                            position="absolute"
                                            class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-100"
                                        >
                                            {{ __('storefront.product.personalize') }}
                                        </x-ui.button>
                                    @elseif ($product['variantId'] ?? null)
                                        <x-checkout::add-to-cart
                                            :purchasable="$product['variantId']"
                                            class="absolute opacity-0 group-hover:opacity-100 has-[.bbk-add-to-cart-error:not([hidden])]:opacity-100 transition-opacity duration-100"
                                        >
                                            <x-ui.button type="submit" size="md">
                                                {{ __('storefront.product.add_to_cart') }}
                                            </x-ui.button>
                                        </x-checkout::add-to-cart>
                                    @endif
                                </div>

                                <div class="flex items-baseline justify-between gap-4 absolute bottom-0 left-0 w-full">
                                    <a href="{{ $product['href'] }}" class="font-display font-bold text-2xl leading-snug hover:text-brand">
                                        {{ $product['name'] }}
                                    </a>
                                    @if($product['price'] !== null)
                                        <span class="font-bold text-xl shrink-0"><x-ui.price :amount="$product['price']" /></span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <button
                        type="button"
                        data-action="carousel#next"
                        aria-label="Επόμενο προϊόν"
                        class="absolute right-4 lg:right-8 top-1/2 z-10 -translate-y-1/2 hover:translate-x-1 transition duration-500"
                    >
                        <x-ui.icon name="arrow-right" :size="62" class="[&_path]:stroke-2"/>
                    </button>
                @else
                    <p class="text-neutral-500">Δεν βρέθηκαν προϊόντα.</p>
                @endif
            </div>
        </div>

        {{-- Info / trivia --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black">
            <div class="lg:min-h-full flex items-center justify-center text-neutral-500 text-sm" data-stoic="pages/home#trivia_body_image">
                @if(!empty($page->trivia_image))
                    <x-ui.stoic-image
                        src="{{ $page->trivia_image }}"
                        preset="medium"
                        alt=""
                        aria-hidden="true"
                        loading="lazy"
                        class="w-full h-full object-cover "
                    />
                @endif
            </div>

            <div class="flex flex-col justify-center gap-6 px-8 py-16 lg:px-16 text-center">
                <h2 class="font-semibold text-h2"
                    data-controller="appear"
                    data-appear-visible-class="is-visible">100% σουρεάλ & <span class="text-dance" data-text="3d-printed">3d-printed</span></h2>
                <div class="max-w-md mx-auto" data-stoic="pages/home#trivia_body">
                    {!! Str::markdown($page->trivia_body) !!}
                </div>
                <div class="flex items-center justify-center mt-4 mb-6">
                    @if(!empty($page->trivia_body_image))
                        <x-ui.stoic-image
                            src="{{ $page->trivia_body_image }}"
                            preset="medium"
                            alt=""
                            aria-hidden="true"
                            loading="lazy"
                            class="max-w-xs"
                        />
                    @endif
                </div>
                <div>
                    {{-- <x-ui.button size="md" :href="url('/'.app()->getLocale().'/products')">Δες τα προϊόντα</x-ui.button> --}}
                    <x-ui.button size="md" :href="url('/'.app()->getLocale().'/about')">Διάβασε περισσότερα</x-ui.button>
                </div>
            </div>
        </div>

    </div>

    {{-- Classics --}}
    <div class="border-b border-black" data-controller="carousel">
        <div class="flex items-center justify-between gap-4 px-8 py-12 border-b border-black">
            <h2 class="font-display font-extrabold text-h2" data-stoic="pages/home#classics_title">{{ $page->classics_title }}</h2>
            <x-ui.button size="lg" :href="route('products')">Όλα τα προϊόντα</x-ui.button>
        </div>

        <div class="flex items-center gap-6 px-8 py-12">
            <button type="button" data-action="carousel#prev" aria-label="Προηγούμενα προϊόντα" class="shrink-0 hover:-translate-x-0.5 hover:opacity-60 transition duration-500">
                <x-ui.icon name="arrow-left" :size="32" />
            </button>

            <div class="flex-1 overflow-hidden">
                @forelse($classicsProducts->chunk(4) as $chunk)
                    <div data-carousel-target="slide" class="{{ $loop->first ? '' : 'hidden' }} grid grid-cols-2 md:grid-cols-4 gap-6">
                        @foreach($chunk as $product)
                            <x-ui.product-card
                                :name="$product['name']"
                                :price="$product['price']"
                                :image="$product['image']"
                                :href="$product['href']"
                                :variant-id="$product['variantId'] ?? null"
                                :has-custom-fields="$product['hasCustomFields'] ?? false"
                            />
                        @endforeach
                    </div>
                @empty
                    <p class="text-neutral-500 text-center w-full">Δεν βρέθηκαν προϊόντα.</p>
                @endforelse
            </div>

            <button type="button" data-action="carousel#next" aria-label="Επόμενα προϊόντα" class="shrink-0 hover:translate-x-0.5 hover:opacity-60 transition duration-500">
                <x-ui.icon name="arrow-right" :size="32" />
            </button>
        </div>
    </div>

    <div class="py-20">
        <x-newsletter-split />
    </div>
@endsection