<?php declare(strict_types=1);
$page_title       = 'Big Breath - Coming Soon';
$page_description = 'Big Breath, the breathwork practice of Big Joe Fauria, is preparing to launch. Join the list and see upcoming events.';
$page_canonical   = 'https://bigbreath.co/';
$db = new PDO('sqlite:' . __DIR__ . '/../data/events.sqlite');
$events = $db->query("SELECT * FROM events WHERE published=1 ORDER BY starts_at ASC")->fetchAll(PDO::FETCH_ASSOC);
require __DIR__ . '/../components/_header.php';
?>

<section class="bb-section bb-section--oat" style="padding-top:calc(var(--pad-section) + 4rem);text-align:center;">
  <div class="bb-container bb-container--narrow">
    <span class="bb-label bb-reveal">Coming Soon</span>
    <hr class="bb-rule" style="margin-inline:auto;width:80px;">
    <h1 class="bb-display bb-reveal" style="font-size:clamp(3rem, 7vw, 5rem);margin-bottom:var(--s-6);">Big Breath</h1>
    <p class="bb-body bb-reveal" style="font-size:var(--t-lg);max-width:520px;margin-inline:auto;margin-bottom:var(--s-4);">We are excited for our website.</p>
    <p class="bb-body bb-reveal" style="max-width:520px;margin-inline:auto;color:var(--bb-ink);">Ignite the inner fire. Master the breath. The full Big Breath experience is on the way. Join the list to be the first to know.</p>
  </div>
</section>

<section class="bb-section">
  <div class="bb-container">
    <span class="bb-label bb-reveal" style="text-align:center;display:block;">Join Joe - Upcoming Events</span>
    <hr class="bb-rule" style="margin-inline:auto;width:80px;">
    <h2 class="bb-display bb-reveal" style="text-align:center;margin-bottom:var(--s-12);">In a room near you.</h2>

    <div class="bb-slider" data-slider>
      <button type="button" class="bb-slider__btn bb-slider__btn--prev" data-slider-prev aria-label="Previous">&larr;</button>
      <div class="bb-slider__track" data-slider-track>
        <?php foreach ($events as $ev): $dt = strtotime($ev['starts_at']); ?>
        <article class="bb-slide bb-event-card" data-event-id="<?= (int)$ev['id'] ?>">
          <div class="bb-event-card__media" style="background-image:url('<?= htmlspecialchars($ev['hero_image']) ?>');"></div>
          <div class="bb-event-card__body">
            <span class="bb-label"><?= htmlspecialchars($ev['format']) ?></span>
            <h3><?= htmlspecialchars($ev['title']) ?></h3>
            <p class="bb-event-card__meta"><?= date('M j, Y', $dt) ?><br><?= htmlspecialchars($ev['city']) ?></p>
            <p class="bb-event-card__blurb"><?= htmlspecialchars($ev['blurb']) ?></p>
            <button type="button" class="bb-event-card__more" data-open-event="<?= (int)$ev['id'] ?>">Details</button>
          </div>
        </article>
        <?php endforeach; ?>
      </div>
      <button type="button" class="bb-slider__btn bb-slider__btn--next" data-slider-next aria-label="Next">&rarr;</button>
    </div>
  </div>
</section>

<section class="bb-section bb-section--oat">
  <div class="bb-container bb-container--narrow">
    <span class="bb-label bb-reveal" style="text-align:center;display:block;">Stay Connected</span>
    <hr class="bb-rule" style="margin-inline:auto;width:80px;">
    <h2 class="bb-display bb-reveal" style="text-align:center;margin-bottom:var(--s-4);">Be the first breath.</h2>
    <p class="bb-body bb-reveal" style="text-align:center;max-width:480px;margin-inline:auto;margin-bottom:var(--s-10);">Drop your name and email. We will let you know when bigbreath.co launches and when Big Joe is in your city.</p>

    <form action="/api/contact.php" method="POST" class="bb-reveal" style="display:flex;flex-direction:column;gap:var(--s-6);max-width:520px;margin-inline:auto;">
      <input type="hidden" name="source" value="coming-soon">
      <div>
        <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Name</label>
        <input type="text" name="name" required autocomplete="name"
          style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;">
      </div>
      <div>
        <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Email</label>
        <input type="email" name="email" required autocomplete="email"
          style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;">
      </div>
      <div>
        <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Message (optional)</label>
        <textarea name="message" rows="3"
          style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;resize:vertical;"></textarea>
      </div>
      <button type="submit" class="bb-btn" style="align-self:center;margin-top:var(--s-4);">Join the List</button>
    </form>
  </div>
