/**
 * main.js — ACAAB Prestasi & Karya Mahasiswa
 * Vanilla JS: fetch data Directus CMS, render sections, handle interactions.
 */

// ─── Constants ────────────────────────────────────────────────────────────────

const API_BASE = 'https://api.ifuntanhub.dev';
const LANG_KEY = 'if_untan_lang';

const BIDANG_MAP = {
    1: 'Kecerdasan Buatan', 2: 'Cyber Security', 3: 'Data',
    4: 'Software Engineering', 5: 'Competitive Programming', 6: 'IoT',
    7: 'Smart City', 8: 'Web3', 9: 'Karya Tulis Ilmiah', 10: 'Robotik',
};

// ─── Utilities ────────────────────────────────────────────────────────────────

function escHtml(str) {
    if (str === null || str === undefined) return '';
    return String(str)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function getLang() {
    try {
        return localStorage.getItem(LANG_KEY) ||
            (navigator.language && navigator.language.startsWith('en') ? 'en' : 'id');
    } catch (_) { return 'id'; }
}

// Baca dari translations global yang didefinisikan localization.js
function t(key) {
    try {
        const lang = getLang();
        if (typeof translations !== 'undefined' && translations[lang] && translations[lang][key]) {
            return translations[lang][key];
        }
    } catch (_) {}
    return key;
}

// ─── Data Transformation ──────────────────────────────────────────────────────

function extractRank(title) {
    const m = (title || '').match(/(Juara\s+\d+|Juara\s+Harapan\s*\d*|Top\s+\d+|Finalis|Peringkat\s+\d+|Medali\s+\w+)/i);
    return m ? m[0] : 'Pemenang';
}

function extractLevel(title, category) {
    const text = ((title || '') + ' ' + (category || '')).toLowerCase();
    if (/internasional|international|global|world|asean|unesco/.test(text)) return 'Internasional';
    if (/regional|kalbar|kalimantan|provinsi|kota|kabupaten|lokal/.test(text)) return 'Regional';
    return 'Nasional';
}

function extractCompetition(title) {
    return (title || '')
        .replace(/^(Juara\s+\d+|Juara\s+Harapan\s*\d*|Top\s+\d+|Finalis|Peringkat\s+\d+|Medali\s+\w+)\s+(di\s+|pada\s+|dalam\s+)?/i, '')
        .trim();
}

function getImageUrl(item, seed) {
    if (item.galeri && Array.isArray(item.galeri) && item.galeri.length > 0) {
        const first = item.galeri[0];
        const imgId = typeof first === 'string' ? first : (first.directus_files_id || first.id);
        if (imgId) return `${API_BASE}/assets/${imgId}`;
    }
    if (item.foto) return `${API_BASE}/assets/${item.foto}`;
    return `https://picsum.photos/seed/${seed}/800/600`;
}

function transformAchievement(item) {
    const id = String(item.id);
    const title = item.nama_prestasi || 'Untitled Achievement';

    let category = 'Umum';
    if (item.bidang_id) {
        category = (typeof item.bidang_id === 'object' && item.bidang_id.nama_bidang)
            ? item.bidang_id.nama_bidang
            : (BIDANG_MAP[item.bidang_id] || 'Umum');
    }

    const rank        = extractRank(title);
    const level       = extractLevel(title, category);
    const competition = extractCompetition(title);
    const year        = parseInt(item.tahun) || new Date().getFullYear();
    const anggota     = Array.isArray(item.anggota) ? item.anggota : [];
    const team        = item.nama_tim || (anggota.length > 0 ? anggota[0].nama : 'Mahasiswa');
    const avatar      = (item.nama_tim || title || 'IF').substring(0, 2).toUpperCase();
    const description = item.deskripsi ||
        `${team} berhasil meraih prestasi luar biasa sebagai ${rank} dalam ajang ${competition} tahun ${year} pada bidang ${category.toLowerCase()}.`;

    return {
        id, title, category, competition, rank, year, level, description,
        team,
        nim:        item.nim || '',
        generation: item.angkatan ? `Angkatan ${item.angkatan}` : 'Informatika',
        image:      getImageUrl(item, `prestasi-${id}`),
        avatar,
        members:    anggota.map(m => ({ nama: m.nama || '', angkatan: m.angkatan ? parseInt(m.angkatan) : undefined })),
    };
}

function transformProject(item) {
    const id          = String(item.id);
    const title       = item.nama_proyek || 'Untitled Project';
    const anggota     = Array.isArray(item.anggota) ? item.anggota : [];
    const studentName = item.nama_mahasiswa || (anggota.length > 0 ? anggota[0].nama : 'Mahasiswa');
    const year        = parseInt(item.tahun) || new Date().getFullYear();
    const description = item.deskripsi || 'Tidak ada deskripsi.';

    let categories = [];
    if (item.bidang && Array.isArray(item.bidang)) {
        categories = item.bidang.map(b => {
            if (b.bidang_id && typeof b.bidang_id === 'object' && b.bidang_id.nama_bidang) return b.bidang_id.nama_bidang;
            if (typeof b.bidang_id === 'number') return BIDANG_MAP[b.bidang_id] || 'Umum';
            return 'Umum';
        }).filter(Boolean);
    }
    if (categories.length === 0) categories = ['Umum'];

    let link = item.url || null;
    if (link && !/^https?:\/\//i.test(link)) link = `https://${link}`;

    return {
        id, title, studentName, year, description, categories, link,
        nim:     item.nim || '',
        image:   getImageUrl(item, `project-${id}`),
        catatan: item.catatan || '',
        members: anggota.map(m => ({ nama: m.nama || '', nim: m.nim || '' })),
    };
}

// ─── API Fetch ────────────────────────────────────────────────────────────────

async function fetchAchievements() {
    const res = await fetch(`${API_BASE}/items/prestasi?fields=*.*`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const { data } = await res.json();
    return (data || [])
        .filter(item => item.status === 'published')
        .map(transformAchievement);
}

async function fetchProjects() {
    const res = await fetch(`${API_BASE}/items/portfolio?fields=*,bidang.bidang_id.nama_bidang,galeri.*`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const { data } = await res.json();
    return (data || [])
        .filter(item => item.status === 'published')
        .map(transformProject);
}

// ─── App State ────────────────────────────────────────────────────────────────

let achievements = [];
let projects     = [];
let achVisible   = 3;
let projVisible  = 6;

let achFilter  = { search: '', level: '', cat: '', year: '' };
let projFilter = { search: '', cat: '', year: '' };

// ─── Init ─────────────────────────────────────────────────────────────────────

document.addEventListener('DOMContentLoaded', async () => {
    initWaButton();

    // Loading placeholders
    showSkeleton('acaab-ach-grid', 3);
    showSkeleton('acaab-proj-track', 4);

    const [achResult, projResult] = await Promise.allSettled([
        fetchAchievements(),
        fetchProjects(),
    ]);

    if (achResult.status === 'fulfilled') {
        achievements = achResult.value;
    } else {
        console.error('[ACAAB] achievements error:', achResult.reason);
        showError('acaab-ach-grid', t('grp_acaab_ach_error'));
    }

    if (projResult.status === 'fulfilled') {
        projects = projResult.value;
    } else {
        console.error('[ACAAB] projects error:', projResult.reason);
        showError('acaab-proj-track', t('grp_acaab_proj_error'));
    }

    initStats();
    initAchievements();
    initProjects();
    updateDataNote();
});

// Re-render saat bahasa berubah dari kit navbar
document.addEventListener('languageChanged', () => {
    updateStats();
    renderAchievements();
    buildAchFilterOptions();
    renderProjects();
    buildProjFilterOptions();
    updateWaButton();
    updateDataNote();
    updateSearchPlaceholders();
});

// ─── Skeleton / Error ─────────────────────────────────────────────────────────

function showSkeleton(containerId, count) {
    const el = document.getElementById(containerId);
    if (!el) return;
    el.innerHTML = Array(count).fill(0).map(() =>
        `<div class="acaab-skeleton" style="height:220px;border-radius:0.75rem;"></div>`
    ).join('');
}

function showError(containerId, msg) {
    const el = document.getElementById(containerId);
    if (el) el.innerHTML = `<p style="color:#ef4444;padding:1rem 0;grid-column:1/-1;">${escHtml(msg)}</p>`;
}

// ─── Stats ────────────────────────────────────────────────────────────────────

function initStats() {
    updateStats();

    const statsEl = document.getElementById('acaab-stats');
    if (!statsEl) return;

    const intl     = achievements.filter(a => a.level === 'Internasional').length;
    const national = achievements.filter(a => a.level === 'Nasional').length;
    const regional = achievements.filter(a => a.level === 'Regional').length;

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (!entry.isIntersecting) return;
            animateCount('stat-total-ach',  achievements.length, 1600);
            animateCount('stat-total-proj', projects.length,     1600);
            animateCount('stat-intl',       intl,     1200);
            animateCount('stat-national',   national, 1350);
            animateCount('stat-regional',   regional, 1500);
            observer.disconnect();
        });
    }, { threshold: 0.4 });

    observer.observe(statsEl);
}

