<?php
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/db.php';

$strings   = require __DIR__ . '/includes/i18n.php';
$countries = require __DIR__ . '/includes/countries.php';

$lang = 'fr';
if (isset($_GET['lang']) && isset($strings[$_GET['lang']])) {
    $lang = $_GET['lang'];
}
$t = $strings[$lang];

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
if (empty($_SESSION['csrf'])) {
    $_SESSION['csrf'] = bin2hex(random_bytes(32));
}
$csrf = $_SESSION['csrf'];

$hasPoster = is_file(__DIR__ . '/assets/img/pko50.jpg');

/** +22892675220 becomes +228 92 67 52 20 */
function pretty_phone(string $number): string
{
    if (preg_match('/^\+228(\d{2})(\d{2})(\d{2})(\d{2})$/', $number, $m)) {
        return '+228 ' . $m[1] . ' ' . $m[2] . ' ' . $m[3] . ' ' . $m[4];
    }
    return $number;
}
?>
<!DOCTYPE html>
<html lang="<?= e($t['html_lang']) ?>" data-lang="<?= e($lang) ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#f6f1e7">
<title data-i18n="page_title"><?= e($t['page_title']) ?></title>
<meta name="description" data-i18n-attr="content:meta_desc" content="<?= e($t['meta_desc']) ?>">
<meta property="og:title" content="<?= e(EVENT_TITLE) ?>">
<meta property="og:description" content="<?= e($t['meta_desc']) ?>">
<meta property="og:type" content="website">
<?php if ($hasPoster): ?>
<meta property="og:image" content="assets/img/pko50.jpg">
<?php endif; ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css?v=7">
</head>
<body>

<div class="stars" aria-hidden="true"></div>

<header class="topbar">
  <span class="wordmark">PKO <span class="at">@</span> 50</span>
  <button type="button" class="lang-toggle" id="langToggle" data-i18n="switch_label"><?= e($t['switch_label']) ?></button>
</header>

