{% extends "base.html" %}

{% block title %}Roadshow Calendar | Secure Event Calendar{% endblock %}

{% block content %}
<section class="hero-section">
  <div class="container">
    <div class="hero-card">
      <div class="hero-copy">
        <span class="eyebrow-pill">Embeddable calendar widget</span>
        <h1>Show visitors exactly where your business will be on any day.</h1>
        <p class="hero-lead">A polished public calendar for your website, plus secure staff-only tools for publishing event dates, times, and direct event links.</p>
        <div class="hero-actions">
          <a class="btn btn-primary-brand btn-lg" href="#calendar-preview">Explore the calendar</a>
          <a class="btn btn-ghost btn-lg" href="#embed-snippet">Copy the embed snippet</a>
        </div>
        <div class="hero-stats row g-3">
          <div class="col-md-4">
            <div class="stat-card">
              <strong>Secure updates</strong>
              <span>Only logged-in staff can add or change events.</span>
            </div>
          </div>
          <div class="col-md-4">
            <div class="stat-card">
              <strong>Click any day</strong>
              <span>Visitors get event names, times, and helpful links in a modal.</span>
            </div>
          </div>
          <div class="col-md-4">
            <div class="stat-card">
              <strong>Embed ready</strong>
              <span>Drop the iframe into your existing HTML website in minutes.</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hero-panel">
        <div class="floating-orb orb-one"></div>
        <div class="floating-orb orb-two"></div>
        <div class="mini-widget card-surface">
          <p class="mini-label">Next live dates</p>
          {% if hero_events %}
          <ul class="list-unstyled mini-event-list mb-0">
            {% for event in hero_events %}
            <li>
              <span>{{ event.start|date:"M d" }}</span>
              <div>
                <strong>{{ event.name }}</strong>
                <small>{{ event.location|default:"Location announced soon" }}</small>
              </div>
            </li>
            {% endfor %}
          </ul>
          {% else %}
          <div class="empty-note">Add your first event from the staff dashboard to see it appear here.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell" id="calendar-preview">
  <div class="container">
    <div class="section-heading d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-end">
      <div>
        <span class="eyebrow-pill">Public calendar</span>
        <h2 class="section-title">A visitor-friendly monthly schedule</h2>
        <p class="section-copy">Each day opens a clean detail modal so guests can confirm where you will be and jump straight to the event page.</p>
      </div>
      <div class="compact-actions d-flex gap-2">
        <a class="btn btn-ghost" href="{% url 'calendar_page' %}">Open full calendar</a>
        <a class="btn btn-primary-brand" href="{% url 'event_list' %}">Browse event list</a>
      </div>
    </div>
    {% include "core/includes/calendar_widget.html" with calendar_variant="landing" %}
  </div>
</section>

<section class="section-shell section-soft">
  <div class="container">
    <div class="section-heading">
      <span class="eyebrow-pill">Upcoming stops</span>
      <h2 class="section-title">Events your audience can scan in seconds</h2>
    </div>
    <div class="row g-4">
      {% for event in upcoming_events %}
      <div class="col-lg-4 col-md-6">
        <article class="event-card card-surface h-100">
          <div class="event-date-chip">{{ event.start|date:"D, M j" }}</div>
          <h3>{{ event.name }}</h3>
          <p class="event-meta">{{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}</p>
          <p class="event-meta">{{ event.location|default:"Location announced soon" }}</p>
          <p class="event-summary">{{ event.summary|default:"Event details will appear here as soon as your team adds them."|truncatechars:120 }}</p>
          <div class="mt-auto d-flex gap-2 flex-wrap">
            <a class="btn btn-sm btn-primary-brand" href="{% url 'event_detail' event.slug %}">Details</a>
            {% if event.event_url %}
            <a class="btn btn-sm btn-ghost" href="{{ event.event_url }}" target="_blank" rel="noopener">Event page</a>
            {% endif %}
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="empty-state card-surface text-center">
          <h3>No public events yet</h3>
          <p>Create events from the secure dashboard or Django admin, then they will automatically appear on the landing page and embed widget.</p>
          <a class="btn btn-primary-brand" href="{% url 'login' %}">Staff login</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-shell" id="embed-snippet">
  <div class="container">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-5">
        <div class="card-surface h-100 embed-copy-card">
          <span class="eyebrow-pill">Embed on your HTML site</span>
          <h2 class="section-title">Paste one iframe and you are live</h2>
          <p class="section-copy">Use the ready-made widget page below inside your existing HTML website. It stays read-only for visitors, while your team updates dates privately.</p>
          <div class="d-flex gap-2 flex-wrap">
            <a class="btn btn-primary-brand" href="{{ embed_url }}" target="_blank" rel="noopener">Preview widget</a>
            <a class="btn btn-ghost" href="/admin/">Open admin</a>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="card-surface code-card h-100">
          <div class="code-card-header d-flex justify-content-between align-items-center gap-3">
            <strong>Embed snippet</strong>
            <button class="btn btn-sm btn-ghost" type="button" data-copy-snippet data-copy-target="#iframeSnippet">Copy snippet</button>
          </div>
          <pre id="iframeSnippet" class="code-snippet mb-0">{{ iframe_snippet }}</pre>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}