From 6d4f5be825b5fc87274b940d9ee011761dbfb86a Mon Sep 17 00:00:00 2001
From: cygouw <cecilyasinyal99@gmail.com>
Date: Fri, 5 Jun 2026 12:24:48 +0700
Subject: [PATCH] feat(C4A): implement bilingual support with i18n localization

---
 groups/C4A/index.html | 44 ++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/groups/C4A/index.html b/groups/C4A/index.html
index c89bb6f..0092051 100644
--- a/groups/C4A/index.html
+++ b/groups/C4A/index.html
@@ -1160,13 +1160,13 @@
                 <!-- HERO SECTION -->
                 <section class="c4a-hero reveal">
                     <div class="c4a-hero-inner">
-                        <div class="c4a-hero-tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
+                        <div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
                         </div>
-                        <h1 class="c4a-hero-title">
+                        <h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
                             Staf Pendukung &amp; <br />
                             <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
                         </h1>
-                        <p class="c4a-hero-desc">Halaman ini menampilkan informasi petugas
+                        <p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
                             layanan akademik serta
                             prosedur administrasi
                             mahasiswa
@@ -1174,12 +1174,12 @@
                         <div class="hero-stats">
                             <div class="stat-item">
                                 <div class="stat-number" id="stat-staf">0</div>
-                                <div class="stat-label">Staf Aktif</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_staf">Staf Aktif</div>
                             </div>
                             <div class="stat-divider"></div>
                             <div class="stat-item">
                                 <div class="stat-number" id="stat-sop">0</div>
-                                <div class="stat-label">Jenis SOP</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_sop">Jenis SOP</div>
                             </div>
                         </div>
                     </div>
@@ -1188,10 +1188,10 @@
                 <!-- STAFF SECTION -->
                 <section class="content-section">
                     <div class="section-header">
-                        <div class="section-tag"><span class="dot"></span> <span>Tim
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_staff_tag">Tim
                                 Kami</span></div>
-                        <h2 class="section-title">Staf Pendukung</h2>
-                        <p class="section-subtitle">Staf yang siap melayani kebutuhan
+                        <h2 class="section-title" data-i18n="grp_c4a_staff_title">Staf Pendukung</h2>
+                        <p class="section-subtitle" data-i18n="grp_c4a_staff_subtitle">Staf yang siap melayani kebutuhan
                             akademik dan operasional
                             laboratorium di Prodi Informatika UNTAN.</p>
                     </div>
@@ -1203,10 +1203,10 @@
                 <!-- SOP SECTION -->
                 <section class="sop-section">
                     <div class="section-header">
-                        <div class="section-tag"><span class="dot"></span> <span>Prosedur
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_sop_tag">Prosedur
                                 Resmi</span></div>
-                        <h2 class="section-title">Standar Operasional Prosedur (SOP)</h2>
-                        <p class="section-subtitle">Standar Operasional Prosedur untuk
+                        <h2 class="section-title" data-i18n="grp_c4a_sop_title">Standar Operasional Prosedur (SOP)</h2>
+                        <p class="section-subtitle" data-i18n="grp_c4a_sop_subtitle">Standar Operasional Prosedur untuk
                             berbagai kebutuhan administrasi
                             akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.
                         </p>
@@ -1217,6 +1217,7 @@
                         <div class="sop-search-wrap">
                             <i class="fas fa-search sop-search-icon"></i>
                             <input type="search" id="sop-search-input" class="sop-search-input"
+                                data-i18n-placeholder="grp_c4a_sop_search_placeholder"
                                 placeholder="Cari SOP berdasarkan judul..." autocomplete="off" aria-label="Cari SOP" />
                             <button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian"
                                 style="display:none;">
@@ -1225,12 +1226,15 @@
                         </div>
                         <div class="sop-filter-chips" id="sop-filter-chips" role="group"
                             aria-label="Filter kategori SOP">
-                            <button class="sop-chip active" data-filter="semua" id="chip-semua">Semua</button>
+                            <button class="sop-chip active" data-filter="semua" id="chip-semua"
+                                data-i18n="grp_c4a_sop_chip_semua">Semua</button>
                             <button class="sop-chip" data-filter="akademik" id="chip-akademik">
-                                <i class="fas fa-graduation-cap"></i> <span>Akademik</span>
+                                <i class="fas fa-graduation-cap"></i> <span
+                                    data-i18n="grp_c4a_sop_chip_akademik">Akademik</span>
                             </button>
                             <button class="sop-chip" data-filter="praktikum" id="chip-praktikum">
-                                <i class="fas fa-flask"></i> <span>Praktikum</span>
+                                <i class="fas fa-flask"></i> <span
+                                    data-i18n="grp_c4a_sop_chip_praktikum">Praktikum</span>
                             </button>
                         </div>
                     </div>
@@ -1244,8 +1248,8 @@
                     <!-- EMPTY STATE -->
                     <div class="sop-empty-state" id="sop-empty-state" style="display:none;">
                         <i class="fas fa-search-minus sop-empty-icon"></i>
-                        <p class="sop-empty-title">SOP tidak ditemukan</p>
-                        <p class="sop-empty-desc">Coba kata kunci lain atau reset
+                        <p class="sop-empty-title" data-i18n="grp_c4a_sop_empty_title">SOP tidak ditemukan</p>
+                        <p class="sop-empty-desc" data-i18n="grp_c4a_sop_empty_desc">Coba kata kunci lain atau reset
                             filter pencarian.</p>
                         <button class="sop-empty-reset" id="sop-empty-reset">
                             <i class="fas fa-undo"></i> <span data-i18n="grp_c4a_sop_reset_btn">Reset Pencarian</span>
@@ -1268,12 +1272,14 @@
                 <section class="faq-section-wrap">
                     <div class="faq-section-inner">
                         <div class="faq-header reveal">
-                            <div class="section-tag"><span class="dot"></span> <span>Pertanyaan Umum</span></div>
-                            <h2>Pertanyaan yang Sering Diajukan</h2>
-                            <p>Temukan jawaban cepat atas pertanyaan umum mahasiswa
+                            <div class="section-tag"><span class="dot"></span> <span
+                                    data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div>
+                            <h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2>
+                            <p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa
                                 seputar layanan akademik prodi.</p>
                         </div>
 
+
                         <div class="faq-wrap" id="faq-container">
                             <!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json -->
                         </div>