@extends('layouts.app')
@section('title', 'Big bonus energy')
@section('content')
<section class="wheel-hero container">
    <div class="hero-copy">
        <div class="campaign-pill"><span aria-hidden="true">✦</span> BONUS BONANZA <span class="pill-divider">/</span> SPIN & DISCOVER</div>
        <h1>Big bonus<br><em>energy.</em><span class="headline-spark" aria-hidden="true">✷</span></h1>
        <p class="lead">Break up the everyday with a spin of possibility.<br>Your next surprise could be just one spin away.</p>
        <div class="play-card">
            @guest
                <div class="card-label">YOUR BONUS MOMENT STARTS HERE</div><h2>Ready for a little extra?</h2>
                <p>Create your account, receive spin credits from your admin, and take your place at the wheel.</p>
                <a class="button wide" href="{{ route('register') }}">Join the bonanza <span>↗</span></a>
                <div class="small-note">Already registered? <a href="{{ route('login') }}">Sign in to spin</a></div>
            @else
                @if(auth()->user()->is_admin)
                    <div class="card-label">ADMINISTRATOR VIEW</div><h2>Your wheel, your way.</h2><p>Manage prizes, assign wheel slots, and give your players their next chance.</p><a class="button wide" href="{{ route('admin.dashboard') }}">Open admin studio ↗</a>
                @else
                    <div class="card-label">WELCOME BACK, {{ auth()->user()->name }}</div>
                    <div class="wallet"><strong data-credit-count>{{ auth()->user()->spin_credits }}</strong><span>spin credits<br><small>1 credit per spin</small></span></div>
                    <button class="button wide" id="spin-button" type="button" @disabled(!$ready || auth()->user()->spin_credits < 1)>{{ !$ready ? 'The wheel is paused' : (auth()->user()->spin_credits > 0 ? 'Let’s spin!' : 'You need a spin credit') }} <span>✳</span></button>
                    <p class="small-note" id="spin-status" role="status" aria-live="polite">{{ auth()->user()->spin_credits > 0 ? 'One credit. One spin. Your bonus moment awaits.' : 'Ask your admin for credits to get your bonanza started.' }}</p>
                @endif
            @endguest
        </div>
        <div class="hero-details"><span>◎ &nbsp; Registered players</span><span>↻ &nbsp; 1 credit = 1 spin</span></div>
    </div>
    <div class="wheel-side">
        <div class="wheel-topline"><span>THE BONUS WHEEL</span><span class="wheel-state {{ $ready ? 'is-open' : '' }}"><span aria-hidden="true">●</span> {{ $ready ? 'Ready to spin' : 'Currently paused' }}</span></div>
        <div class="wheel-stage">
            <div class="orbit orbit-one"></div><div class="orbit orbit-two"></div><span class="star star-one">✧</span><span class="star star-two">✧</span>
            <div class="pointer" aria-hidden="true"></div>
            <div id="wheel-disc" class="wheel-disc" role="img" aria-label="Bonus Bonanza wheel with eight prize slots"></div>
            <div class="wheel-hub" aria-hidden="true"><span>BONUS</span><strong>✳</strong><span>BONANZA</span></div>
            <div class="wheel-sticker" aria-hidden="true"><strong>{{ $slots->count() }}</strong><span>SLOTS OF<br>POSSIBILITY</span></div>
        </div>
        <div class="wheel-caption"><span class="tiny-star">✦</span> ROUND AND ROUND. WHAT WILL YOU FIND? <span class="tiny-star">✦</span></div>
        <p class="odds-note">Each reward has its own chance of being selected.<br>Equal-sized slots don’t mean equal odds.</p>
    </div>
