<?php
$activePage = 'home';
require_once 'config.php';
include 'includes/header.php';

// Fetch featured destinations for home
try {
  $stmt = $pdo->query("SELECT * FROM countries WHERE show_on_home = 1 ORDER BY id ASC");
  $destinations = $stmt->fetchAll();
} catch (Exception $e) {
  $destinations = [];
}

// Hero settings
$heroTagline  = get_setting('hero_tagline', 'Travel More, Worry Less');
$heroTitle    = get_setting('hero_title', "Explore The World\nWith Travelica");
$heroSubtitle = get_setting('hero_subtitle', 'Kami siap melayani dengan sepenuh hati. Kami memberikan pelayanan terbaik untuk perjalanan impian Anda bersama Travelica.');
$heroImage    = get_setting('hero_image', 'assets/images/hero_bg.webp');
?>

<!-- ============================================================
     HERO
============================================================ -->
<section class="hero" id="beranda">
  <div class="hero-bg">
    <img src="<?= htmlspecialchars($heroImage) ?>" alt="Travel destinations" class="hero-bg-img" />
    <div class="hero-overlay"></div>
  </div>

  <div class="hero-body">
    <div class="hero-container">
      <p class="hero-tagline">
        <span class="hero-plane">✈</span> <?= htmlspecialchars($heroTagline) ?>
      </p>
      <?php
        // Support multi-line title with <br> on newlines
        $titleLines = explode("\n", $heroTitle);
        $titleHtml  = implode('<br>', array_map('htmlspecialchars', $titleLines));
      ?>
      <h1 class="hero-h1"><?= $titleHtml ?></h1>
      <p class="hero-sub"><?= nl2br(htmlspecialchars($heroSubtitle)) ?></p>

      <div class="searchbar" id="searchbar">
        <span class="sb-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.2">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
          </svg>
        </span>
        <input type="text" id="sb-input" class="sb-input" placeholder="Mau liburan ke mana?" autocomplete="off" />
        <button class="sb-btn" id="sb-btn">Cari Sekarang</button>
      </div>

      <!-- Mobile specific Hero content -->
      <div class="hero-mobile-content">
        <p class="hero-mobile-sub">Your Favorite Travel Partner</p>
        <a href="destinasi" class="hero-mobile-btn">EXPLORE TRIPS</a>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     DESTINASI FAVORIT
============================================================ -->
<section class="section dest-section" id="destinasi">
  <div class="main-container">
    <p class="sec-eyebrow">DESTINASI FAVORIT</p>
    <div class="sec-header">
      <h2 class="sec-title">Destinasi Impian Menunggumu</h2>
      <div class="dest-arrows">
        <button class="arr-btn" id="dest-prev" aria-label="Sebelumnya">&#8592;</button>
        <button class="arr-btn" id="dest-next" aria-label="Berikutnya">&#8594;</button>
      </div>
    </div>

    <!-- Mobile specific Destinations Header -->
    <div class="sec-header-mobile">
      <h2 class="sec-title-mobile">POPULAR DESTINATIONS</h2>
      <a href="destinasi" class="sec-link-mobile">Lihat Semua ></a>
    </div>

    <div class="dest-track-wrap">
      <div class="dest-track" id="destTrack">

        <?php foreach ($destinations as $dest): ?>
          <div class="dest-card" id="dc-<?= htmlspecialchars($dest['slug']) ?>">
            <div class="dc-img-wrap">
              <img src="<?= htmlspecialchars($dest['heroImg']) ?>" alt="<?= htmlspecialchars($dest['name']) ?>"
                class="dc-img" loading="lazy" />
              <button class="dc-pin" aria-label="Simpan <?= htmlspecialchars($dest['name']) ?>">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
              </button>
            </div>
            <div class="dc-footer">
              <div class="dc-identity">
                <span class="dc-flag"><?= render_flag($dest['flag']) ?></span>
                <span class="dc-name"><?= htmlspecialchars($dest['name']) ?></span>
              </div>
              <a href="negara?country=<?= htmlspecialchars($dest['slug']) ?>" class="dc-btn"
                id="btn-trip-<?= htmlspecialchars($dest['slug']) ?>">Lihat Trip</a>
            </div>
          </div>
        <?php endforeach; ?>

      </div><!-- /dest-track -->
    </div><!-- /dest-track-wrap -->

    <!-- More button -->
    <div class="dest-more-row">
      <a href="destinasi" class="dest-more-btn" id="btn-dest-lainnya">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 8 16 12 12 16" />
          <line x1="8" y1="12" x2="16" y2="12" />
        </svg>
        Destinasi lainnya di sini
      </a>
    </div>
  </div>
