<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HAKU for park riding</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .hero {
      position: relative;
      min-height: 70vh;
      width: 100%;
    }
    .hero > .container {
      width: 100%;
      max-width: none;
      padding-left: 24px;
      padding-right: 24px;
      position: relative;
      z-index: 2;
    }
    .hero-bg-slider {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #0f0f0f;
      overflow: hidden;
      z-index: 0;
      touch-action: pan-y;
    }
    .hero-bg-slider::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 1;
      pointer-events: none;
    }
    .hero-slider-track {
      display: flex;
      height: 100%;
      transition: transform 0.5s ease;
      will-change: transform;
    }
    .hero-slide {
      flex: 0 0 100%;
      height: 100%;
    }
    .hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .hero-slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.45);
      color: #fff;
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      z-index: 6;
      pointer-events: auto;
    }
    .hero-slider-btn:hover {
      background: rgba(0, 0, 0, 0.65);
    }
    .hero-slider-btn.prev {
      left: 16px;
    }
    .hero-slider-btn.next {
      right: 16px;
    }
    .hero-slider-dots {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 6;
      pointer-events: auto;
    }
    .hero-slider-controls {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }
    .hero-slider-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.35);
      cursor: pointer;
    }
    .hero-slider-dot.active {
      background: #ffffff;
      border-color: #ffffff;
    }
    @media (max-width: 768px) {
      .hero {
        min-height: 60vh;
      }
      .hero-slider-btn {
        width: 38px;
        height: 38px;
      }
      .hero > .container {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
    .hero .hero-subtitle,
    .hero .hero-description,
    .hero .hero-description .line {
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
  </style>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header-container">
      <nav class="nav">
        <a href="index.html" class="nav-link active">Home</a>
        <a href="./parkmap/" class="nav-link">パークマップ</a>
        <a href="./offtrainingmap/" class="nav-link">オフトレマップ</a>
      </nav>
      <div class="site-name">HAKU for park riding</div>
    </div>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <!-- ヒーローセクション -->
    <section class="hero">
      <div class="hero-bg-slider" id="hero-slider">
        <div class="hero-slider-track" id="hero-slider-track"></div>
      </div>
      <div class="hero-slider-controls" aria-hidden="true">
        <button type="button" class="hero-slider-btn prev" id="hero-slider-prev" aria-label="前へ">‹</button>
        <button type="button" class="hero-slider-btn next" id="hero-slider-next" aria-label="次へ">›</button>
        <div class="hero-slider-dots" id="hero-slider-dots"></div>
      </div>
      <div class="container">
        <img src="icons/haku_logo.png" alt="HAKU for park riding logo" class="hero-logo" />
        <p class="hero-subtitle">今日のパークをもっと楽しむために</p>
        <p class="hero-description">
          <span class="line">HAKU は、パークライディングの魅力をもっと多くの人に届けるために生まれた情報サイトです。</span>
          <span class="line">実際に滑る人の視点から、スノーパークやオフトレ施設の雰囲気・面白さ・楽しみ方をわかりやすく紹介しています。</span>
        </p>
        <div class="hero-cta">
          <a href="./parkmap/" class="btn btn-primary">パークマップを見る</a>
          <a href="./offtrainingmap/" class="btn btn-secondary">オフトレマップを見る</a>
        </div>
      </div>
    </section>

    <!-- マップ紹介セクション -->
    <section class="maps-section">
      <div class="container">
        <div class="maps-grid">
          <!-- パークマップカード -->
          <article class="map-card map-card-bg map-card-park">
            <h2 class="map-card-title">パークマップ</h2>
            <p class="map-card-description">
              全国のスノーパーク情報、キッカー・ジブ・レベル感などをマップで確認できます。
            </p>
            <a href="./parkmap/" class="btn btn-secondary">パークマップへ</a>
          </article>

          <!-- オフトレマップカード -->
          <article class="map-card map-card-bg map-card-off">
            <h2 class="map-card-title">オフトレマップ</h2>
            <p class="map-card-description">
              ウォータージャンプ、エアマット、ブラッシュなどのオフトレ施設情報をマップで確認できます。
            </p>
            <a href="./offtrainingmap/" class="btn btn-secondary">オフトレマップへ</a>
          </article>
        </div>
      </div>
    </section>

    <!-- Aboutセクション -->
    <section class="about-section">
      <div class="container">
        <h2 class="section-title">HAKU for park riding について</h2>
        <p class="about-content">
          <span class="line">今後は、見てワクワクするコンテンツや、滑り手のモチベーションが上がる企画などもどんどん追加していきます。</span>
          <span class="line">パークを愛する人にも、これから挑戦したい人にも、ワクワクを届けられる場所を目指しています。</span>
        </p>
      </div>
    </section>
  </main>

  <!-- フッター -->
  <footer class="footer">
    <div class="container">
      <p class="footer-copyright">© 2025 HAKU for park riding</p>
      <p class="footer-subtitle">for park riders.</p>
    </div>
  </footer>
  <script>
    (function () {
      const images = [
        './icons/OH1.png',
        './icons/OH2.png',
        './icons/OH3.png',
        './icons/OH4.png',
        './icons/OH5.png'
      ];

      const track = document.getElementById('hero-slider-track');
      const dots = document.getElementById('hero-slider-dots');
      const prevBtn = document.getElementById('hero-slider-prev');
      const nextBtn = document.getElementById('hero-slider-next');
      const slider = document.getElementById('hero-slider');
      let currentIndex = 0;

      if (!track || !dots || !prevBtn || !nextBtn || !slider) {
        return;
      }

      images.forEach((src, idx) => {
        const slide = document.createElement('div');
        slide.className = 'hero-slide';
        const img = document.createElement('img');
        img.src = src;
        img.alt = `OH ${idx + 1}`;
        img.loading = idx === 0 ? 'eager' : 'lazy';
        slide.appendChild(img);
        track.appendChild(slide);

        const dot = document.createElement('button');
        dot.type = 'button';
        dot.className = 'hero-slider-dot';
        dot.setAttribute('aria-label', `画像 ${idx + 1}`);
        dot.addEventListener('click', () => updateSlider(idx));
        dots.appendChild(dot);
      });

      function updateSlider(nextIndex) {
        currentIndex = (nextIndex + images.length) % images.length;
        track.style.transform = `translateX(-${currentIndex * 100}%)`;
        Array.from(dots.children).forEach((dot, i) => {
          dot.classList.toggle('active', i === currentIndex);
        });
      }

      prevBtn.addEventListener('click', () => updateSlider(currentIndex - 1));
      nextBtn.addEventListener('click', () => updateSlider(currentIndex + 1));

      let touchStartX = 0;
      let touchStartY = 0;
      let touchDeltaX = 0;
      let touchDeltaY = 0;

      slider.addEventListener('touchstart', (e) => {
        const touch = e.changedTouches[0];
        touchStartX = touch.clientX;
        touchStartY = touch.clientY;
        touchDeltaX = 0;
        touchDeltaY = 0;
      }, { passive: true });

      slider.addEventListener('touchmove', (e) => {
        const touch = e.changedTouches[0];
        touchDeltaX = touch.clientX - touchStartX;
        touchDeltaY = touch.clientY - touchStartY;
        if (Math.abs(touchDeltaX) > Math.abs(touchDeltaY) && Math.abs(touchDeltaX) > 10) {
          e.preventDefault();
        }
      }, { passive: false });

      slider.addEventListener('touchend', (e) => {
        const touch = e.changedTouches[0];
        const deltaX = touch.clientX - touchStartX;
        const deltaY = touch.clientY - touchStartY;
        if (Math.abs(deltaX) > 40 && Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX < 0) {
            updateSlider(currentIndex + 1);
          } else {
            updateSlider(currentIndex - 1);
          }
        }
        touchStartX = 0;
        touchStartY = 0;
        touchDeltaX = 0;
        touchDeltaY = 0;
      });

      // Preload images to reduce flicker
      images.forEach((src) => {
        const img = new Image();
        img.src = src;
      });

      updateSlider(0);
    })();
  </script>
</body>
</html>

