{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<main>
  <section class="hero-section section-space">
    <div class="container position-relative">
      <div class="row align-items-center g-5">
        <div class="col-lg-7">
          <span class="eyebrow-pill">Single-team event operations</span>
          <h1 class="hero-title mt-4">Publish beautiful event pages and collect registrations in minutes.</h1>
          <p class="hero-copy mt-4">Northstar gives one organizer team a modern public event catalog, quick attendee sign-up flow, and a dashboard to monitor registrations without wrestling with spreadsheets.</p>
          <div class="d-flex flex-wrap gap-3 mt-4">
            <a class="btn btn-primary btn-lg" href="#events">Browse events</a>
            <a class="btn btn-ghost btn-lg" href="{% url 'organizer_dashboard' %}">Open dashboard</a>
          </div>
          <div class="hero-stats row g-3 mt-4">
            <div class="col-sm-4">
              <div class="stat-card">
                <div class="stat-value">{{ stats.upcoming_events }}</div>
                <div class="stat-label">Upcoming events</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="stat-card">
                <div class="stat-value">{{ stats.confirmed_attendees }}</div>
                <div class="stat-label">Confirmed attendees</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="stat-card">
                <div class="stat-value">{{ stats.waitlist_total }}</div>
                <div class="stat-label">Waitlist entries</div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="hero-spotlight card-surface">
            <div class="orb orb-one"></div>
            <div class="orb orb-two"></div>
            <div class="event-preview-card">
              <div class="d-flex justify-content-between align-items-start gap-3">
                <div>
                  <div class="mini-label">Featured next up</div>
                  {% if featured_event %}
                  <h2 class="preview-title">{{ featured_event.title }}</h2>
                  {% else %}
                  <h2 class="preview-title">Ready for your first event</h2>
                  {% endif %}
                </div>
                <span class="status-badge">Live</span>
              </div>
              {% if featured_event %}
              <ul class="preview-list list-unstyled mt-4 mb-0">
                <li><strong>Date</strong><span>{{ featured_event.start_at|date:"M d, Y" }} · {{ featured_event.start_at|date:"g:i A" }}</span></li>
                <li><strong>Venue</strong><span>{{ featured_event.venue }}</span></li>
                <li><strong>Capacity</strong><span>{% if featured_event.capacity %}{{ featured_event.confirmed_registrations }}/{{ featured_event.capacity }} booked{% else %}Open attendance{% endif %}</span></li>
              </ul>
              <a href="{{ featured_event.get_absolute_url }}" class="btn btn-primary w-100 mt-4">Register for featured event</a>
              {% else %}
              <p class="text-muted mt-4 mb-0">Create events in Django Admin and the landing page will automatically showcase them here.</p>
              <a href="/admin/" class="btn btn-primary w-100 mt-4">Go to admin</a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-space section-search">
    <div class="container">
      <div class="search-panel card-surface">
        <div>
          <p class="section-kicker mb-2">Event finder</p>
          <h2 class="section-title mb-0">Find the right session fast.</h2>
        </div>
        <form method="get" class="row g-3 align-items-end mt-2">
          <div class="col-lg-9">
            <label for="id_q" class="form-label">Search upcoming events</label>
            {{ search_form.q }}
          </div>
          <div class="col-lg-3 d-grid">
            <button class="btn btn-primary btn-lg" type="submit">Search events</button>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section id="events" class="section-space">
    <div class="container">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
        <div>
          <p class="section-kicker mb-2">Upcoming events</p>
          <h2 class="section-title mb-0">Public listing with instant registration.</h2>
        </div>
        <a class="text-link" href="{% url 'organizer_dashboard' %}">See organizer dashboard →</a>
      </div>
      {% if events %}
      <div class="row g-4">
        {% for event in events %}
        <div class="col-lg-4 col-md-6">
          <article class="event-card card-surface h-100">
            <div class="event-card-top">
              <span class="date-chip">{{ event.start_at|date:"M d" }}</span>
              {% if event.capacity and event.confirmed_registrations >= event.capacity %}
              <span class="status-badge badge-warm">Waitlist only</span>
              {% else %}
              <span class="status-badge">Open</span>
              {% endif %}
            </div>
            <h3 class="event-card-title mt-3">{{ event.title }}</h3>
            <p class="event-card-summary">{{ event.summary }}</p>
            <dl class="meta-list mb-4">
              <div><dt>Venue</dt><dd>{{ event.venue }}</dd></div>
              <div><dt>Starts</dt><dd>{{ event.start_at|date:"M d, Y · g:i A" }}</dd></div>
              <div><dt>Availability</dt><dd>{% if event.capacity %}{{ event.confirmed_registrations }}/{{ event.capacity }} reserved{% else %}Open attendance{% endif %}</dd></div>
            </dl>
            <div class="d-flex justify-content-between align-items-center mt-auto gap-3">
              <span class="small text-muted">{{ event.waitlist_registrations }} on waitlist</span>
              <a class="btn btn-primary" href="{{ event.get_absolute_url }}">View details</a>
            </div>
          </article>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state card-surface text-center">
        <h3>No matching events yet</h3>
        <p class="mb-4">{% if query %}Try a different search term or browse all events from the dashboard.{% else %}Create your first event in admin to populate the public catalog.{% endif %}</p>
        <div class="d-flex justify-content-center flex-wrap gap-3">
          <a class="btn btn-primary" href="/admin/">Open admin</a>
          <a class="btn btn-ghost" href="{% url 'organizer_dashboard' %}">View dashboard</a>
        </div>
      </div>
      {% endif %}
    </div>
  </section>

  <section id="how-it-works" class="section-space section-muted">
    <div class="container">
      <div class="row g-4">
        <div class="col-lg-4">
          <div class="feature-card card-surface h-100">
            <div class="feature-number">01</div>
            <h3>Publish events</h3>
            <p>Create or edit event details in admin, then let the polished landing page surface them instantly.</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="feature-card card-surface h-100">
            <div class="feature-number">02</div>
            <h3>Collect registrations</h3>
            <p>Attendees browse events, submit a secure form, and receive confirmation or waitlist handling with capacity checks.</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="feature-card card-surface h-100">
            <div class="feature-number">03</div>
            <h3>Manage attendees</h3>
            <p>Monitor counts in the dashboard, review recent signups, and export attendee CSVs for operations.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
{% endblock %}