</section>
<div class="campaign-ribbon" aria-hidden="true"><span>MAKE ROOM FOR A LITTLE EXTRA</span><b>✳</b><span>SPIN. DISCOVER. ENJOY THE MOMENT.</span><b>✳</b><span>BONUS BONANZA</span></div>
<section class="prize-section container" id="prizes">
    <div class="section-heading"><div><div class="eyebrow">A LITTLE SOMETHING TO LOOK FORWARD TO</div><h2>Meet the possibilities<span class="gold">.</span></h2></div><span class="muted">Current wheel outcomes · {{ $slots->count() }} slots</span></div>
    <div class="prize-grid">@foreach($slots->unique('prize_id') as $slot)<article class="prize-card" style="--prize-color: {{ $slot->prize->color }}"><div class="prize-card-top"><span class="prize-icon" aria-hidden="true">{{ $loop->first ? '✷' : '✦' }}</span><span class="prize-index">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span></div><div><h3>{{ $slot->prize->name }}</h3><p>{{ $slot->prize->description }}</p>@if(!$slot->prize->active || $slot->prize->weight === 0)<span class="availability">Currently unavailable</span>@endif</div></article>@endforeach</div>
</section>
<section class="how-section container" id="how-it-works"><div class="section-heading"><div><div class="eyebrow">LESS SETUP. MORE POSSIBILITY.</div><h2>Your bonus moment, in three steps.</h2></div><a class="text-link" href="{{ auth()->check() ? route('wheel') : route('register') }}">{{ auth()->check() ? 'Back to the wheel' : 'Let’s get started' }} ↗</a></div><div class="steps-grid"><article class="step-card"><span class="step-number">01</span><h3>Make it official.</h3><p>Create your player account with your name, email, and password. Already joined? Just sign in.</p></article><article class="step-card"><span class="step-number">02</span><h3>Get your spin credits.</h3><p>Your admin grants your credits. Check your balance in the menu or beside the wheel.</p></article><article class="step-card"><span class="step-number">03</span><h3>Take your moment.</h3><p>Spend one credit, spin the wheel, and see the outcome. Your result is saved to your account.</p></article></div></section>
<section class="faq-section container"><div><div class="eyebrow">GOOD TO KNOW BEFORE YOU GO</div><h2>A few things<br>about the bonanza.</h2><p>Clear rules. A smoother spin.</p></div><div class="faq-list"><details><summary>How do I get credits?<span aria-hidden="true">+</span></summary><p>Credits are granted by an admin. New accounts start with zero credits. Contact your campaign administrator to request them.</p></details><details><summary>Does every spin win a prize?<span aria-hidden="true">+</span></summary><p>No prize is guaranteed. Your result depends on the prizes and chances configured by the admin. Each prize can have a different chance of selection, even when the wheel slots look equal.</p></details><details><summary>How do I collect a reward?<span aria-hidden="true">+</span></summary><p>Your result is saved in your recent spins. Contact your campaign administrator to arrange collection of any applicable reward.</p></details></div></section>
@auth
@if(!auth()->user()->is_admin)
<section class="container history-section"><div class="section-heading"><div><div class="eyebrow">YOUR BONUS STORY SO FAR</div><h2>Recent spins<span class="gold">.</span></h2></div></div>
    @if($history->isEmpty())<div class="empty-state">Your story is just getting started. Your spin results will appear here.</div>@else<div class="table-wrap"><table><thead><tr><th>Reward</th><th>Date</th><th>Spin</th></tr></thead><tbody>@foreach($history as $spin)<tr><td><span class="gold">✦</span> {{ $spin->prize_name }}</td><td>{{ $spin->created_at->format('d M Y, H:i') }} {{ config('app.timezone') }}</td><td class="muted">#{{ $spin->id }}</td></tr>@endforeach</tbody></table></div>@endif
</section>
@endif
@endauth
<dialog id="result-dialog" class="result-dialog"><div class="result-symbol">✷</div><div class="eyebrow">YOUR BONANZA RESULT</div><h2 id="result-prize"></h2><p>Your result has been saved to your player account.<br>Contact your admin to arrange any prize collection.</p><button class="button wide" type="button" id="result-close">Back to the wheel ↗</button></dialog>
@endsection
@push('scripts')
<script type="application/json" id="wheel-data">{!! json_encode(['slots' => $wheelData, 'version' => $wheelVersion, 'spinUrl' => route('spin'), 'userId' => auth()->id(), 'canPlay' => auth()->check() && !auth()->user()->is_admin && $ready], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
@endpush