<?php
// ============================================
// HOMEPAGE
// File: index.php
// ============================================
require_once 'includes/db.php';

$db = getDB();

// Fetch approved testimonials
$stmt = $db->query("SELECT * FROM buku_tamu WHERE status = 'approved' ORDER BY created_at DESC LIMIT 4");
$testimonials = $stmt->fetchAll();

// Fetch gallery previews
$stmt = $db->query("SELECT * FROM gallery ORDER BY created_at DESC LIMIT 5");
$gallery_items = $stmt->fetchAll();
?>
<?php include 'includes/header.php'; ?>

<!-- ============================================ -->
<!-- CUSTOM CURSOR                                -->
<!-- ============================================ -->
<div id="cursor-outer"></div>
<div id="cursor-inner"></div>

<style>
/* ── CUSTOM CURSOR ───────────────────────────── */
*, *::before, *::after { cursor: none !important; }

#cursor-outer {
    position: fixed;
    width: 38px; height: 38px;
    border: 2px solid rgba(201,162,39,0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%,-50%);
    transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease,
                border-color 0.2s ease, background 0.2s ease;
    mix-blend-mode: normal;
    backdrop-filter: blur(2px);
}
#cursor-inner {
    position: fixed;
    width: 8px; height: 8px;
    background: #c9a227;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%,-50%);
    transition: transform 0.05s ease, background 0.2s ease, width 0.15s ease, height 0.15s ease;
    box-shadow: 0 0 10px rgba(201,162,39,0.8);
}

/* Hover state — links, buttons, cards */
body.cursor-hover #cursor-outer {
    width: 56px; height: 56px;
    background: rgba(201,162,39,0.12);
    border-color: #c9a227;
}
body.cursor-hover #cursor-inner {
    width: 5px; height: 5px;
    background: #fff;
}

/* Click state */
body.cursor-click #cursor-outer {
    width: 28px; height: 28px;
    background: rgba(201,162,39,0.3);
}
body.cursor-click #cursor-inner {
    width: 12px; height: 12px;
    background: #c9a227;
}

/* On map / green zone */
body.cursor-map #cursor-outer {
    border-color: #4caf50;
    background: rgba(76,175,80,0.15);
    width: 48px; height: 48px;
}
body.cursor-map #cursor-inner { background: #4caf50; box-shadow: 0 0 10px rgba(76,175,80,0.8); }

/* ── PETA INTERAKTIF ─────────────────────────── */
.peta-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--dark-green, #0f2118) 0%, #0a1a10 100%);
    position: relative;
    overflow: hidden;
}
.peta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(201,162,39,0.04) 0%, transparent 70%);
}

/* SVG map container */
.peta-wrapper {
    position: relative;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(201,162,39,0.2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,162,39,0.1);
}
.peta-wrapper svg {
    width: 100%; height: auto;
    display: block;
}

/* Jalur paths */
.jalur-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.2s ease, stroke-width 0.3s ease, opacity 0.3s ease;
    cursor: none;
}
.jalur-path.active   { stroke-dashoffset: 0; }
.jalur-path.dimmed   { opacity: 0.15; }
.jalur-path.highlighted { stroke-width: 5; filter: drop-shadow(0 0 8px currentColor); }

