{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Pusat Kawalan AI" %} — {{ 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>
    <span class="text-slate-500 font-medium text-xs">Pusat Kawalan AI</span>
{% endblock %}

{% block content %}

<style>
    /* Kesan Glow Dinamik */
    .nav-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .glow-blue { shadow-[0_0_20px_rgba(59,130,246,0.5)]; }
    .glow-rose { shadow-[0_0_20px_rgba(244,63,94,0.5)]; }
    /* ... dan seterusnya */
    
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.05); }
    }
    .animate-glow { animation: pulse-glow 2s infinite; }
</style>

<div class="animate-fade-up">
    <div class="bg-gradient-to-r from-slate-900 via-indigo-900 to-slate-900 shadow-lg relative z-20 rounded-3xl mb-8 overflow-hidden border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="px-6 py-5 relative flex flex-col sm:flex-row sm:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <a href="{% url 'bengkel:detail' 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 Bilik Persiapan">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div>
                    <h1 class="text-xl md:text-2xl font-black text-white tracking-wide">Pusat Kawalan Pembentangan Blueprint</h1>
                    <p class="text-indigo-200 text-xs mt-0.5 font-medium uppercase tracking-widest">Kitar Hayat Dasar Berpacukan AI Hujung-Ke-Hujung</p>
                </div>
            </div>
            <div class="bg-indigo-800/50 border border-indigo-400/30 text-indigo-100 text-[10px] font-bold px-3 py-1.5 rounded-full backdrop-blur-sm flex items-center shadow-inner self-start sm:self-auto">
                <i class="fas fa-robot text-emerald-400 mr-2"></i> Integrasi Modul LLM (Live)
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-xl border border-slate-200 p-8 md:p-12 relative overflow-hidden mb-12">
        <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px); background-size: 40px 40px;"></div>
        
        <div class="relative z-10 flex flex-col gap-6 md:gap-10"><div class="relative z-10 flex flex-col gap-8 md:gap-12">

            <div class="flex flex-col lg:flex-row gap-6 md:gap-8 justify-between w-full">
                
                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_korpus' pk=bengkel.pk %}'">
                    <div class="bg-blue-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-blue-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(59,130,246,0.5)] hover:border-blue-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-blue-300 bg-blue-900/50 px-3 py-1 rounded border border-blue-400/30 uppercase tracking-wider animate-pulse">Langkah 1</span></div>
                        <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(59,130,246,0.8)]">1</div>
                        <h3 class="text-white font-black text-lg mb-2">Rujukan (Korpus)</h3>
                        <p class="text-[11px] text-blue-200/70 leading-relaxed">Asas pangkalan data LLM dari input rujukan peserta.</p>
                        <div class="mt-4"><i class="fas fa-database text-3xl text-blue-400/50 group-hover:text-blue-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_spaf' pk=bengkel.pk %}'">
                    <div class="bg-rose-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-rose-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(244,63,94,0.5)] hover:border-rose-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-rose-300 bg-rose-900/50 px-3 py-1 rounded border border-rose-400/30 uppercase tracking-wider animate-pulse">Langkah 2</span></div>
                        <div class="w-12 h-12 bg-rose-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(244,63,94,0.8)]">2</div>
                        <h3 class="text-white font-black text-lg mb-2 leading-tight">Kerangka Analitikal</h3>
                        <p class="text-[11px] text-rose-200/70 leading-relaxed">Analisis Pain Points, Masalah, Situasi & RCA.</p>
                        <div class="mt-4"><i class="fas fa-microchip text-3xl text-rose-400/50 group-hover:text-rose-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_tema' pk=bengkel.pk %}'">
                    <div class="bg-indigo-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-indigo-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(99,102,241,0.5)] hover:border-indigo-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-indigo-300 bg-indigo-900/50 px-3 py-1 rounded border border-indigo-400/30 uppercase tracking-wider animate-pulse">Langkah 3</span></div>
                        <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(99,102,241,0.8)]">3</div>
                        <h3 class="text-white font-black text-lg mb-2">Tema Utama</h3>
                        <p class="text-[11px] text-indigo-200/70 leading-relaxed">Pengelompokan isu & identifikasi tema teras AI.</p>
                        <div class="mt-4"><i class="fas fa-brain text-3xl text-indigo-400/50 group-hover:text-indigo-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_pillar' pk=bengkel.pk %}'">
                    <div class="bg-emerald-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-emerald-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(16,185,129,0.5)] hover:border-emerald-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-emerald-300 bg-emerald-900/50 px-3 py-1 rounded border border-emerald-400/30 uppercase tracking-wider animate-pulse">Langkah 4</span></div>
                        <div class="w-12 h-12 bg-emerald-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(16,185,129,0.8)]">4</div>
                        <h3 class="text-white font-black text-lg mb-2">Teras Strategik</h3>
                        <p class="text-[11px] text-emerald-200/70 leading-relaxed">Pembangunan Teras berdasarkan sokongan majoriti.</p>
                        <div class="mt-4"><i class="fas fa-monument text-3xl text-emerald-400/50 group-hover:text-emerald-300 transition"></i></div>
                    </div>
                </div>
            </div>

            <div class="hidden lg:flex justify-end pr-20 -my-8 relative z-0">
                <svg width="60" height="100" viewBox="0 0 60 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M 30,0 L 30,60 Q 30,100 0,100" stroke="#cbd5e1" stroke-width="4" stroke-dasharray="8 4" fill="none" /><polygon points="0,93 0,107 -12,100" fill="#94a3b8" /></svg>
            </div>

            <div class="flex flex-col lg:flex-row-reverse gap-6 md:gap-8 justify-between w-full">

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_strategi' pk=bengkel.pk %}'">
                    <div class="bg-amber-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-amber-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(245,158,11,0.5)] hover:border-amber-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-amber-300 bg-amber-900/50 px-3 py-1 rounded border border-amber-400/30 uppercase tracking-wider animate-pulse">Langkah 5</span></div>
                        <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(245,158,11,0.8)]">5</div>
                        <h3 class="text-white font-black text-lg mb-2">Strategi</h3>
                        <p class="text-[11px] text-amber-200/70 leading-relaxed">Penyusunan Pelan Strategik Jangka Panjang.</p>
                        <div class="mt-4"><i class="fas fa-chess-knight text-3xl text-amber-400/50 group-hover:text-amber-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_action_plan' pk=bengkel.pk %}'">
                    <div class="bg-cyan-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-cyan-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(6,182,212,0.5)] hover:border-cyan-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-cyan-300 bg-cyan-900/50 px-3 py-1 rounded border border-cyan-400/30 uppercase tracking-wider animate-pulse">Langkah 6</span></div>
                        <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(6,182,212,0.8)]">6</div>
                        <h3 class="text-white font-black text-lg mb-2 leading-tight">Pelan Tindakan</h3>
                        <p class="text-[11px] text-cyan-200/70 leading-relaxed">Merangka inisiatif berfasa bagi operasi agensi.</p>
                        <div class="mt-4"><i class="fas fa-tasks text-3xl text-cyan-400/50 group-hover:text-cyan-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_indikator' pk=bengkel.pk %}'">
                    <div class="bg-fuchsia-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-fuchsia-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(217,70,239,0.5)] hover:border-fuchsia-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-fuchsia-300 bg-fuchsia-900/50 px-3 py-1 rounded border border-fuchsia-400/30 uppercase tracking-wider animate-pulse">Langkah 7</span></div>
                        <div class="w-12 h-12 bg-fuchsia-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(217,70,239,0.8)]">7</div>
                        <h3 class="text-white font-black text-lg mb-2">Indikator (KPI)</h3>
                        <p class="text-[11px] text-fuchsia-200/70 leading-relaxed">M&E untuk menjejak pencapaian inisiatif.</p>
                        <div class="mt-4"><i class="fas fa-chart-line text-3xl text-fuchsia-400/50 group-hover:text-fuchsia-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative cursor-pointer group" onclick="window.location.href='{% url 'bengkel:analisis_peruntukan' pk=bengkel.pk %}'">
                    <div class="bg-slate-800 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-slate-600 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(148,163,184,0.5)] hover:border-slate-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-slate-300 bg-slate-800/50 px-3 py-1 rounded border border-slate-500/30 uppercase tracking-wider animate-pulse">Langkah 8</span></div>
                        <div class="w-12 h-12 bg-slate-600 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(71,85,105,0.8)]">8</div>
                        <h3 class="text-white font-black text-lg mb-2">Peruntukan</h3>
                        <p class="text-[11px] text-slate-300/70 leading-relaxed">Rangka kerja fiskal & pemetaan bajet.</p>
                        <div class="mt-4"><i class="fas fa-coins text-3xl text-slate-400/50 group-hover:text-slate-300 transition"></i></div>
                    </div>
                </div>

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