</section>

<!-- ============================================================
     VIDEO SHOWCASE (TRAVELICA VIDEO UPLOAD)
============================================================ -->
<?php 
$travelVideos = get_travel_videos(true);
$hasUploadedVideos = !empty($travelVideos);
$primaryVideo = $hasUploadedVideos ? $travelVideos[0] : null;

$ytTagline = get_setting('youtube_tagline', 'VIDEO PERJALANAN');
$ytTitle = get_setting('youtube_title', 'Lihat Keseruan Liburan Bersama Kami');
$ytDesc = get_setting('youtube_desc', 'Saksikan momen-momen tak terlupakan dan keseruan para traveler saat menjelajahi destinasi impian bersama Travelica.');
$ytSrc = get_youtube_embed_src();
?>
<style>
.video-card-container {
  max-width: 980px !important;
  margin: 0 auto !important;
  position: relative !important;
  border-radius: 20px !important;
  padding: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
}
.video-frame-wrap {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #0f172a !important;
}
.video-frame-wrap video,
.video-frame-wrap iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #0f172a !important;
  display: block !important;
}
.video-play-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.35) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  border-radius: 14px !important;
}
.video-play-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.video-play-btn-circle {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.25) !important;
  color: #1a73e8 !important;
}
.video-play-btn-circle svg {
  width: 30px !important;
  height: 30px !important;
  margin-left: 3px !important;
  fill: currentColor !important;
}
.video-current-info {
  margin-top: 16px !important;
  padding: 14px 18px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
}
.vci-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.vci-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}
.vci-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  background: #dbeafe !important;
  color: #1e40af !important;
  flex-shrink: 0 !important;
}
.vci-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.video-playlist-section {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1.5px solid #e2e8f0 !important;
}
.vp-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  gap: 12px !important;
}
.vp-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #475569 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.vp-nav-buttons {
  display: flex !important;
  gap: 8px !important;
}
.vp-nav-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}
.vp-nav-btn:hover {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border-color: #1a73e8 !important;
}
.video-playlist-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding-bottom: 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
  width: 100% !important;
}
.video-playlist-track::-webkit-scrollbar {
  height: 6px !important;
}
.video-playlist-track::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}
.vp-card {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  width: 240px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  text-align: left !important;
}
.vp-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -6px rgba(15, 23, 42, 0.12) !important;
  border-color: #93c5fd !important;
}
.vp-card.active {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 2px #1a73e8, 0 10px 20px -6px rgba(26, 115, 232, 0.2) !important;
}
.vp-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  max-height: 135px !important;
  background: #0f172a !important;
  overflow: hidden !important;
}
.vp-thumb-img {
  width: 100% !important;
  height: 100% !important;
  max-height: 135px !important;
  object-fit: cover !important;
  display: block !important;
}
.vp-thumb-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1a73e8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.vp-badge-duration {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(2px) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}
.vp-card-body {
  padding: 10px 12px !important;
}
.vp-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.vp-card-active-label {
  display: none !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #1a73e8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.vp-card.active .vp-card-active-label {
  display: block !important;
}
</style>

