@php
    $balance = 2480;
    $items = [
        ['key' => 'r1', 'title' => 'Avatar-Brille (gold)', 'emoji' => '🕶',  'price' => 800,  'category' => 'Avatar',  'desc' => 'Goldene Sonnenbrille für deinen Avatar. Cool und stylisch.'],
        ['key' => 'r2', 'title' => 'Einhorn-Begleiter',    'emoji' => '🦄',  'price' => 1500, 'category' => 'Tier',    'desc' => 'Ein magischer Begleiter, der dich beim Lernen unterstützt.'],
        ['key' => 'r3', 'title' => 'Raketen-Theme',        'emoji' => '🚀',  'price' => 3200, 'category' => 'Theme',   'desc' => 'Verwandle dein Dashboard in eine Weltraumstation.'],
        ['key' => 'r4', 'title' => 'Cap (rot)',            'emoji' => '🧢',  'price' => 500,  'category' => 'Avatar',  'desc' => 'Stylische rote Cap für deinen Avatar.'],
        ['key' => 'r5', 'title' => 'Drache',               'emoji' => '🐉',  'price' => 2000, 'category' => 'Tier',    'desc' => 'Mächtiger Drachen-Begleiter mit Spezialeffekten.'],
        ['key' => 'r6', 'title' => 'Dunkles Theme',        'emoji' => '🌙',  'price' => 1200, 'category' => 'Theme',   'desc' => 'Augenfreundliches Dark-Mode-Theme für späte Lern-Sessions.'],
        ['key' => 'r7', 'title' => 'Trophy-Display',       'emoji' => '🏆',  'price' => 700,  'category' => 'Profil',  'desc' => 'Zeige deine Trophäen prominent in deinem Profil.'],
        ['key' => 'r8', 'title' => 'Smiley-Pack',          'emoji' => '😎',  'price' => 300,  'category' => 'Profil',  'desc' => 'Coole Emoji-Sticker für Reaktionen und Kommentare.'],
    ];
@endphp

<div class="flex flex-col gap-6">

    <header class="flex justify-between items-end gap-6">
        <div>
            <div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">Shop</div>
            <h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Belohnungen</h1>
            <p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Gib deine Punkte für Avatare, Themes und Begleiter aus.</p>
        </div>
        <div class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-amber-soft border border-amber-soft">
            <x-heroicon-s-star class="w-5 h-5 text-amber-ink" />
            <span class="text-xl font-bold font-mono tabular-nums text-amber-ink">{{ number_format($balance, 0, ',', '.') }}</span>
            <span class="text-xs font-semibold text-amber-ink">Pkt.</span>
        </div>
    </header>

    <section class="grid grid-cols-4 gap-4">
        @foreach($items as $item)
            @php $available = $balance >= $item['price']; @endphp
            <button
                type="button"
                wire:click="$dispatch('openModal', { component: 'rewards.modals.purchase', arguments: { item: {{ \Illuminate\Support\Js::from($item) }}, balance: {{ $balance }} } })"
                class="text-left bg-bg-soft border border-line rounded-xl p-4 shadow-sm transition-all duration-150 hover:shadow-md hover:-translate-y-0.5 hover:border-line-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 cursor-pointer group"
            >
                <div class="w-12 h-12 rounded-lg bg-bg-tint grid place-items-center text-2xl mb-3 transition-transform group-hover:scale-105">
                    {{ $item['emoji'] }}
                </div>
                <div class="text-[10px] uppercase tracking-wider text-ink-3 font-semibold mb-1">{{ $item['category'] }}</div>
                <div class="font-bold text-sm text-ink-1 mb-2 leading-tight">{{ $item['title'] }}</div>
                <div class="flex justify-between items-baseline mt-3 pt-3 border-t border-line">
                    <span class="font-mono tabular-nums text-sm font-bold {{ $available ? 'text-green-ink' : 'text-ink-3' }}">
                        {{ number_format($item['price'], 0, ',', '.') }} Pkt.
                    </span>
                    @if($available)
                        <x-pill variant="success">Verfügbar</x-pill>
                    @else
                        <x-pill>Noch {{ number_format($item['price'] - $balance, 0, ',', '.') }}</x-pill>
                    @endif
                </div>
            </button>
        @endforeach
    </section>

</div>