function updateStats() {
    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
    set('stat-total-ach',  achievements.length);
    set('stat-total-proj', projects.length);
    set('stat-intl',       achievements.filter(a => a.level === 'Internasional').length);
    set('stat-national',   achievements.filter(a => a.level === 'Nasional').length);
    set('stat-regional',   achievements.filter(a => a.level === 'Regional').length);
}

function animateCount(elId, target, duration) {
    const el = document.getElementById(elId);
    if (!el) return;
    const start = performance.now();
    (function step(now) {
        const p      = Math.min((now - start) / duration, 1);
        const eased  = 1 - Math.pow(1 - p, 4); // easeOutQuart
        el.textContent = Math.round(target * eased).toLocaleString();
        if (p < 1) requestAnimationFrame(step);
    })(start);
}

function updateDataNote() {
    const el = document.getElementById('acaab-data-note');
    if (!el) return;
    const lang   = getLang();
    const locale = lang === 'en' ? 'en-US' : 'id-ID';
    const date   = new Date().toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' });
    el.textContent = `${t('grp_acaab_stats_data_note')} ${date}`;
}

// ─── Achievements ─────────────────────────────────────────────────────────────

const ACH_INIT = 3;
const ACH_MORE = 3;

const LEVEL_CLASS = {
    Internasional: 'acaab-badge-intl',
    Nasional:      'acaab-badge-nasional',
    Regional:      'acaab-badge-regional',
};

