@php
    $images = $account->images ?? [];
@endphp

<x-layouts.site :title="$account->title">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <nav class="mb-6 text-sm text-gray-500">
            <a href="{{ route('shop.index') }}" class="hover:text-gray-300">Магазин</a>
            <span class="mx-1.5">/</span>
            <a href="{{ route('shop.index', ['game' => $account->game->slug]) }}" class="hover:text-gray-300">{{ $account->game->name }}</a>
        </nav>

        <div class="grid lg:grid-cols-5 gap-10">
            <div class="lg:col-span-3">
                @if (count($images) > 0)
                    <div x-data="{ active: 0, lightbox: false, images: {{ Illuminate\Support\Js::from(array_map(fn ($i) => Storage::url($i), $images)) }} }">
                        <div class="group relative rounded-2xl overflow-hidden border border-gray-800 bg-gray-900 aspect-video cursor-zoom-in" x-on:click="lightbox = true">
                            <img :src="images[active]" alt="{{ $account->title }}" class="h-full w-full object-cover transition group-hover:scale-[1.02] duration-500">
                        </div>

                        @if (count($images) > 1)
                            <div class="mt-3 grid grid-cols-5 gap-2">
                                <template x-for="(image, index) in images" :key="index">
                                    <button type="button" x-on:click="active = index" class="aspect-video overflow-hidden rounded-lg border-2" :class="active === index ? 'border-indigo-500' : 'border-transparent opacity-70 hover:opacity-100'">
                                        <img :src="image" class="h-full w-full object-cover">
                                    </button>
                                </template>
                            </div>
                        @endif

                        <div x-show="lightbox" x-cloak x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-6" x-on:click="lightbox = false">
                            <img :src="images[active]" class="max-h-full max-w-full rounded-lg object-contain">
                        </div>
                    </div>
                @else
                    <x-cover-art :seed="$account->slug" class="aspect-video rounded-2xl" icon-class="h-16 w-16" />
                @endif

                @if ($account->description)
                    <div class="mt-8 rounded-2xl border border-gray-800 bg-gray-900 p-6">
                        <h2 class="flex items-center gap-2 font-semibold text-white mb-3">
                            <x-ui-icon name="document-text" class="h-4 w-4 text-indigo-400" /> Опис
                        </h2>
                        <p class="text-sm text-gray-400 whitespace-pre-line">{{ $account->description }}</p>
                    </div>
                @endif

                @if (! empty($account->attributes))
                    <div class="mt-6 rounded-2xl border border-gray-800 bg-gray-900 p-6">
                        <h2 class="flex items-center gap-2 font-semibold text-white mb-4">
                            <x-ui-icon name="adjustments-horizontal" class="h-4 w-4 text-indigo-400" /> Характеристики
                        </h2>
                        <dl class="grid sm:grid-cols-2 gap-3 text-sm">
                            @foreach ($account->attributes as $key => $value)
                                <div class="flex justify-between border-b border-gray-800 pb-2">
                                    <dt class="text-gray-500">{{ $key }}</dt>
                                    <dd class="text-gray-200 font-medium">{{ $value }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    </div>
                @endif
            </div>

            <div class="lg:col-span-2">
                <div class="sticky top-24 rounded-2xl border border-gray-800 bg-gray-900 p-6">
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-indigo-500/10 px-2.5 py-1 text-xs font-medium text-indigo-300">
                        {{ $account->game->name }}
                    </span>
                    <h1 class="mt-3 text-2xl font-bold text-white">{{ $account->title }}</h1>

                    <div class="mt-4 text-3xl font-extrabold text-indigo-400">
                        {{ number_format($account->price, 0, ',', ' ') }} {{ $account->currency }}
                    </div>

                    @if ($account->isAvailable() && $account->isApproved())
                        <a href="{{ route('checkout.create', $account) }}" class="mt-6 flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-500 py-3 font-semibold text-white hover:bg-indigo-400 transition">
                            <x-ui-icon name="shopping-cart" class="h-4 w-4" /> Купити зараз
                        </a>
                    @else
                        <div class="mt-6 rounded-lg bg-gray-800 py-3 text-center text-sm text-gray-400">
                            Акаунт наразі недоступний
                        </div>
                    @endif

                    <div class="mt-6 space-y-2 text-sm text-gray-400">
                        <div class="flex items-center gap-2">
                            <x-ui-icon name="bolt" class="h-4 w-4 text-emerald-400" /> Миттєва видача після оплати
                        </div>
                        <div class="flex items-center gap-2">
                            <x-ui-icon name="lock-closed" class="h-4 w-4 text-emerald-400" /> Дані для входу шифруються
                        </div>
                        <div class="flex items-center gap-2">
                            <x-ui-icon name="shield-check" class="h-4 w-4 text-emerald-400" /> Перевірено адміністрацією
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($relatedAccounts->isNotEmpty())
            <section class="mt-16 border-t border-gray-800 pt-10">
                <h2 class="text-2xl font-bold text-white mb-6">Схожі акаунти</h2>
                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach ($relatedAccounts as $related)
                        <x-account-card :account="$related" />
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</x-layouts.site>