export function mainContentTemplate() {
    return `<main id="main-content" class="tapops-doc-root pt-[72px] lg:pt-[160px]">

    <!-- ═══════════════════════════════════════
         HERO
         ═══════════════════════════════════════ -->
    <section class="research-hero immersive-hero">
        <div class="hero-container-centered">
            <span class="hero-kicker" data-tp-i18n="hero_kicker">Digital Administrative Hub</span>
            <h2 class="hero-title" data-tp-i18n="hero_title">Administrasi Akademik Digital</h2>
            <p class="hero-tagline" data-tp-i18n="hero_tagline">
                Satu pintu menuju semua dokumen penting. Akses terpusat menuju repositori dokumen akademik Program Studi
                Informatika Universitas Tanjungpura untuk mahasiswa dan staf.
            </p>
            <div class="hero-actions">
                <a href="#repository" class="btn-join"><span data-tp-i18n="hero_btn_search">Cari Dokumen</span> <i class="fas fa-search"></i></a>
                <a href="#procedures" class="btn-outline"><span data-tp-i18n="hero_btn_flow">ALUR PENGAJUAN</span> <i class="fas fa-chevron-right"></i></a>
            </div>
        </div>

        <div class="hero-floating-stat-bar">
            <div class="stat-bar-item">
                <span class="stat-bar-value" id="stat-active-value">—</span>
                <span class="stat-bar-label" data-tp-i18n="stat_active">Dokumen Aktif</span>
            </div>
            <div class="stat-bar-divider"></div>
            <div class="stat-bar-item">
                <span class="stat-bar-value" id="stat-updates-value">—</span>
                <span class="stat-bar-label" data-tp-i18n="stat_updates">Pembaruan Terbaru</span>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════
         DOCUMENT REPOSITORY
         ═══════════════════════════════════════ -->
    <section id="repository" class="documents-section">
        <div class="repo-dashboard-container">
            <!-- Sidebar Filter -->
            <aside class="repo-sidebar">
                <div class="sidebar-sticky">
                    <h3 class="sidebar-title" data-tp-i18n="sidebar_category">KATEGORI BERKAS</h3>
                    <div class="document-filter-wrapper" id="tag-filter-wrapper">
                        <!-- Filter buttons are built dynamically from API tags by main.js -->
                        <div class="filter-skeleton">
                            <div class="filter-skeleton-item"></div>
                            <div class="filter-skeleton-item short"></div>
                            <div class="filter-skeleton-item"></div>
                            <div class="filter-skeleton-item short"></div>
                        </div>
                    </div>

                    <div class="sidebar-info-box">
                        <i class="fas fa-info-circle"></i>
                        <p data-tp-i18n="sidebar_info">Pastikan mengunduh versi terbaru untuk menjamin validitas berkas pengajuan.</p>
                    </div>
                </div>
            </aside>

            <!-- Main Document Area (div, not main — only one <main> per page) -->
            <div class="repo-main-content">
                <div class="repo-content-header">
                    <div class="header-title-area">
                        <h2 class="section-title" data-tp-i18n="repo_title">Eksplorasi Dokumen Prodi</h2>
                        <p class="section-subtitle" data-tp-i18n="repo_subtitle">Temukan berkas administrasi dan akademik terbaru Program Studi
                            Informatika.</p>
                    </div>

                    <div class="repo-controls">
                        <div class="search-container">
                            <div class="search-input-group">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text" id="doc-search" data-tp-i18n-placeholder="search_ph" placeholder="Cari nama berkas atau kata kunci...">
                            </div>
                        </div>

                        <div class="filter-controls">
                            <div class="control-group date-range-group" id="date-range-control-group">
                                <span class="control-label" data-tp-i18n="label_period">Periode Unggahan</span>
                                <button type="button" id="date-picker-trigger" class="date-picker-trigger">
                                    <div class="trigger-left-content">
                                        <i class="far fa-calendar-alt"></i>
                                        <span id="date-picker-label" data-tp-i18n="filter_all_time">Semua Waktu</span>
                                    </div>
                                    <i class="fas fa-chevron-down trigger-arrow"></i>
                                </button>
                                
                                <div id="date-picker-backdrop" class="date-picker-backdrop"></div>
                                
                                <div id="date-picker-popover" class="date-picker-popover">
                                    <div class="date-picker-top-bar">
                                        <div class="date-display-inputs">
                                            <div class="date-display-field">
                                                <input type="text" id="picker-start-display" placeholder="DD/MM/YYYY">
                                            </div>
                                            <span class="date-picker-separator">-</span>
                                            <div class="date-display-field">
                                                <input type="text" id="picker-end-display" placeholder="DD/MM/YYYY">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="date-picker-body">
                                        <div class="calendar-container">
                                            <div class="calendar-nav">
                                                <button type="button" id="prev-month-btn" class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                                                <div class="month-labels">
                                                     <div id="left-month-label" class="month-label">
                                                         <span id="left-month-name">Mei</span>
                                                         <div class="year-select-wrapper">
                                                             <select id="left-year-select" class="calendar-year-select"></select>
                                                             <i class="fas fa-chevron-down select-arrow"></i>
                                                         </div>
                                                     </div>
                                                     <div id="right-month-label" class="month-label">
                                                         <span id="right-month-name">Juni</span>
                                                         <div class="year-select-wrapper">
                                                             <select id="right-year-select" class="calendar-year-select"></select>
                                                             <i class="fas fa-chevron-down select-arrow"></i>
                                                         </div>
                                                     </div>
                                                 </div>
                                                <button type="button" id="next-month-btn" class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                                            </div>
                                            
                                            <div class="calendar-grids">
                                                <div class="calendar-grid-pane" id="left-calendar-pane">
                                                    <div class="day-headers"></div>
                                                    <div class="days-container" id="left-days-container"></div>
                                                </div>
                                                <div class="calendar-grid-pane" id="right-calendar-pane">
                                                    <div class="day-headers"></div>
                                                    <div class="days-container" id="right-days-container"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="presets-container">
                                            <span class="presets-title" data-tp-i18n="presets_title">RENTANG WAKTU</span>
                                            <div class="presets-list">
                                                <button type="button" class="preset-btn" data-preset="all" data-tp-i18n="filter_all_time">Semua Waktu</button>
                                                <button type="button" class="preset-btn" data-preset="today" data-tp-i18n="preset_today">Hari Ini</button>
                                                <button type="button" class="preset-btn" data-preset="yesterday" data-tp-i18n="preset_yesterday">Kemarin</button>
                                                <button type="button" class="preset-btn" data-preset="last7" data-tp-i18n="preset_last_7_days">7 Hari Terakhir</button>
                                                <button type="button" class="preset-btn" data-preset="last14" data-tp-i18n="preset_last_14_days">14 Hari Terakhir</button>
                                                <button type="button" class="preset-btn" data-preset="last30" data-tp-i18n="preset_last_30_days">30 Hari Terakhir</button>
                                                <button type="button" class="preset-btn" data-preset="thisWeek" data-tp-i18n="preset_this_week">Minggu Ini</button>
                                                <button type="button" class="preset-btn" data-preset="lastWeek" data-tp-i18n="preset_last_week">Minggu Lalu</button>
                                                <button type="button" class="preset-btn" data-preset="thisMonth" data-tp-i18n="preset_this_month">Bulan Ini</button>
                                                <button type="button" class="preset-btn" data-preset="lastMonth" data-tp-i18n="preset_last_month">Bulan Lalu</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="date-picker-footer">
                                        <button type="button" id="picker-cancel-btn" class="action-btn cancel-btn" data-tp-i18n="btn_cancel">Batal</button>
                                        <button type="button" id="picker-apply-btn" class="action-btn apply-btn" data-tp-i18n="btn_update">Perbarui</button>
                                    </div>
                                </div>
                            </div>

                            <div class="control-group">
                                <span class="control-label" data-tp-i18n="label_sort">Urutkan</span>
                                <div id="sort-filter-wrapper"></div>
                            </div>

                            <div class="control-group mobile-category-control-group">
                                <span class="control-label" data-tp-i18n="sidebar_category">Kategori Berkas</span>
                                <div id="mobile-tag-filter-wrapper"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="document-grid" id="document-grid">
                    <div class="repo-loading" style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--primary-blue); font-weight: 700; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 15px;">
                        <i class="fas fa-circle-notch fa-spin" style="font-size: 2.5rem; color: var(--secondary-gold);"></i>
                        <span data-tp-i18n="loading">Menghubungkan ke repositori berkas...</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════
         PROCEDURES
         ═══════════════════════════════════════ -->
    <section id="procedures" class="journey-section">
        <div class="journey-container">
            <div class="section-header centered">
                <h2 class="section-title" data-tp-i18n="proc_title">Tata Cara Pengajuan Berkas</h2>
                <span class="section-tag" data-tp-i18n="proc_tag">Alur Pengajuan</span>
            </div>

            <div class="process-flow-wrapper">
                <!-- Step 01 -->
                <div class="process-step">
                    <div class="step-visual">
                        <div class="step-icon-box"><i class="fas fa-file-download"></i></div>
                        <div class="step-number-badge">01</div>
                        <div class="step-connector"></div>
                    </div>
                    <div class="step-content">
                        <h3 data-tp-i18n="proc_s1_h">Unduh Formulir</h3>
                        <p data-tp-i18n="proc_s1_p">Pilih kategori pengajuan Anda, lalu unduh formulir versi terbaru. Pastikan kode revisi pada formulir sesuai dengan yang tertera di halaman ini.</p>
                    </div>
                </div>

                <!-- Step 02 -->
                <div class="process-step">
                    <div class="step-visual">
                        <div class="step-icon-box"><i class="fas fa-edit"></i></div>
                        <div class="step-number-badge">02</div>
                        <div class="step-connector"></div>
                    </div>
                    <div class="step-content">
                        <h3 data-tp-i18n="proc_s2_h">Lengkapi Formulir</h3>
                        <p data-tp-i18n="proc_s2_p">Isi setiap kolom dengan lengkap dan teliti. Sertakan seluruh dokumen pendukung yang diminta sebelum pengiriman.</p>
                    </div>
                </div>

                <!-- Step 03 -->
                <div class="process-step">
                    <div class="step-visual">
                        <div class="step-icon-box"><i class="fas fa-paper-plane"></i></div>
                        <div class="step-number-badge">03</div>
                    </div>
                    <div class="step-content">
                        <h3 data-tp-i18n="proc_s3_h">Kirim Berkas</h3>
                        <p data-tp-i18n="proc_s3_p">Kirimkan formulir beserta dokumen pendukung melalui email resmi atau WhatsApp admin prodi. Berkas yang lengkap akan langsung diproses oleh admin prodi.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════
         HELP CENTER
         ═══════════════════════════════════════ -->
    <section id="help" class="help-center-section">
        <div class="help-container">
            <div class="help-header-centered">
                <h2 class="section-title" data-tp-i18n="help_title">Butuh Bantuan Lebih Lanjut?</h2>
                <p data-tp-i18n="help_desc">Tim admin kami siap membantu Anda melalui kanal komunikasi resmi di bawah ini.</p>
            </div>

            <div class="help-cards-grid">
                <div class="interaction-card help-official">
                    <div class="card-inner">
                        <div class="card-icon"><i class="fas fa-envelope-open-text"></i></div>
                        <h3 data-tp-i18n="help_email_title">Korespondensi Resmi (Email)</h3>
                        <p data-tp-i18n="help_email_desc">Gunakan untuk permohonan form khusus non-publik atau administrasi formal lainnya.</p>
                        <ul class="card-checklist">
                            <li><i class="fas fa-check"></i> <span data-tp-i18n="help_email_c1">Respon Maks. 24 Jam</span></li>
                            <li><i class="fas fa-check"></i> <span data-tp-i18n="help_email_c2">Pelayanan Formal</span></li>
                        </ul>
                        <a href="https://mail.google.com/mail/?view=cm&fs=1&to=admin@informatika.untan.ac.id&su=Layanan%20Administrasi%20%26%20CS%20Informatika%20UNTAN&body=Halo%20Admin%20Prodi%20Informatika%20UNTAN%2C%0A%0ASaya%20ingin%20mengajukan%20permohonan%20%2F%20melaporkan%20kendala%20terkait%20administrasi%20akademik.%20Berikut%20detail%20informasi%20saya%3A%0A%0ANama%3A%20%5BNama%20Lengkap%20Anda%5D%0ANIM%3A%20%5BNIM%20Anda%5D%0AKategori%20Layanan%3A%20%5BTata%20Cara%20Pengajuan%20%2F%20Kendala%20Teknis%20%26%20CS%5D%0A%0ADetail%20Masalah%20%2F%20Pengajuan%3A%0A%5BTuliskan%20pertanyaan%2C%20detail%20pengajuan%2C%20atau%20kendala%20Anda%20di%20sini...%5D%0A%0ATerima%20kasih." target="_blank" rel="noopener noreferrer" class="btn-interaction"><span data-tp-i18n="help_email_btn">HUBUNGI ADMIN</span> <i class="fas fa-paper-plane"></i></a>
                    </div>
                </div>

                <div class="interaction-card help-urgent">
                    <div class="card-inner">
                        <div class="card-icon"><i class="fab fa-whatsapp"></i></div>
                        <h3 data-tp-i18n="help_wa_title">Quick Support (WhatsApp)</h3>
                        <p data-tp-i18n="help_wa_desc">Konsultasi cepat alur birokrasi atau pelaporan kendala akses pada berkas repositori.</p>
                        <ul class="card-checklist">
                            <li><i class="fas fa-check"></i> <span data-tp-i18n="help_wa_c1">Respon Instan Jam Kerja</span></li>
                            <li><i class="fas fa-check"></i> <span data-tp-i18n="help_wa_c2">Konsultasi Teknis</span></li>
                        </ul>
                        <a href="https://wa.me/6285171655161?text=Halo%20Admin%20Prodi%20Informatika%20UNTAN%2C%0A%0ASaya%20ingin%20mengajukan%20permohonan%20%2F%20melaporkan%20kendala%20terkait%20administrasi%20akademik.%20Berikut%20detail%20informasi%20saya%3A%0A%0ANama%3A%20%5BNama%20Lengkap%20Anda%5D%0ANIM%3A%20%5BNIM%20Anda%5D%0AKategori%20Layanan%3A%20%5BTata%20Cara%20Pengajuan%20%2F%20Kendala%20Teknis%20%26%20CS%5D%0A%0ADetail%20Masalah%20%2F%20Pengajuan%3A%0A%5BTuliskan%20pertanyaan%2C%20detail%20pengajuan%2C%20atau%20kendala%20Anda%20di%20sini...%5D%0A%0ATerima%20kasih." target="_blank" rel="noopener noreferrer" class="btn-interaction-alt"><span data-tp-i18n="help_wa_btn">CHAT WHATSAPP</span> <i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>`;
}