function initAchievements() {
    buildAchFilterOptions();
    renderAchievements();
    bindAchEvents();
}

function buildAchFilterOptions() {
    const levelSel = document.getElementById('acaab-ach-level');
    const catSel   = document.getElementById('acaab-ach-cat');
    const yearSel  = document.getElementById('acaab-ach-year');
    if (!levelSel || !catSel || !yearSel) return;

    const levels = ['Internasional', 'Nasional', 'Regional'];
    const cats   = [...new Set(achievements.map(a => a.category))].sort();
    const years  = [...new Set(achievements.map(a => String(a.year)))].filter(Boolean).sort((a, b) => b - a);

    levelSel.innerHTML = `<option value="">${escHtml(t('grp_acaab_ach_filter_level'))}</option>` +
        levels.map(l => `<option value="${escHtml(l)}"${achFilter.level === l ? ' selected' : ''}>${escHtml(l)}</option>`).join('');
    catSel.innerHTML = `<option value="">${escHtml(t('grp_acaab_ach_filter_cat'))}</option>` +
        cats.map(c => `<option value="${escHtml(c)}"${achFilter.cat === c ? ' selected' : ''}>${escHtml(c)}</option>`).join('');
    yearSel.innerHTML = `<option value="">${escHtml(t('grp_acaab_ach_filter_year'))}</option>` +
        years.map(y => `<option value="${escHtml(y)}"${achFilter.year === y ? ' selected' : ''}>${escHtml(y)}</option>`).join('');
}

function filterAchievements() {
    const q = achFilter.search.toLowerCase();
    return achievements.filter(a => {
        const matchSearch = !q || [a.title, a.team, a.category, a.competition]
            .some(s => (s || '').toLowerCase().includes(q));
        const matchLevel = !achFilter.level || a.level === achFilter.level;
        const matchCat   = !achFilter.cat   || a.category === achFilter.cat;
        const matchYear  = !achFilter.year  || String(a.year) === achFilter.year;
        return matchSearch && matchLevel && matchCat && matchYear;
    });
}

function renderAchievements() {
    const grid    = document.getElementById('acaab-ach-grid');
    const countEl = document.getElementById('acaab-ach-count');
    const moreBtn = document.getElementById('acaab-ach-more');
    const lessBtn = document.getElementById('acaab-ach-less');
    const resetBtn= document.getElementById('acaab-ach-reset');
    if (!grid) return;

    const filtered = filterAchievements();
    const visible  = filtered.slice(0, achVisible);
    const hasFilter = achFilter.search || achFilter.level || achFilter.cat || achFilter.year;

    if (countEl) countEl.textContent =
        `${t('grp_acaab_ach_showing')} ${filtered.length} ${t('grp_acaab_ach_results')}`;
    if (resetBtn) resetBtn.style.display = hasFilter ? 'flex' : 'none';

    if (filtered.length === 0) {
        grid.innerHTML = `<p style="color:#64748b;padding:0.5rem 0;grid-column:1/-1;">${escHtml(t('grp_acaab_ach_empty'))}</p>`;
        if (moreBtn) moreBtn.style.display = 'none';
        if (lessBtn) lessBtn.style.display = 'none';
        return;
    }

    grid.innerHTML = visible.map((a, i) => achCardHtml(a, i)).join('');

    if (moreBtn) moreBtn.style.display = achVisible < filtered.length ? 'inline-block' : 'none';
    if (lessBtn) lessBtn.style.display = achVisible > ACH_INIT        ? 'inline-block' : 'none';

    grid.querySelectorAll('.acaab-ach-readmore').forEach(btn => {
        btn.addEventListener('click', () => {
            const ach = achievements.find(a => a.id === btn.dataset.id);
            if (ach) openAchModal(ach);
        });
    });
}

