@extends('layouts.child')
@section('content')
<div class="text-center">
  @if($isRight)
    <div class="text-7xl mb-4 animate-bounce">🎉</div>
    <h1 class="text-3xl font-black text-green-600 mb-2">Richtig!</h1>
    <p class="text-slate-600 mb-4">Super gemacht!</p>
    <div class="inline-flex items-center gap-2 bg-amber-100 text-amber-700 font-black text-2xl rounded-2xl px-6 py-3 mb-4">
      +{{ $earned }} 🪙
    </div>
    @if($earned > $question->points_value)
    <p class="text-orange-600 font-bold text-sm mb-4">🔥 Serien-Bonus inklusive!</p>
    @endif
    @if($newStreak >= 3)
    <div class="bg-orange-50 border border-orange-200 rounded-xl px-4 py-2 text-orange-700 font-bold text-sm mb-4 inline-block">
      🔥 {{ $newStreak }}er-Serie! Weiter so!
    </div>
    @endif
  @else
    <div class="text-7xl mb-4">😅</div>
    <h1 class="text-3xl font-black text-red-500 mb-2">Leider falsch</h1>
    <p class="text-slate-600 mb-4">Die richtige Antwort war:</p>
    <div class="bg-green-100 border border-green-300 text-green-800 font-bold text-lg rounded-2xl px-6 py-3 mb-4 inline-block">
      {{ $correct->text }}
    </div>
  @endif

  <div class="mt-6 flex gap-3 justify-center">
    <a href="{{ route('learn.quiz', $subject->slug) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded-2xl text-base shadow-md transition-colors">
      Nächste Frage ▶
    </a>
    <a href="{{ route('learn.subjects') }}" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold px-6 py-3 rounded-2xl text-base transition-colors">
      Fächer
    </a>
  </div>

  <div class="mt-6 text-slate-500 text-sm">
    Dein Kontostand: <span class="font-bold text-amber-600">🪙 {{ auth()->user()->fresh()->points }}</span>
  </div>
</div>
@endsection