{% extends 'base.html' %}
{% block content %}
<section class="hero-banner" aria-label="{{ t('hero_headline') }}" style="--hero-image: url('{{ hero_image_url }}');">
  <div class="hero-overlay">
    {% if wedding_date %}
    <p class="hero-kicker">{{ wedding_date }}</p>
    {% endif %}
    <h1>{{ welcome_headline or t('hero_headline') }}</h1>
    <p>{{ welcome_text or t('hero_text') }}</p>
    <a class="btn hero-cta" href="{{ url_for('guest_area') }}">{{ t('to_guest_area') }}</a>
  </div>
</section>
<p class="hero-hint-below">{{ welcome_hint }}</p>

{% if show_onboarding %}
<dialog
  class="onboarding-dialog"
  data-onboarding-dialog
  data-complete-url="{{ url_for('complete_onboarding') }}"
  data-progress-template="{{ t('tour_progress') }}"
  aria-labelledby="onboarding-title"
>
  <div class="onboarding-shell">
    <div class="onboarding-progress" aria-hidden="true">
      {% for _ in range(6) %}<span data-onboarding-dot></span>{% endfor %}
    </div>
    <p class="onboarding-step-label" data-onboarding-progress></p>
    <h2 id="onboarding-title">{{ t('tour_title') }}</h2>

    <div class="onboarding-slides">
      <section class="onboarding-slide" data-onboarding-slide>
        <span class="onboarding-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false">
            <path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm7 0h11v8H10v-8z" />
          </svg>
        </span>
        <h3>{{ t('tour_dashboard_title') }}</h3>
        <p>{{ t('tour_dashboard_text') }}</p>
      </section>
      <section class="onboarding-slide" data-onboarding-slide hidden>
        <span class="onboarding-icon" aria-hidden="true">✓</span>
        <h3>{{ t('tour_rsvp_title') }}</h3>
        <p>{{ t('tour_rsvp_text') }}</p>
      </section>
      <section class="onboarding-slide" data-onboarding-slide hidden>
        <span class="onboarding-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false">
            <path d="M9 4 7.6 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.6L15 4H9zm3 4.2A4.8 4.8 0 1 1 7.2 13 4.8 4.8 0 0 1 12 8.2zm0 2A2.8 2.8 0 1 0 14.8 13 2.8 2.8 0 0 0 12 10.2z" />
          </svg>
        </span>
        <h3>{{ t('tour_photos_title') }}</h3>
        <p>{{ t('tour_photos_text') }}</p>
      </section>
      <section class="onboarding-slide" data-onboarding-slide hidden>
        <span class="onboarding-icon onboarding-icon-route" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false">
            <circle cx="11" cy="13" r="7.5" />
            <circle cx="11" cy="13" r="3.5" />
            <path d="M20.5 3.5 11 13M17 7l.2-3.6M17 7l3.6-.2" />
          </svg>
        </span>
        <h3>{{ t('tour_routes_title') }}</h3>
        <p>{{ t('tour_routes_text') }}</p>
      </section>
      <section class="onboarding-slide" data-onboarding-slide hidden>
        <span class="onboarding-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false">
            <path d="M12 5.5A8.4 8.4 0 0 0 6.5 3.4 8.6 8.6 0 0 0 2 4.7v14.1a.75.75 0 0 0 1.02.7A8.1 8.1 0 0 1 6.5 18.6a7.1 7.1 0 0 1 4.98 2 .75.75 0 0 0 1.04 0 7.1 7.1 0 0 1 4.98-2 8.1 8.1 0 0 1 3.48.9.75.75 0 0 0 1.02-.7V4.7a8.6 8.6 0 0 0-4.5-1.3A8.4 8.4 0 0 0 12 5.5zm-1 12.9a8.7 8.7 0 0 0-4.5-1.3 9.6 9.6 0 0 0-3 .5V5.7a7.4 7.4 0 0 1 3-.8A6.9 6.9 0 0 1 11 6.7zm9.5-.8a9.6 9.6 0 0 0-3-.5 8.7 8.7 0 0 0-4.5 1.3V6.7a6.9 6.9 0 0 1 4.5-1.8 7.4 7.4 0 0 1 3 .8z" />
          </svg>
        </span>
        <h3>{{ t('tour_translator_title') }}</h3>
        <p>{{ t('tour_translator_text') }}</p>
      </section>
      <section class="onboarding-slide" data-onboarding-slide hidden>
        <span class="onboarding-icon" aria-hidden="true">?</span>
        <h3>{{ t('tour_faq_title') }}</h3>
        <p>{{ t('tour_faq_text') }}</p>
      </section>
    </div>

    <div class="onboarding-actions">
      <div>
        <button class="btn btn-ghost" type="button" data-onboarding-back hidden>{{ t('tour_back') }}</button>
        <button
          class="btn"
          type="button"
          data-onboarding-next
          data-next-label="{{ t('tour_next') }}"
          data-finish-label="{{ t('tour_finish') }}"
        >{{ t('tour_next') }}</button>
      </div>
    </div>
  </div>
</dialog>
{% endif %}
<script src="{{ url_for('static', filename='onboarding.js', v='20260724a') }}" defer></script>
{% endblock %}