<main class="page-shell page-shell--flush">
    <!-- Hero Banner -->
    <section class="contact-hero">
        <div class="container">
            <h1 class="contact-hero__title"><?php echo tr('Contact Us', 'Hubungi Kami'); ?></h1>
            <p class="contact-hero__sub"><?php echo tr('Have questions or need assistance? Reach out to our team and we will get back to you shortly.', 'Punya pertanyaan atau butuh bantuan? Hubungi tim kami dan kami akan segera merespons.'); ?></p>
        </div>
    </section>

    <!-- Content -->
    <section class="container contact-layout">
        <!-- LEFT - Contact Form -->
        

        <!-- RIGHT - Info Cards -->
        <div class="contact-info-col">

         <article class="contact-info-card fade-right delay-2">
                <div class="contact-info-card__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"></path></svg>
                </div>
                <h3><?php echo tr('Whatsapp', 'Whatsapp'); ?></h3>
                <p><?php echo tr('Contact us with Whatsapp', 'Hubungi kami via Whatsapp'); ?></p>
                <a href="https://wa.me/6282116133349" class="contact-info-card__link"> +62 821-1613-3349 ( Mela )</a><br>
                <a href="https://wa.me/6283126190721" class="contact-info-card__link"> +62 831-2619-0721 ( Tika )</a>
            </article>
            <!-- Email Us -->
            <article class="contact-info-card fade-right delay-1">
                <div class="contact-info-card__icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                </div>
                <h3><?php echo tr('Email Us', 'Email Kami'); ?></h3>
                <p><?php echo tr('Send us an email anytime', 'Kirim email kepada kami kapan saja'); ?></p>
                <a href="mailto:support@uktrailrun.test" class="contact-info-card__link">mapalauk25@gmail.com</a>
            </article>

            <!-- Social Media -->
           

            <!-- Event Location -->
            <article class="contact-info-card contact-info-card--map fade-right delay-3">
                <div class="contact-info-card__icon">
                    <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>
                </div>
                <h3><?php echo tr('Event Location', 'Lokasi Acara'); ?></h3>
                <p><?php echo trh('Kartamulia University<br>Purwakarta, Indonesia', 'Universitas Kartamulia <br>Purwakarta, Indonesia'); ?></p>
                <div class="contact-map-wrap">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4133.536205367949!2d107.40789161076616!3d-6.61698946465718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6905005313132d%3A0xe13d92567d5937d3!2sUNIVERSITAS%20KARTAMULIA%20PURWAKARTA!5e1!3m2!1sen!2suk!4v1778095172403!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </article>
        </div>
    </section>
</main>
