<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reservation Confirmed</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <meta name="robots" content="noindex">
  <style>
    @keyframes fallDown{0%{transform:translateY(-20vh) translateX(0) scale(1.1);opacity:0}10%{opacity:.85}50%{transform:translateY(60vh) translateX(-6px) scale(1.05)}100%{transform:translateY(120vh) translateX(6px) scale(1);opacity:0}}
    @keyframes shimmer{0%{filter:blur(0)}50%{filter:blur(1px)}100%{filter:blur(0)}}
    .bubble{position:absolute;top:-24px;border-radius:9999px;box-shadow:inset 0 0 8px rgba(255,255,255,.25),0 0 10px rgba(255,255,255,.15);animation:fallDown linear infinite,shimmer 4s ease-in-out infinite}
    .bubble.pink{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,0,128,.45))}
    .bubble.blue{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(0,160,255,.4))}
    .bubble.gold{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,200,0,.45))}
    .bubble.violet{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(140,0,255,.4))}
    .bubble.green{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(0,200,140,.4))}
  </style>
</head>
<body class="min-h-screen bg-gray-100">
  <div class="fixed inset-0">
    <div class="absolute inset-0 bg-center bg-cover" style="background-image:url('./img/imageedit_3_2453183620.jpg')"></div>
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
    <div class="absolute inset-0 pointer-events-none z-[5]">
      <span class="bubble pink w-2 h-2" style="left:9%;animation-delay:0s;animation-duration:14s"></span>
      <span class="bubble blue w-3 h-3" style="left:21%;animation-delay:1.5s;animation-duration:16s"></span>
      <span class="bubble gold w-2 h-2" style="left:33%;animation-delay:3s;animation-duration:13s"></span>
      <span class="bubble violet w-4 h-4" style="left:46%;animation-delay:1s;animation-duration:18s"></span>
      <span class="bubble green w-2 h-2" style="left:59%;animation-delay:2.8s;animation-duration:15s"></span>
      <span class="bubble pink w-3 h-3" style="left:73%;animation-delay:4.4s;animation-duration:17s"></span>
      <span class="bubble gold w-2 h-2" style="left:87%;animation-delay:.7s;animation-duration:14s"></span>
    </div>
  </div>

  <main class="relative z-10 flex items-center justify-center min-h-screen px-4">
    <section class="w-full max-w-md bg-neutral-900/90 text-white rounded-2xl shadow-2xl p-6 md:p-8 text-center">
      
      <div class="mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full bg-emerald-600">
        <svg viewBox="0 0 24 24" class="w-8 h-8" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 6L9 17l-5-5"/>
        </svg>
      </div>

      <h1 class="font-bold text-xl md:text-2xl">Reservation Confirmed</h1>

      <p class="mt-3 text-sm text-[#BFC4CC]">
        Thank you. Your reservation has been successfully confirmed. 
        Please keep the confirmation number below for your records and present it at the event if required.
      </p>

      <div class="mt-5 p-4 bg-black/40 rounded-lg border border-emerald-500">
        <p class="text-xs text-[#BFC4CC]">Confirmation Number</p>
        <p id="confirmationNumber" class="text-lg font-semibold tracking-widest mt-1 text-emerald-400"></p>
      </div>

      <a href="./index.html" class="mt-6 inline-flex items-center justify-center w-full bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold rounded-md px-4 py-2 text-sm">
        Return to Home
      </a>

      <p class="mt-3 text-xs text-[#BFC4CC]">
        We look forward to seeing you at the event.
      </p>

    </section>
  </main>

  <script>
    // Generate a professional-looking random confirmation number
    function generateConfirmationNumber() {
      const prefix = "EVT";
      const random = Math.floor(100000 + Math.random() * 900000); // 6-digit number
      return `${prefix}-${random}`;
    }

    document.getElementById("confirmationNumber").textContent = generateConfirmationNumber();
  </script>

</body>
</html>