<?php
/*
Template Name: activity
*/
get_header();
$u = get_template_directory_uri();
?>


<!-- DESKTOP -->
<div id="promoDesktopContent">
  <div class="promo-bg-layer" aria-hidden="true">
    <img class="promo-bg-img" src="<?php echo esc_url($u); ?>/assets/img/promo/hero-bg.png" alt="">
  </div>

  <section class="promo-hero">
    <div class="container">
      <h1 class="promo-page-title">กิจกรรม</h1>
      <p class="promo-page-subtitle">ติดตามข่าวสาร กิจกรรม และประกาศสำคัญจาก PG FISH</p>
    </div>
  </section>

  <section class="promo-content">
    <div class="container">
      <div class="promo-cards-grid">
        <?php
        $blogs = new WP_Query(array(
          'post_type'      => 'post',
          'cat'            => '4',
          'posts_per_page' => -1,
        ));
        while ($blogs->have_posts()) :
          $blogs->the_post();
        ?>
          <article class="promo-card">
            <?php the_post_thumbnail('full'); ?>
            <div class="promo-card-body">
              <span class="promo-card-tag">โปรโมชั่น</span>
              <div class="promo-card-meta">
                <span class="promo-card-date"><?php echo esc_html(get_the_date()); ?></span>
                <span class="promo-card-title"><?php the_title(); ?></span>
                <div class="promo-card-desc"><?php the_content(); ?></div>
              </div>
              <a class="promo-card-read" href="<?php the_permalink(); ?>">อ่านต่อ &nbsp;&gt;</a>
            </div>
          </article>
        <?php endwhile;
        wp_reset_postdata(); ?>
      </div>

      <div class="promo-actions">
        <a href="<?php the_field('register', 'option'); ?>" target="_blank" class="promo-register-btn">สมัครเลย</a>
      </div>
    </div>
  </section>

  <div class="section-footer-outer">
    <section class="section-footer">
      <img class="sf-logo" src="<?php echo $u; ?>/assets/img/footer-logo.png" alt="PG SLOT FISH">
      <span class="sf-heading-1">เมนูหลัก</span>
      <div class="sf-links-1">
        <a href="<?php echo get_permalink('11'); ?>">เกมออนไลน์</a>
        <a href="<?php echo get_permalink('13'); ?>">โปรโมชั่น</a>
      </div>
      <div class="sf-links-2">
        <a href="<?php echo get_permalink('17'); ?>">ข่าวสาร</a>
        <a href="<?php echo get_permalink('15'); ?>">ติดต่อเรา</a>
      </div>
      <img class="sf-img1" src="<?php echo $u; ?>/assets/img/footer-img1.png" alt="">
      <img class="sf-img2" src="<?php echo $u; ?>/assets/img/footer-img2.png" alt="">
      <img class="sf-img3" src="<?php echo $u; ?>/assets/img/footer-img3.png" alt="">
      <img class="sf-img4" src="<?php echo $u; ?>/assets/img/footer-img4.png" alt="">
    </section>
  </div>
</div><!-- #promoDesktopContent -->

<!-- ══ MOBILE LAYOUT ══ -->
<div id="promo-mobile">

  <!-- FIXED TOPBAR (outside scaler so position:fixed works) -->
  <div class="pm-topbar" id="pmTopbar">
    <a href="<?php the_field('line', 'option'); ?>" target="_blank">
      <img class="pm-btn-menu" src="<?php echo $u; ?>/assets/img/mobile/btn-menu.png" alt="เมนู">
    </a>
    <a href="<?php echo home_url('/'); ?>"><img class="pm-logo" src="<?php echo $u; ?>/assets/img/mobile/logo.png" alt="PG SLOT.FISH"></a>
    <img class="pm-btn-login-sm" id="pmHamburger" src="<?php echo $u; ?>/assets/img/mobile/btn-login-sm.png" alt="">
  </div>

  <div class="pm-scaler" id="pmScaler">
    <div class="pm-wrapper">

      <!-- HERO -->
      <div class="pm-hero">
        <img class="pm-hero-bg" src="<?php echo $u; ?>/assets/img/promo/mobile-hero-bg.png" alt="">
        <div class="pm-hero-title">โปรโมชั่นทั้งหมด</div>
        <div class="pm-hero-subtitle">ติดตามข่าวสาร กิจกรรม และประกาศสำคัญจาก PG FISH</div>
      </div>

      <!-- CARDS -->
      <div class="pm-cards-container">
        <?php
        $blogs = new WP_Query(array(
          'post_type'      => 'post',
          'cat'            => '4',
          'posts_per_page' => -1,
        ));
        while ($blogs->have_posts()) :
          $blogs->the_post();
        ?>
          <div class="pm-card">
            <?php the_post_thumbnail('full'); ?>
            <div class="pm-card-body">
              <span class="pm-card-tag">โปรโมชั่น</span>
              <span class="pm-card-date"><?php echo esc_html(get_the_date()); ?></span>
              <span class="pm-card-title"><?php the_title(); ?></span>
              <span class="pm-card-desc"><?php the_content(); ?></span>
              <a class="pm-card-read" href="<?php the_permalink(); ?>">อ่านต่อ &gt;</a>
            </div>
          </div>
        <?php endwhile;
        wp_reset_postdata(); ?>
      </div>

      <button class="pm-register-btn">สมัครเลย</button>

      <div class="m-footer">
        <img class="go-m-f-logo" src="<?php the_field('logo', 'option') ?>" alt="PG SLOT.FISH">
        <div class="go-m-f-menu-heading">เมนูหลัก</div>
        <div class="go-m-f-links">
          <a href="<?php echo get_permalink('11'); ?>">เกมออนไลน์</a>
          <a href="<?php echo get_permalink('13'); ?>">โปรโมชั่น</a>
          <a href="<?php echo get_permalink('17'); ?>">ข่าวสาร</a>
          <a href="<?php echo get_permalink('15'); ?>">ติดต่อเรา</a>
        </div>
        <div class="go-m-f-divider"></div>
        <img class="go-m-f-img1" src="<?php echo $u; ?>/assets/img/footer-img1.png" alt="">
        <div class="go-m-f-imgs-row">
          <img class="go-m-f-img2" src="<?php echo $u; ?>/assets/img/footer-img2.png" alt="">
          <img class="go-m-f-img3" src="<?php echo $u; ?>/assets/img/footer-img3.png" alt="">
        </div>
        <img class="go-m-f-img4" src="<?php echo $u; ?>/assets/img/footer-img4.png" alt="">
        <div class="go-m-f-copyright">© 2026 PG Slot Fish. All rights reserved.</div>
      </div>

    </div><!-- .pm-wrapper -->
  </div><!-- #pmScaler -->
