<link rel="stylesheet"
href="https://unpkg.com/leaflet/dist/leaflet.css"/>

<section class="hero">

    <div class="container hero-inner">

        <div class="hero-content">

            <p class="hero-tag">WANDERLUST BY MAPALA</p>



            <div class="hero-title-wrap">

                <span class="hero-stroke" aria-hidden="true"></span>



                <div>

                    <h1>

                        <span class="hero-title-main">UK TRAIL RUN</span>

                        <span class="hero-title-year">2026 : WANDERLUST</span>

                    </h1>



                    <div class="hero-copy">

                        <p><?php echo tr('First in Purwakarta, UK Trail Run 2026 is more than just a running event it is a journey for runners, adventurers, and nature enthusiasts to experience the spirit of trail running in its purest form.', 'Pertama di Purwakarta, UK Trail Run 2026 hadir sebagai ruang bagi para pelari, penjelajah alam, dan pecinta tantangan untuk merasakan pengalaman berlari yang lebih dekat dengan alam.'); ?></p>

                    </div>

                </div>

            </div>



            <a href="<?php echo app_url('registration'); ?>" class="btn btn--primary hero-btn"><?php echo tr('Join Now', 'Daftar Sekarang'); ?> <span class="btn-arrow">&#8594;</span></a>

        </div>

    </div>

</section>





