{{ define "content" }}

<style>
  .wedding-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }

  .hero {
    text-align: center;
    margin-bottom: 3rem;
  }

  .hero img {
    width: 100%;
    border-radius: 8px;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .hero .date {
    font-size: 1.2rem;
    color: #666;
  }

  .section {
    margin-bottom: 2.5rem;
  }

  .section h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3rem;
  }

  .map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 8px;
  }

  .rsvp {
    background: #f8f8f8;
    padding: 1rem;
    border-radius: 8px;
  }

  .countdown {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }

  .footer {
    text-align: center;
    margin-top: 3rem;
    color: #888;
    font-size: 1rem;
    padding-top: 1rem;
  }

  .footer a {
    color: #0066cc;
    text-decoration: none;
  }

  .footer a:hover {
    text-decoration: underline;
  }
</style>

<div class="wedding-container">

  <!-- Countdown Timer -->
  <div class="countdown">
    <h3>{{ i18n "countdown_title" }}</h3>
    <p id="timer"></p>
  </div>

  <!-- Hero -->
  <div class="hero">
    <img src="/images/header-image.jpg" alt="Wedding Header Image">
    <h1>{{ .Title }}</h1>
    <div class="date">
      {{ .Params.event.date | time.Format .Site.Language.Lang | default "January 2, 2006" }}
    </div>
  </div>

  <!-- Intro -->
  {{ if .Content }}
    <div class="section">
      {{ .Content }}
    </div>
  {{ end }}

  <!-- Event Details -->
  <div class="section">
    <h2>📅 {{ i18n "event_title" }}</h2>
    {{ with .Params.event.ceremony_time }}
      <p><strong>{{ i18n "ceremony" }}:</strong> {{ . }}</p>
    {{ end }}
    {{ with .Params.event.reception_time }}
      <p><strong>{{ i18n "reception" }}:</strong> {{ . }}</p>
    {{ end }}
    {{ with .Params.event.venue }}
      <p><strong>{{ i18n "location" }}:</strong> {{ . }}</p>
    {{ end }}
  </div>

  <!-- Map -->
  {{ with .Params.event.map_embed }}
    <div class="section map">
      <h2>📍 {{ i18n "location" }}</h2>
      {{ . | safeHTML }}
    </div>
  {{ end }}

  <!-- RSVP -->
  <div class="section rsvp">
    <h2>📝 {{ i18n "rsvp_title" }}</h2>
    {{ with .Params.rsvp.deadline }}
      <p>{{ i18n "rsvp_deadline" }} <strong>{{ . }}</strong>.</p>
    {{ end }}
    {{ with .Params.rsvp.email }}
      <p>{{ i18n "rsvp_email" }}: <a href="mailto:{{ . }}">{{ . }}</a></p>
    {{ end }}
    {{ with .Params.rsvp.form }}
      <p><a href="{{ . }}" target="_blank">{{ i18n "rsvp_form" }}</a></p>
    {{ end }}
  </div>

  <!-- Extra Info -->
  {{ with .Params.details }}
    <div class="section">
      <h2>ℹ️ {{ i18n "details_title" }}</h2>
      <p>{{ . }}</p>
    </div>
  {{ end }}

  <!-- Footer -->
  <div class="footer">
    <p>{{ i18n "footer_message" }}</p>
  </div>

</div>

<script>
  var countDownDate = new Date("{{ .Params.event.date }} {{ .Params.event.ceremony_time }}").getTime();

  var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("timer").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      document.getElementById("timer").innerHTML = "{{ i18n "big_day" }}";
    }
  }, 1000);
</script>

{{ end }}