</div><!-- #promo-mobile -->

<script>
  (function() {
    var MOBILE_W = 400;
    var BREAKPOINT = 769;

    var pmMobile = document.getElementById('promo-mobile');
    var pmScaler = document.getElementById('pmScaler');
    var pmTopbar = document.getElementById('pmTopbar');

    function applyDesktopFooterScale() {
      var vw = document.documentElement.clientWidth;
      var outer = document.querySelector('#promoDesktopContent .section-footer-outer');
      if (!outer) return;
      var footer = outer.querySelector('.section-footer');
      if (!footer) return;

      if (vw < BREAKPOINT) {
        footer.style.transform = '';
        outer.style.height = '';
        return;
      }

      var PAGE_W = 1680;
      var MAX_W = 1440;
      var s = Math.min(MAX_W / PAGE_W, vw / PAGE_W);
      footer.style.transform = 'scale(' + s + ')';
      footer.style.transformOrigin = 'top center';
      outer.style.height = Math.ceil(400 * s) + 'px';
    }

    function applyMobileScale() {
      applyDesktopFooterScale();
      var vw = document.documentElement.clientWidth;
      if (vw >= BREAKPOINT) {
        if (pmMobile) pmMobile.style.height = '';
        if (pmScaler) pmScaler.style.transform = '';
        if (pmTopbar) pmTopbar.style.transform = '';
        return;
      }

      if (pmScaler && pmMobile) {
        pmScaler.style.transform = '';
        var naturalH = pmScaler.scrollHeight;
        var ratio = vw / MOBILE_W;
        pmScaler.style.transform = 'scale(' + ratio + ')';
        pmScaler.style.transformOrigin = 'top left';
        pmMobile.style.height = Math.ceil(naturalH * ratio) + 'px';
        if (pmTopbar) pmTopbar.style.transform = 'scale(' + ratio + ')';
      }
    }

    applyMobileScale();
    window.addEventListener('resize', applyMobileScale);
    window.addEventListener('load', applyMobileScale);

    // Sidebar
    var hamburgerDesk = document.getElementById('deskHamburger');
    var hamburgerPm = document.getElementById('pmHamburger');
    var loginSmPm = document.getElementById('pmLoginSm');
    var overlay = document.getElementById('mOverlay');
    var sidebar = document.getElementById('mSidebar');
    var sbClose = document.getElementById('mSbClose');

    function openSidebar() {
      if (overlay) overlay.classList.add('open');
      if (sidebar) sidebar.classList.add('open');
    }

    function closeSidebar() {
      if (overlay) overlay.classList.remove('open');
      if (sidebar) sidebar.classList.remove('open');
    }

    if (hamburgerDesk) hamburgerDesk.addEventListener('click', openSidebar);
    if (hamburgerPm) hamburgerPm.addEventListener('click', openSidebar);
    if (loginSmPm) loginSmPm.addEventListener('click', openSidebar);
    if (overlay) overlay.addEventListener('click', closeSidebar);
    if (sbClose) sbClose.addEventListener('click', function(e) {
      e.stopPropagation();
      closeSidebar();
    });
  })();
</script>

<?php get_footer(); ?>