<main class="merch-page page-shell page-shell--flush">
    <section class="merch-hero">
        <div class="container merch-hero__inner">
            <div class="merch-hero__content">
                <p class="merch-hero__tag"><?php echo tr('Official Merchandise', 'Merchandise Resmi'); ?></p>
                <h1 class="merch-hero__title">
                    <span>UK TRAIL RUN 2026</span>
                    <strong><?php echo tr('Official Race Pack', 'Race Pack Resmi'); ?></strong>
                </h1>
                <p class="merch-hero__lead">
                    <?php echo tr('The official kit is built for race day: breathable jersey, clean race identity, and essentials included in every registration package.', 'Paket resmi untuk race day: jersey breathable, identitas lomba yang tegas, dan perlengkapan utama yang termasuk dalam setiap pendaftaran.'); ?>
                </p>

                <div class="merch-hero__actions">
                    <a href="<?php echo h(app_url('registration')); ?>" class="btn btn--primary">
                        <?php echo tr('Register Now', 'Daftar Sekarang'); ?>
                        <span class="btn-arrow">&#8594;</span>
                    </a>
                    <a href="#merch-preview" class="merch-link">
                        <?php echo tr('View Full Pack', 'Lihat Paket Lengkap'); ?>
                    </a>
                </div>

                <ul class="merch-hero__facts" aria-label="<?php echo tr('Race pack highlights', 'Sorotan race pack'); ?>">
                    <li>
                        <strong><?php echo tr('Dry-Fit', 'Dry-Fit'); ?></strong>
                        <span><?php echo tr('Trail-ready fabric', 'Material siap trail'); ?></span>
                    </li>
                    <li>
                        <strong>XS-XXL</strong>
                        <span><?php echo tr('Size selection', 'Pilihan ukuran'); ?></span>
                    </li>
                    <li>
                        <strong><?php echo tr('Included', 'Termasuk'); ?></strong>
                        <span><?php echo tr('With registration', 'Dalam pendaftaran'); ?></span>
                    </li>
                </ul>
            </div>

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

    <section class="container merch-preview" id="merch-preview">
        <div class="merch-section-head fade-up">
            <p class="merch-section-head__eyebrow"><?php echo tr('Race Pack Contents', 'Isi Race Pack'); ?></p>
            <h2><?php echo tr('Complete Runner Kit', 'Paket Pelari Lengkap'); ?></h2>
            <p><?php echo tr('Everything is presented with the same bold Wanderlust identity, made to look sharp before, during, and after the race.', 'Semua item hadir dengan identitas Wanderlust yang tegas, dibuat agar terlihat rapi sebelum, saat, dan setelah lomba.'); ?></p>
        </div>

        <div class="merch-showcase fade-up delay-1">
            <article class="merch-card merch-card--feature">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/front.webp"
                    data-merch-title="<?php echo tr('Jersey Front View', 'Jersey Tampak Depan'); ?>"
                    aria-label="<?php echo tr('Open jersey front preview', 'Buka pratinjau jersey depan'); ?>">
                    <img src="assets/img/front.webp" alt="<?php echo tr('Official jersey front', 'Jersey resmi tampak depan'); ?>" loading="lazy">
                    <span class="merch-card__badge"><?php echo tr('Front View', 'Tampak Depan'); ?></span>
                </button>
                <div class="merch-card__body">
                    <p class="merch-card__kicker"><?php echo tr('Official Jersey', 'Jersey Resmi'); ?></p>
                    <h3><?php echo tr('Bold Race Identity', 'Identitas Lomba yang Tegas'); ?></h3>
                    <p><?php echo tr('A clean front composition with event branding, sponsor placement, and high-contrast trail colors.', 'Komposisi depan yang rapi dengan branding acara, area sponsor, dan warna trail yang kontras.'); ?></p>
                </div>
            </article>

            <article class="merch-card merch-card--feature">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/back.webp"
                    data-merch-title="<?php echo tr('Jersey Back View', 'Jersey Tampak Belakang'); ?>"
                    aria-label="<?php echo tr('Open jersey back preview', 'Buka pratinjau jersey belakang'); ?>">
                    <img src="assets/img/back.webp" alt="<?php echo tr('Official jersey back', 'Jersey resmi tampak belakang'); ?>" loading="lazy">
                    <span class="merch-card__badge"><?php echo tr('Back View', 'Tampak Belakang'); ?></span>
                </button>
                <div class="merch-card__body">
                    <p class="merch-card__kicker"><?php echo tr('Official Jersey', 'Jersey Resmi'); ?></p>
                    <h3><?php echo tr('Designed for Finish-Line Photos', 'Siap untuk Foto Finish'); ?></h3>
                    <p><?php echo tr('The back layout keeps the Wanderlust theme visible while leaving the jersey easy to read in motion.', 'Layout belakang menjaga tema Wanderlust tetap terlihat dan mudah dibaca saat pelari bergerak.'); ?></p>
                </div>
            </article>
        </div>

        <div class="merch-pack-grid fade-up delay-2">
            <article class="merch-card merch-card--compact">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/BIB.webp"
                    data-merch-title="<?php echo tr('Race BIB', 'BIB Lomba'); ?>"
                    aria-label="<?php echo tr('Open BIB preview', 'Buka pratinjau BIB'); ?>">
                    <img src="assets/img/BIB.webp" alt="<?php echo tr('Race BIB preview', 'Pratinjau BIB lomba'); ?>" loading="lazy">
                    <span class="merch-card__badge">BIB</span>
                </button>
                <div class="merch-card__body">
                    <h3><?php echo tr('Race BIB', 'BIB Lomba'); ?></h3>
                    <p><?php echo tr('Clean number identity for race control and documentation.', 'Identitas nomor yang jelas untuk kontrol lomba dan dokumentasi.'); ?></p>
                </div>
            </article>

            <article class="merch-card merch-card--compact">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/medali.webp"
                    data-merch-title="<?php echo tr('Finisher Medal', 'Medali Finisher'); ?>"
                    aria-label="<?php echo tr('Open medal preview', 'Buka pratinjau medali'); ?>">
                    <img src="assets/img/medali.webp" alt="<?php echo tr('Finisher medal preview', 'Pratinjau medali finisher'); ?>" loading="lazy">
                    <span class="merch-card__badge"><?php echo tr('Medal', 'Medali'); ?></span>
                </button>
                <div class="merch-card__body">
                    <h3><?php echo tr('Finisher Medal', 'Medali Finisher'); ?></h3>
                    <p><?php echo tr('A race-day keepsake for every runner who completes the route.', 'Kenang-kenangan race day untuk pelari yang menyelesaikan rute.'); ?></p>
                </div>
            </article>

            <article class="merch-card merch-card--compact">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/tasserut.webp"
                    data-merch-title="<?php echo tr('String Bag', 'Tas Serut'); ?>"
                    aria-label="<?php echo tr('Open string bag preview', 'Buka pratinjau tas serut'); ?>">
                    <img src="assets/img/tasserut.webp" alt="<?php echo tr('String bag preview', 'Pratinjau tas serut'); ?>" loading="lazy">
                    <span class="merch-card__badge"><?php echo tr('Bag', 'Tas'); ?></span>
                </button>
                <div class="merch-card__body">
                    <h3><?php echo tr('String Bag', 'Tas Serut'); ?></h3>
                    <p><?php echo tr('Practical storage for race essentials and post-race items.', 'Penyimpanan praktis untuk kebutuhan lomba dan perlengkapan setelah finish.'); ?></p>
                </div>
            </article>

            <article class="merch-card merch-card--compact">
                <button class="merch-card__media" type="button"
                    data-merch-src="assets/img/doorprize.webp"
                    data-merch-title="<?php echo tr('Doorprize Entry', 'Kupon Doorprize'); ?>"
                    aria-label="<?php echo tr('Open doorprize preview', 'Buka pratinjau doorprize'); ?>">
                    <img src="assets/img/doorprize.webp" alt="<?php echo tr('Doorprize preview', 'Pratinjau doorprize'); ?>" loading="lazy">
                    <span class="merch-card__badge"><?php echo tr('Prize', 'Hadiah'); ?></span>
                </button>
                <div class="merch-card__body">
                    <h3><?php echo tr('Doorprize Entry', 'Kupon Doorprize'); ?></h3>
                    <p><?php echo tr('Participant entry for race-day reward moments.', 'Kesempatan peserta untuk momen hadiah pada hari lomba.'); ?></p>
                </div>
            </article>
        </div>
    </section>

    <section class="merch-fit">
        <div class="container merch-fit__inner fade-up">
            <div>
                <p class="merch-section-head__eyebrow"><?php echo tr('Jersey Size Range', 'Rentang Ukuran Jersey'); ?></p>
                <h2><?php echo tr('Choose Your Size When Registering', 'Pilih Ukuran Saat Mendaftar'); ?></h2>
                <p><?php echo tr('Available sizes follow the registration form so every participant can secure the right jersey before race day.', 'Ukuran yang tersedia mengikuti form pendaftaran agar setiap peserta bisa mengamankan jersey yang tepat sebelum race day.'); ?></p>
            </div>
            <div class="merch-size-list" aria-label="<?php echo tr('Available jersey sizes', 'Ukuran jersey tersedia'); ?>">
                <span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
        </div>
    </section>

    <section class="container merch-details">
        <div class="section-label fade-up">
            <span aria-hidden="true"></span>
            <h2><?php echo tr('Jersey Details', 'Detail Jersey'); ?></h2>
        </div>

        <div class="merch-details__grid">
            <article class="merch-detail-item fade-up delay-1">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5 5 8l2 2v9h10v-9l2-2-3-3-2 2H10L8 5Z"></path></svg>
                <div>
                    <strong><?php echo tr('Premium Dry-Fit', 'Dry-Fit Premium'); ?></strong>
                    <p><?php echo tr('Lightweight, breathable material for warm starts, climbs, and long trail segments.', 'Material ringan dan breathable untuk start yang hangat, tanjakan, dan segmen trail panjang.'); ?></p>
                </div>
            </article>

            <article class="merch-detail-item fade-up delay-2">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"></path></svg>
                <div>
                    <strong><?php echo tr('Limited Design', 'Desain Terbatas'); ?></strong>
                    <p><?php echo tr('Wanderlust visual identity with a bold color system that matches the event theme.', 'Identitas visual Wanderlust dengan sistem warna tegas yang selaras dengan tema acara.'); ?></p>
                </div>
            </article>

            <article class="merch-detail-item fade-up delay-3">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 7h-9M14 17H5M17 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM7 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"></path></svg>
                <div>
                    <strong><?php echo tr('Flexible Fit', 'Fit Fleksibel'); ?></strong>
                    <p><?php echo tr('Six size options from XS to XXL, selected directly during registration.', 'Enam pilihan ukuran dari XS sampai XXL, dipilih langsung saat pendaftaran.'); ?></p>
                </div>
            </article>

            <article class="merch-detail-item fade-up delay-4">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
                <div>
                    <strong><?php echo tr('Included Package', 'Termasuk Paket'); ?></strong>
                    <p><?php echo tr('The official jersey is part of every UK Trail Run 2026 registration package.', 'Jersey resmi menjadi bagian dari setiap paket pendaftaran UK Trail Run 2026.'); ?></p>
                </div>
            </article>
        </div>
    </section>

    <section class="container section section--cta merch-cta">
        <div class="cta-panel scale-in">
            <div class="cta-copy">
                <h2>
                    <span><?php echo tr('Secure Your', 'Amankan'); ?></span>
                    <strong><?php echo tr('Race Pack', 'Race Pack-mu'); ?></strong>
                </h2>
                <p><?php echo tr('Register early to lock in your slot, your jersey size, and the full official race pack.', 'Daftar lebih awal untuk mengamankan slot, ukuran jersey, dan race pack resmi lengkap.'); ?></p>
            </div>
            <a href="<?php echo h(app_url('registration')); ?>" class="btn btn--primary">
                <?php echo tr('Register Now', 'Daftar Sekarang'); ?>
            </a>
        </div>
    </section>

    <div class="merch-modal" id="merchModal" role="dialog" aria-modal="true" aria-label="<?php echo tr('Merchandise image preview', 'Pratinjau gambar merchandise'); ?>" hidden>
        <button class="merch-modal__close" type="button" data-merch-close aria-label="<?php echo tr('Close preview', 'Tutup pratinjau'); ?>">&times;</button>
        <figure class="merch-modal__frame">
            <img id="merchModalImg" src="" alt="">
            <figcaption id="merchModalCaption"></figcaption>
        </figure>
    </div>
</main>
