{% extends 'base.html' %}
{% block content %}
<section class="card">
  <h1>
    {% if page == 'schedule' %}{{ t('schedule') }}{% endif %}
    {% if page == 'hotels' %}{{ t('hotels') }}{% endif %}
    {% if page == 'taxi' %}{{ t('taxi') }}{% endif %}
    {% if page == 'location' %}{{ t('location') }}{% endif %}
    {% if page == 'gifts' %}{{ t('gifts') }}{% endif %}
  </h1>

  {% if page == 'schedule' %}
    <p>{{ t('schedule_intro') }}</p>
    <div class="schedule-timeline">
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/ankunft.png') }}'); --schedule-card-position: center 18%;">
        <p class="schedule-time">15:00</p>
        <h2>{{ t('schedule_arrival_title') }}</h2>
        <p>{{ t('schedule_arrival_text') }}</p>
      </article>
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/trauzermonie.png') }}'); --schedule-card-position: center 25%;">
        <p class="schedule-time">15:30</p>
        <h2>{{ t('schedule_ceremony_title') }}</h2>
        <p>{{ t('schedule_ceremony_text') }}</p>
      </article>
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/sektempfang.png') }}'); --schedule-card-position: center 32%;">
        <p class="schedule-time">16:00</p>
        <h2>{{ t('schedule_reception_title') }}</h2>
        <p>{{ t('schedule_reception_text') }}</p>
      </article>
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/buffet.png') }}'); --schedule-card-position: center 40%;">
        <p class="schedule-time">18:00</p>
        <h2>{{ t('schedule_buffet_title') }}</h2>
        <p>{{ t('schedule_buffet_text') }}</p>
      </article>
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/kuchen.png') }}'); --schedule-card-position: center 48%;">
        <p class="schedule-time">22:00</p>
        <h2>{{ t('schedule_cake_title') }}</h2>
        <p>{{ t('schedule_cake_text') }}</p>
      </article>
      <article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/party.png') }}'); --schedule-card-position: center 56%;">
        <p class="schedule-time">{{ t('schedule_afterwards_time') }}</p>
        <h2>{{ t('schedule_party_title') }}</h2>
        <p>{{ t('schedule_party_text') }}</p>
      </article>
    </div>
  {% elif page == 'hotels' %}
    <p>{{ t('hotels_intro') }}</p>
    <div class="hotel-list">
      {% for hotel in hotels %}
        <article class="hotel-card">
          <h2>{{ hotel.name }}</h2>
          <p class="hotel-address">{{ hotel.address }}</p>
          <p>{{ hotel.description }}</p>
          <div class="hotel-badges">
            <span>{{ hotel.drive_badge }}</span>
            <span>{{ hotel.walk_badge }}</span>
          </div>
          <div class="hotel-actions">
            <a class="btn" href="{{ hotel.website_url }}" target="_blank" rel="noopener">{{ t('hotel_visit_website') }}</a>
            <a
              class="btn btn-ghost"
              href="{{ hotel.drive_route_url }}"
              target="_blank"
              rel="noopener"
              data-route-popup
              data-route-src="{{ hotel.drive_route_embed_url }}"
            >{{ t('hotel_route_drive') }}</a>
            <a
              class="btn btn-ghost"
              href="{{ hotel.walk_route_url }}"
              target="_blank"
              rel="noopener"
              data-route-popup
              data-route-src="{{ hotel.walk_route_embed_url }}"
            >{{ t('hotel_route_walk') }}</a>
          </div>
        </article>
      {% endfor %}
    </div>
    <div class="route-modal" data-route-modal hidden>
      <div class="route-modal-backdrop" data-route-close></div>
      <section class="route-modal-panel" role="dialog" aria-modal="true" aria-label="{{ t('hotel_route_modal_title') }}">
        <header class="route-modal-head">
          <h2>{{ t('hotel_route_modal_title') }}</h2>
          <button class="btn btn-ghost route-modal-close" type="button" data-route-close>{{ t('hotel_route_modal_close') }}</button>
        </header>
        <div class="route-modal-body">
          <iframe title="{{ t('hotel_route_modal_title') }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen data-route-frame></iframe>
          <div class="route-map-actions">
            <a class="btn route-open-btn" href="#" target="_blank" rel="noopener" data-route-open-external>{{ t('hotel_route_open_maps') }}</a>
          </div>
        </div>
      </section>
    </div>
    <script>
      (() => {
        const modal = document.querySelector("[data-route-modal]");
        if (!modal) return;
        const frame = modal.querySelector("[data-route-frame]");
        const externalLink = modal.querySelector("[data-route-open-external]");
        const closeNodes = modal.querySelectorAll("[data-route-close]");
        const triggerNodes = document.querySelectorAll("[data-route-popup][data-route-src]");
        if (!frame || !externalLink || triggerNodes.length === 0) return;

        const closeModal = () => {
          modal.hidden = true;
          document.body.classList.remove("has-route-modal");
          frame.src = "";
        };

        triggerNodes.forEach((node) => {
          node.addEventListener("click", (event) => {
            event.preventDefault();
            const src = node.getAttribute("data-route-src");
            const href = node.getAttribute("href");
            if (!src) return;
            frame.src = src;
            externalLink.href = href || "#";
            modal.hidden = false;
            document.body.classList.add("has-route-modal");
          });
        });

        closeNodes.forEach((node) => {
          node.addEventListener("click", closeModal);
        });

        document.addEventListener("keydown", (event) => {
          if (event.key === "Escape" && !modal.hidden) {
            closeModal();
          }
        });
      })();
    </script>
  {% elif page == 'taxi' %}
    <div class="taxi-coming-soon">
      <img
        src="{{ url_for('static', filename='assets/bauarbeiter-sticker.png') }}"
        alt="{{ t('taxi_sticker_alt') }}"
        loading="lazy"
        decoding="async"
      >
    </div>
    <p>{{ t('taxi_text') }}</p>
  {% elif page == 'gifts' %}
    <section class="gift-fun" data-gift-fun>
      <p class="gift-lead">{{ t('gifts_teaser') }}</p>
      <button class="btn gift-reveal-btn" type="button" data-gift-reveal>{{ t('gifts_reveal_button') }}</button>
      <div class="gift-reveal" hidden data-gift-reveal-panel>
        <div class="gift-image-wrap">
          <img
            src="{{ url_for('static', filename='assets/money-pile.svg') }}"
            alt="{{ t('gifts_image_alt') }}"
            loading="lazy"
            decoding="async"
          >
        </div>
        <p class="gift-caption">{{ t('gifts_caption') }}</p>
        <p>{{ t('gifts_text') }}</p>
        <div class="money-rain" aria-hidden="true">
          <span class="bill" style="--idx: 1;"></span>
          <span class="bill" style="--idx: 2;"></span>
          <span class="bill" style="--idx: 3;"></span>
          <span class="bill" style="--idx: 4;"></span>
          <span class="bill" style="--idx: 5;"></span>
          <span class="bill" style="--idx: 6;"></span>
          <span class="bill" style="--idx: 7;"></span>
          <span class="bill" style="--idx: 8;"></span>
          <span class="bill" style="--idx: 9;"></span>
          <span class="bill" style="--idx: 10;"></span>
          <span class="bill" style="--idx: 11;"></span>
          <span class="bill" style="--idx: 12;"></span>
        </div>
      </div>
    </section>
    <script>
      (() => {
        const root = document.querySelector("[data-gift-fun]");
        if (!root) return;
        const button = root.querySelector("[data-gift-reveal]");
        const panel = root.querySelector("[data-gift-reveal-panel]");
        if (!button || !panel) return;

        button.addEventListener("click", () => {
          panel.hidden = false;
          panel.classList.add("is-active");
          button.setAttribute("disabled", "disabled");
        }, { once: true });
      })();
    </script>
  {% elif page == 'location' %}
    <h2>{{ t('location_story_title') }}</h2>
    <p>{{ t('location_story_text') }}</p>
    <div class="map-wrap map-consent" data-map-consent>
      <button
        class="map-preview"
        type="button"
        data-map-load
        aria-label="{{ t('maps_load_button') }}"
        title="{{ t('maps_load_button') }}"
        style="--map-preview-image: url('{{ url_for('static', filename='assets/location-map-preview.svg') }}');"
      >
        <span class="map-preview-overlay">{{ t('maps_load_button') }}</span>
      </button>
      <div class="map-embed-target" data-map-embed-target></div>
      <div class="location-actions">
        <a class="btn btn-ghost" href="{{ location_route_url }}" target="_blank" rel="noopener" data-location-route-live>{{ t('route_from_current') }}</a>
        <a class="btn" href="{{ location_website_url }}" target="_blank" rel="noopener">{{ t('visit_location') }}</a>
      </div>
    </div>

    <script>
      (() => {
        const wrapper = document.querySelector("[data-map-consent]");
        if (!wrapper) return;
        const loadButtons = Array.from(wrapper.querySelectorAll("[data-map-load]"));
        const previewButton = wrapper.querySelector(".map-preview");
        const target = wrapper.querySelector("[data-map-embed-target]");
        const src = {{ google_maps_embed_url|tojson }};
        const destination = {{ location_address|tojson }};
        const liveRouteLink = wrapper.querySelector("[data-location-route-live]");
        let loaded = false;

        const loadMap = () => {
          if (loaded) return;
          const iframe = document.createElement("iframe");
          iframe.src = src;
          iframe.loading = "lazy";
          iframe.referrerPolicy = "no-referrer-when-downgrade";
          iframe.allowFullscreen = true;
          target.appendChild(iframe);
          if (previewButton) {
            previewButton.remove();
          }
          loadButtons.forEach((button) => button.remove());
          loaded = true;
        };

        loadButtons.forEach((button) => {
          button.addEventListener("click", loadMap);
        });

        if (liveRouteLink) {
          liveRouteLink.addEventListener("click", (event) => {
            event.preventDefault();
            const fallback = liveRouteLink.getAttribute("href");
            const openFallback = () => {
              if (fallback) {
                window.open(fallback, "_blank", "noopener");
              }
            };

            if (!navigator.geolocation) {
              openFallback();
              return;
            }

            navigator.geolocation.getCurrentPosition(
              ({ coords }) => {
                const origin = `${coords.latitude},${coords.longitude}`;
                const query = new URLSearchParams({
                  api: "1",
                  origin,
                  destination,
                  travelmode: "driving",
                });
                window.open(`https://www.google.com/maps/dir/?${query.toString()}`, "_blank", "noopener");
              },
              () => openFallback(),
              { enableHighAccuracy: true, timeout: 4500, maximumAge: 120000 }
            );
          });
        }
      })();
    </script>
  {% endif %}
</section>
{% endblock %}