<?php
// ============================================
// ABOUT PAGE
// File: pages/about.php
// ============================================
require_once '../includes/db.php';
$page_title = 'Tentang Merbabu';
?>
<?php include '../includes/header.php'; ?>

<!-- PAGE HERO -->
<section class="page-hero">
    <div class="page-hero-bg" style="background-image:url('../assets/images/hero-bg.jpg');"></div>
    <div class="page-hero-overlay"></div>
    <div class="container page-hero-content">
        <span class="section-label">MENGENAL LEBIH DEKAT</span>
        <h1 class="section-title">Tentang <span>Merbabu</span></h1>
        <nav aria-label="breadcrumb" class="mt-2">
            <ol class="breadcrumb" style="background:none;padding:0;font-size:0.82rem;">
                <li class="breadcrumb-item"><a href="../" class="text-muted text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active" style="color:var(--gold);">About</li>
            </ol>
        </nav>
    </div>
</section>

<!-- ABOUT CONTENT -->
<section class="content-section">
    <div class="container">
        <div class="row g-5 align-items-start">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Overview -->
                <div class="glass-card mb-4" data-aos="fade-up">
                    <span class="section-label">OVERVIEW</span>
                    <h2 class="section-title mb-3">Gunung <span>Merbabu</span></h2>
                    <div class="section-divider"></div>
                    <p class="mt-3" style="color:rgba(255,255,255,0.75);line-height:1.9;">
                        Gunung Merbabu adalah gunung berapi tipe stratovulkan yang terletak di Provinsi Jawa Tengah, Indonesia,
                        dengan ketinggian 3.145 meter di atas permukaan laut. Gunung ini secara administratif berada di
                        Kabupaten Boyolali, Magelang, dan Semarang.
                    </p>
                    <p class="mt-2" style="color:rgba(255,255,255,0.75);line-height:1.9;">
                        Nama "Merbabu" berasal dari bahasa Jawa yang berarti "tempat abu". Gunung ini memiliki beberapa
                        puncak utama yaitu Puncak Syarif (3.119 mdpl), Puncak Kentengsongo (3.142 mdpl), dan
                        Puncak Triangulasi (3.145 mdpl) sebagai yang tertinggi.
                    </p>
                    <p class="mt-2" style="color:rgba(255,255,255,0.75);line-height:1.9;">
                        Kawasan ini ditetapkan sebagai Taman Nasional Gunung Merbabu (TNGMb) pada tahun 2004,
                        melindungi ekosistem hutan alam yang berfungsi sebagai daerah tangkapan air bagi wilayah
                        sekitarnya.
                    </p>
                </div>

                <!-- Jalur Detail -->
                <div class="glass-card mb-4" data-aos="fade-up">
                    <span class="section-label">RUTE & JALUR</span>
                    <h3 class="section-title mb-3" style="font-size:1.6rem;">5 Jalur <span>Pendakian</span></h3>
                    <div class="section-divider mb-4"></div>

                    <?php
                    $jalur_detail = [
                        [
                            'name' => 'Jalur Selo (Boyolali)',
                            'level' => 'sedang', 'level_text' => 'SEDANG',
                            'jarak' => '±12 km PP', 'waktu' => '8-10 jam',
                            'ketinggian' => '1.800 mdpl (base camp)',
                            'desc' => 'Jalur paling populer dan paling sering dipilih pendaki. Menawarkan pemandangan savana yang luar biasa, serta pemandangan Gunung Merapi yang bersebelahan. Terdapat beberapa pos istirahat yang terawat.',
                            'highlight' => 'Savana Oro-oro Ombo, view Merapi-Merbabu'
                        ],
                        [
                            'name' => 'Jalur Wekas (Magelang)',
                            'level' => 'sulit', 'level_text' => 'SULIT',
                            'jarak' => '±10 km PP', 'waktu' => '7-9 jam',
                            'ketinggian' => '1.850 mdpl (base camp)',
                            'desc' => 'Jalur via Dusun Wekas yang terkenal lebih curam dan menantang. Cocok untuk pendaki berpengalaman. Pemandangan di sepanjang jalur sangat memukau dengan tebing-tebing curam.',
                            'highlight' => 'Trek curam, pemandangan jurang dramatis'
                        ],
                        [
                            'name' => 'Jalur Cunthel (Magelang)',
                            'level' => 'sedang', 'level_text' => 'SEDANG',
                            'jarak' => '±11 km PP', 'waktu' => '8-10 jam',
                            'ketinggian' => '1.750 mdpl (base camp)',
                            'desc' => 'Jalur dengan vegetasi lebat dan suasana hutan yang lebih kental. Cocok bagi yang menyukai nuansa alam yang hijau dan sejuk. Jalur ini juga menghubungkan ke Jalur Wekas di bagian atas.',
                            'highlight' => 'Hutan lebat, suasana alam murni'
                        ],
                        [
                            'name' => 'Jalur Suwanting (Magelang)',
                            'level' => 'sulit', 'level_text' => 'SULIT',
                            'jarak' => '±9 km PP', 'waktu' => '6-8 jam',
                            'ketinggian' => '1.900 mdpl (base camp)',
                            'desc' => 'Jalur terbaru yang dibuka dan memiliki karakteristik trek yang unik. Jalur ini cukup terjal namun menawarkan panorama yang berbeda dari jalur lainnya.',
                            'highlight' => 'Jalur baru, panorama unik & eksotis'
                        ],
                        [
                            'name' => 'Jalur Thekelan (Semarang)',
                            'level' => 'mudah', 'level_text' => 'MUDAH',
                            'jarak' => '±13 km PP', 'waktu' => '9-11 jam',
                            'ketinggian' => '1.650 mdpl (base camp)',
                            'desc' => 'Jalur klasik tertua yang melewati Kopeng, Semarang. Medan relatif lebih landai dibanding jalur lain, cocok untuk pendaki pemula yang ingin mencoba mendaki Merbabu.',
                            'highlight' => 'Jalur bersejarah, medan lebih landai'
                        ],
                    ];
                    foreach ($jalur_detail as $i => $j):
                    ?>
                    <div class="jalur-card mb-3" data-aos="fade-up" data-aos-delay="<?= $i * 50 ?>">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <h5 style="font-family:'Cinzel',serif;color:var(--gold);font-size:1rem;"><?= $j['name'] ?></h5>
                            <span class="jalur-badge <?= $j['level'] ?>"><?= $j['level_text'] ?></span>
                        </div>
                        <p style="color:rgba(255,255,255,0.7);font-size:0.88rem;line-height:1.7;margin-bottom:1rem;"><?= $j['desc'] ?></p>
                        <div class="d-flex flex-wrap gap-3">
                            <span style="font-size:0.78rem;color:var(--gold);"><i class="bi bi-rulers me-1"></i><?= $j['jarak'] ?></span>
                            <span style="font-size:0.78rem;color:rgba(255,255,255,0.6);"><i class="bi bi-clock me-1"></i><?= $j['waktu'] ?></span>
                            <span style="font-size:0.78rem;color:rgba(255,255,255,0.6);"><i class="bi bi-triangle me-1"></i><?= $j['ketinggian'] ?></span>
                        </div>
                        <div class="mt-2" style="font-size:0.8rem;color:rgba(255,255,255,0.5);">
                            <i class="bi bi-star-fill text-gold me-1"></i><?= $j['highlight'] ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- Tips Persiapan -->
                <div class="glass-card" data-aos="fade-up">
                    <span class="section-label">PANDUAN MENDAKI</span>
                    <h3 class="section-title mb-3" style="font-size:1.6rem;">Tips <span>Persiapan</span></h3>
                    <div class="section-divider mb-4"></div>
                    <div class="timeline">
                        <?php
                        $tips = [
                            ['Persiapan Fisik', 'Lakukan latihan fisik minimal 2 minggu sebelum pendakian. Joging, hiking bukit, atau naik-turun tangga sangat membantu meningkatkan stamina.'],
                            ['Perlengkapan Wajib', 'Jaket tebal, rain cover, sleeping bag, headlamp, matras, tenda (jika bermalam), P3K, dan logistik yang cukup adalah perlengkapan wajib.'],
                            ['Registrasi Online', 'Daftar melalui sistem SIMAKSI (Sistem Informasi Manajemen Kawasan) Taman Nasional Gunung Merbabu. Wajib membawa KTP asli.'],
                            ['Kondisi Cuaca', 'Waktu terbaik mendaki adalah pada musim kemarau (April-Oktober). Hindari mendaki saat musim hujan karena jalur licin dan berbahaya.'],
                            ['Etika Alam', 'Jaga kebersihan, bawa turun semua sampahmu, jangan merusak tanaman, dan hormati sesama pendaki serta pengelola kawasan.'],
                            ['Darurat & SOS', 'Simpan nomor kontak Taman Nasional dan Basarnas. Beritahu keluarga atau teman rencana pendakianmu sebelum berangkat.'],
                        ];
                        foreach ($tips as $tip):
                        ?>
                        <div class="timeline-item">
                            <h6 style="color:var(--gold);font-family:'Cinzel',serif;font-size:0.9rem;margin-bottom:0.4rem;"><?= $tip[0] ?></h6>
                            <p style="color:rgba(255,255,255,0.65);font-size:0.88rem;line-height:1.7;"><?= $tip[1] ?></p>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Quick Facts -->
                <div class="glass-card mb-4" data-aos="fade-left">
                    <h5 style="font-family:'Cinzel',serif;color:var(--gold);font-size:0.9rem;letter-spacing:2px;margin-bottom:1.5rem;">FAKTA SINGKAT</h5>
                    <?php
                    $facts = [
                        ['bi-geo-alt-fill', 'Lokasi', 'Boyolali, Magelang, Semarang — Jawa Tengah'],
                        ['bi-triangle-fill', 'Ketinggian', '3.145 mdpl (Triangulasi)'],
                        ['bi-thermometer-half', 'Suhu Puncak', '5°C — 10°C'],
                        ['bi-map-fill', 'Luas TNGMb', '5.765 Ha'],
                        ['bi-clock-fill', 'Waktu Terbaik', 'April — Oktober'],
                        ['bi-people-fill', 'Jml Puncak', '3 Puncak Utama'],
                        ['bi-signpost-fill', 'Jalur', '5 Jalur Resmi'],
                        ['bi-shield-check', 'Status', 'Taman Nasional (2004)'],
                    ];
                    foreach ($facts as $f):
                    ?>
                    <div class="d-flex align-items-center gap-3 mb-3 pb-3" style="border-bottom:1px solid rgba(255,255,255,0.06);">
                        <div style="width:36px;height:36px;background:rgba(201,162,39,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0;">
                            <i class="bi <?= $f[0] ?>"></i>
                        </div>
                        <div>
                            <div style="font-size:0.65rem;letter-spacing:1.5px;color:rgba(255,255,255,0.4);font-weight:700;"><?= $f[1] ?></div>
                            <div style="font-size:0.88rem;color:rgba(255,255,255,0.8);"><?= $f[2] ?></div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- Flora Fauna -->
                <div class="glass-card" data-aos="fade-left" data-aos-delay="100">
                    <h5 style="font-family:'Cinzel',serif;color:var(--gold);font-size:0.9rem;letter-spacing:2px;margin-bottom:1.5rem;">FLORA & FAUNA</h5>
                    <div class="mb-3">
                        <div style="font-size:0.7rem;letter-spacing:2px;color:var(--gold);font-weight:700;margin-bottom:0.5rem;">FLORA</div>
                        <?php
                        $flora = ['Edelweiss (Anaphalis javanica)', 'Cemara Gunung (Casuarina)', 'Pinus (Pinus merkusii)', 'Cantigi (Vaccinium varingifolium)', 'Rumput savana tropis'];
                        foreach ($flora as $f):
                        ?>
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="bi bi-flower1 text-gold" style="font-size:0.75rem;"></i>
                            <span style="font-size:0.84rem;color:rgba(255,255,255,0.65);"><?= $f ?></span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    <div>
                        <div style="font-size:0.7rem;letter-spacing:2px;color:var(--gold);font-weight:700;margin-bottom:0.5rem;">FAUNA</div>
                        <?php
                        $fauna = ['Elang Jawa (Nisaetus bartelsi)', 'Lutung Jawa (Trachypithecus auratus)', 'Macan Tutul Jawa (Panthera pardus)', 'Kijang (Muntiacus muntjak)', 'Berbagai jenis burung endemik'];
                        foreach ($fauna as $f):
                        ?>
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="bi bi-bug text-gold" style="font-size:0.75rem;"></i>
                            <span style="font-size:0.84rem;color:rgba(255,255,255,0.65);"><?= $f ?></span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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