<main class="page-main">

    <section class="container section section--summary">

        <!-- Early Bird Countdown -->
        <div class="countdown-banner fade-up" id="countdownBanner">
            <div class="countdown-banner__inner">
                <div class="countdown-banner__head">
                    <span class="countdown-banner__flash" aria-hidden="true"></span>
                    <h2 class="countdown-banner__title"><?php echo tr('Registration Ends In', 'Registrasi Berakhir Dalam'); ?></h2>
                </div>
                <div class="countdown-timer" id="countdownTimer"
                     data-target="2026-06-17T23:59:59+07:00">
                    <div class="countdown-unit">
                        <span class="countdown-unit__label"><?php echo tr('Days', 'Hari'); ?></span>
                        <div class="countdown-digits">
                            <span class="countdown-digit" data-tens="d">0</span>
                            <span class="countdown-digit" data-ones="d">0</span>
                        </div>
                    </div>
                    <span class="countdown-sep" aria-hidden="true">:</span>
                    <div class="countdown-unit">
                        <span class="countdown-unit__label"><?php echo tr('Hours', 'Jam'); ?></span>
                        <div class="countdown-digits">
                            <span class="countdown-digit" data-tens="h">0</span>
                            <span class="countdown-digit" data-ones="h">0</span>
                        </div>
                    </div>
                    <span class="countdown-sep" aria-hidden="true">:</span>
                    <div class="countdown-unit">
                        <span class="countdown-unit__label"><?php echo tr('Minutes', 'Menit'); ?></span>
                        <div class="countdown-digits">
                            <span class="countdown-digit" data-tens="m">0</span>
                            <span class="countdown-digit" data-ones="m">0</span>
                        </div>
                    </div>
                    <span class="countdown-sep" aria-hidden="true">:</span>
                    <div class="countdown-unit">
                        <span class="countdown-unit__label"><?php echo tr('Sec', 'Det'); ?></span>
                        <div class="countdown-digits">
                            <span class="countdown-digit" data-tens="s">0</span>
                            <span class="countdown-digit" data-ones="s">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="summary-grid">

            <article class="summary-card fade-up">

                <span class="summary-card__corner" aria-hidden="true"></span>



                <div class="summary-card__head">

                    <span class="summary-icon" aria-hidden="true">

                        <svg viewBox="0 0 24 24">

                            <path d="M7 2v3M17 2v3M4 8h16M5 5h14a1 1 0 0 1 1 1v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a1 1 0 0 1 1-1Z"></path>

                        </svg>

                    </span>



                    <div>

                        <h2><?php echo tr('Race Day', 'Hari Perlombaan'); ?></h2>

                        <p><?php echo tr('June 28, 2026', '28 Juni 2026'); ?></p>

                    </div>

                </div>



                <div class="location-pill">

                    <svg viewBox="0 0 24 24" aria-hidden="true">

                        <path d="M12 22s6-5.46 6-12a6 6 0 1 0-12 0c0 6.54 6 12 6 12Zm0-8.75A2.25 2.25 0 1 0 12 8.75a2.25 2.25 0 0 0 0 4.5Z"></path>

                    </svg>

                    <span><?php echo tr('Kartamulia University, Purwakarta', 'Universitas Kartamulia, Purwakarta'); ?></span>

                </div>

            </article>



            <div class="fee-group fade-up delay-2">

                <p class="fee-group__label"><?php echo tr('Registration Fee', 'Biaya Pendaftaran'); ?></p>

                <div class="fee-cards">

                    <article class="fee-card-mini">

                        <span class="fee-card-mini__category"><?php echo tr('General', 'Umum'); ?></span>

                        <div class="fee-card-mini__values">

                            <span class="fee-card-mini__new">IDR 200.000</span>

                        </div>

                    </article>

                    <article class="fee-card-mini">

                        <span class="fee-card-mini__category"><?php echo tr('Student', 'Pelajar'); ?></span>

                        <div class="fee-card-mini__values">
                            <span class="fee-card-mini__new">IDR 170.000</span>

                        </div>

                    </article>

                </div>

            </div>

        </div>
        <div class="racepack-banner fade-up">
            <div class="racepack-banner__content">
                <p class="racepack-banner__tag"><?php echo tr('Official Jersey', 'Jersey Resmi'); ?></p>
                <h2 class="racepack-banner__title"><?php echo tr('Race Pack', 'Race Pack'); ?></h2>
                <p class="racepack-banner__desc"><?php echo tr('Get your exclusive UK Trail Run 2026 official jersey — premium dry-fit material with a limited edition Wanderlust design. Included in every registration package!', 'Dapatkan jersey resmi eksklusif UK Trail Run 2026 — material dry-fit premium dengan desain Wanderlust edisi terbatas. Termasuk dalam setiap paket pendaftaran!'); ?></p>
                <a href="<?php echo h(app_url('merchandise')); ?>" class="btn btn--primary racepack-banner__btn"><?php echo tr('Detail', 'Detail'); ?> <span class="btn-arrow">&#8594;</span></a>
            </div>
            <div class="racepack-banner__image">
                <img src="assets/img/racepack.webp" alt="<?php echo tr('Official Jersey Preview', 'Pratinjau Jersey Resmi'); ?>" loading="lazy">
            </div>
        </div>

    </section>

    <!-- ===== RACE CATEGORY / MAP SECTION  ===== -->
    <section class="section race-category-panel" id="route">

        <!-- Race Categories Selector -->
        <div class="race-cat-selector">
            <div class="container">
                <span class="race-cat-selector__badge"><?php echo tr('RACE CATEGORIES', 'KATEGORI LOMBA'); ?></span>
                <h2 class="race-cat-selector__title">
                    <?php echo tr('CHOOSE YOUR', 'PILIH'); ?>
                    <em><?php echo tr('CHALLENGE', 'TANTANGANMU'); ?></em>
                </h2>
                <div class="race-cat-tabs" id="raceCatTabs">
                    <button class="race-cat-tab is-active" data-cat="7k" type="button">
                        <span class="race-cat-tab__diamond"></span>
                        <span>7K TRAIL RUN (SOON)</span>
                    </button>
                    <button class="race-cat-tab" data-cat="9k" type="button">
                        <span class="race-cat-tab__diamond"></span>
                        <span>9K TRAIL RUN</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Category Header Bar -->
        <div class="race-cat-header">
            <div class="container race-cat-header__inner">
                <div>
                    <h2 class="race-cat-title" id="raceCatTitle">7K TRAIL RUN</h2>
                    <p class="race-cat-subtitle" id="raceCatSubtitle">INDIVIDUAL</p>
                </div>
                <div class="race-cat-brand">
                    <span class="race-cat-brand__text">Wanderlust<br>By Mapala</span>
                    <span class="race-cat-brand__logo">
                        <img src="assets/img/mapala.webp" alt="UK Trail Run" />
                    </span>
                </div>
            </div>
            <div class="race-cat-header__line"></div>
        </div>

        <div class="container">

            <!-- Map Container with Hover Overlay -->
            <div class="race-map-wrapper fade-up" id="raceMapWrapper">
                <div class="race-map-border">
                    <div class="tracking-map" id="map">
                        <div class="map-loading-overlay" id="mapLoadingOverlay">
                            <div class="map-loading-spinner"></div>
                            <span><?php echo tr('Loading route…', 'Memuat rute…'); ?></span>
                        </div>
                    </div>

                    <!-- Hover Overlay: "Click for Elevation Detail" -->
                    <div class="race-map-hover-overlay" id="mapHoverOverlay">
                        <div class="race-map-hover-overlay__icon">
                            <svg viewBox="0 0 24 24" width="36" height="36"><path d="M3 20 9 8l5 7 4-9 4 7"/></svg>
                        </div>
                        <p class="race-map-hover-overlay__text">
                            <?php echo tr('CLICK FOR', 'KLIK UNTUK'); ?>
                            <strong><?php echo tr('ELEVATION DETAIL', 'DETAIL ELEVASI'); ?></strong>
                        </p>
                    </div>

                    <!-- Close Detail Button (visible in expanded state) -->
                    <button class="race-map-close-btn" id="mapCloseBtn" type="button" style="display:none;">
                        <svg viewBox="0 0 24 24" width="14" height="14"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        <?php echo tr('CLOSE DETAIL', 'TUTUP DETAIL'); ?>
                    </button>
                </div>

                <!-- Elevation Panel (hidden by default, shown on click) -->
                <div class="race-elevation-panel" id="raceElevPanel" style="display:none;">
                    <p class="race-elevation-panel__title"><?php echo tr('ELEVATION PROFILE', 'PROFIL ELEVASI'); ?></p>
                    <div class="race-elevation-chart-wrap">
                        <canvas id="elevationChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Stats Bar -->
            <div class="race-stats-bar fade-up delay-1">
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M12 8v4l3 3M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
                        <?php echo tr('Flag Off', 'Flag Off'); ?>
                    </p>
                    <p class="race-stat-item__value"><?php echo tr('SUNDAY, 06:00 WIB', 'MINGGU, 06:00 WIB'); ?></p>
                </div>
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M12 22s6-5.46 6-12a6 6 0 1 0-12 0c0 6.54 6 12 6 12Z"/></svg>
                        <?php echo tr('Distance', 'Jarak'); ?>
                    </p>
                    <p class="race-stat-item__value" id="infoDistance">9 KM</p>
                </div>
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M3 20 9 8l5 7 4-9 4 7"/></svg>
                        <?php echo tr('Elevation Gain', 'Elevation Gain'); ?>
                    </p>
                    <p class="race-stat-item__value" id="infoElevGain">—M</p>
                    <p class="race-stat-item__note"><?php echo tr('BASED ON TRACE DE TRAIL', 'BERDASARKAN TRACE DE TRAIL'); ?></p>
                </div>
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M3 3v18h18"/><path d="M7 17l4-8 4 4 5-9"/></svg>
                        <?php echo tr('Max Grade', 'Max Grade'); ?>
                    </p>
                    <p class="race-stat-item__value" id="infoMaxGrade">—%</p>
                </div>
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M3 3v18h18"/><path d="M7 7l4 8 4-4 5 9"/></svg>
                        <?php echo tr('Min Grade', 'Min Grade'); ?>
                    </p>
                    <p class="race-stat-item__value" id="infoMinGrade">—%</p>
                </div>
                <div class="race-stat-item">
                    <p class="race-stat-item__label">
                        <svg viewBox="0 0 24 24" width="13" height="13"><path d="M12 8v4l3 3M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
                        <?php echo tr('Cut Off Time', 'Cut Off Time'); ?>
                    </p>
                    <p class="race-stat-item__value"><?php echo tr('4 HOURS', '4 JAM'); ?></p>
                </div>
            </div>

            <!-- Race Facility -->
            <div class="race-facility fade-up delay-2">
                <h3 class="race-facility__title">
                    <svg viewBox="0 0 24 24" width="16" height="16"><path d="M20 7h-3V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v3H4a1 1 0 0 0-1 1v4h2v9h14v-9h2V8a1 1 0 0 0-1-1ZM9 5h6v2H9Z"/></svg>
                    <?php echo tr('Race Facility', 'Fasilitas Lomba'); ?>
                </h3>
                <div class="race-facility__chips">
                    <span class="race-facility__chip"><?php echo tr('Race Jersey', 'Jersey Lomba'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Bib+Chip', 'Bib+Chip'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Insurance', 'Asuransi'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Racepack Bag', 'Racepack Bag'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Water Station', 'Water Station'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Refreshment', 'Refreshment'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Medic', 'Medis'); ?></span>
                    <span class="race-facility__chip"><?php echo tr('Finisher Medal', 'Medali Finisher'); ?></span>
                </div>
            </div>

        </div>
    </section>


    <section class="sponsor-band" id="sponsors">

        <div class="container sponsor-row">

            <div class="sponsor-group fade-up">

                <p class="sponsor-label"><?php echo tr('Powered By', 'Diselenggarakan Oleh'); ?></p>

                <div class="sponsor-list">

                    <span class="sponsor-logo sponsor-logo--uk">

                        <img src="assets/img/uk.webp" alt="Kartamulia">

                    </span>

                    <span class="sponsor-logo sponsor-logo--mapala">

                        <img src="assets/img/mapala.webp" alt="Mapala">

                    </span>

                    <span class="sponsor-logo sponsor-logo--corelabs">

                        <img src="assets/img/corelabs.webp" alt="Ukcorelab">

                    </span>

                </div>

            </div>



            <div class="sponsor-group fade-up delay-2">

                <p class="sponsor-label"><?php echo tr('Supported By', 'Didukung Oleh'); ?></p>

                <div class="sponsor-list">

                    <span class="sponsor-logo sponsor-logo--indorunner">

                        <img src="assets/img/indorunner.webp" alt="Indorunner">

                    </span>

                    <span class="sponsor-logo sponsor-logo--alti">

                        <img src="assets/img/alti.webp" alt="Alti">

                    </span>
                        <span class="sponsor-logo sponsor-logo--atr">

                        <img src="assets/img/atr.webp" alt="atr">
                    </span>
                         <span class="sponsor-logo sponsor-logo--humanif">

                        <img src="assets/img/humanif.webp" alt="Humanif">

                    </span>

                    <span class="sponsor-logo sponsor-logo--himafam">

                        <img src="assets/img/himafam.webp" alt="himafam">

                    </span>

                    <span class="sponsor-logo sponsor-logo--himaga">

                        <img src="assets/img/himaga.webp" alt="himaga">

                    </span>

                    
                    <span class="sponsor-logo sponsor-logo--bem">
                        
                        <img src="assets/img/bem.webp" alt="bem">
                        
                    </span>
                    <span class="sponsor-logo sponsor-logo--siloam">
                        
                        <img src="assets/img/siloam.webp" alt="siloam">
                        
                    </span>

                </div>

            </div>
            <div class="sponsor-group fade-up delay-2">

                <p class="sponsor-label"><?php echo tr('Sponsored By', 'Disponsori Oleh'); ?></p>

                <div class="sponsor-list">
                    
                    <span class="sponsor-logo sponsor-logo--im3">
                        
                        <img src="assets/img/im3.webp" alt="im3">
                        
                    </span>
                    <span class="sponsor-logo sponsor-logo--hydrococo">

                        <img src="assets/img/hydrococo.webp" alt="hydrococo">
                        
                    </span>

                    <span class="sponsor-logo sponsor-logo--cpung">

                        <img src="assets/img/cpung.webp" alt="cpung">
                        
                    </span>

                    <span class="sponsor-logo sponsor-logo--zona">

                        <img src="assets/img/zona.webp" alt="zona">

                    </span>
                    <span class="sponsor-logo sponsor-logo--zkc">

                        <img src="assets/img/zkc.webp" alt="zkc">

                    </span>
                    
                </div>

            </div>
            <div class="sponsor-group fade-up delay-2">

                <p class="sponsor-label"><?php echo tr('Media Partner', 'Partner Media'); ?></p>

                <div class="sponsor-list">

                    <span class="sponsor-logo sponsor-logo--runsitbul">

                        <img src="assets/img/runsitbul.webp" alt="runsitbul">

                    </span>
                    <span class="sponsor-logo sponsor-logo--fotoyu">

                        <img src="assets/img/fotoyu.webp" alt="fotoyu">

                    </span>
                </div>

            </div>

        </div>

    </section>



    <section class="container section section--cta">

        <div class="cta-panel scale-in">

            <div class="cta-copy">

                <h2>

                    <span><?php echo tr('Ready to Conquer', 'Siap Menaklukkan'); ?></span>

                    <strong><?php echo tr('The Trail?', 'Trail Ini?'); ?></strong>

                </h2>

                <p><?php echo tr('Spots are limited. Secure your entry today and prepare for the ultimate test of endurance.', 'Kuota terbatas. Amankan tempatmu hari ini dan bersiap untuk ujian ketahanan terbaik.'); ?></p>

            </div>



            <a href="<?php echo app_url('registration'); ?>" class="btn btn--primary"><?php echo tr('Join Now', 'Daftar Sekarang'); ?></a>

        </div>

    </section>



</main>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
