{% extends 'default.html' %}
{% load static %}

  {% block content %}

  <!-- PARTICLE CANVAS -->
  <canvas id="particles"></canvas>

  <!-- DISCO LIGHTS -->
  <div class="disco-lights" aria-hidden="true">
    <div class="light l1"></div>
    <div class="light l2"></div>
    <div class="light l3"></div>
    <div class="light l4"></div>
  </div>

  <!-- ========== PAGE 1: LANDING ========== -->
  <main id="landing-page" class="page active">

    <!-- HERO -->
    <section class="hero">
      <div class="hero__inner">
        <div class="save-the-date reveal mt-8">Save the Date</div>

        <h1 class="hero__title reveal delay-1">
          <img src="{% static 'images/logos.png' %}" alt="OSO@80" width="300" />
        </h1>

        <p class="hero__subtitle reveal delay-2 mt--5 mb-3">
          Olabisi Silifat Olateju is turning <span class="text-4xl">80</span>
        </p>

        <a href="{% url 'rsvp' %}" class="btn btn--primary reveal delay-5">
          <span class="btn__text">RSVP Here</span>
          <span class="btn__glow"></span>
        </a>

        <div class="hero__scroll reveal delay-5" aria-label="Scroll down">
          <div class="scroll-line"></div>
        </div>
      </div>
    </section>

    <!-- EVENT DETAILS -->
    <section class="details bg-[#1b0d13]" id="details">
      <div class="section-inner">
        <p class="section-label reveal">The Event</p>
        <h2 class="section-title reveal delay-1">Save <span class="text-xl">the</span> Date</h2>

        <!-- <div class="details__grid"> -->
          <div class="detail-card reveal delay-1 mb-3">
            <div class="detail-card__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </div>
            <div class="detail-card__content">
              <span class="detail-card__label">Date</span>
              <span class="detail-card__value">4th July, 2026</span>
            </div>
          </div>

          <div class="detail-card reveal delay-2">
            <div class="detail-card__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 21c-4-4.5-7-8-7-11a7 7 0 0 1 14 0c0 3-3 6.5-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
            </div>
            <div class="detail-card__content">
              <span class="detail-card__label">Location</span>
              <span class="detail-card__value">Lagos, Nigeria</span>
            </div>
          </div>

          <!-- <div class="detail-card reveal delay-3">
            <div class="detail-card__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
            </div>
            <div class="detail-card__content">
              <span class="detail-card__label">Dress Code</span>
              <span class="detail-card__value">All Black Upscale Nightlife</span>
            </div>
          </div> -->
        </div>
      </div>
    </section>

    <!-- VIBE SECTION -->
    <section class="vibe">
      <div class="section-inner vibe__inner">
        <div class="disco-ball" aria-hidden="true">
          <img src="{% static 'images/banner.jpeg' %}" alt="Banner" class="banner-image" />
        </div>

        <blockquote class="vibe__quote reveal">

          <p>Eighty years of wisdom, laughter, <br /> and unforgettable memories deserve a celebration just as beautiful.</p>
          <footer>Let's fill the day with joy, gratitude, and .<br/><em>the kind of love she has always given us.</em></footer>
        </blockquote>

        <div class="vibe__tags reveal delay-2">
          <span>#Wisdom</span>
          <span>#Eighty &amp; Fabulous</span>
          <span>#Love</span>
          <span>#Gratitude</span>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="cta bg-[#1b0d13]">
      <div class="section-inner cta__inner">
        <p class="section-label reveal">Don't Miss It</p>
        <h2 class="cta__heading reveal delay-1">
          Confirm Your<br/><span class="gold-text">Attendance Now</span>
        </h2>
        <p class="cta__sub reveal delay-2">Strictly by invitation only.</p>
        <a href="{% url 'rsvp' %}" class="btn btn--primary btn--large reveal delay-3">
          <span class="btn__text">RSVP Here</span>
          <span class="btn__glow"></span>
        </a>
      </div>
    </section>

    <!-- FOOTER -->
   {% include 'utils/footer.html' %}

  </main>

  {% endblock %}
</body>
</html>