{{ define "main" }}
<div class="bg-[url('/images/devon_starfield.png')] bg-cover bg-fixed min-h-screen flex flex-col items-center justify-center p-4">
  <div class="text-center max-w-3xl mx-auto">
    <figure class="flex justify-center items-center mb-8">
      {{ $constructionBanner := "/images/under-construction.svg" }}
      {{ if .Params.Image }}
        {{ $constructionBanner = .Params.Image }}
      {{ end }}
      {{ partial "image" (dict "Src" $constructionBanner "Alt" "Banner" "Class" "w-1/2 md:w-1/3" ) }}
    </figure>

    <h1 class="text-3xl md:text-5xl font-bold text-white mb-4">{{ .Title | default "Tickets Coming Soon" }}</h1>
    <p class="text-lg text-white text-center mb-12">{{ .Params.subtitle | default "We're preparing something special. Stay tuned!" }}</p>

    <!-- Countdown Timer -->
    <div class="countdown-container bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg mb-12">
      <h2 class="text-xl md:text-2xl font-semibold text-white mb-6">Discounted Tickets Begin In:</h2>
      <div class="grid grid-cols-4 gap-4 text-center" id="countdown">
        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
          <div id="days" class="text-2xl md:text-4xl font-bold text-white">00</div>
          <div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Days</div>
        </div>
        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
          <div id="hours" class="text-2xl md:text-4xl font-bold text-white">00</div>
          <div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Hours</div>
        </div>
        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
          <div id="minutes" class="text-2xl md:text-4xl font-bold text-white">00</div>
          <div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Minutes</div>
        </div>
        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
          <div id="seconds" class="text-2xl md:text-4xl font-bold text-white">00</div>
          <div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Seconds</div>
        </div>
      </div>
    </div>

    <!-- Notification Form -->
    {{ if .Params.enable_notification }}
    <div class="bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg max-w-md mx-auto">
      <h3 class="text-xl font-semibold text-white mb-4">Get Notified When Tickets Go Live</h3>
      <form id="notification-form" class="space-y-4">
        <div>
          <input type="email" placeholder="Your email address" class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
          Notify Me
        </button>
      </form>
    </div>
    {{ end }}
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Set the date we're counting down to
      // Format: Year, Month (0-11), Day, Hour, Minute, Second
      const countDownDate = new Date("{{ .Params.countdown_date | default "2025-06-01T09:00:00-07:00" }}").getTime();

      // Update the countdown every 1 second
      const x = setInterval(function() {
        // Get current date and time
        const now = new Date().getTime();

        // Find the distance between now and the countdown date
        const distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result
        document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
        document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
        document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
        document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');

        // If the countdown is finished, show expired message
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("countdown").innerHTML = "<div class='col-span-4 text-2xl font-bold text-white'>Tickets are now available!</div>";
          // Optional: redirect to ticket page
          // window.location.href = "/tickets";
        }
      }, 1000);

      // Optional: Handle notification form submission
      const form = document.getElementById('notification-form');
      if (form) {
        form.addEventListener('submit', function(e) {
          e.preventDefault();
          // Here you would typically send this to your backend
          const email = e.target.querySelector('input[type="email"]').value;
          console.log('Email submitted:', email);
          // Replace form with success message
          form.innerHTML = '<div class="text-green-400 text-center py-4">Thanks! We\'ll notify you when tickets are available.</div>';
        });
      }
    });
  </script>
</div>
{{ end }}