{% extends "base.html" %}

{% block content %}
<div class="max-w-[1200px] mx-auto pb-12">

    <!-- Branding -->
    <div class="pt-6 pb-6">
        <div>
            <span class="text-6xl font-semibold tracking-tighter">Forja</span>
        </div>

        <!-- Small legend -->
        <div class="flex flex-wrap gap-x-5 gap-y-1 text-xs mt-4 text-tokyo-muted">
            <div><span class="inline-block w-2.5 h-2.5 rounded bg-tokyo-purple mr-1.5 align-middle"></span>Preparation</div>
            <div><span class="inline-block w-2.5 h-2.5 rounded bg-tokyo-blue mr-1.5 align-middle"></span>Execution Pipeline</div>
            <div><span class="inline-block w-2.5 h-2.5 rounded bg-tokyo-yellow mr-1.5 align-middle"></span>Human Oversight &amp; Completion</div>
        </div>
    </div>

    <!-- Phases (no enclosing boxes) -->

    <!-- PHASE 1 -->
    <div class="mb-8">
        <div class="mb-4">
            <span class="text-xs tracking-[2px] text-tokyo-purple font-semibold">PHASE 1 — PREPARATION</span>
            <div class="text-xl font-semibold tracking-tight mt-0.5">Definition &amp; Guardrails</div>
        </div>

        <div class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-[260px] bg-[#24283b] border border-tokyo-purple/60 rounded-2xl px-5 py-4 hover:border-tokyo-purple hover:shadow-[0_0_0_1px_#bb9af7] transition">
                <div class="font-semibold">1. Agent Definition</div>
                <div class="text-xs text-tokyo-muted mt-1">Versioned YAML with prompt, model, output schema and risk threshold</div>
            </div>
            <div class="flex-1 min-w-[260px] bg-[#24283b] border border-tokyo-purple/60 rounded-2xl px-5 py-4 hover:border-tokyo-purple hover:shadow-[0_0_0_1px_#bb9af7] transition">
                <div class="font-semibold">2. Policy Application</div>
                <div class="text-xs text-tokyo-muted mt-1">Guardrails policy loaded and attached to the agent</div>
            </div>
        </div>
    </div>

    <!-- PHASE 2 -->
    <div class="mb-8">
        <div class="mb-4">
            <span class="text-xs tracking-[2px] text-white font-semibold">PHASE 2 — EXECUTION PIPELINE</span>
            <div class="text-xl font-semibold tracking-tight mt-0.5 text-white">The Main Processing Line</div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div class="bg-[#24283b] border border-tokyo-border rounded-2xl px-4 py-4 hover:border-tokyo-purple hover:shadow-md transition text-sm">
                <span class="text-[#bb9af7] font-semibold">3. Input Guardrails</span>
                <div class="text-[10px] text-tokyo-muted mt-1 leading-snug">Validates input against policy before it reaches the LLM</div>
            </div>
            <div class="bg-[#24283b] border border-tokyo-border rounded-2xl px-4 py-4 hover:border-tokyo-purple hover:shadow-md transition text-sm">
                <span class="text-[#e0af68] font-semibold">4. LLM Reasoning</span>
                <div class="text-[10px] text-tokyo-muted mt-1 leading-snug">The agent generates structured output using the configured model</div>
            </div>
            <div class="bg-[#24283b] border border-tokyo-border rounded-2xl px-4 py-4 hover:border-tokyo-purple hover:shadow-md transition text-sm">
                <span class="text-[#9ece6a] font-semibold">5. Output Guardrails</span>
                <div class="text-[10px] text-tokyo-muted mt-1 leading-snug">Validates the LLM response for safety and correctness</div>
            </div>
            <div class="bg-[#24283b] border border-tokyo-border rounded-2xl px-4 py-4 hover:border-tokyo-purple hover:shadow-md transition text-sm">
                <span class="text-[#f7768e] font-semibold">6. Action Proposal</span>
                <div class="text-[10px] text-tokyo-muted mt-1 leading-snug">Generates actions with risk scores and rollback plans</div>
            </div>
        </div>
    </div>

    <!-- PHASE 3 -->
    <div>
        <div class="mb-4">
            <span class="text-xs tracking-[2px] text-tokyo-yellow font-semibold">PHASE 3 — HUMAN OVERSIGHT &amp; COMPLETION</span>
            <div class="text-xl font-semibold tracking-tight mt-0.5 text-tokyo-yellow">Critical Gate + Finalization</div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <a href="/approvals" class="col-span-1 md:col-span-1 bg-[#2a2f45] border-2 border-tokyo-yellow rounded-2xl px-5 py-5 hover:border-tokyo-yellow hover:shadow-[0_0_0_1px_#e0af68] hover:brightness-105 transition group">
                <div class="font-semibold text-tokyo-yellow text-lg">7. Human Approval Gate</div>
                <div class="text-xs text-tokyo-muted mt-2 leading-snug">High-risk actions pause here. Human must approve or reject.</div>
                <div class="mt-3 text-xs text-tokyo-yellow group-hover:underline">Enter approval bay →</div>
            </a>
            <div class="bg-[#1f2335] border border-tokyo-green/60 rounded-2xl px-5 py-5 hover:border-tokyo-green hover:shadow-[0_0_0_1px_#9ece6a] transition">
                <div class="font-semibold">8. Finalization</div>
                <div class="text-xs text-tokyo-muted mt-1.5">Execution completes with full decision path.</div>
            </div>
        </div>
    </div>

</div>
{% endblock %}