{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Hab Analitikal (SPAF)" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Pusat Kawalan AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Hab Analitikal SPAF</span>
{% endblock %}

{% block content %}


<div class="animate-fade-up pb-10">
    <div class="max-w-[1600px] w-full mx-auto flex-1 flex flex-col">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-rose-900 via-indigo-900 to-slate-900 rounded-2xl px-8 py-7 mb-8 shadow-lg border border-slate-800">
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px;"></div>
            
            <div class="relative flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-white/70 hover:text-white bg-white/10 hover:bg-white/20 w-10 h-10 rounded-full flex items-center justify-center transition shadow-sm border border-white/20 backdrop-blur-sm" title="Kembali ke Pusat Kawalan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-rose-500/20 border border-rose-400/30 text-rose-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-microchip"></i> Fasa 2: Pengekstrakan Kognitif
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Kerangka Analitikal (SPAF)</h1>
                        <p class="text-white/70 text-sm mt-1">Urutan pemprosesan Ejen LM Tempatan sebelum menjana Tema Teras.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-slate-800/50 border border-slate-600 text-slate-200 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        Progres Analisis Keseluruhan: <span class="text-emerald-400 ml-2">66%</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 flex-1">
            <div class="mb-8 text-center max-w-2xl mx-auto">
                <h2 class="text-xl font-black text-slate-800">Urutan Modular SPAF</h2>
                <p class="text-xs text-slate-500 mt-2">Sila klik modul di bawah untuk memaparkan visualisasi data secara masa nyata bagi setiap fasa pemprosesan AI.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-10 relative">
                
                <div class="relative step-connector group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_painpoint' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-rose-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-rose-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-rose-500 group-hover:text-white transition-colors">1</div>
                            <span class="bg-rose-100 text-rose-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2">Analitik Masalah (Pain Points)</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Pengumpulan dan pemadanan aduan mentah dari keseluruhan peserta.</p>
                        <button class="w-full bg-rose-50 text-rose-600 text-xs font-bold py-2.5 rounded-xl border border-rose-100 group-hover:bg-rose-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

                <div class="relative step-connector group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_problem' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-purple-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-purple-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-purple-500 group-hover:text-white transition-colors">2</div>
                            <span class="bg-purple-100 text-purple-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2">Pernyataan Masalah</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Formulasi pernyataan masalah utama (Master Statements) berdasarkan aduan yang dikumpulkan.</p>
                        <button class="w-full bg-purple-50 text-purple-600 text-xs font-bold py-2.5 rounded-xl border border-purple-100 group-hover:bg-purple-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

                <div class="relative group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_situational' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-blue-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-blue-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-blue-500 group-hover:text-white transition-colors">3</div>
                            <span class="bg-blue-100 text-blue-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2">Analisis Situasi</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Imbasan persekitaran (As-Is State) menggunakan kerangka PESTLE/SWOT berpandukan AI.</p>
                        <button class="w-full bg-blue-50 text-blue-600 text-xs font-bold py-2.5 rounded-xl border border-blue-100 group-hover:bg-blue-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

                <div class="relative step-connector group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_rca' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-amber-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-amber-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-amber-500 group-hover:text-white transition-colors">4</div>
                            <span class="bg-amber-100 text-amber-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2">Analisis Punca (RCA)</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Pengecaman punca sebenar (Ishikawa / 5 Whys) untuk setiap Pernyataan Masalah.</p>
                        <button class="w-full bg-amber-50 text-amber-600 text-xs font-bold py-2.5 rounded-xl border border-amber-100 group-hover:bg-amber-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

                <div class="relative step-connector group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_rca_validation' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-emerald-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-emerald-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-emerald-500 group-hover:text-white transition-colors">5</div>
                            <span class="bg-emerald-100 text-emerald-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2 leading-tight">Pengesahan Punca</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Proses validasi punca masalah menggunakan 1.2M patah perkataan data korpus.</p>
                        <button class="w-full bg-emerald-50 text-emerald-600 text-xs font-bold py-2.5 rounded-xl border border-emerald-100 group-hover:bg-emerald-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

                <div class="relative group cursor-pointer" onclick="window.location.href='{% url 'bengkel:analisis_risk' pk=bengkel.pk %}'">
                    <div class="bg-white border-2 border-red-200 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-red-400 transition-all duration-300 h-full flex flex-col">
                        <div class="flex justify-between items-start mb-4">
                            <div class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center text-xl font-black shadow-inner group-hover:bg-red-500 group-hover:text-white transition-colors">6</div>
                            <span class="bg-red-100 text-red-700 text-[9px] font-bold px-2 py-1 rounded uppercase tracking-wider group-hover:animate-pulse">Klik Untuk Buka</span>
                        </div>
                        <h3 class="font-black text-lg text-slate-800 mb-2">Analisis Risiko</h3>
                        <p class="text-xs text-slate-500 leading-relaxed mb-4 flex-1">Unjuran matriks risiko jika Pernyataan Masalah dibiarkan tanpa pelan intervensi.</p>
                        <button class="w-full bg-red-50 text-red-600 text-xs font-bold py-2.5 rounded-xl border border-red-100 group-hover:bg-red-500 group-hover:text-white transition-colors">Papar Modul <i class="fas fa-arrow-right ml-1"></i></button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}