<?php
/* Template Name: Journal Page */
get_header();
?>

<div class="journal-hero fade-in-up">
        <div style="max-width: 800px; margin: 0 auto; padding: 0 20px;">
            <div style="font-size: 11px; letter-spacing: 4px; color: var(--color-gold); margin-bottom: 25px; text-transform: uppercase;"
                data-i18n="journalTag">Editorial Archive</div>
            <h1 style="font-size: 3.2rem; font-weight: 400; margin-bottom: 25px; font-family: var(--font-en);"
                data-i18n="navJournal">The Journal</h1>
            <p style="font-size: 1.05rem; color: rgba(255,255,255,0.7); line-height: 1.8; font-weight: 300; max-width: 600px; margin: 0 auto;"
                data-i18n="journalSubtitle">Documenting the millennia-old wisdom, botanical sources, and master lineages
                of Chinese intangible cultural heritage.</p>
        </div>
    </div>

    <!-- The Geographical Timeline -->
    <div class="timeline-journey" id="scroll-timeline">

        <!-- Node 1: Xiang Embroidery -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node1Geo">28°12′N, 112°58′E · CHANGSHA, HUNAN</div>
                <h2 class="node-title" data-i18n="node1Title">200 BC — The Dawn of Xiang Embroidery</h2>
                <p class="node-desc" data-i18n="node1Desc">
                    Archaeological finds in the ancient Mawangdui Tombs unearted exquisitely delicate silk garments
                    from
                    the Western Han Dynasty. This discovery confirmed the millennia-old origins of "hidden-stitch"
                    techniques, cementing Xiang Embroidery as one of China's Four Great Embroideries.
                    <br><br>
                    Thousands of microscopic stitches meticulously breathe life into legendary floral motifs on
                    velvety
                    silk bases.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/xiang_embroidery_history_1773360176559.png', 'node1Title', 'xiang')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/xiang_embroidery_history_1773360176559.png" alt="Xiang Embroidery History">
            </div>
        </article>

        <!-- Node 2: Atlas Silk -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node2Geo">37°06′N, 79°55′E · HOTAN, XINJIANG</div>
                <h2 class="node-title" data-i18n="node2Title">7th Century AD — The Flower of the Silk Road</h2>
                <p class="node-desc" data-i18n="node2Desc">
                    During the globalized zenith of the Tang Dynasty, the ancient Silk Road facilitated the flourish
                    of
                    Atlas Silk. Known as the "Desert Flame," its soul lies in the complex ikat-dyeing process.
                    <br><br>
                    Raw silk threads are painstakingly hand-tied to resist the bold, earthy natural dyes—resulting
                    in
                    geometric, fiery motifs that echo the dunes and sun of Central Asia.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/atlas_silk_history_1773360242200.png', 'node2Title', 'atlas')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/atlas_silk_history_1773360242200.png" alt="Atlas Silk Hand-tying Process">
            </div>
        </article>

        <!-- Node 3: Dong Brocade -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node3Geo">25°47′N, 109°42′E · TONGDAO, GUIZHOU</div>
                <h2 class="node-title" data-i18n="node3Title">Ming Dynasty — The Sacred Water Ripples</h2>
                <p class="node-desc" data-i18n="node3Desc">
                    Deep in the misty mountains of Guizhou, the women of the Dong minority perfected the intricate
                    "broken-twill" weaving of Dong Brocade (anciently known as "Lunzhi").
                    <br><br>
                    Utilizing ancient wooden handlooms and raw botanical indigo dyes fermented in local clay vats,
                    they
                    translated the sacred geometry of mountain rivers into the mesmerizing blue-and-white "Water
                    Ripple"
                    patterns. A pure, undocumented matriarchal legacy.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/dong_brocade_history_1773360271042.png', 'node3Title', 'dong')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/dong_brocade_history_1773360271042.png" alt="Dong Brocade Loom Weaving">
            </div>
        </article>

        <!-- Node 4: Lanshan Homespun -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node4Geo">THE PRESENT · EARTHLY AESTHETICS</div>
                <h2 class="node-title" data-i18n="node4Title">Modern Era — The Wabi-Sabi of the Loom</h2>
                <p class="node-desc" data-i18n="node4Desc">
                    In preserving the Lanshan Homespun technique, we return to the absolute essence of textiles:
                    hand-spun raw cotton drying peacefully under natural sunlight across bamboo poles.
                    <br><br>
                    It represents an unbleached, earthy resilience. An homage to the wabi-sabi philosophy,
                    connecting
                    high-end modern interiors with the quiet, enduring bond between the land and the loom.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/lanshan_homespun_history_1773360304270.png', 'node4Title', 'lanshan')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/lanshan_homespun_history_1773360304270.png" alt="Lanshan Homespun Drying">
            </div>
        </article>


        <!-- Node 5: Tibetan Pulu -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node5Geo">29°39′N, 91°07′E · LHASA, TIBET</div>
                <h2 class="node-title" data-i18n="node5Title">10th Century — The Warmth of the Highlands</h2>
                <p class="node-desc" data-i18n="node5Desc">
                    Woven from the finest undercoat of yaks and sheep, Pulu is the traditional fabric of the Tibetan
                    plateau. Known for its incredible warmth and rugged texture, it embodies the spiritual resilience of
                    the nomadic people.
                    <br><br>
                    The coarse yet durable felt is often dyed in profound natural colors—deep reds, earthy browns, and
                    twilight blues, offering a sanctuary of warmth in the harshest winter landscapes.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/pulu_history.png', 'node5Title', 'pulu')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/pulu_history.png" alt="Tibetan Pulu">
            </div>
        </article>

        <!-- Node 6: Miao Embroidery -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node6Geo">26°22′N, 108°04′E · LEISHAN, GUIZHOU</div>
                <h2 class="node-title" data-i18n="node6Title">Ancient Times — The Epic Worn on the Body</h2>
                <p class="node-desc" data-i18n="node6Desc">
                    Without a written language, the Miao ethnic minority recorded their profound mythologies and
                    creation epics directly onto their garments using masterful silk and silver embroidery.
                    <br><br>
                    From the mythological 'Butterfly Mother' to the sacred 'Silk Dragon', every stitch is a chapter of a
                    thousand-year-old story, combining bold colors and extreme precision on dark indigo backgrounds.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/miao_history.png', 'node6Title', 'miao')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/miao_history.png" alt="Miao Embroidery">
            </div>
        </article>

        <!-- Node 7: Kazakh Embroidery -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node7Geo">43°49′N, 90°17′E · MULEI, XINJIANG</div>
                <h2 class="node-title" data-i18n="node7Title">Nomadic Era — Tents Adorned with Stars</h2>
                <p class="node-desc" data-i18n="node7Desc">
                    The Kazakh nomads, riding across the vast steppes beneath the snow-capped Tianshan mountains,
                    developed a distinctive embroidery style characterized by vibrant, contrasting geometric and floral
                    patterns stitched onto thick felt.
                    <br><br>
                    These intricate motifs decorate the interiors of their yurts, capturing the beauty of the alpine
                    flora, the sun, and the moon, serving as a bright, artistic defiance against the stark wilderness.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/kazakh_history.png', 'node7Title', 'kazakh')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/kazakh_history.png" alt="Kazakh Embroidery">
            </div>
        </article>

        <!-- Node 8: Baina Patchwork -->
        <article class="journey-node">
            <div class="node-content">
                <div class="geo-tag" data-i18n="node8Geo">CLASSICAL ERA · CHINESE ANTIQUITY</div>
                <h2 class="node-title" data-i18n="node8Title">Classical Era — Hundred Patches, One Heart</h2>
                <p class="node-desc" data-i18n="node8Desc">
                    Baina translates to 'a hundred patches'. Originally rooted in Buddhist asceticism and the virtue of
                    frugality, it involves piecing together discarded yet exquisite silk scraps into a coherent,
                    stunning tapestry.
                    <br><br>
                    This ancient upcycling technique highlights a deep reverence for materials, forming irregular,
                    wabi-sabi geometric symphonies that find new life and luxury through meticulous hand-stitching.
                </p>
                <a href="#" class="read-more"
                    onclick="event.preventDefault(); openArchive('<?php echo get_template_directory_uri(); ?>/assets/gallery/baina_history.png', 'node8Title', 'baina')"
                    data-i18n="viewArchive">View Archive ⟶</a>
            </div>
            <div class="node-img">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/baina_history.png" alt="Baina Patchwork">
            </div>
        </article>
    </div>



    <!-- The Raw Material Archive -->
    <div class="materials-archive fade-in-up"
        style="background-color: #050608; padding: 100px 0; overflow: hidden; margin-top: -100px;">
        <div class="container text-center" style="margin-bottom: 80px;">
            <div class="geo-tag" style="justify-content: center; margin-bottom: 20px;" data-i18n="materialsTag">THE
                ELEMENTS</div>
            <h2 class="node-title" style="font-size: 2.8rem; letter-spacing: 4px;" data-i18n="materialsTitle">The Raw
                Material Archive</h2>
        </div>
        <div class="materials-scroll"
            style="display: flex; gap: 40px; padding: 0 5vw; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;">
            <style>
                .materials-scroll::-webkit-scrollbar {
                    display: none;
                }

                .material-card {
                    flex: 0 0 400px;
                    height: 550px;
                    position: relative;
                    border-radius: 2px;
                    overflow: hidden;
                    cursor: pointer;
                }

                .material-card img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 1.2s ease, filter 0.5s ease;
                    filter: brightness(0.7) contrast(1.1);
                }

                .material-card:hover img {
                    transform: scale(1.05);
                    filter: brightness(0.9) contrast(1.1);
                }

                .material-overlay {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 40px 30px;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
                }

                .material-overlay h3 {
                    font-family: var(--font-en);
                    font-size: 24px;
                    color: var(--color-gold);
                    margin-bottom: 10px;
                    font-weight: 400;
                    letter-spacing: 2px;
                }

                .material-overlay p {
                    font-size: 13px;
                    color: rgba(255, 255, 255, 0.7);
                    letter-spacing: 1px;
                    line-height: 1.6;
                }
            </style>
            <div class="material-card">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/silk_material.png" alt="Raw Silk">
                <div class="material-overlay">
                    <h3 data-i18n="matSilkTitle">Raw Silk</h3>
                    <p data-i18n="matSilkDesc">The primordial luminous thread of the empire.</p>
                </div>
            </div>
            <div class="material-card">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/indigo_material.png" alt="Natural Indigo">
                <div class="material-overlay">
                    <h3 data-i18n="matIndigoTitle">Natural Indigo</h3>
                    <p data-i18n="matIndigoDesc">Fermented from local botanicals in clay vats.</p>
                </div>
            </div>
            <div class="material-card">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/gallery/cotton_material.png" alt="Unbleached Cotton">
                <div class="material-overlay">
                    <h3 data-i18n="matCottonTitle">Unbleached Cotton</h3>
                    <p data-i18n="matCottonDesc">Earthly resilience, spun by ancient hands.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Faces of Heritage -->
    <div class="masters-archive fade-in-up" style="background-color: var(--color-bg-dark); padding: 120px 0;">
        <div class="container text-center" style="margin-bottom: 80px;">
            <div class="geo-tag" style="justify-content: center; margin-bottom: 20px;" data-i18n="mastersTag">FACES OF
                HERITAGE</div>
            <h2 class="node-title" style="font-size: 2.8rem; letter-spacing: 4px;" data-i18n="mastersTitle">The Keepers
                of the Loom</h2>
        </div>
        <div class="container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 80px;">
            <figure style="margin: 0; text-align: center;">
                <div style="overflow: hidden; margin-bottom: 30px;">
                    <img src="https://images.unsplash.com/photo-1623000632594-5544dcbd4d05?auto=format&fit=crop&q=80&w=800"
                        alt="Master Weaver"
                        style="width: 100%; transition: transform 0.8s ease; filter: sepia(30%) grayscale(20%);"
                        onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                </div>
                <blockquote
                    style="font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; color: var(--color-text-main); margin-bottom: 15px; line-height: 1.6;"
                    data-i18n="master1Quote">
                    "The loom does not rush. It only answers to the rhythm of the heart."
                </blockquote>
                <figcaption
                    style="font-family: var(--font-en); font-size: 11px; color: var(--color-gold); letter-spacing: 2px; text-transform: uppercase;"
                    data-i18n="master1Author">
                    — Master Weaver of Dong Brocade
                </figcaption>
            </figure>
            <figure style="margin: 0; text-align: center; transform: translateY(60px);">
                <div style="overflow: hidden; margin-bottom: 30px;">
                    <img src="https://images.unsplash.com/photo-1605256585141-8930491cb8fb?auto=format&fit=crop&q=80&w=800"
                        alt="Master Embroiderer"
                        style="width: 100%; transition: transform 0.8s ease; filter: sepia(30%) grayscale(20%);"
                        onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                </div>
                <blockquote
                    style="font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; color: var(--color-text-main); margin-bottom: 15px; line-height: 1.6;"
                    data-i18n="master2Quote">
                    "Every stitch is a silent prayer to the mountains."
                </blockquote>
                <figcaption
                    style="font-family: var(--font-en); font-size: 11px; color: var(--color-gold); letter-spacing: 2px; text-transform: uppercase;"
                    data-i18n="master2Author">
                    — Master Embroiderer in Leishan
                </figcaption>
            </figure>
        </div>
    </div>