function achCardHtml(a, idx) {
    return `
    <article class="acaab-ach-card acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
        <div class="acaab-ach-top-bar"></div>
        <!-- Image h-56 (224px) -->
        <div style="position:relative;height:224px;overflow:hidden;background:#f1f5f9;">
            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" loading="lazy" class="acaab-card-img"
                style="width:100%;height:100%;object-fit:cover;"
                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
            <!-- Rank badge top-left: white pill dengan trophy icon -->
            <div style="position:absolute;top:0.75rem;left:0.75rem;background:rgba(255,255,255,0.95);backdrop-filter:blur(4px);color:#003150;font-weight:700;padding:0.25rem 0.625rem;border-radius:9999px;box-shadow:0 1px 3px rgba(0,0,0,0.15);display:flex;align-items:center;gap:0.375rem;font-size:0.72rem;z-index:2;">
                <i class="fas fa-trophy" style="color:#feb401;font-size:0.65rem;"></i>
                ${escHtml(a.rank)}
            </div>
        </div>
        <!-- Content p-6 -->
        <div style="padding:1.5rem;display:flex;flex-direction:column;flex-grow:1;">
            <!-- Category + Year row -->
            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">
                <span style="color:#1e40af;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;">${escHtml(a.category)}</span>
                <span style="color:#94a3b8;font-size:0.72rem;font-weight:500;display:flex;align-items:center;gap:0.25rem;border-left:1px solid #e2e8f0;padding-left:0.625rem;">
                    <i class="fas fa-calendar-alt" style="font-size:0.6rem;"></i> ${escHtml(String(a.year))}
                </span>
            </div>
            <!-- Title -->
            <h3 class="acaab-card-title acaab-line-clamp-2" style="font-size:1.125rem;font-weight:700;color:#003150;margin:0 0 0.75rem;line-height:1.35;font-family:'Roboto Condensed',sans-serif;">${escHtml(a.title)}</h3>
            <!-- Description 3 lines -->
            <p class="acaab-line-clamp-3" style="color:#475569;font-size:0.875rem;line-height:1.6;margin:0 0 1.5rem;flex-grow:1;">${escHtml(a.description)}</p>
            <!-- Bottom -->
            <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-top:auto;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
                    <!-- Avatar + team + generation -->
                    <div style="display:flex;align-items:center;gap:0.625rem;">
                        <div style="width:2rem;height:2rem;border-radius:0.375rem;background:rgba(0,49,80,0.05);border:1px solid rgba(0,49,80,0.1);display:flex;align-items:center;justify-content:center;color:#003150;font-weight:700;font-size:0.65rem;flex-shrink:0;">${escHtml(a.avatar)}</div>
                        <div>
                            <span style="font-weight:700;color:#1e293b;display:block;font-size:0.8125rem;line-height:1.2;">${escHtml(a.team)}</span>
                            <span style="color:#64748b;display:block;font-size:0.72rem;margin-top:0.1rem;">${escHtml(a.generation)}</span>
                        </div>
                    </div>
                    <!-- Level badge -->
                    <span style="background:#f1f5f9;color:#475569;font-size:0.575rem;padding:0.2rem 0.5rem;border-radius:0.25rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">${escHtml(a.level)}</span>
                </div>
                <!-- Full-width CTA button -->
                <button class="acaab-ach-readmore acaab-ach-read-btn" data-id="${escHtml(a.id)}"
                    style="width:100%;padding:0.625rem;border-radius:0.375rem;background:rgba(0,49,80,0.05);color:#003150;font-weight:700;font-size:0.875rem;border:none;cursor:pointer;transition:background 0.2s,color 0.2s;min-height:44px;">
                    ${escHtml(t('grp_acaab_modal_read_more'))}
                </button>
            </div>
        </div>
    </article>`;
}

