{% extends "base.html" %}
{% block content %}
<div class="max-w-lg mx-auto">
  <div class="bg-white rounded-lg shadow-md p-6 mb-8 text-center">
    <div class="mb-6">
      <div class="inline-block p-4 rounded-full bg-green-100">
        <i class="fas fa-check-circle text-irish-green text-5xl"></i>
      </div>
    </div>
    
    <h1 class="text-2xl font-bold text-irish-green mb-4">Success!</h1>
    <p class="text-xl mb-2">You've earned <span class="font-bold">{{ points }}</span> points</p>
    <p class="text-gray-600 mb-6">Points have been added to <span class="font-semibold">{{ team.name }}</span></p>
    
    <div class="p-4 bg-irish-green bg-opacity-10 rounded-lg border border-irish-green text-left mb-6">
      <h3 class="font-bold text-irish-green mb-2">What's next?</h3>
      <ul class="list-disc ml-5 text-gray-700">
        <li>Check your team's position on the <a href="/leaderboard" class="text-irish-green hover:underline">leaderboard</a></li>
        <li>Scan another QR code to earn more points</li>
        <li>Invite friends to your team</li>
      </ul>
    </div>
    
    <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
      <a href="/dashboard" class="bg-irish-green hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-md transition">
        Go to Dashboard
      </a>
      <a href="/dashboard/scan" class="bg-cream-white border border-irish-green text-irish-green font-medium py-2 px-4 rounded-md hover:bg-irish-green hover:text-white transition">
        Scan Another Code
      </a>
    </div>
  </div>
  
  <div class="text-center text-gray-600">
    <p>Share your achievement!</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="text-blue-600 hover:text-opacity-80"><i class="fab fa-facebook fa-lg"></i></a>
      <a href="#" class="text-blue-400 hover:text-opacity-80"><i class="fab fa-twitter fa-lg"></i></a>
      <a href="#" class="text-green-600 hover:text-opacity-80"><i class="fab fa-whatsapp fa-lg"></i></a>
    </div>
  </div>
</div>
{% endblock %}