@php
    $hero = Auth::user()->hero;
    $backgroundImage = asset('images/' . ($hero->background_image ?? 'default_hero_background.png'));
@endphp

<div class="w-full md:w-[384px] h-[678px] bg-yellow-50 border border-yellow-800 rounded-xl shadow-md overflow-hidden flex flex-col justify-between"
    style="background-image: url('{{ $backgroundImage }}'); background-size: cover; background-position: center;">
    
    <div class="p-6 text-yellow-900">
        <h3 class="text-xl font-bold mb-2">Hero Overview</h3>
        <p><span class="font-semibold">Name:</span> {{ $hero->name }}</p>
        <p><span class="font-semibold">Class:</span> {{ $hero->class }}</p>
        <p><span class="font-semibold">Level:</span> {{ $hero->level }}</p>
        <p><span class="font-semibold">In City:</span> {{ $hero->in_city ? 'Yes' : 'No' }}</p>
    </div>

    <div class="flex justify-end p-4">
        <button @click="showDetails = true"
            class="bg-yellow-800 text-yellow-100 font-bold px-4 py-2 rounded hover:bg-yellow-700 transition shadow">
            Show Full Stats
        </button>
    </div>
</div>