/* Colors per jalur */
.path-selo     { stroke: #c9a227; }
.path-wekas    { stroke: #e74c3c; }
.path-cunthel  { stroke: #2ecc71; }
.path-suwanting{ stroke: #9b59b6; }
.path-thekelan { stroke: #3498db; }

/* Summit dot */
.summit-dot {
    fill: #c9a227;
    filter: drop-shadow(0 0 6px rgba(201,162,39,0.9));
    animation: summit-pulse 2s ease-in-out infinite;
}
@keyframes summit-pulse {
    0%,100% { r: 8; opacity: 1; }
    50%      { r: 11; opacity: 0.7; }
}

/* Basecamp dots */
.basecamp-dot {
    fill: #fff;
    stroke-width: 2;
    transition: r 0.2s ease;
}
.basecamp-dot:hover { r: 8; }

/* Tooltip */
#peta-tooltip {
    position: absolute;
    background: rgba(10,26,16,0.95);
    border: 1px solid rgba(201,162,39,0.5);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 180px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(8px);
}
#peta-tooltip.show { opacity: 1; transform: translateY(0); }
#peta-tooltip .tt-name  { font-weight: 700; color: #c9a227; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
#peta-tooltip .tt-info  { font-size: 0.78rem; color: rgba(255,255,255,0.7); line-height: 1.5; }
#peta-tooltip .tt-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; margin-top: 6px; text-transform: uppercase; }
#peta-tooltip .tt-badge.sedang { background: rgba(52,152,219,0.25); color: #3498db; border: 1px solid rgba(52,152,219,0.4); }
#peta-tooltip .tt-badge.sulit  { background: rgba(231,76,60,0.25);  color: #e74c3c;  border: 1px solid rgba(231,76,60,0.4); }
#peta-tooltip .tt-badge.mudah  { background: rgba(46,204,113,0.25); color: #2ecc71;  border: 1px solid rgba(46,204,113,0.4); }

/* Legend */
.peta-legend {
    display: flex; flex-wrap: wrap; gap: 10px 20px;
    margin-top: 24px;
    padding: 0 4px;
}
.legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: rgba(255,255,255,0.65);
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 30px;
    background: rgba(255,255,255,0.03);
    cursor: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.legend-item:hover, .legend-item.active {
    background: rgba(255,255,255,0.07);
    color: #fff;
}
.legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.legend-item.active .legend-dot { animation: legend-pulse 1s ease-in-out infinite alternate; }
@keyframes legend-pulse { from { transform: scale(1); } to { transform: scale(1.4); } }

/* Elevation mini chart */
.elevation-bar {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2ecc71, #c9a227, #e74c3c);
    margin-top: 4px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.8s ease;
}
.elevation-bar.show { transform: scaleX(1); }
</style>

<!-- HERO SECTION -->
<section class="hero-section">
    <div class="hero-bg" style="background-image:url('assets/images/hero-bg.jpg');"></div>
    <div class="hero-overlay"></div>

    <div class="container hero-content">
        <div class="row">
            <div class="col-lg-7">
                <div class="hero-badge animate-fade-up">
                    <i class="bi bi-geo-alt-fill"></i>
                    JAWA TENGAH, INDONESIA
                </div>

                <h1 class="hero-title animate-fade-up delay-1">
                    <span class="line1">GUNUNG</span>
                    <span class="line2">MERBABU</span>
                </h1>

                <p class="hero-desc animate-fade-up delay-2">
                    Surga tersembunyi di ketinggian 3.145 mdpl &mdash; tempat savana menari,
                    awan berbisik, dan bintang terasa bisa diraih.
                </p>

                <div class="hero-stats animate-fade-up delay-3">
                    <div class="stat-item">
                        <div class="stat-number">
                            <span class="count-up" data-target="3145">3.145</span>
                        </div>
                        <div class="stat-label">MDPL</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">
                            <span class="count-up" data-target="5">5</span>
                        </div>
                        <div class="stat-label">JALUR PENDAKIAN</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">
                            <span class="count-up" data-target="3">3</span>
                        </div>
                        <div class="stat-label">PUNCAK UTAMA</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number"><i class="bi bi-infinity text-gold"></i></div>
                        <div class="stat-label">KEINDAHAN</div>
                    </div>
                </div>

                <!-- FIX: Perbaikan urutan & penutupan tag <a> -->
                <div class="hero-btns animate-fade-up delay-4">
                    <a href="pages/gallery.php" class="btn-gold">
                        <i class="bi bi-images"></i> LIHAT GALLERY
                    </a>
                    <a href="pages/about.php" class="btn-outline-gold">
                        <i class="bi bi-info-circle"></i> TENTANG MERBABU
                    </a>
                    <a href="pages/booking.php" class="btn-gold">
                        <i class="bi bi-calendar-check"></i> BOOKING SEKARANG
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="scroll-indicator">
        <span>SCROLL</span>
        <div class="scroll-line"></div>
    </div>
</section>

<!-- FEATURES SECTION -->
<section class="features-section">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-label">KENAPA MERBABU?</span>
            <h2 class="section-title">Keajaiban di Setiap <span>Langkah</span></h2>
            <div class="section-divider mx-auto"></div>
        </div>

        <div class="row g-4">
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="feature-card">
                    <div class="feature-icon"><i class="bi bi-triangle"></i></div>
                    <h5>Savana Oro-oro Ombo</h5>
                    <p>Padang savana luas yang membentang di ketinggian, dipenuhi bunga liar berwarna ungu dan hijau.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon"><i class="bi bi-cloud-sun"></i></div>
                    <h5>Lautan Awan</h5>
                    <p>Saksikan lautan awan putih bergulung di bawah kakimu saat matahari terbit dari puncak tertinggi.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon"><i class="bi bi-stars"></i></div>
                    <h5>Bintang Langit Malam</h5>
                    <p>Jauh dari polusi cahaya kota, langit malam Merbabu menampilkan bintang-bintang yang tak terhitung.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon"><i class="bi bi-map"></i></div>
                    <h5>5 Jalur Pendakian</h5>
                    <p>Tersedia jalur via Selo, Wekas, Cunthel, Suwanting, dan Thekelan untuk berbagai tingkat kemampuan.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ABOUT PREVIEW -->
<section class="about-preview">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6" data-aos="fade-right">
                <div class="about-img-wrapper">
                    <img src="assets/images/about-preview.jpg" alt="Gunung Merbabu"
                         onerror="this.src='https://via.placeholder.com/600x450/1a3a28/c9a227?text=Gunung+Merbabu'">
                    <div class="about-img-badge">
                        <span class="alt-number">3.145</span>
                        <span class="alt-label">MDPL</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <span class="section-label">MENGENAL MERBABU</span>
                <h2 class="section-title mb-3">Keindahan yang <span>Tak Lekang</span></h2>
                <div class="section-divider"></div>
                <p class="text-muted mt-3 mb-3" style="line-height:1.8;">
                    Gunung Merbabu adalah gunung berapi tipe stratovulkan yang terletak di Jawa Tengah, Indonesia.
                    Dengan ketinggian 3.145 meter di atas permukaan laut, Merbabu menawarkan pengalaman pendakian
                    yang tak terlupakan.
                </p>
                <p class="text-muted mb-4" style="line-height:1.8;">
                    Savana luas, puncak yang gagah, sunrise spektakuler, dan jalur yang beragam menjadikan Merbabu
                    sebagai destinasi favorit para pendaki dari seluruh penjuru Indonesia.
                </p>

                <div class="row g-3 mb-4">
                    <div class="col-6">
                        <div class="info-card">
                            <div class="info-card-icon"><i class="bi bi-thermometer-half"></i></div>
                            <div>
                                <div class="info-card-title">SUHU PUNCAK</div>
                                <!-- FIX: Karakter derajat diperbaiki dari Â° menjadi &deg; -->
                                <div class="info-card-text">5&deg;C &ndash; 10&deg;C</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-card">
                            <div class="info-card-icon"><i class="bi bi-clock"></i></div>
                            <div>
                                <div class="info-card-title">DURASI RATA-RATA</div>
                                <div class="info-card-text">8 &ndash; 12 jam</div>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="pages/about.php" class="btn-gold">
                    <i class="bi bi-arrow-right-circle"></i> SELENGKAPNYA
                </a>
            </div>
        </div>
    </div>
</section>

<!-- GALLERY PREVIEW -->
<section class="gallery-preview">
    <div class="container">
        <div class="row align-items-end mb-4">
            <div class="col-lg-7" data-aos="fade-right">
                <span class="section-label">KEINDAHAN MERBABU</span>
                <h2 class="section-title">Lihat <span>Gallery</span> Kami</h2>
                <div class="section-divider"></div>
            </div>
            <div class="col-lg-5 text-lg-end" data-aos="fade-left">
                <a href="pages/gallery.php" class="btn-outline-gold">
                    <i class="bi bi-images"></i> SEMUA FOTO
                </a>
            </div>
        </div>

        <div class="gallery-grid" data-aos="fade-up">
            <?php
            $placeholders = [
                ['puncak-merbabu', 'Puncak Merbabu'],
                ['savana-merbabu', 'Savana'],
                ['lautan-awan', 'Lautan Awan'],
                ['jalur-pendakian', 'Jalur Pendakian'],
                ['sunrise-merbabu', 'Sunrise'],
            ];
            foreach ($placeholders as $i => $ph):
                $img_src = (!empty($gallery_items[$i]))
                    ? 'assets/images/gallery/' . $gallery_items[$i]['filename']
                    : 'https://via.placeholder.com/600x400/1a3a28/c9a227?text=' . urlencode($ph[0]);
                $title = (!empty($gallery_items[$i])) ? $gallery_items[$i]['judul'] : $ph[1];
            ?>
            <div class="gallery-item">
                <img src="<?= $img_src ?>" alt="<?= htmlspecialchars($title) ?>"
                     onerror="this.src='https://via.placeholder.com/600x400/1a3a28/c9a227?text=<?= urlencode($ph[0]) ?>'">
                <div class="gallery-overlay">
                    <div class="gallery-overlay-text">
                        <i class="bi bi-zoom-in me-1"></i><?= htmlspecialchars($title) ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- JALUR PENDAKIAN -->
<section class="jalur-section">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-label">RUTE PENDAKIAN</span>
            <h2 class="section-title">5 Jalur <span>Menuju Puncak</span></h2>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row g-3">
            <?php
            // FIX: Karakter â€" diganti dengan entitas HTML &ndash; yang benar
            $jalur = [
                ['Jalur Selo',     'Boyolali &ndash; Paling populer, savana luas &amp; pemandangan terbaik',        'sedang', 'bi-star-fill',          '8-10 jam'],
                ['Jalur Wekas',    'Magelang &ndash; Jalur curam, pemandangan indah via Merbabu utara',             'sulit',  'bi-lightning-fill',     '7-9 jam'],
                ['Jalur Cunthel',  'Magelang &ndash; Jalur alternatif dengan vegetasi lebat dan sejuk',             'sedang', 'bi-tree-fill',          '8-10 jam'],
                ['Jalur Suwanting','Magelang &ndash; Jalur baru yang menantang dengan pemandangan unik',            'sulit',  'bi-arrow-up-circle-fill','6-8 jam'],
                ['Jalur Thekelan', 'Kopeng, Semarang &ndash; Jalur klasik paling tua dan bersejarah',              'mudah',  'bi-signpost-fill',      '9-11 jam'],
            ];
            foreach ($jalur as $i => $j):
            ?>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="<?= $i * 80 ?>">
                <div class="jalur-card">
                    <div class="d-flex align-items-start justify-content-between mb-2">
                        <div>
                            <div class="jalur-name"><?= $j[0] ?></div>
                            <span class="jalur-badge <?= $j[2] ?>"><?= strtoupper($j[2]) ?></span>
                        </div>
                        <i class="bi <?= $j[3] ?> text-gold fs-4"></i>
                    </div>
                    <!-- FIX: Gunakan echo tanpa htmlspecialchars agar entitas HTML tetap terrender -->
                    <p class="text-muted small mb-2"><?= $j[1] ?></p>
                    <div class="d-flex align-items-center gap-2 mt-2">
                        <i class="bi bi-clock text-gold" style="font-size:0.8rem;"></i>
                        <span style="font-size:0.8rem;color:rgba(255,255,255,0.6);"><?= $j[4] ?></span>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- TESTIMONIALS -->
<?php if (!empty($testimonials)): ?>
<section class="testimonial-section">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-label">CERITA MEREKA</span>
            <h2 class="section-title">Buku <span>Tamu</span> Kami</h2>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row g-4">
            <?php foreach ($testimonials as $i => $t): ?>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="<?= $i * 80 ?>">
                <div class="testimonial-card">
                    <div class="testimonial-stars">
                        <?= str_repeat('<i class="bi bi-star-fill"></i>', (int)$t['rating']) ?>
                        <?= str_repeat('<i class="bi bi-star"></i>', 5 - (int)$t['rating']) ?>
                    </div>
                    <p class="testimonial-text">"<?= htmlspecialchars(mb_substr($t['pesan'], 0, 140)) ?>..."</p>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar"><?= strtoupper(mb_substr($t['nama'], 0, 1)) ?></div>
                        <div class="testimonial-info">
                            <div class="name"><?= htmlspecialchars($t['nama']) ?></div>
                            <div class="origin"><i class="bi bi-geo-alt-fill me-1"></i><?= htmlspecialchars($t['asal']) ?></div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <div class="text-center mt-5" data-aos="fade-up">
            <a href="pages/buku_tamu.php" class="btn-gold">
                <i class="bi bi-book"></i> TULIS KESAN ANDA
            </a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- PETA INTERAKTIF JALUR PENDAKIAN -->
<section class="peta-section" id="peta-section">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-label">NAVIGASI PENDAKIAN</span>
            <h2 class="section-title">Peta Interaktif <span>Jalur Pendakian</span></h2>
            <div class="section-divider mx-auto"></div>
            <p class="text-muted mt-3" style="max-width:520px;margin:auto;line-height:1.7;">
                Pilih jalur pendakian untuk melihat rute, informasi, dan tingkat kesulitan secara interaktif.
            </p>
        </div>

        <div data-aos="fade-up" data-aos-delay="100">
            <div class="peta-wrapper" id="peta-wrapper">
                <!-- Tooltip -->
                <div id="peta-tooltip">
                    <div class="tt-name" id="tt-name">-</div>
                    <div class="tt-info" id="tt-info">-</div>
                    <div class="elevation-bar" id="tt-elev"></div>
                    <span class="tt-badge" id="tt-badge">-</span>
                </div>

                <!-- SVG Topographic Map of Merbabu -->
                <svg viewBox="0 0 900 560" xmlns="http://www.w3.org/2000/svg" id="peta-svg">
                    <defs>
                        <!-- Terrain gradient -->
                        <radialGradient id="terrain-grad" cx="50%" cy="45%" r="55%">
                            <stop offset="0%"   stop-color="#1a3a28" stop-opacity="1"/>
                            <stop offset="40%"  stop-color="#143020" stop-opacity="1"/>
                            <stop offset="100%" stop-color="#0a1a10" stop-opacity="1"/>
                        </radialGradient>
                        <!-- Glow filter -->
                        <filter id="glow-gold" x="-30%" y="-30%" width="160%" height="160%">
                            <feGaussianBlur stdDeviation="4" result="blur"/>
                            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                        </filter>
                        <!-- Summit pulse -->
                        <filter id="summit-glow">
                            <feGaussianBlur stdDeviation="5" result="blur"/>
                            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                        </filter>
                        <!-- Grid pattern -->
                        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(201,162,39,0.04)" stroke-width="0.5"/>
                        </pattern>
                    </defs>

                    <!-- Background -->
                    <rect width="900" height="560" fill="url(#terrain-grad)"/>
                    <rect width="900" height="560" fill="url(#grid)"/>

                    <!-- Contour rings (topographic effect) -->
                    <g opacity="0.18" fill="none" stroke="#c9a227" stroke-width="0.8">
                        <ellipse cx="450" cy="240" rx="320" ry="200"/>
                        <ellipse cx="450" cy="240" rx="265" ry="163"/>
                        <ellipse cx="450" cy="240" rx="210" ry="130"/>
                        <ellipse cx="450" cy="240" rx="158" ry="98"/>
                        <ellipse cx="450" cy="240" rx="110" ry="68"/>
                        <ellipse cx="450" cy="240" rx="68"  ry="42"/>
                        <ellipse cx="450" cy="240" rx="34"  ry="22"/>
                    </g>

                    <!-- Shade/shadow for mountain depth -->
                    <ellipse cx="450" cy="270" rx="220" ry="120" fill="rgba(0,0,0,0.25)"/>

                    <!-- ═══ JALUR PATHS ═══ -->

                    <!-- Jalur Selo (gold) — from south, most popular -->
                    <path id="path-selo"
                          class="jalur-path path-selo"
                          d="M 450 490 C 450 470, 448 450, 445 430
                             C 440 400, 435 380, 438 355
                             C 442 330, 448 310, 450 285
                             C 452 265, 451 255, 450 240"
                          data-jalur="selo"/>

                    <!-- Jalur Wekas (red) — from west -->
                    <path id="path-wekas"
                          class="jalur-path path-wekas"
                          d="M 100 320 C 130 315, 160 312, 195 308
                             C 235 303, 268 295, 300 285
                             C 335 273, 370 262, 400 252
                             C 425 244, 440 242, 450 240"
                          data-jalur="wekas"/>

                    <!-- Jalur Cunthel (green) — from northwest -->
                    <path id="path-cunthel"
                          class="jalur-path path-cunthel"
                          d="M 130 130 C 158 148, 185 165, 215 183
                             C 252 205, 285 218, 318 228
                             C 360 240, 398 240, 425 240
                             C 437 240, 445 240, 450 240"
                          data-jalur="cunthel"/>

                    <!-- Jalur Suwanting (purple) — from north -->
                    <path id="path-suwanting"
                          class="jalur-path path-suwanting"
                          d="M 450 30 C 450 55, 448 78, 446 102
                             C 443 132, 440 155, 442 178
                             C 444 200, 448 218, 450 235
                             C 450 238, 450 239, 450 240"
                          data-jalur="suwanting"/>

                    <!-- Jalur Thekelan (blue) — from east -->
                    <path id="path-thekelan"
                          class="jalur-path path-thekelan"
                          d="M 800 200 C 772 205, 744 210, 715 218
                             C 680 228, 648 234, 615 237
                             C 578 240, 542 240, 510 240
                             C 485 240, 465 240, 450 240"
                          data-jalur="thekelan"/>

                    <!-- ═══ BASECAMP MARKERS ═══ -->
                    <!-- Selo -->
                    <g class="basecamp-group" data-jalur="selo" style="cursor:none;">
                        <circle cx="450" cy="490" r="7" class="basecamp-dot" stroke="#c9a227"/>
                        <text x="460" y="494" fill="rgba(255,255,255,0.7)" font-size="11" font-family="sans-serif">Basecamp Selo</text>
                    </g>
                    <!-- Wekas -->
                    <g class="basecamp-group" data-jalur="wekas" style="cursor:none;">
                        <circle cx="100" cy="320" r="7" class="basecamp-dot" stroke="#e74c3c"/>
                        <text x="112" y="324" fill="rgba(255,255,255,0.7)" font-size="11" font-family="sans-serif">Basecamp Wekas</text>
                    </g>
                    <!-- Cunthel -->
                    <g class="basecamp-group" data-jalur="cunthel" style="cursor:none;">
                        <circle cx="130" cy="130" r="7" class="basecamp-dot" stroke="#2ecc71"/>
                        <text x="142" y="134" fill="rgba(255,255,255,0.7)" font-size="11" font-family="sans-serif">Basecamp Cunthel</text>
                    </g>
                    <!-- Suwanting -->
                    <g class="basecamp-group" data-jalur="suwanting" style="cursor:none;">
                        <circle cx="450" cy="30" r="7" class="basecamp-dot" stroke="#9b59b6"/>
                        <text x="462" y="34" fill="rgba(255,255,255,0.7)" font-size="11" font-family="sans-serif">Basecamp Suwanting</text>
                    </g>
                    <!-- Thekelan -->
                    <g class="basecamp-group" data-jalur="thekelan" style="cursor:none;">
                        <circle cx="800" cy="200" r="7" class="basecamp-dot" stroke="#3498db"/>
                        <text x="680" y="194" fill="rgba(255,255,255,0.7)" font-size="11" font-family="sans-serif">Basecamp Thekelan</text>
                    </g>

                    <!-- ═══ SUMMIT ═══ -->
                    <filter id="sf"><feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
                    <circle cx="450" cy="240" r="12" fill="rgba(201,162,39,0.2)" filter="url(#sf)"/>
                    <circle cx="450" cy="240" r="8"  class="summit-dot" filter="url(#summit-glow)"/>
                    <text x="462" y="237" fill="#c9a227" font-size="12" font-weight="700" font-family="sans-serif" letter-spacing="0.05em">PUNCAK SYARIF</text>
                    <text x="462" y="251" fill="rgba(201,162,39,0.7)" font-size="10" font-family="sans-serif">3.145 mdpl</text>

                    <!-- Compass rose -->
                    <g transform="translate(840,480)">
                        <circle r="24" fill="rgba(0,0,0,0.4)" stroke="rgba(201,162,39,0.3)" stroke-width="1"/>
                        <text y="-10" text-anchor="middle" fill="#c9a227" font-size="10" font-weight="700" font-family="sans-serif">U</text>
                        <text y="15"  text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">S</text>
                        <text x="-13" y="4" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">B</text>
                        <text x="13"  y="4" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="8" font-family="sans-serif">T</text>
                        <line x1="0" y1="-16" x2="0" y2="16" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/>
                        <line x1="-16" y1="0" x2="16" y2="0" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/>
                        <polygon points="0,-16 -3,-6 3,-6" fill="#c9a227"/>
                    </g>

                    <!-- Scale bar -->
                    <g transform="translate(30,530)">
                        <line x1="0" y1="0" x2="80" y2="0" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
                        <line x1="0" y1="-4" x2="0"  y2="4" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
                        <line x1="80" y1="-4" x2="80" y2="4" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
                        <text x="40" y="-7" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="9" font-family="sans-serif">~5 km</text>
                    </g>
                </svg>
            </div>

            <!-- Legend / Filter buttons -->
            <div class="peta-legend justify-content-center" id="peta-legend">
                <div class="legend-item active" data-jalur="all">
                    <div class="legend-dot" style="background:#fff;color:#fff;"></div>
                    <span>Semua Jalur</span>
                </div>
                <div class="legend-item" data-jalur="selo">
                    <div class="legend-dot" style="background:#c9a227;color:#c9a227;"></div>
                    <span>Selo &mdash; Sedang</span>
                </div>
                <div class="legend-item" data-jalur="wekas">
                    <div class="legend-dot" style="background:#e74c3c;color:#e74c3c;"></div>
                    <span>Wekas &mdash; Sulit</span>
                </div>
                <div class="legend-item" data-jalur="cunthel">
                    <div class="legend-dot" style="background:#2ecc71;color:#2ecc71;"></div>
                    <span>Cunthel &mdash; Sedang</span>
                </div>
                <div class="legend-item" data-jalur="suwanting">
                    <div class="legend-dot" style="background:#9b59b6;color:#9b59b6;"></div>
                    <span>Suwanting &mdash; Sulit</span>
                </div>
                <div class="legend-item" data-jalur="thekelan">
                    <div class="legend-dot" style="background:#3498db;color:#3498db;"></div>
                    <span>Thekelan &mdash; Mudah</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA BANNER -->
<section style="padding:80px 0;background:linear-gradient(135deg,var(--deep-green),var(--dark-green));border-top:1px solid rgba(201,162,39,0.2);border-bottom:1px solid rgba(201,162,39,0.2);">
    <div class="container text-center" data-aos="fade-up">
        <span class="section-label">SIAP MENDAKI?</span>
        <h2 class="section-title mb-3">Mulai Petualanganmu <span>Sekarang</span></h2>
        <p class="text-muted mb-4 mx-auto" style="max-width:500px;line-height:1.7;">
            Hubungi kami untuk informasi pendakian, jadwal, dan tips persiapan sebelum menjelajah Merbabu.
        </p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="pages/contact.php" class="btn-gold">
                <i class="bi bi-envelope"></i> HUBUNGI KAMI
            </a>
            <a href="pages/buku_tamu.php" class="btn-outline-gold">
                <i class="bi bi-pen"></i> BUKU TAMU
            </a>
        </div>
    </div>
</section>

<script>
// ============================================================
// CUSTOM CURSOR
// ============================================================
(function () {
    const outer = document.getElementById('cursor-outer');
    const inner = document.getElementById('cursor-inner');
    let mx = -100, my = -100, ox = -100, oy = -100;

    document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });

    function loop() {
        ox += (mx - ox) * 0.18;
        oy += (my - oy) * 0.18;
        outer.style.left = ox + 'px';
        outer.style.top  = oy + 'px';
        inner.style.left = mx + 'px';
        inner.style.top  = my + 'px';
        requestAnimationFrame(loop);
    }
    loop();

    const hoverTargets = 'a, button, .legend-item, .jalur-card, .feature-card, .gallery-item, .testimonial-card, [data-jalur], .basecamp-group';
    document.addEventListener('mouseover', e => {
        if (e.target.closest(hoverTargets)) document.body.classList.add('cursor-hover');
    });
    document.addEventListener('mouseout', e => {
        if (e.target.closest(hoverTargets)) document.body.classList.remove('cursor-hover');
    });
    document.addEventListener('mousedown', () => document.body.classList.add('cursor-click'));
    document.addEventListener('mouseup',   () => document.body.classList.remove('cursor-click'));

    const petaWrapper = document.getElementById('peta-wrapper');
    if (petaWrapper) {
        petaWrapper.addEventListener('mouseenter', () => document.body.classList.add('cursor-map'));
        petaWrapper.addEventListener('mouseleave', () => { document.body.classList.remove('cursor-map'); document.body.classList.remove('cursor-hover'); });
    }

    document.addEventListener('mouseleave', () => { outer.style.opacity='0'; inner.style.opacity='0'; });
    document.addEventListener('mouseenter', () => { outer.style.opacity='1'; inner.style.opacity='1'; });
})();

// ============================================================
// PETA INTERAKTIF
// ============================================================
(function () {
    const jalurData = {
        selo:      { name:'Jalur Selo',      info:'Boyolali · Savana luas & sunrise terbaik',          badge:'sedang', dur:'8-10 jam', elev:0.75 },
        wekas:     { name:'Jalur Wekas',     info:'Magelang · Jalur curam via lereng utara',           badge:'sulit',  dur:'7-9 jam',  elev:0.90 },
        cunthel:   { name:'Jalur Cunthel',   info:'Magelang · Vegetasi lebat, jalur yang sejuk',       badge:'sedang', dur:'8-10 jam', elev:0.70 },
        suwanting: { name:'Jalur Suwanting', info:'Magelang · Menantang dengan pemandangan unik',      badge:'sulit',  dur:'6-8 jam',  elev:0.95 },
        thekelan:  { name:'Jalur Thekelan',  info:'Kopeng, Semarang · Jalur klasik bersejarah',        badge:'mudah',  dur:'9-11 jam', elev:0.55 },
    };

    const paths       = document.querySelectorAll('.jalur-path');
    const legendItems = document.querySelectorAll('#peta-legend .legend-item');
    const tooltip     = document.getElementById('peta-tooltip');
    const ttName      = document.getElementById('tt-name');
    const ttInfo      = document.getElementById('tt-info');
    const ttBadge     = document.getElementById('tt-badge');
    const ttElev      = document.getElementById('tt-elev');
    const wrapper     = document.getElementById('peta-wrapper');

    let activeJalur   = 'all';

    // Animate paths on scroll
    const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
            paths.forEach((p, i) => setTimeout(() => p.classList.add('active'), i * 280));
            observer.disconnect();
        }
    }, { threshold: 0.25 });

    const petaSec = document.getElementById('peta-section');
    if (petaSec) observer.observe(petaSec);

    function showTooltip(jalur, cx, cy) {
        const d = jalurData[jalur];
        if (!d) return;
        ttName.textContent  = d.name;
        ttInfo.textContent  = d.info + ' · ' + d.dur;
        ttBadge.textContent = d.badge.toUpperCase();
        ttBadge.className   = 'tt-badge ' + d.badge;
        ttElev.style.transform = 'scaleX(0)';
        tooltip.classList.add('show');
        setTimeout(() => { ttElev.style.transform = 'scaleX(' + d.elev + ')'; }, 60);

        const wr = wrapper.getBoundingClientRect();
        let tx = cx - wr.left + 16;
        let ty = cy - wr.top  + 16;
        if (tx + 210 > wr.width)  tx = cx - wr.left - 220;
        if (ty + 120 > wr.height) ty = cy - wr.top  - 130;
        tooltip.style.left = Math.max(8, tx) + 'px';
        tooltip.style.top  = Math.max(8, ty) + 'px';
    }
    function hideTooltip() { tooltip.classList.remove('show'); }

    function highlightJalur(jalur) {
        paths.forEach(p => {
            if (p.dataset.jalur === jalur) { p.classList.add('highlighted'); p.classList.remove('dimmed'); }
            else if (activeJalur === 'all') { p.classList.add('dimmed'); p.classList.remove('highlighted'); }
        });
    }
    function resetHighlight() {
        paths.forEach(p => {
            p.classList.remove('highlighted');
            if (activeJalur === 'all' || p.dataset.jalur === activeJalur) p.classList.remove('dimmed');
            else p.classList.add('dimmed');
        });
    }
    function filterByJalur(jalur) {
        activeJalur = jalur;
        paths.forEach(p => {
            if (jalur === 'all' || p.dataset.jalur === jalur) p.classList.remove('dimmed');
            else p.classList.add('dimmed');
            p.classList.remove('highlighted');
        });
        legendItems.forEach(li => li.classList.toggle('active', li.dataset.jalur === jalur || (jalur === 'all' && li.dataset.jalur === 'all')));
    }

    // Path events
    paths.forEach(path => {
        path.addEventListener('mouseenter', () => highlightJalur(path.dataset.jalur));
        path.addEventListener('mousemove',  e => showTooltip(path.dataset.jalur, e.clientX, e.clientY));
        path.addEventListener('mouseleave', () => { resetHighlight(); hideTooltip(); });
        path.addEventListener('click',      () => filterByJalur(path.dataset.jalur === activeJalur ? 'all' : path.dataset.jalur));
    });

    // Basecamp events
    document.querySelectorAll('.basecamp-group').forEach(g => {
        g.addEventListener('mouseenter', () => highlightJalur(g.dataset.jalur));
        g.addEventListener('mousemove',  e => showTooltip(g.dataset.jalur, e.clientX, e.clientY));
        g.addEventListener('mouseleave', () => { resetHighlight(); hideTooltip(); });
    });

    // Legend events
    legendItems.forEach(li => {
        li.addEventListener('click',      () => filterByJalur(li.dataset.jalur));
        li.addEventListener('mouseenter', () => { if (li.dataset.jalur !== 'all') highlightJalur(li.dataset.jalur); });
        li.addEventListener('mouseleave', () => resetHighlight());
    });
})();
</script>

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