<script>
        // Trigger entrance animations on scroll
        document.addEventListener('DOMContentLoaded', () => {
            const nodes = document.querySelectorAll('.journey-node');

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.15,
                rootMargin: "0px 0px -50px 0px"
            });

            nodes.forEach(node => observer.observe(node));

            // Hero animation
            setTimeout(() => {
                document.querySelectorAll('.fade-in-up').forEach(el => el.classList.add('active'));
            }, 100);
        });

        // Modal specific logic
        const archiveData = {
            'xiang': [
                { x: 55, y: 55, titleKey: 'xiang_hs1_title', descKey: 'xiang_hs1_desc' }, // Center-right red flower (Chain stitch)
                { x: 25, y: 38, titleKey: 'xiang_hs2_title', descKey: 'xiang_hs2_desc' }, // Top-left blue cloud (Cloud Motif)
                { x: 42, y: 80, titleKey: 'xiang_hs3_title', descKey: 'xiang_hs3_desc' }  // Bottom left degraded torn edge (Substrate)
            ],
            'atlas': [
                { x: 40, y: 40, titleKey: 'atlas_hs1_title', descKey: 'atlas_hs1_desc' },
                { x: 70, y: 65, titleKey: 'atlas_hs2_title', descKey: 'atlas_hs2_desc' },
                { x: 20, y: 80, titleKey: 'atlas_hs3_title', descKey: 'atlas_hs3_desc' }
            ],
            'dong': [
                { x: 45, y: 55, titleKey: 'dong_hs1_title', descKey: 'dong_hs1_desc' },
                { x: 75, y: 35, titleKey: 'dong_hs2_title', descKey: 'dong_hs2_desc' },
                { x: 55, y: 85, titleKey: 'dong_hs3_title', descKey: 'dong_hs3_desc' }
            ],
            'lanshan': [
                { x: 35, y: 55, titleKey: 'lanshan_hs1_title', descKey: 'lanshan_hs1_desc' },
                { x: 70, y: 40, titleKey: 'lanshan_hs2_title', descKey: 'lanshan_hs2_desc' },
                { x: 50, y: 80, titleKey: 'lanshan_hs3_title', descKey: 'lanshan_hs3_desc' }
            ],
            'pulu': [
                { x: 50, y: 50, titleKey: 'pulu_hs1_title', descKey: 'pulu_hs1_desc' },
                { x: 30, y: 65, titleKey: 'pulu_hs2_title', descKey: 'pulu_hs2_desc' },
                { x: 70, y: 40, titleKey: 'pulu_hs3_title', descKey: 'pulu_hs3_desc' }
            ],
            'miao': [
                { x: 50, y: 55, titleKey: 'miao_hs1_title', descKey: 'miao_hs1_desc' },
                { x: 35, y: 35, titleKey: 'miao_hs2_title', descKey: 'miao_hs2_desc' },
                { x: 65, y: 75, titleKey: 'miao_hs3_title', descKey: 'miao_hs3_desc' }
            ],
            'kazakh': [
                { x: 50, y: 45, titleKey: 'kazakh_hs1_title', descKey: 'kazakh_hs1_desc' },
                { x: 25, y: 60, titleKey: 'kazakh_hs2_title', descKey: 'kazakh_hs2_desc' },
                { x: 80, y: 50, titleKey: 'kazakh_hs3_title', descKey: 'kazakh_hs3_desc' }
            ],
            'baina': [
                { x: 45, y: 50, titleKey: 'baina_hs1_title', descKey: 'baina_hs1_desc' },
                { x: 65, y: 30, titleKey: 'baina_hs2_title', descKey: 'baina_hs2_desc' },
                { x: 35, y: 70, titleKey: 'baina_hs3_title', descKey: 'baina_hs3_desc' }
            ]
        };

        function openArchive(imgSrc, titleI18nKey, artifactKey) {
            const archiveModal = document.getElementById('archiveModal');
            const modalImg = document.getElementById('modalDynamicImg');
            const modalTitle = document.getElementById('modalTitle');
            const container = document.getElementById('modalImgContainer');
            const defaultText = document.getElementById('modalDefaultText');
            const detailText = document.getElementById('modalDetailText');

            document.body.style.overflow = 'hidden'; // lock scroll
            modalImg.src = imgSrc;
            modalTitle.setAttribute('data-i18n', titleI18nKey);
            const lang = typeof window.currentLang !== 'undefined' ? window.currentLang : 'en';

            if (typeof window.i18n !== 'undefined' && window.i18n[lang] && window.i18n[lang][titleI18nKey]) {
                modalTitle.innerText = window.i18n[lang][titleI18nKey];
            }

            // Cleanup & reset states
            document.querySelectorAll('.hotspot').forEach(el => el.remove());
            defaultText.style.display = 'none'; // Never show default text anymore
            detailText.style.display = 'block';
            detailText.classList.add('faded');

            // Inject hotspots
            if (artifactKey && archiveData[artifactKey]) {
                archiveData[artifactKey].forEach((hs, index) => {
                    let dot = document.createElement('div');
                    dot.className = 'hotspot';
                    dot.style.left = hs.x + '%';
                    dot.style.top = hs.y + '%';
                    dot.addEventListener('click', () => activateHotspot(dot, hs));
                    container.appendChild(dot);

                    // Auto-activate the very first hotspot immediately
                    if (index === 0) {
                        setTimeout(() => {
                            activateHotspot(dot, hs);
                        }, 50);
                    }
                });
            }

            archiveModal.classList.add('open');
        }

        function activateHotspot(dotEl, hsData) {
            document.querySelectorAll('.hotspot').forEach(el => el.classList.remove('active'));
            dotEl.classList.add('active');

            const defaultText = document.getElementById('modalDefaultText');
            const detailText = document.getElementById('modalDetailText');
            const hsTitle = document.getElementById('hsTitle');
            const hsDesc = document.getElementById('hsDesc');

            detailText.classList.add('faded');

            setTimeout(() => {
                defaultText.style.display = 'none';
                detailText.style.display = 'block';

                hsTitle.setAttribute('data-i18n', hsData.titleKey);
                hsDesc.setAttribute('data-i18n', hsData.descKey);

                const lang = typeof window.currentLang !== 'undefined' ? window.currentLang : 'en';
                if (typeof window.i18n !== 'undefined' && window.i18n[lang]) {
                    hsTitle.innerText = window.i18n[lang][hsData.titleKey] || hsData.titleKey;
                    hsDesc.innerHTML = window.i18n[lang][hsData.descKey] || hsData.descKey;
                }

                detailText.classList.remove('faded');
            }, 300);
        }

        function closeArchive() {
            const archiveModal = document.getElementById('archiveModal');
            const modalImg = document.getElementById('modalDynamicImg');

            document.body.style.overflow = 'auto'; // unlock scroll
            archiveModal.classList.remove('open');
            setTimeout(() => {
                modalImg.src = '';
                document.querySelectorAll('.hotspot').forEach(el => el.remove());
            }, 500);
        }
    </script>

    <!-- Interactive Elegant Modal -->
    <div id="archiveModal" class="archive-modal">
        <div class="modal-content-wrapper">
            <button class="modal-close-btn" onclick="closeArchive()" data-i18n="closeArchive">CLOSE OVERLAY ✕</button>
            <div class="modal-img-col">
                <div class="interactive-img-container" id="modalImgContainer">
                    <img id="modalDynamicImg" src="" alt="Archive Detailed View">
                    <!-- Hotspots will be dynamically added here via JS -->
                </div>
            </div>
            <div class="modal-text-col">
                <div style="font-size: 11px; letter-spacing: 4px; color: var(--color-gold); margin-bottom: 25px; text-transform: uppercase;"
                    data-i18n="modalPrefix">
                    Yunbuyao Archives</div>
                <h2 id="modalTitle"
                    style="font-size: 26px; line-height: 1.4; color: var(--color-text-main); margin-bottom: 30px; font-weight: 300;">
                </h2>

                <!-- Default State -->
                <div id="modalDefaultText" class="fade-block"
                    style="color: var(--color-text-muted); font-size: 13px; line-height: 2;">
                    <p style="margin-bottom: 25px; font-size: 15px; color: var(--color-gold);"><span
                            data-i18n="modalP1">※ <em>Click on the glowing data points upon the artifact to uncover deep
                                heritage intelligence...</em></span></p>
                    <p style="margin-bottom: 15px;" data-i18n="modalP2">The intricate detailing shown here exhibits the
                        absolute zenith of
                        human handcraft, demanding extreme patience, thousands of hours of artisan labor, and profound
                        adherence to ancestral rules regarding humidity and natural dye extraction.</p>
                    <p style="margin-bottom: 15px;" data-i18n="modalP3">By bringing this piece into your curated space,
                        you not only enjoy
                        its aesthetic resonance but actively finance the continuation of this lineage. This acts as a
                        living bridge between millennia of Chinese soil and contemporary design.</p>
                </div>

                <!-- Interactive Details State -->
                <div id="modalDetailText" class="fade-block faded"
                    style="display: none; color: var(--color-text-muted); font-size: 14px; line-height: 2;">
                    <div style="display: flex; align-items: center; margin-bottom: 25px;">
                        <span class="hs-indicator"></span>
                        <h3 id="hsTitle"
                            style="font-size: 18px; color: var(--color-text-light); font-weight: 400; letter-spacing: 1px;">
                            Hotspot Title</h3>
                    </div>
                    <p id="hsDesc" style="opacity: 0.85;">Description...</p>
                    <button
                        onclick="document.getElementById('modalDetailText').style.display='none'; document.getElementById('modalDefaultText').style.display='block';"
                        style="background:none; border:none; border-bottom:1px solid var(--color-gold); color:var(--color-gold); margin-top:25px; cursor:pointer; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;"
                        data-i18n="modalBackView">⟵ Back to Overview</button>
                </div>

                <div style="margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(198, 168, 124, 0.2); font-family: var(--font-en); font-size: 10px; letter-spacing: 2px;"
                    data-i18n="modalTrace">
                    BLOCKCHAIN TRACE STATUS: VERIFIED
                </div>
            </div>
        </div>
    </div>

<?php get_footer(); ?>