<section class="section video-section" id="video">
  <div class="main-container">
    <div class="video-header">
      <?php if ($ytTagline): ?>
        <p class="sec-eyebrow"><?= htmlspecialchars($ytTagline) ?></p>
      <?php endif; ?>
      <?php if ($ytTitle): ?>
        <h2 class="sec-title"><?= htmlspecialchars($ytTitle) ?></h2>
      <?php endif; ?>
      <?php if ($ytDesc): ?>
        <p class="video-desc"><?= nl2br(htmlspecialchars($ytDesc)) ?></p>
      <?php endif; ?>
    </div>

    <div class="video-card-container">
      <?php if ($hasUploadedVideos && $primaryVideo): ?>
        <div class="video-frame-wrap" id="mainVideoWrap">
          <video 
            id="mainTravelVideo" 
            src="<?= htmlspecialchars($primaryVideo['video_path']) ?>" 
            poster="<?= !empty($primaryVideo['thumbnail_path']) ? htmlspecialchars($primaryVideo['thumbnail_path']) : '' ?>" 
            preload="metadata" 
            playsinline 
            controls 
            controlsList="nodownload">
          </video>
          <div class="video-play-overlay" id="mainVideoOverlay" aria-label="Putar Video">
            <div class="video-play-btn-circle">
              <svg viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></svg>
            </div>
          </div>
        </div>

        <!-- Active Video Information Bar -->
        <div class="video-current-info" id="currentVideoInfo">
          <div class="vci-header-row">
            <h3 class="vci-title" id="mainVideoTitle"><?= htmlspecialchars($primaryVideo['title']) ?></h3>
            <span class="vci-badge" id="mainVideoBadge">
              ▶ <span id="mainVideoBadgeText"><?= !empty($primaryVideo['duration']) ? htmlspecialchars($primaryVideo['duration']) : 'HD Video' ?></span>
            </span>
          </div>
          <?php if (!empty($primaryVideo['description'])): ?>
            <p class="vci-desc" id="mainVideoDesc"><?= htmlspecialchars($primaryVideo['description']) ?></p>
          <?php else: ?>
            <p class="vci-desc" id="mainVideoDesc" style="display:none;"></p>
          <?php endif; ?>
        </div>

        <?php if (count($travelVideos) > 1): ?>
          <!-- Multiple Videos Playlist Carousel -->
          <div class="video-playlist-section">
            <div class="vp-header">
              <h4 class="vp-heading">
                <span>🎬</span> Video Perjalanan Lainnya (<?= count($travelVideos) ?>)
              </h4>
              <div class="vp-nav-buttons">
                <button type="button" class="vp-nav-btn" id="vpPrev" aria-label="Video Sebelumnya">&#8592;</button>
                <button type="button" class="vp-nav-btn" id="vpNext" aria-label="Video Selanjutnya">&#8594;</button>
              </div>
            </div>

            <div class="video-playlist-track" id="videoPlaylistTrack">
              <?php foreach ($travelVideos as $idx => $tv): ?>
                <div class="vp-card <?= $idx === 0 ? 'active' : '' ?>" 
                     id="vpCard-<?= (int)$tv['id'] ?>"
                     role="button"
                     tabindex="0"
                     onclick="switchMainVideo(<?= htmlspecialchars(json_encode([
                       'id'       => (int)$tv['id'],
                       'src'      => $tv['video_path'],
                       'poster'   => $tv['thumbnail_path'] ?: '',
                       'title'    => $tv['title'],
                       'desc'     => $tv['description'] ?: '',
                       'duration' => $tv['duration'] ?: ''
                     ])) ?>, this)">
                  <div class="vp-thumb-wrap">
                    <?php if (!empty($tv['thumbnail_path'])): ?>
                      <img src="<?= htmlspecialchars($tv['thumbnail_path']) ?>" alt="<?= htmlspecialchars($tv['title']) ?>" class="vp-thumb-img" loading="lazy" />
                    <?php else: ?>
                      <video src="<?= htmlspecialchars($tv['video_path']) ?>" preload="metadata" class="vp-thumb-img"></video>
                    <?php endif; ?>
                    <div class="vp-thumb-play">&#9658;</div>
                    <?php if (!empty($tv['duration'])): ?>
                      <span class="vp-badge-duration"><?= htmlspecialchars($tv['duration']) ?></span>
                    <?php endif; ?>
                  </div>
                  <div class="vp-card-body">
                    <h5 class="vp-card-title"><?= htmlspecialchars($tv['title']) ?></h5>
                    <span class="vp-card-active-label">&#9679; Sedang Diputar</span>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          </div>
        <?php endif; ?>

      <?php else: ?>
        <!-- Fallback if no videos uploaded yet -->
        <div class="video-frame-wrap">
          <iframe 
            src="<?= htmlspecialchars($ytSrc) ?>" 
            title="<?= htmlspecialchars($ytTitle ?: 'Travelica Video') ?>" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            referrerpolicy="strict-origin-when-cross-origin" 
            allowfullscreen 
            loading="lazy">
          </iframe>
        </div>
      <?php endif; ?>
    </div>

    <!-- ============================================================
         TOUR PHOTO GALLERY SLIDER
    ============================================================ -->
    <?php 
    $tourGallery = get_tour_gallery();
    if (!empty($tourGallery)): 
    ?>
    <div class="tour-gallery-wrap">
      <div class="tour-gallery-header">
        <div class="tgh-left">
          <p class="sec-eyebrow" style="margin-bottom:6px;">DOKUMENTASI PERJALANAN</p>
          <h3 class="tgh-title">Momen Keseruan Bersama Sahabat Travelica</h3>
        </div>
        <div class="tg-nav-arrows">
          <button type="button" class="arr-btn" id="tg-prev" aria-label="Foto Sebelumnya">&#8592;</button>
          <button type="button" class="arr-btn" id="tg-next" aria-label="Foto Selanjutnya">&#8594;</button>
        </div>
      </div>

      <div class="tour-gallery-slider-wrap">
        <div class="tour-gallery-track" id="tgTrack">
          <?php foreach ($tourGallery as $gItem): ?>
            <div class="tg-card">
              <div class="tg-img-wrapper">
                <img src="<?= htmlspecialchars($gItem['img']) ?>" alt="<?= htmlspecialchars($gItem['title'] ?: 'Dokumentasi Tour') ?>" class="tg-img" loading="lazy" />
                <div class="tg-caption-box">
                  <?php if (!empty($gItem['title'])): ?>
                    <h4 class="tg-item-title"><?= htmlspecialchars($gItem['title']) ?></h4>
                  <?php endif; ?>
                  <?php if (!empty($gItem['caption'])): ?>
                    <p class="tg-item-desc"><?= htmlspecialchars($gItem['caption']) ?></p>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <?php endif; ?>

  </div>
