{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Sistem Perancangan & Penilaian Bersepadu (SPPB) — KKM" %}{% endblock %}
{% block breadcrumb %}{% endblock %}

{% block center_nav %}
    {% if user.is_authenticated and not user.is_staff and not user.is_superuser %}
        {% else %}
        {{ block.super }}
    {% endif %}
{% endblock %}

{% block content %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700;800;900&display=swap');
    
    /* Animasi Lanjutan */
    @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
    @keyframes floatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
    @keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: scale(1); box-shadow: 0 0 20px rgba(245,158,11,0.2); } 50% { opacity: 1; transform: scale(1.05); box-shadow: 0 0 40px rgba(245,158,11,0.6); } }
    @keyframes slideUpFade { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes blobBounce { 0% { transform: scale(1) translate(0, 0); } 33% { transform: scale(1.1) translate(30px, -50px); } 66% { transform: scale(0.9) translate(-20px, 20px); } 100% { transform: scale(1) translate(0, 0); } }
    
    .float-anim { animation: floatY 6s ease-in-out infinite; }
    .float-anim-alt { animation: floatX 8s ease-in-out infinite; }
    .pulse-dot { animation: pulseGlow 2.5s ease-in-out infinite; }
    .blob { animation: blobBounce 15s infinite alternate; }
    
    .stagger-reveal > * { opacity: 0; animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .stagger-reveal > *:nth-child(1) { animation-delay: 0.1s; }
    .stagger-reveal > *:nth-child(2) { animation-delay: 0.2s; }
    .stagger-reveal > *:nth-child(3) { animation-delay: 0.3s; }
    .stagger-reveal > *:nth-child(4) { animation-delay: 0.4s; }

    /* Custom FAQ Accordion */
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] summary ~ * { animation: slideUpFade 0.4s ease-out; }
    
    /* Paksa sembunyikan sebarang bar putih, penanda lokasi, atau breadcrumb di bawah header */
    nav:has(.fa-map-marker-alt), .breadcrumb-wrapper, [id*="breadcrumb"], 
    div:has(> .fa-map-marker-alt), main > div:first-child, .bg-white:has(.fa-map-marker-alt) { 
        display: none !important; 
        height: 0 !important; 
        padding: 0 !important; 
        margin: 0 !important;
    }
</style>

<div class="relative w-[100vw] left-1/2 -translate-x-1/2 overflow-hidden -mt-8 pt-16 md:pt-28 pb-16 px-4 sm:px-8"
     style="background-image: 
            radial-gradient(rgba(148, 163, 184, 0.15) 2px, transparent 2px),
            linear-gradient(to bottom, #0a0f1d 0%, #0f172a 20%, #1e293b 40%, #f8fafc 65%, #ffffff 100%);
            background-size: 40px 40px, 100% 100%;
            background-position: 0 0, 0 0;">

    <div class="absolute top-[-5%] left-[-10%] w-[500px] h-[500px] rounded-full bg-blue-600/30 blur-[100px] mix-blend-screen blob pointer-events-none"></div>
    <div class="absolute top-[10%] right-[-10%] w-[600px] h-[600px] rounded-full bg-teal-500/20 blur-[120px] mix-blend-screen blob pointer-events-none" style="animation-delay: 2s;"></div>
    
    <div class="relative max-w-[1200px] mx-auto px-6 text-center z-10 mb-32">
        
        <div class="inline-flex items-center gap-2 bg-blue-500/20 border border-blue-400/30 text-blue-200 text-[10px] font-black tracking-widest uppercase px-5 py-2 rounded-full mb-8 shadow-sm transform hover:scale-105 transition-transform cursor-default opacity-0" style="animation: slideUpFade 0.8s forwards;">
            <i class="fas fa-brain text-blue-300 pulse-dot"></i>
            {% trans "ENJIN PENGGUBAL DASAR KESIHATAN DIGITAL" %}
        </div>

        <h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-white leading-[1.1] mb-6 tracking-tight opacity-0 drop-shadow-2xl" style="font-family:'Noto Serif', Georgia, serif; animation: slideUpFade 0.8s 0.2s forwards;">
            {% trans "PLATFORM PERANCANGAN &" %} <br class="hidden md:block">
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-300 via-emerald-400 to-teal-500">{% trans "PENILAIAN BERSEPADU" %}</span>
        </h1>

        <p class="text-slate-300 text-base md:text-lg leading-relaxed max-w-3xl mx-auto mb-10 font-medium opacity-0" style="animation: slideUpFade 0.8s 0.4s forwards;">
            {% trans "Mensintesis aduan lapangan dan kepakaran SME menjadi Pelan Tindakan Strategik secara berpusat, dikuasakan oleh Kecerdasan Buatan AI." %}
        </p>

        <div class="flex flex-col sm:flex-row justify-center items-center gap-5 opacity-0 mb-16" style="animation: slideUpFade 0.8s 0.6s forwards;">
            {% if user.is_authenticated %}
                <a href="{% if user.is_superuser %}{% url 'superadmin:dashboard' %}{% elif user.is_staff %}{% url 'bengkel:penganjur_home' %}{% else %}{% url 'bengkel:dashboard' %}{% endif %}" class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl font-black text-sm uppercase text-slate-900 transition-all hover:-translate-y-1 shadow-[0_10px_30px_rgba(245,158,11,0.3)] active:scale-[0.98]" style="background: linear-gradient(135deg, #fde68a, #f59e0b);">
                    <i class="fas fa-columns text-lg"></i> {% trans "AKSES RUANG KERJA" %}
                </a>
            {% else %}
                <a href="{% url 'login' %}" target="_blank" class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl font-black text-sm uppercase text-white transition-all hover:-translate-y-1 shadow-[0_10px_30px_rgba(37,99,235,0.4)] active:scale-[0.98]" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
                    <i class="fas fa-sign-in-alt text-lg"></i> {% trans "LOG MASUK SISTEM" %}
                </a>
            {% endif %}
                <a href="{% url 'bengkel:portal_list' %}" class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl font-black text-sm uppercase text-white bg-white/10 backdrop-blur-md hover:bg-white/20 transition-all border border-white/20 hover:border-white/40 shadow-lg">
                    {% trans "TEROKA ACARA TERBUKA" %} <i class="fas fa-arrow-right"></i>
                </a>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto opacity-0" style="animation: slideUpFade 0.8s 0.8s forwards;">
            <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors">
                <div class="text-blue-300 text-[10px] font-black uppercase tracking-widest mb-1">{% trans "KORPUS DIINDEKS" %}</div>
                <div class="text-2xl font-black text-white">1.2M+ <span class="text-[10px] font-bold text-slate-400">{% trans "PERKATAAN" %}</span></div>
            </div>
            <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors">
                <div class="text-emerald-300 text-[10px] font-black uppercase tracking-widest mb-1">{% trans "PAKAR DOMAIN" %}</div>
                <div class="text-2xl font-black text-white">300+ <span class="text-[10px] font-bold text-slate-400">{% trans "SME AKTIF" %}</span></div>
            </div>
            <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors">
                <div class="text-amber-300 text-[10px] font-black uppercase tracking-widest mb-1">{% trans "MODUL DINILAI" %}</div>
                <div class="text-2xl font-black text-white">92% <span class="text-[10px] font-bold text-slate-400">{% trans "KETEPATAN AI" %}</span></div>
            </div>
            <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 text-center hover:bg-white/10 transition-colors">
                <div class="text-purple-300 text-[10px] font-black uppercase tracking-widest mb-1">{% trans "PELAN TINDAKAN" %}</div>
                <div class="text-2xl font-black text-white">24 <span class="text-[10px] font-bold text-slate-400">{% trans "DIJANA AUTOMATIK" %}</span></div>
            </div>
        </div>
    </div>


    <div id="cara-guna" class="max-w-[1500px] mx-auto px-4 sm:px-6 mb-32 relative z-20">
        <div class="text-center mb-16 stagger-reveal">
            <span class="text-[10px] font-black uppercase tracking-widest text-blue-300 bg-blue-500/20 border border-blue-400/30 px-4 py-2 rounded-full mb-4 inline-block shadow-sm backdrop-blur-sm">{% trans "SENI BINA ALIRAN KERJA KOGNITIF" %}</span>
            <h2 class="text-3xl md:text-4xl font-black text-white tracking-tight drop-shadow-md" style="font-family:'Noto Serif', Georgia, serif;">{% trans "SIKLUS PENGGUBALAN PELAN TINDAKAN IPES" %}</h2>
            <p class="text-base text-blue-100/70 mt-3 max-w-2xl mx-auto font-medium">{% trans "Rangkaian proses end-to-end yang menggabungkan kecerdasan buatan dan ketelusan kepakaran pakar domain." %}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative stagger-reveal">
            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6 relative flex flex-col group hover:bg-white/15 hover:shadow-xl transition-all duration-300">
                <div class="w-14 h-14 bg-blue-500/20 rounded-2xl flex items-center justify-center text-blue-300 border border-blue-400/30 shadow-inner mb-6 transform group-hover:rotate-6 transition-transform">
                    <i class="fas fa-database text-xl"></i>
                </div>
                <div class="absolute top-6 right-6 font-mono font-black text-white/10 text-3xl group-hover:text-white/20 transition-colors">01</div>
                <h3 class="font-black text-white text-lg mb-2">{% trans "1. KORPUS & RETRIEVEL-AUGMENTED GENERATION (RAG) INDEXING" %}</h3>
                <p class="text-xs text-blue-100/70 leading-relaxed mb-4 flex-1">{% trans "Tahap membina perpustakaan ilmu kesihatan digital berasaskan rujukan sahih organisasi." %}</p>
                <div class="border-t border-white/10 pt-3 space-y-2 mt-auto">
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-blue-400 text-xs"></i> <span>{% trans "EKSTRAKAN TEKS PDF & WORD" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-blue-400 text-xs"></i> <span>{% trans "AUDIT NOMBOR NOVELTY AI" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-blue-400 text-xs"></i> <span>{% trans "PEMETAAN VEKTOR PANGKALAN DATA" %}</span></div>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6 relative flex flex-col group hover:bg-white/15 hover:shadow-xl transition-all duration-300">
                <div class="w-14 h-14 bg-emerald-500/20 rounded-2xl flex items-center justify-center text-emerald-300 border border-emerald-400/30 shadow-inner mb-6 transform group-hover:-rotate-6 transition-transform">
                    <i class="fas fa-search-plus text-xl"></i>
                </div>
                <div class="absolute top-6 right-6 font-mono font-black text-white/10 text-3xl group-hover:text-white/20 transition-colors">02</div>
                <h3 class="font-black text-white text-lg mb-2">{% trans "2. SPAF & ANALISIS PUNCA" %}</h3>
                <p class="text-xs text-blue-100/70 leading-relaxed mb-4 flex-1">{% trans "Proses menterjemah rintangan harian (Pain Points) peserta kepada rantaian punca masalah konkrit." %}</p>
                <div class="border-t border-white/10 pt-3 space-y-2 mt-auto">
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-emerald-400 text-xs"></i> <span>{% trans "IMBASAN SWOT, PESTEL & 5C" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-emerald-400 text-xs"></i> <span>{% trans "RANTAIAN KLUSTER 5-WHYS & FTA" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-emerald-400 text-xs"></i> <span>{% trans "MATRIKS RISIKO & MITIGASI" %}</span></div>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6 relative flex flex-col group hover:bg-white/15 hover:shadow-xl transition-all duration-300">
                <div class="w-14 h-14 bg-amber-500/20 rounded-2xl flex items-center justify-center text-amber-300 border border-amber-400/30 shadow-inner mb-6 transform group-hover:rotate-6 transition-transform">
                    <i class="fas fa-users-cog text-xl"></i>
                </div>
                <div class="absolute top-6 right-6 font-mono font-black text-white/10 text-3xl group-hover:text-white/20 transition-colors">03</div>
                <h3 class="font-black text-white text-lg mb-2">{% trans "3. KONSENSUS & VALIDASI" %}</h3>
                <p class="text-xs text-blue-100/70 leading-relaxed mb-4 flex-1">{% trans "Peringkat kritikal semak dan imbang (Human-in-the-Loop) bagi memastikan ketepatan cadangan AI." %}</p>
                <div class="border-t border-white/10 pt-3 space-y-2 mt-auto">
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-amber-400 text-xs"></i> <span>{% trans "UNDIAN & SUNTIKAN IDEA TEMA" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-amber-400 text-xs"></i> <span>{% trans "SARINGAN BANTAHAN SPAF REALITI" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-amber-400 text-xs"></i> <span>{% trans "KALIBRASI SASARAN KPI REALISTIK" %}</span></div>
                </div>
            </div>

            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6 relative flex flex-col group hover:bg-white/15 hover:shadow-xl transition-all duration-300">
                <div class="w-14 h-14 bg-purple-500/20 rounded-2xl flex items-center justify-center text-purple-300 border border-purple-400/30 shadow-inner mb-6 transform group-hover:-rotate-6 transition-transform">
                    <i class="fas fa-scroll text-xl"></i>
                </div>
                <div class="absolute top-6 right-6 font-mono font-black text-white/10 text-3xl group-hover:text-white/20 transition-colors">04</div>
                <h3 class="font-black text-white text-lg mb-2">{% trans "4. TUNJANG DASAR" %}</h3>
                <p class="text-xs text-blue-100/70 leading-relaxed mb-4 flex-1">{% trans "Peringkat akhir di mana dokumen induk (Laporan Strategik) dirumuskan dan dikunci secara rasmi." %}</p>
                <div class="border-t border-white/10 pt-3 space-y-2 mt-auto">
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-purple-400 text-xs"></i> <span>{% trans "ROADMAP KRONOLOGI 6 FASA" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-purple-400 text-xs"></i> <span>{% trans "UNJURAN SKALA KOS CAPEX/OPEX" %}</span></div>
                    <div class="flex items-center gap-2 text-[11px] text-white font-medium"><i class="fas fa-check-circle text-purple-400 text-xs"></i> <span>{% trans "PENJANAAN FAIL PDF EKSEKUTIF" %}</span></div>
                </div>
            </div>
        </div>
    </div>


    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 mb-32 stagger-reveal">
        <div class="border-t border-white/10 pt-16">
            <div class="text-center mb-12">
                <span class="text-[10px] font-black uppercase tracking-widest text-slate-500 bg-slate-200/50 border border-slate-300/50 px-4 py-2 rounded-full mb-4 inline-block shadow-sm backdrop-blur-sm">{% trans "AKAUNTABILITI PENGGUNA" %}</span>
                <h2 class="text-3xl md:text-4xl font-black text-slate-800 tracking-tight" style="font-family:'Noto Serif', Georgia, serif;">{% trans "PERANAN ANDA DALAM EKOSISTEM IPES" %}</h2>
                <p class="text-sm text-slate-500 mt-3 max-w-xl mx-auto font-medium">{% trans "Sistem ini membahagikan tanggungjawab kepada dua entiti utama untuk memastikan kelancaran interaksi dasar." %}</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto text-left">
                <div class="bg-white/80 backdrop-blur-xl border border-slate-200 rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden group hover:shadow-2xl transition-all">
                    <div class="absolute -right-6 -bottom-6 text-slate-800 text-7xl font-black pointer-events-none opacity-[0.03] group-hover:scale-110 transition-transform"><i class="fas fa-user-md"></i></div>
                    
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center text-xl shrink-0 border border-blue-200 shadow-inner">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div>
                            <h3 class="font-black text-slate-800 text-base leading-tight">{% trans "SAYA SEBAGAI PESERTA / PAKAR RUJUK (SME)" %}</h3>
                            <p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest mt-0.5">{% trans "PENYUMBANG AKAR UMBI" %}</p>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500 leading-relaxed mb-5 font-medium">{% trans "Tanggungjawab anda adalah menyalurkan data realiti operasi, mendepani isu teknikal di fasiliti, dan menyumbang dokumen rujukan dasar." %}</p>
                    
                    <div class="space-y-2.5 bg-slate-50/50 p-4 rounded-2xl border border-slate-100 shadow-inner relative z-10">
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-blue-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "MUAT NAIK RUJUKAN:" %}</strong> {% trans "Menyediakan fail SOP, draf awal & pekeliling agensi." %}</span></div>
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-blue-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "PEMETAAN SPAF:" %}</strong> {% trans "Mengisi aduan Pain Points & mencerudi punca (RCA)." %}</span></div>
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-blue-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "UNDIAN & HAK DNA:" %}</strong> {% trans "Mengundi keutamaan tema & menyuntik idea skop dasar." %}</span></div>
                    </div>
                </div>

                <div class="bg-white/80 backdrop-blur-xl border border-slate-200 rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden group hover:shadow-2xl transition-all">
                    <div class="absolute -right-6 -bottom-6 text-slate-800 text-7xl font-black pointer-events-none opacity-[0.03] group-hover:scale-110 transition-transform"><i class="fas fa-building"></i></div>
                    
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center text-xl shrink-0 border border-amber-200 shadow-inner">
                            <i class="fas fa-users-cog"></i>
                        </div>
                        <div>
                            <h3 class="font-black text-slate-800 text-base leading-tight">{% trans "SAYA SEBAGAI URUSETIA / PENGANJUR BENGKEL" %}</h3>
                            <p class="text-[10px] font-bold text-amber-600 uppercase tracking-widest mt-0.5">{% trans "ARSITEK & MODIFIKASI LAPORAN" %}</p>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500 leading-relaxed mb-5 font-medium">{% trans "Kuasa anda adalah mengurus logistik dewan, memantau data penyertaan, mengawal selia enjin AI, serta mengesahkan laporan strategi." %}</p>
                    
                    <div class="space-y-2.5 bg-slate-50/50 p-4 rounded-2xl border border-slate-100 shadow-inner relative z-10">
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-amber-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "KAWALAN LOGISTIK DEWAN:" %}</strong> {% trans "Menjana pautan tiket QR & pelan lantai interaktif." %}</span></div>
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-amber-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "PENCETUS METRIK AI:" %}</strong> {% trans "Klik butang untuk paksa AI mengekstrak kualiti fail korpus." %}</span></div>
                        <div class="flex items-center gap-2.5 text-xs text-slate-700 font-medium"><i class="fas fa-arrow-alt-circle-right text-amber-500 shrink-0"></i> <span><strong class="text-slate-800">{% trans "SINTESIS KEBANGSAAN:" %}</strong> {% trans "Menggabungkan idea bertindih SME menjadi rantaian Blueprint." %}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="max-w-[1000px] mx-auto px-4 sm:px-6 mb-28 stagger-reveal">
        <div class="text-center mb-12">
            <span class="text-[10px] font-black uppercase tracking-widest text-slate-500 bg-slate-200/50 border border-slate-300/50 px-4 py-2 rounded-full mb-4 inline-block shadow-sm backdrop-blur-sm">{% trans "BANTUAN & SOKONGAN" %}</span>
            <h2 class="text-3xl md:text-4xl font-black text-slate-800 tracking-tight" style="font-family:'Noto Serif', Georgia, serif;">{% trans "SOALAN LAZIM (FAQ)" %}</h2>
        </div>

        <div class="space-y-4">
            <details class="group bg-white rounded-2xl border border-slate-200 shadow-md hover:shadow-lg hover:border-blue-300 transition-all overflow-hidden [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer bg-slate-50/50 group-open:bg-blue-50 transition-colors">
                    <span class="text-base font-black text-slate-800 group-open:text-blue-700">{% trans "APA ITU IPES DAN BAGAIMANA IA BERBEZA DENGAN PORTAL BORANG BIASA?" %}</span>
                    <span class="transition-transform duration-300 group-open:rotate-180 text-slate-400 group-open:text-blue-600 w-8 h-8 rounded-full flex items-center justify-center group-hover:bg-slate-200 group-open:bg-blue-100 shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </summary>
                <div class="p-6 pt-2 text-sm text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100 mt-2">
                    {% trans "IPES (Sistem Perancangan & Penilaian Bersepadu) bukan sekadar tempat mengumpul aduan. Ia dilengkapi enjin AI yang menganalisis beribu-ribu masalah lapangan dan dokumen dasar, lalu memetakannya secara automatik menjadi Teras, Strategi, KPI, dan Pelan Tindakan yang tersusun untuk pihak KKM." %}
                </div>
            </details>

            <details class="group bg-white rounded-2xl border border-slate-200 shadow-md hover:shadow-lg hover:border-blue-300 transition-all overflow-hidden [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer bg-slate-50/50 group-open:bg-blue-50 transition-colors">
                    <span class="text-base font-black text-slate-800 group-open:text-blue-700">{% trans "SIAPAKAH YANG LAYAK MENDAFTAR DAN MENYUMBANG SEBAGAI SME?" %}</span>
                    <span class="transition-transform duration-300 group-open:rotate-180 text-slate-400 group-open:text-blue-600 w-8 h-8 rounded-full flex items-center justify-center group-hover:bg-slate-200 group-open:bg-blue-100 shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </summary>
                <div class="p-6 pt-2 text-sm text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100 mt-2">
                    {% trans "Semua warga kerja kementerian terutamanya Pegawai Perubatan, Pakar IT, dan Pengurusan Tertinggi dialu-alukan. Kepelbagaian latar belakang memastikan AI mendapat konteks ilmu (korpus) yang sangat menyeluruh daripada pelbagai sudut operasi dan dasar." %}
                </div>
            </details>

            <details class="group bg-white rounded-2xl border border-slate-200 shadow-md hover:shadow-lg hover:border-blue-300 transition-all overflow-hidden [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer bg-slate-50/50 group-open:bg-blue-50 transition-colors">
                    <span class="text-base font-black text-slate-800 group-open:text-blue-700">{% trans "ADAKAH AI MEMBUAT KEPUTUSAN DASAR SECARA AUTOMATIK?" %}</span>
                    <span class="transition-transform duration-300 group-open:rotate-180 text-slate-400 group-open:text-blue-600 w-8 h-8 rounded-full flex items-center justify-center group-hover:bg-slate-200 group-open:bg-blue-100 shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </summary>
                <div class="p-6 pt-2 text-sm text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100 mt-2">
                    {% trans "Tidak. Kami sangat memandang serius isu ketepatan fakta. Platform ini menggunakan pendekatan 'Human-in-the-Loop'. Setiap Pelan Tindakan dan draf bajet yang dijana oleh AI WAJIB melalui proses undian, bantahan, dan suntingan akhir (kalibrasi) oleh pakar manusia sebelum ia dimuktamadkan." %}
                </div>
            </details>

            <details class="group bg-white rounded-2xl border border-slate-200 shadow-md hover:shadow-lg hover:border-blue-300 transition-all overflow-hidden [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer bg-slate-50/50 group-open:bg-blue-50 transition-colors">
                    <span class="text-base font-black text-slate-800 group-open:text-blue-700">{% trans "BAGAIMANAKAH SISTEM GAMIFIKASI DAN PEMARKAHAN BERFUNGSI?" %}</span>
                    <span class="transition-transform duration-300 group-open:rotate-180 text-slate-400 group-open:text-blue-600 w-8 h-8 rounded-full flex items-center justify-center group-hover:bg-slate-200 group-open:bg-blue-100 shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </summary>
                <div class="p-6 pt-2 text-sm text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100 mt-2">
                    {% trans "Sistem memberikan markah berdasarkan kualiti penyelesaian, bukan kuantiti aduan. Enjin AI akan menilai setiap dokumen yang anda muat naik. Jika ia mempunyai penyelesaian yang tinggi (Actionability) dan unik (Novelty), anda akan memanjat carta 'Papan Pendahulu' dengan lebih pantas." %}
                </div>
            </details>

            <details class="group bg-white rounded-2xl border border-slate-200 shadow-md hover:shadow-lg hover:border-blue-300 transition-all overflow-hidden [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-6 cursor-pointer bg-slate-50/50 group-open:bg-blue-50 transition-colors">
                    <span class="text-base font-black text-slate-800 group-open:text-blue-700">{% trans "ADAKAH DATA JABATAN SAYA SELAMAT?" %}</span>
                    <span class="transition-transform duration-300 group-open:rotate-180 text-slate-400 group-open:text-blue-600 w-8 h-8 rounded-full flex items-center justify-center group-hover:bg-slate-200 group-open:bg-blue-100 shrink-0">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </summary>
                <div class="p-6 pt-2 text-sm text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100 mt-2">
                    {% trans "Ya. Dokumen disimpan secara terasing mengikut profil penganjur. Data tersebut hanya diindeks oleh AI untuk tujuan pengekstrakan teks tanpa menyerap nama sulit pesakit. Namun, kami menasihatkan agar anda menyunting data pesakit terahsia (redact) sebelum memuat naiknya." %}
                </div>
            </details>
        </div>
    </div>


    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 pb-16 stagger-reveal">
        <div class="bg-[#0a0f1d] rounded-[3rem] p-12 md:p-16 text-center shadow-2xl relative overflow-hidden group border border-slate-700/50">
            
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,0.8) 1px,transparent 1px);background-size:30px 30px;"></div>
            
            <div class="absolute -right-20 -bottom-20 w-80 h-80 bg-blue-600/30 rounded-full blur-[80px] mix-blend-screen opacity-60 group-hover:scale-150 transition-transform duration-1000"></div>
            <div class="absolute -left-20 -top-20 w-80 h-80 bg-amber-500/20 rounded-full blur-[80px] mix-blend-screen opacity-60 group-hover:scale-150 transition-transform duration-1000 delay-100"></div>

            <div class="relative z-10">
                <div class="w-20 h-20 bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mx-auto mb-8 shadow-inner transform group-hover:rotate-12 transition-transform duration-500">
                    <i class="fas fa-lightbulb text-4xl text-amber-300 drop-shadow-[0_0_15px_rgba(253,230,138,0.8)]"></i>
                </div>
                
                <h2 class="text-4xl md:text-5xl font-black text-white mb-6 tracking-tight drop-shadow-md" style="font-family:'Noto Serif', Georgia, serif;">
                    {% trans "SUMBANGKAN PERSPEKTIF ANDA HARI INI" %}
                </h2>
                <p class="text-blue-100 text-base md:text-lg max-w-2xl mx-auto mb-10 font-medium leading-relaxed">
                    {% trans "Setiap permasalahan yang anda kongsikan adalah satu langkah ke arah mendigitalkan dan menambah baik kualiti perkhidmatan kesihatan negara." %}
                </p>
                
                <div class="flex flex-col sm:flex-row justify-center gap-5">
                    <a href="{% url 'bengkel:portal_list' %}" class="inline-flex items-center justify-center gap-3 px-10 py-4 rounded-2xl font-black text-sm uppercase text-slate-900 transition-all hover:-translate-y-1 shadow-[0_10px_30px_rgba(245,158,11,0.3)] active:scale-[0.98]" style="background: linear-gradient(135deg, #fde68a, #f59e0b);">
                        <i class="fas fa-paper-plane text-lg"></i> {% trans "HANTAR PERNYATAAN" %}
                    </a>
                    
                    {% if not user.is_authenticated %}
                    <a href="{% url 'login' %}" target="_blank" class="inline-flex items-center justify-center gap-3 px-10 py-4 rounded-2xl font-bold text-sm uppercase text-white bg-white/10 hover:bg-white/20 border border-white/20 backdrop-blur-md transition-all shadow-md">
                        <i class="fas fa-user-shield text-lg"></i> {% trans "PORTAL ADMIN" %}
                    </a>
                    {% else %}
                    <a href="{% url 'bengkel:list' %}" class="inline-flex items-center justify-center gap-3 px-10 py-4 rounded-2xl font-bold text-sm uppercase text-white bg-white/10 hover:bg-white/20 border border-white/20 backdrop-blur-md transition-all shadow-md">
                        <i class="fas fa-database text-lg"></i> {% trans "SEMAK SENARAI DATA" %}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

</div> {% endblock %}