<main class="wrap">

  <section class="hero">
    <?php if ($hasPoster): ?>
      <img class="poster"
           src="assets/img/pko50.jpg"
           srcset="assets/img/pko50-520.jpg 520w,
                   assets/img/pko50-760.jpg 760w,
                   assets/img/pko50.jpg 1040w"
           sizes="(min-width: 600px) 512px, calc(100vw - 48px)"
           alt="<?= e(EVENT_TITLE) ?>"
           width="1040" height="1477"
           fetchpriority="high" decoding="async">
    <?php else: ?>
      <div class="poster poster-fallback">
        <span class="poster-title">PKO <span class="at">@</span> 50</span>
        <span class="poster-rule" aria-hidden="true"></span>
        <span class="poster-sub">50 Shades of Love</span>
      </div>
    <?php endif; ?>
  </section>

  <section class="card invite">
    <p class="kicker" data-i18n="kicker"><?= e($t['kicker']) ?></p>
    <h1 class="headline" data-i18n="headline"><?= e($t['headline']) ?></h1>

    <dl class="details">
      <div class="row">
        <dt data-i18n="label_date"><?= e($t['label_date']) ?></dt>
        <dd data-i18n="value_date"><?= e($t['value_date']) ?></dd>
      </div>
      <div class="row">
        <dt data-i18n="label_venue"><?= e($t['label_venue']) ?></dt>
        <dd data-i18n="value_venue"><?= e($t['value_venue']) ?></dd>
      </div>
      <div class="row">
        <dt data-i18n="label_time"><?= e($t['label_time']) ?></dt>
        <dd data-i18n="value_time"><?= e($t['value_time']) ?></dd>
      </div>
      <div class="row">
        <dt data-i18n="label_dress"><?= e($t['label_dress']) ?></dt>
        <dd data-i18n="value_dress"><?= e($t['value_dress']) ?></dd>
      </div>
    </dl>

    <a class="btn-ghost" href="api/event.ics.php" data-i18n="calendar"><?= e($t['calendar']) ?></a>
  </section>

  <section class="card form-card" id="formCard">

    <div class="form-state" id="stateForm">
      <h2 class="form-title" data-i18n="form_title"><?= e($t['form_title']) ?></h2>
      <p class="form-intro" data-i18n="form_intro"><?= e($t['form_intro']) ?></p>

      <form id="rsvpForm" novalidate>
        <input type="hidden" name="csrf" value="<?= e($csrf) ?>">
        <input type="hidden" name="lang" id="fieldLang" value="<?= e($lang) ?>">
        <div class="hp" aria-hidden="true">
          <label for="website">Website</label>
          <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
        </div>

        <div class="field" id="fieldNameWrap">
          <label for="fullName" data-i18n="name_label"><?= e($t['name_label']) ?></label>
          <input type="text" id="fullName" name="full_name" autocomplete="name"
                 maxlength="120" placeholder="<?= e($t['name_ph']) ?>"
                 data-i18n-attr="placeholder:name_ph"
                 aria-describedby="nameHelp nameErr">
          <p class="help" id="nameHelp" data-i18n="name_help"><?= e($t['name_help']) ?></p>
          <p class="error" id="nameErr" role="alert"></p>
        </div>

        <div class="field" id="fieldPhoneWrap">
          <label for="phone" data-i18n="phone_label"><?= e($t['phone_label']) ?></label>
          <div class="phone-group">
            <button type="button" class="dial-btn" id="dialBtn"
                    aria-haspopup="dialog" aria-expanded="false"
                    aria-label="<?= e($t['country_label']) ?>"
                    data-i18n-attr="aria-label:country_label">
              <span class="flag" id="dialFlag">TG</span>
              <span class="dial" id="dialCode">+228</span>
              <svg class="chev" viewBox="0 0 12 8" aria-hidden="true"><path d="M1 1.5 6 6.5l5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <input type="tel" id="phone" name="phone" inputmode="tel" autocomplete="tel-national"
                   maxlength="20" placeholder="<?= e($t['phone_ph']) ?>"
                   data-i18n-attr="placeholder:phone_ph"
                   aria-describedby="phoneHelp phoneErr">
          </div>
          <p class="help" id="phoneHelp" data-i18n="phone_help"><?= e($t['phone_help']) ?></p>
          <p class="error" id="phoneErr" role="alert"></p>
        </div>

        <div class="field" id="fieldAttendWrap">
          <span class="label" data-i18n="attend_label"><?= e($t['attend_label']) ?></span>
          <div class="choices" role="radiogroup" aria-labelledby="attendLabel">
            <button type="button" class="choice choice-yes" data-value="1" role="radio" aria-checked="false">
              <span class="mark" aria-hidden="true">
                <svg viewBox="0 0 20 20"><path d="M4 10.5 8 14.5 16 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <span class="choice-text" data-i18n="yes"><?= e($t['yes']) ?></span>
            </button>
            <button type="button" class="choice choice-no" data-value="0" role="radio" aria-checked="false">
              <span class="mark" aria-hidden="true">
                <svg viewBox="0 0 20 20"><path d="M5.5 5.5 14.5 14.5M14.5 5.5 5.5 14.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
              </span>
              <span class="choice-text" data-i18n="no"><?= e($t['no']) ?></span>
            </button>
          </div>
          <input type="hidden" name="attending" id="attending" value="">
          <p class="error" id="attendErr" role="alert"></p>
        </div>

        <p class="error form-error" id="formErr" role="alert"></p>

        <button type="submit" class="btn-gold" id="submitBtn" disabled>
          <span class="btn-label" data-i18n="submit"><?= e($t['submit']) ?></span>
          <span class="spinner" aria-hidden="true"></span>
        </button>
      </form>
    </div>

    <div class="form-state success" id="stateSuccess" hidden>
      <div class="seal" aria-hidden="true">
        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="21" fill="none" stroke="currentColor" stroke-width="1.5" opacity=".45"/><path class="tick" d="M15 24.5 21.5 31 34 17.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h2 class="success-title" id="successTitle"></h2>
      <p class="success-body" id="successBody"></p>
      <p class="success-note" id="successNote" hidden></p>
      <button type="button" class="btn-ghost" id="againBtn" data-i18n="change_answer"><?= e($t['change_answer']) ?></button>
    </div>

  </section>

  <section class="card enquiries">
    <p class="kicker" data-i18n="enquiries"><?= e($t['enquiries']) ?></p>
    <a class="tel" href="tel:<?= e(EVENT_PHONE_1) ?>"><?= e(pretty_phone(EVENT_PHONE_1)) ?></a>
    <a class="tel" href="tel:<?= e(EVENT_PHONE_2) ?>"><?= e(pretty_phone(EVENT_PHONE_2)) ?></a>
  </section>

  <footer class="foot">
    <span class="foot-rule" aria-hidden="true"></span>
    <p data-i18n="footer"><?= e($t['footer']) ?></p>
  </footer>

</main>

<div class="sheet-backdrop" id="sheetBackdrop" hidden></div>
<div class="sheet" id="sheet" role="dialog" aria-modal="true" aria-labelledby="sheetTitle" hidden>
  <div class="sheet-head">
    <span class="grip" aria-hidden="true"></span>
    <h2 id="sheetTitle" data-i18n="country_label"><?= e($t['country_label']) ?></h2>
    <button type="button" class="sheet-close" id="sheetClose" aria-label="<?= e($t['close']) ?>" data-i18n-attr="aria-label:close">
      <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 5.5 14.5 14.5M14.5 5.5 5.5 14.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    </button>
  </div>
  <div class="sheet-search">
    <svg class="search-icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m13.5 13.5 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
    <input type="search" id="countrySearch" autocomplete="off" placeholder="<?= e($t['search_ph']) ?>" data-i18n-attr="placeholder:search_ph">
  </div>
  <ul class="country-list" id="countryList" role="listbox" aria-labelledby="sheetTitle"></ul>
  <p class="sheet-empty" id="sheetEmpty" hidden data-i18n="no_result"><?= e($t['no_result']) ?></p>
</div>

<script>
window.PKO = {
  lang: <?= json_encode($lang) ?>,
  strings: <?= json_encode($strings, JSON_UNESCAPED_UNICODE) ?>,
  countries: <?= json_encode($countries, JSON_UNESCAPED_UNICODE) ?>,
  defaultIso: 'TG',
  autoScrollDelay: <?= (int) AUTOSCROLL_DELAY_MS ?>,
  autoScrollDuration: <?= (int) AUTOSCROLL_DURATION_MS ?>
};
</script>
<script src="assets/js/app.js?v=4"></script>
</body>
</html>