function bindAchEvents() {
    const search  = document.getElementById('acaab-ach-search');
    const level   = document.getElementById('acaab-ach-level');
    const cat     = document.getElementById('acaab-ach-cat');
    const year    = document.getElementById('acaab-ach-year');
    const reset   = document.getElementById('acaab-ach-reset');
    const moreBtn = document.getElementById('acaab-ach-more');
    const lessBtn = document.getElementById('acaab-ach-less');

    const onChange = () => {
        achFilter.search = search ? search.value.trim() : '';
        achFilter.level  = level  ? level.value  : '';
        achFilter.cat    = cat    ? cat.value    : '';
        achFilter.year   = year   ? year.value   : '';
        achVisible = ACH_INIT;
        renderAchievements();
    };

    if (search) search.addEventListener('input',  onChange);
    if (level)  level.addEventListener('change',  onChange);
    if (cat)    cat.addEventListener('change',    onChange);
    if (year)   year.addEventListener('change',   onChange);

    if (reset) reset.addEventListener('click', () => {
        achFilter = { search: '', level: '', cat: '', year: '' };
        if (search) search.value = '';
        if (level)  level.value  = '';
        if (cat)    cat.value    = '';
        if (year)   year.value   = '';
        achVisible = ACH_INIT;
        renderAchievements();
    });

    if (moreBtn) moreBtn.addEventListener('click', () => { achVisible += ACH_MORE; renderAchievements(); });
    if (lessBtn) lessBtn.addEventListener('click', () => {
        achVisible = ACH_INIT;
        document.getElementById('acaab-ach-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        renderAchievements();
    });
}

// ─── Achievement Modal ────────────────────────────────────────────────────────

function infoRow(icon, label, value) {
    if (!value) return '';
    return `<div style="display:flex;gap:0.625rem;align-items:flex-start;">
        <span style="color:#feb401;margin-top:0.125rem;flex-shrink:0;"><i class="fas fa-${icon}" style="font-size:0.75rem;"></i></span>
        <div>
            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.125rem;line-height:1;">${escHtml(label)}</p>
            <p style="font-size:0.875rem;font-weight:600;color:#1e293b;margin:0;line-height:1.3;">${escHtml(value)}</p>
        </div>
    </div>`;
}

function memberItem(nama, sub) {
    const initial = (nama || '?').charAt(0).toUpperCase();
    return `<li style="display:flex;align-items:center;gap:0.375rem;background:#f8fafc;padding:0.35rem 0.5rem;border-radius:0.25rem;">
        <span style="width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;">${initial}</span>
        <span style="font-size:0.75rem;font-weight:600;color:#334155;line-height:1.2;white-space:nowrap;">
            ${escHtml(nama)}${sub ? `<span style="font-weight:400;color:#64748b;margin-left:0.25rem;">${escHtml(sub)}</span>` : ''}
        </span>
    </li>`;
}

function openAchModal(a) {
    const membersHtml = a.members && a.members.length > 0 ? `
        <div style="border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;margin-bottom:0.25rem;">
            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.375rem;">Anggota Tim</p>
            <ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem;">
                ${a.members.map(m => memberItem(m.nama, m.angkatan ? `(${m.angkatan})` : '')).join('')}
            </ul>
        </div>` : '';

    renderModal(`
        <!-- Image header: blurred background + contain foreground to show full image in compact height -->
        <div style="position:relative;height:180px;width:100%;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#003150;flex-shrink:0;">
            <!-- Blurred background -->
            <img src="${escHtml(a.image)}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(0.65);transform:scale(1.1);pointer-events:none;"
                onerror="this.style.display='none'">
            <!-- Sharp contain foreground -->
            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="position:relative;width:100%;height:100%;object-fit:contain;z-index:10;"
                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
            <!-- Close button: dark round top-right -->
            <button id="acaab-modal-close" aria-label="Tutup"
                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
                <i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
            </button>
            <!-- Badge bottom-left: Rank -->
            <div style="position:absolute;bottom:0.75rem;left:0.75rem;z-index:20;">
                <span style="background:#feb401;color:#0f172a;font-size:0.7rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:0.25rem;display:inline-block;">
                    ${escHtml(a.rank)}
                </span>
            </div>
        </div>
        <!-- Content -->
        <div style="padding:1rem 1.25rem 1.25rem 1.25rem;">
            <!-- Title -->
            <h2 style="font-size:1.2rem;font-weight:700;color:#003150;line-height:1.3;margin:0 0 0.25rem;font-family:'Roboto', sans-serif;">
                ${escHtml(a.title)}
            </h2>
            
            <!-- Subtitle (Year • Category • Level) -->
            <p style="color:#94a3b8;font-size:0.75rem;font-weight:500;margin:0 0 0.75rem;line-height:1.4;">
                ${escHtml(String(a.year))} &bull; ${escHtml(a.category)} &bull; ${escHtml(a.level)}
            </p>
            
            <!-- Description -->
            <p style="color:#475569;font-size:0.85rem;line-height:1.5;margin:0 0 1rem;">
                ${escHtml(a.description)}
            </p>
            
            ${membersHtml}
            
            <!-- Footer Info Row (Tim & Angkatan) -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;">
                <div>
                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">TIM / PESERTA</p>
                    <p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.team)}</p>
                </div>
                <div>
                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">ANGKATAN</p>
                    <p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.generation)}</p>
                </div>
        </div>
    `, false, 'acaab-modal-achievement');
}

// ─── Projects ─────────────────────────────────────────────────────────────────

const PROJ_INIT = 6;
const PROJ_MORE = 3;

function initProjects() {
    buildProjFilterOptions();
    renderProjects();
    bindProjEvents();
}

function buildProjFilterOptions() {
    const catSel  = document.getElementById('acaab-proj-cat');
    const yearSel = document.getElementById('acaab-proj-year');
    if (!catSel || !yearSel) return;

    const cats  = [...new Set(projects.flatMap(p => p.categories))].sort();
    const years = [...new Set(projects.map(p => String(p.year)))].filter(Boolean).sort((a, b) => b - a);

    catSel.innerHTML  = `<option value="">${escHtml(t('grp_acaab_proj_filter_cat'))}</option>` +
        cats.map(c => `<option value="${escHtml(c)}"${projFilter.cat === c ? ' selected' : ''}>${escHtml(c)}</option>`).join('');
    yearSel.innerHTML = `<option value="">${escHtml(t('grp_acaab_proj_filter_year'))}</option>` +
        years.map(y => `<option value="${escHtml(y)}"${projFilter.year === y ? ' selected' : ''}>${escHtml(y)}</option>`).join('');
}

function filterProjects() {
    const q = projFilter.search.toLowerCase();
    return projects.filter(p => {
        const matchSearch = !q || [p.title, p.studentName, p.description, ...p.categories]
            .some(s => (s || '').toLowerCase().includes(q));
        const matchCat  = !projFilter.cat  || p.categories.includes(projFilter.cat);
        const matchYear = !projFilter.year || String(p.year) === projFilter.year;
        return matchSearch && matchCat && matchYear;
    });
}

function renderProjects() {
    const track    = document.getElementById('acaab-proj-track');
    const moreBtn  = document.getElementById('acaab-proj-more');
    const resetBtn = document.getElementById('acaab-proj-reset');
    if (!track) return;

    const filtered  = filterProjects();
    const visible   = filtered.slice(0, projVisible);
    const hasFilter = projFilter.search || projFilter.cat || projFilter.year;

    if (resetBtn) resetBtn.style.display = hasFilter ? 'flex' : 'none';

    if (filtered.length === 0) {
        track.innerHTML = `<p style="color:#64748b;padding:0.5rem 0;">${escHtml(t('grp_acaab_proj_empty'))}</p>`;
        if (moreBtn) moreBtn.style.display = 'none';
        return;
    }

    track.innerHTML = visible.map((p, i) => projCardHtml(p, i)).join('');
    if (moreBtn) moreBtn.style.display = projVisible < filtered.length ? 'inline-block' : 'none';

    track.querySelectorAll('.acaab-proj-readmore').forEach(btn => {
        btn.addEventListener('click', () => {
            const proj = projects.find(p => p.id === btn.dataset.id);
            if (proj) openProjModal(proj);
        });
    });
}

function projCardHtml(p, idx) {
    const catBadges = p.categories.map(c => `
        <span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.45);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
            <i class="fas fa-tag" style="font-size:0.5rem;"></i>${escHtml(c)}
        </span>`).join('');

    return `
    <div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
        <div class="acaab-proj-left-bar"></div>
        <!-- Image h-52 (208px) dengan title overlay mengikuti lebar teks -->
        <div style="height:208px;overflow:hidden;position:relative;">
            <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" loading="lazy" class="acaab-card-img"
                style="width:100%;height:100%;object-fit:cover;"
                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
            <!-- Overlay hanya di bawah untuk visibility, title pake background inline -->
            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%);pointer-events:none;"></div>
            <div style="position:absolute;bottom:0;left:0;right:0;padding:0.875rem 1rem;">
                <h4 style="font-size:0.9375rem;font-weight:700;color:white;line-height:1.3;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;display:inline;background:rgba(0,49,80,0.75);padding:0.15rem 0.35rem;border-radius:0.2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;backdrop-filter:blur(2px);">${escHtml(p.title)}</h4>
                <div style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem;">${catBadges}</div>
            </div>
        </div>
        <!-- Body p-5 -->
        <div style="padding:1.25rem;display:flex;flex-direction:column;flex-grow:1;">
            <!-- Meta: student + year -->
            <div style="display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-bottom:0.75rem;font-size:0.72rem;color:#64748b;font-weight:500;">
                ${p.studentName ? `<span style="display:flex;align-items:center;gap:0.25rem;"><i class="fas fa-user" style="color:#94a3b8;font-size:0.6rem;"></i>${escHtml(p.studentName)}</span>` : ''}
                ${p.year ? `<span style="display:flex;align-items:center;gap:0.25rem;"><i class="fas fa-calendar-alt" style="color:#94a3b8;font-size:0.6rem;"></i>${escHtml(String(p.year))}</span>` : ''}
            </div>
            <!-- Description 3 lines -->
            <p class="acaab-line-clamp-3" style="color:#475569;font-size:0.875rem;line-height:1.6;margin:0 0 1.25rem;flex-grow:1;">${escHtml(p.description)}</p>
            <!-- Actions -->
            <div style="display:flex;align-items:center;gap:0.625rem;margin-top:auto;">
                <button class="acaab-proj-readmore" data-id="${escHtml(p.id)}"
                    style="color:#003150;font-weight:700;font-size:0.875rem;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:0.375rem;min-height:44px;">
                    ${escHtml(t('grp_acaab_modal_read_more'))} <i class="fas fa-arrow-right" style="font-size:0.7rem;"></i>
                </button>
                ${p.link ? `
                <a href="${escHtml(p.link)}" target="_blank" rel="noopener noreferrer"
                    style="margin-left:auto;display:flex;align-items:center;gap:0.375rem;font-size:0.72rem;font-weight:700;color:#64748b;border:1px solid #e2e8f0;border-radius:0.375rem;padding:0.375rem 0.625rem;text-decoration:none;min-height:44px;transition:color 0.2s,border-color 0.2s;">
                    <i class="fas fa-external-link-alt" style="font-size:0.65rem;"></i>${escHtml(t('grp_acaab_modal_visit'))}
                </a>` : ''}
            </div>
        </div>
    </div>`;
}

function bindProjEvents() {
    const search  = document.getElementById('acaab-proj-search');
    const cat     = document.getElementById('acaab-proj-cat');
    const year    = document.getElementById('acaab-proj-year');
    const reset   = document.getElementById('acaab-proj-reset');
    const moreBtn = document.getElementById('acaab-proj-more');
    const prevBtn = document.getElementById('acaab-proj-prev');
    const nextBtn = document.getElementById('acaab-proj-next');

    const onChange = () => {
        projFilter.search = search ? search.value.trim() : '';
        projFilter.cat    = cat    ? cat.value    : '';
        projFilter.year   = year   ? year.value   : '';
        projVisible = PROJ_INIT;
        renderProjects();
    };

    if (search) search.addEventListener('input',  onChange);
    if (cat)    cat.addEventListener('change',    onChange);
    if (year)   year.addEventListener('change',   onChange);

    if (reset) reset.addEventListener('click', () => {
        projFilter = { search: '', cat: '', year: '' };
        if (search) search.value = '';
        if (cat)    cat.value    = '';
        if (year)   year.value   = '';
        projVisible = PROJ_INIT;
        renderProjects();
    });

    if (moreBtn) moreBtn.addEventListener('click', () => { projVisible += PROJ_MORE; renderProjects(); });

    const track = document.getElementById('acaab-proj-track');
    if (prevBtn && track) prevBtn.addEventListener('click', () => {
        const cardW = (track.firstElementChild ? track.firstElementChild.offsetWidth : 300) + 20;
        track.scrollBy({ left: -cardW, behavior: 'smooth' });
    });
    if (nextBtn && track) nextBtn.addEventListener('click', () => {
        const cardW = (track.firstElementChild ? track.firstElementChild.offsetWidth : 300) + 20;
        track.scrollBy({ left: cardW, behavior: 'smooth' });
    });
}

// ─── Project Modal ────────────────────────────────────────────────────────────

function openProjModal(p) {
    const membersHtml = p.members && p.members.length > 0 ? `
        <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
            <ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
                ${p.members.map(m => memberItem(m.nama, m.nim || '')).join('')}
            </ul>
        </div>` : '';

    const catBadgesImg = p.categories.map(c => `
        <span style="background:#feb401;color:#0f172a;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;display:inline-flex;align-items:center;gap:0.375rem;text-transform:uppercase;letter-spacing:0.05em;">
            <i class="fas fa-tag" style="font-size:0.6rem;"></i>${escHtml(c)}
        </span>`).join('');

    const linkSection = p.link
        ? `<a href="${escHtml(p.link)}" target="_blank" rel="noopener noreferrer"
                style="display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.75rem;background:#003150;color:white;font-weight:700;border-radius:0.5rem;font-size:0.875rem;text-decoration:none;margin-bottom:0.625rem;">
                <i class="fas fa-external-link-alt" style="font-size:0.8rem;"></i>${escHtml(t('grp_acaab_modal_visit'))}
           </a>`
        : `<div style="display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.75rem;background:#f1f5f9;color:#94a3b8;font-weight:700;border-radius:0.5rem;font-size:0.875rem;margin-bottom:0.625rem;cursor:not-allowed;">
                <i class="fas fa-file-alt" style="font-size:0.8rem;"></i>${escHtml(t('grp_acaab_modal_no_link'))}
           </div>`;

    renderModal(`
        <!-- Image header h-70 (280px) -->
        <div style="position:relative;height:280px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
            <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
                onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 55%,transparent 100%);pointer-events:none;"></div>
            <!-- Close button: dark round top-right -->
            <button id="acaab-modal-close" aria-label="Tutup"
                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
                <i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
            </button>
            <!-- Category badges bottom-left -->
            <div style="position:absolute;bottom:1rem;left:1rem;display:flex;flex-wrap:wrap;gap:0.375rem;">${catBadgesImg}</div>
        </div>
        <!-- Content -->
        <div style="padding:1.5rem;">
            <h2 style="font-size:1.125rem;font-weight:700;color:#003150;line-height:1.3;margin:0 0 1.25rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(p.title)}</h2>
            <!-- Info grid -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#f8fafc;border-radius:0.5rem;margin-bottom:1.25rem;">
                ${p.studentName ? infoRow('users', t('grp_acaab_modal_team'), p.studentName) : ''}
                ${p.nim ? infoRow('id-card', 'NIM', p.nim) : ''}
                ${infoRow('calendar-alt', 'Tahun', String(p.year))}
                ${infoRow('tag', 'Bidang', p.categories.join(', '))}
            </div>
            ${membersHtml}
            <!-- Description -->
            <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1.25rem;">
                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
                <p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(p.description)}</p>
                ${p.catatan ? `
                <div style="margin-top:1rem;padding:0.75rem;background:rgba(239,246,255,0.5);border:1px solid #bfdbfe;border-radius:0.5rem;">
                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;color:#93c5fd;margin:0 0 0.25rem;">Catatan Tambahan</p>
                    <p style="font-size:0.875rem;color:#475569;font-style:italic;margin:0;">${escHtml(p.catatan)}</p>
                </div>` : ''}
            </div>
            <!-- Link + close buttons -->
            ${linkSection}
            <button id="acaab-modal-close-btn" style="width:100%;padding:0.625rem;border:2px solid #e2e8f0;color:#475569;font-weight:700;background:white;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;transition:border-color 0.2s,background 0.2s;">
                Tutup
            </button>
        </div>
    `, true, 'acaab-modal-project');
}

// ─── Modal shared ─────────────────────────────────────────────────────────────

function renderModal(innerHtml, hasCloseBtn = false, customClass = '') {
    const container = document.getElementById('acaab-modal');
    if (!container) return;

    container.innerHTML = `
        <div class="acaab-modal-backdrop" id="acaab-modal-bd">
            <div class="${customClass}" style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
                ${innerHtml}
            </div>
        </div>`;

    document.body.classList.add('acaab-modal-open');

    document.getElementById('acaab-modal-close')?.addEventListener('click', closeModal);
    if (hasCloseBtn) {
        document.getElementById('acaab-modal-close-btn')?.addEventListener('click', closeModal);
    }
    document.getElementById('acaab-modal-bd').addEventListener('click', e => {
        if (e.target === e.currentTarget) closeModal();
    });
    document.addEventListener('keydown', onEsc);
}

function closeModal() {
    const c = document.getElementById('acaab-modal');
    if (c) c.innerHTML = '';
    document.body.classList.remove('acaab-modal-open');
    document.removeEventListener('keydown', onEsc);
}

function onEsc(e) { if (e.key === 'Escape') closeModal(); }

// ─── CTA / WhatsApp ───────────────────────────────────────────────────────────

const WA_NUMBER = '6285177655161';

function initWaButton() { updateWaButton(); }

function updateWaButton() {
    const btn = document.getElementById('acaab-cta-wa');
    if (!btn) return;
    const msg = getLang() === 'en'
        ? 'Hello! I would like to know more about Informatika UNTAN student achievements and projects.'
        : 'Halo! Saya ingin mengetahui lebih lanjut tentang prestasi dan karya mahasiswa Informatika UNTAN.';
    btn.href = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;
}

// ─── Placeholder sync ─────────────────────────────────────────────────────────

function updateSearchPlaceholders() {
    const s1 = document.getElementById('acaab-ach-search');
    const s2 = document.getElementById('acaab-proj-search');
    if (s1) s1.placeholder = t('grp_acaab_ach_search');
    if (s2) s2.placeholder = t('grp_acaab_proj_search');
}