<?php
/**
 * Widok skrótu [ped_mapa]. Zmienne z pielgrzymka-mapa.php:
 * $a (atrybuty), $st (statystyki), $wg (świece wg diecezji), $wgSzkol, $ostatnie.
 *
 * Mapa rysuje się w JavaScripcie z pliku kontury.json, ale WSZYSTKO, co niesie
 * treść — liczby, intencje, formularz — jest tutaj w HTML-u. Kto wejdzie bez
 * skryptów albo czytnikiem ekranu, dostaje pełną informację; mapa jest wtedy
 * ozdobą, której brak niczego nie zabiera.
 */
if (!defined('ABSPATH')) { exit; }
$diecezje = ped_diecezje();
$maks = $wg ? max($wg) : 0;
$idw = 'ped' . wp_rand(1000, 9999);
?>
<section class="ped" id="<?php echo esc_attr($idw); ?>"
         data-motyw="<?php echo $a['motyw'] === 'jasny' ? 'jasny' : 'ciemny'; ?>"
         data-maks="<?php echo (int) $maks; ?>"
         data-watek="<?php echo esc_attr($a['watek']); ?>"
         data-swiece="<?php echo esc_attr(wp_json_encode($wg)); ?>"
         data-szkoly="<?php echo esc_attr(wp_json_encode($wgSzkol)); ?>">

  <?php /* Przełącznik stoi na samej górze, bo ktoś, komu ciemne tło przeszkadza,
           ma je zmienić od razu, a nie po przewinięciu całej strony. */ ?>
  <div class="ped-gora">
    <button type="button" class="ped-motyw" aria-live="polite">
      <span class="ped-motyw-znak">☀</span>
      <span class="ped-motyw-napis">Jasne tło</span>
    </button>
  </div>

  <header class="ped-naglowek">
    <?php if ($a['logo'] !== 'nie') : ?>
      <?php /* Znak pielgrzymki niesie już pełną nazwę, więc gdy jest widoczny,
               nadtytuł byłby jej powtórzeniem — zostaje tylko dla czytników ekranu. */ ?>
      <img class="ped-logo"
           src="<?php echo esc_url(PED_URL . 'assets/logo-pionowe-ciemne.png'); ?>"
           data-logo-ciemny="<?php echo esc_url(PED_URL . 'assets/logo-pionowe-ciemne.png'); ?>"
           data-logo-jasny="<?php echo esc_url(PED_URL . 'assets/logo-pionowe.png'); ?>"
           alt="Pielgrzymka Edukacji Domowej na Jasną Górę" width="620" height="398">
    <?php else : ?>
      <p class="ped-nadtytul">Pielgrzymka Edukacji Domowej na Jasną Górę</p>
    <?php endif; ?>
    <h2 class="ped-tytul"><?php echo esc_html($a['tytul']); ?></h2>
    <p class="ped-wstep">Idziemy do Matki z różnych stron Polski i różnymi drogami.
      Zapal światło tam, gdzie jesteś, i dołącz swoją intencję —
      zobaczysz, że nie idziesz sam.</p>
  </header>

  <?php /* Intencje idą NA GÓRĘ. Człowiek, który wchodzi, ma najpierw zobaczyć,
           o co modlą się inni — dopiero wtedy zapalenie własnej świecy przestaje
           być formularzem, a staje się dołączeniem do czegoś. */ ?>
  <?php if ($ostatnie) : ?>
    <div class="ped-pasek-intencji">
      <p class="ped-pasek-tytul">O co modlą się w tej chwili</p>
      <ul class="ped-pasek-lista">
        <?php foreach ($ostatnie as $o) : ?>
          <li>
            <span class="ped-int-tresc"><?php echo esc_html($o['intencja']); ?></span>
            <span class="ped-int-kto"><?php echo $o['imie'] ? esc_html($o['imie']) . ' · ' : ''; ?><?php
              echo esc_html($diecezje[$o['diecezja']] ?? ''); ?></span>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>
  <?php endif; ?>

  <div class="ped-liczby">
    <div class="ped-liczba"><strong><?php echo number_format_i18n($st['swiec']); ?></strong><span>zapalonych świec</span></div>
    <div class="ped-liczba"><strong><?php echo number_format_i18n($st['dzis']); ?></strong><span>dzisiaj</span></div>
    <div class="ped-liczba"><strong><?php echo number_format_i18n($st['diecezji']); ?></strong><span>diecezji w modlitwie</span></div>
    <div class="ped-liczba"><strong><?php echo number_format_i18n($st['zIntencja']); ?></strong><span>intencji</span></div>
  </div>

  <?php /* Mapa i Słowo stoją obok siebie. Fragment Pisma schowany pod mapą
           bywał kilka ekranów niżej i nikt go nie widział — a to po niego
           przychodzi się tu zaraz po zapaleniu świecy. */ ?>
  <div class="ped-obok">
    <div class="ped-plansza">
      <div class="ped-mapa" style="min-height:<?php echo (int) $a['wysokosc']; ?>px" aria-hidden="true"></div>

      <?php /* Panel wypełnia się po kliknięciu w diecezję. Dymek pod kursorem
               nie wystarcza: na telefonie nie ma czym najechać, a to właśnie tam
               ludzie najczęściej otwierają taką stronę. */ ?>
      <div class="ped-szczegoly" hidden>
        <button type="button" class="ped-szczegoly-zamknij" aria-label="Zamknij">×</button>
        <h4 class="ped-szczegoly-tytul"></h4>
        <p class="ped-szczegoly-swiece"></p>
        <div class="ped-szczegoly-szkoly"></div>
      </div>

      <div class="ped-legenda">
        <span><span class="ped-kropka ped-kropka--swieca"></span> światło modlitwy</span>
        <?php if ($a['szkoly'] !== 'nie') : ?>
          <span><span class="ped-kropka ped-kropka--szkola"></span> szkoły przyjazne edukacji domowej
            (<?php echo number_format_i18n($st['szkol']); ?> w <?php echo (int) $st['szkolWoj']; ?> województwach)</span>
        <?php endif; ?>
        <span class="ped-podpowiedz">Dotknij swoich stron, żeby zobaczyć,
          kto uczy tam dzieci w domu.</span>
      </div>
    </div>

    <aside class="ped-slowo" aria-live="polite">
      <p class="ped-slowo-nadpis">Słowo na drogę</p>
      <p class="ped-slowo-zacheta">Zapal światło, a otrzymasz fragment Pisma —
        jeden, do zabrania ze sobą na dziś.</p>
      <p class="ped-moja-intencja" hidden></p>

      <blockquote class="ped-slowo-tresc" hidden>
        <p class="ped-slowo-tekst"></p>
        <cite class="ped-slowo-sigla"></cite>
      </blockquote>

      <?php /* Prośby kierowane. Człowiek rzadko modli się „w ogóle” — modli się
               za kogoś konkretnego, i takie też ma dostać słowo. */ ?>
      <div class="ped-prosby" hidden>
        <p class="ped-prosby-wstep">Poproś o słowo:</p>
        <div class="ped-prosby-rzad">
          <button type="button" class="ped-prosba" data-dla="malzonek">dla żony / męża</button>
          <button type="button" class="ped-prosba" data-dla="dzieci">dla dzieci</button>
          <button type="button" class="ped-prosba" data-dla="rodzice">dla rodziców</button>
          <button type="button" class="ped-prosba" data-dla="">jeszcze jedno</button>
        </div>
        <p class="ped-prosby-info" role="status"></p>
      </div>
    </aside>
  </div>

  <?php /* Modlitwa stoi zaraz pod mapą: najpierw widzisz, gdzie w Polsce ktoś
           się modli, potem modlisz się razem z nimi, a dopiero potem zapalasz
           własną świecę. Odwrotna kolejność zrobiłaby z modlitwy dodatek do
           przycisku. */ ?>
  <?php if ($a['modlitwa'] !== 'nie') { echo do_shortcode('[ped_modlitwa]'); } ?>

  <form class="ped-form" novalidate>
    <div class="ped-pole">
      <label for="<?php echo esc_attr($idw); ?>-d">Skąd idziesz</label>
      <div class="ped-rzad">
        <select id="<?php echo esc_attr($idw); ?>-d" class="ped-diecezja" required>
          <option value="">— wybierz diecezję —</option>
          <?php foreach ($diecezje as $kod => $nazwa) : ?>
            <option value="<?php echo esc_attr($kod); ?>"><?php echo esc_html($nazwa); ?></option>
          <?php endforeach; ?>
        </select>
        <button type="button" class="ped-lok">Podpowiedz, gdzie jestem</button>
      </div>
      <p class="ped-stanlok" role="status"></p>
    </div>

    <div class="ped-pole">
      <label for="<?php echo esc_attr($idw); ?>-i">Imię <span class="ped-male">(nieobowiązkowo)</span></label>
      <input type="text" id="<?php echo esc_attr($idw); ?>-i" class="ped-imie" maxlength="60" autocomplete="given-name">
    </div>

    <div class="ped-pole">
      <label for="<?php echo esc_attr($idw); ?>-t">W jakiej intencji <span class="ped-male">(jeśli chcesz — przeczytają ją inni)</span></label>
      <input type="text" id="<?php echo esc_attr($idw); ?>-t" class="ped-intencja" maxlength="200"
             placeholder="np. za naszą rodzinę i za wytrwałość w codziennej nauce">
      <p class="ped-male">To, co najbardziej osobiste, zostaw między sobą a Bogiem —
        tę linijkę zobaczą wszyscy, którzy tu wejdą.</p>
    </div>

    <button type="button" class="ped-zapal">Zapal światło</button>
    <p class="ped-info" role="status" aria-live="polite"></p>
  </form>

  <?php /* Pieśń stoi pod Słowem, bo taki jest porządek modlitwy: zapalasz
           świecę, dostajesz fragment Pisma, a pieśń może ci przy nim towarzyszyć. */ ?>
  <?php if ($a['piesn'] !== 'nie') { echo do_shortcode('[ped_piesn]'); } ?>

  <?php if ($a['udostepnianie'] !== 'nie') : ?>
    <div class="ped-udostepnij" hidden>
      <p>Zaproś kogoś, kto też potrzebuje dziś światła:</p>
      <a class="ped-fb" href="#" target="_blank" rel="noopener">Udostępnij na Facebooku</a>
      <button type="button" class="ped-kopiuj">Skopiuj tekst na Instagram</button>
      <button type="button" class="ped-pobierz">Pobierz obrazek</button>
      <p class="ped-male ped-udost-info" role="status"></p>
    </div>
  <?php endif; ?>

  <?php if ($ostatnie) : ?>
    <div class="ped-intencje">
      <h3>Zaniesione intencje</h3>
      <ul>
        <?php foreach ($ostatnie as $o) : ?>
          <li>
            <span class="ped-int-tresc"><?php echo esc_html($o['intencja']); ?></span>
            <span class="ped-int-kto">
              <?php echo $o['imie'] ? esc_html($o['imie']) . ' · ' : ''; ?>
              <?php echo esc_html($diecezje[$o['diecezja']] ?? ''); ?>
            </span>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>
  <?php endif; ?>

  <?php if ($a['szkoly'] !== 'nie') : ?>
    <div class="ped-zacheta">
      <h3>Żadna rodzina nie powinna szukać po omacku</h3>
      <p>Uczyć dziecko w domu to wybrać wolność, a razem z nią odpowiedzialność —
         i łatwiej ją nieść, gdy obok są ludzie, którzy idą tą samą drogą.
         Zebraliśmy <?php echo number_format_i18n($st['szkol']); ?> szkół, które takim rodzinom pomagają.
         Jeśli znasz jeszcze jedną albo widzisz, że czegoś tu brakuje — powiedz nam,
         a trafi do innych.</p>
      <?php echo do_shortcode('[ped_zglos tytul="Powiedz nam o szkole"]'); ?>
    </div>
  <?php endif; ?>

  <?php /* Pytanie o zapisy pada PO modlitwie i tylko wtedy — kto zapalił świecę,
           zrobił już pierwszy krok, i wtedy pytanie o drugi brzmi naturalnie.
           Postawione na wejściu byłoby zaczepką przy drzwiach kościoła. */ ?>
  <div class="ped-decyzja" hidden>
    <p class="ped-decyzja-nad">Pomodliłeś się. A dalej?</p>
    <h3>Jeśli jeszcze nie jesteś zapisany — może to jest ten moment</h3>
    <p>Idziemy do Matki 10 października. Zapisy dla rodzin są otwarte.</p>
    <a class="ped-zapisy-przycisk" href="https://pielgrzymkaed.pl/zapisy/"
       target="_blank" rel="noopener">Zapisz rodzinę</a>
    <p class="ped-decyzja-male">Jeśli już się zapisałeś — dziękuję, i do zobaczenia na trasie.</p>
  </div>

  <div class="ped-zapisy">
    <p class="ped-zapisy-nad">Pielgrzymka Edukacji Domowej</p>
    <h3>10 października 2026 · Jasna Góra</h3>
    <p>Zapisy dla rodzin są już otwarte na stronie pielgrzymki.</p>
    <a class="ped-zapisy-przycisk" href="https://pielgrzymkaed.pl/zapisy/"
       target="_blank" rel="noopener">Zapisz rodzinę</a>
  </div>

  <p class="ped-stopka">Nie zakładamy Ci konta i nie pytamy, kim jesteś.
     Zostaje tylko światło i intencja, jeśli ją napiszesz.
     Gdy pozwolisz podpowiedzieć swoje strony, Twoje położenie nie opuszcza Twojego telefonu.</p>
</section>