</section>

<div class="bb-event-modal" id="bb-event-modal" hidden>
  <div class="bb-event-modal__backdrop" data-close-modal></div>
  <div class="bb-event-modal__panel" role="dialog" aria-modal="true" aria-labelledby="bb-event-modal-title">
    <button type="button" class="bb-event-modal__close" data-close-modal aria-label="Close">&times;</button>
    <div class="bb-event-modal__body"></div>
  </div>
</div>

<script>
(function(){
  var data = <?= json_encode(array_map(function($e){
    return ['id'=>(int)$e['id'],'title'=>$e['title'],'starts_at'=>$e['starts_at'],'location'=>$e['location'],'city'=>$e['city'],'format'=>$e['format'],'blurb'=>$e['blurb'],'cta_label'=>$e['cta_label'],'cta_url'=>$e['cta_url'],'hero_image'=>$e['hero_image']];
  }, $events), JSON_UNESCAPED_SLASHES) ?>;
  var modal = document.getElementById('bb-event-modal');
  var body = modal.querySelector('.bb-event-modal__body');
  function fmt(s){ var d = new Date(s.replace(' ','T')); return d.toLocaleString(undefined,{weekday:'long',month:'long',day:'numeric',year:'numeric',hour:'numeric',minute:'2-digit'}); }
  document.querySelectorAll('[data-open-event]').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = +btn.getAttribute('data-open-event');
      var ev = data.find(function(x){return x.id===id;});
      if(!ev) return;
      body.innerHTML =
        '<div class="bb-event-modal__hero" style="background-image:url(\''+ev.hero_image+'\');"></div>'+
        '<span class="bb-label">'+ev.format+'</span>'+
        '<h2 id="bb-event-modal-title">'+ev.title+'</h2>'+
        '<p class="bb-event-modal__meta">'+fmt(ev.starts_at)+'<br>'+ev.location+', '+ev.city+'</p>'+
        '<p class="bb-event-modal__blurb">'+ev.blurb+'</p>'+
        '<a href="'+ev.cta_url+'" class="bb-btn">'+ev.cta_label+'</a>';
      modal.hidden = false;
      document.body.style.overflow = 'hidden';
    });
  });
  modal.querySelectorAll('[data-close-modal]').forEach(function(el){
    el.addEventListener('click', function(){ modal.hidden = true; document.body.style.overflow=''; });
  });
  document.addEventListener('keydown', function(e){ if(e.key==='Escape' && !modal.hidden){ modal.hidden = true; document.body.style.overflow=''; } });

  document.querySelectorAll('[data-slider]').forEach(function(s){
    var track = s.querySelector('[data-slider-track]');
    var prev = s.querySelector('[data-slider-prev]');
    var next = s.querySelector('[data-slider-next]');
    function step(){ var c = track.querySelector('.bb-slide'); return c ? c.getBoundingClientRect().width + parseFloat(getComputedStyle(track).gap||16) : 320; }
    prev.addEventListener('click', function(){ track.scrollBy({left:-step(),behavior:'smooth'}); });
    next.addEventListener('click', function(){ track.scrollBy({left:step(),behavior:'smooth'}); });
  });
})();
</script>

<?php require __DIR__ . '/../components/_footer.php'; ?>