</section>

<!-- ============================================================
     GOOGLE REVIEWS (ELFSIGHT)
============================================================ -->
<section class="section custom-reviews-section" id="reviews">
  <div class="main-container">
    <!-- Elfsight Google Reviews | Untitled Google Reviews -->
    <script src="https://elfsightcdn.com/platform.js" async></script>
    <div class="elfsight-app-d72bdd4c-8dc2-48a4-9f24-33083586040b" data-elfsight-app-lazy></div>
  </div>
</section>




<!-- ============================================================
     KENAPA PILIH TRAVELICA
============================================================ -->
<section class="section kenapa-section" id="tentang">
  <div class="main-container">
    <div class="kenapa-header">
      <h2 class="kenapa-title"> KENAPA PILIH TRAVELICA?</h2>
    </div>
    <div class="kenapa-grid">

      <div class="kp-item" id="kp-1">
        <div class="kp-icon-wrap" style="background:#EBF3FF;">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="1.8"
            stroke-linecap="round">
            <rect x="2" y="3" width="20" height="14" rx="2" />
            <line x1="8" y1="21" x2="16" y2="21" />
            <line x1="12" y1="17" x2="12" y2="21" />
          </svg>
        </div>
        <h3 class="kp-title">Paket Lengkap</h3>
        <p class="kp-desc">Tiket, hotel, transportasi & tour guide, semua sudah termasuk dalam satu paket terjangkau.
        </p>
      </div>

      <div class="kp-item" id="kp-2">
        <div class="kp-icon-wrap" style="background:#E8F5E9;">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#34a853" stroke-width="1.8"
            stroke-linecap="round">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
          </svg>
        </div>
        <h3 class="kp-title">Terpercaya & Berpengalaman</h3>
        <p class="kp-desc">Berpengalaman lebih dari 10 tahun melayani ribuan wisatawan Indonesia.</p>
      </div>

      <div class="kp-item" id="kp-3">
        <div class="kp-icon-wrap" style="background:#FEF3CD;">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.8"
            stroke-linecap="round">
            <path
              d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.01 2.22 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.68 6.68l1.29-1.29a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
          </svg>
        </div>
        <h3 class="kp-title">Customer Support</h3>
        <p class="kp-desc">Admin siap chat dan membantu Anda 24 jam sehari, 7 hari seminggu via WhatsApp.</p>
      </div>

      <div class="kp-item" id="kp-4">
        <div class="kp-icon-wrap" style="background:#FDE8E8;">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="1.8"
            stroke-linecap="round">
            <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
            <polyline points="22 4 12 14.01 9 11.01" />
          </svg>
        </div>
        <h3 class="kp-title">Pelayanan Nyaman</h3>
        <p class="kp-desc">Harga jelas, akomodasi premium, perjalanan aman dan nyaman terjamin selalu.</p>
      </div>

    </div>
  </div>
</section>

<?php include 'includes/footer.php'; ?>