{% extends "base.html" %}

{% block content %}
<div class="max-w-4xl mx-auto pt-16 pb-20 text-center">
    <!-- Headline -->
    <h1 class="text-7xl font-semibold tracking-tighter text-white mb-4">
        Forja
    </h1>
    
    <p class="text-2xl text-zinc-400 mb-8">
        Gobernanza profesional para agentes de IA
    </p>

    <!-- Purpose -->
    <div class="max-w-2xl mx-auto text-lg text-zinc-400 leading-relaxed mb-12">
        Plataforma de control para agentes IA. <br>
        Versionado de definiciones y políticas, guardrails en ejecución, 
        aprobaciones humanas y observabilidad completa.
    </div>

    <!-- Key capabilities -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl mx-auto mb-16 text-left">
        <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
            <div class="font-medium mb-2">Versionado Git-like</div>
            <div class="text-sm text-zinc-400">Agentes y políticas como YAML versionados. Diffs, histórico y control explícito de cambios.</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
            <div class="font-medium mb-2">Guardrails runtime</div>
            <div class="text-sm text-zinc-400">Validación automática de entradas y salidas con Presidio y reglas declarativas antes de ejecutar.</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
            <div class="font-medium mb-2">Human-in-the-Loop</div>
            <div class="text-sm text-zinc-400">Pausa automática en acciones de alto riesgo. Aprobación o rechazo con trazabilidad completa.</div>
        </div>
    </div>

    <!-- CTAs -->
    <div class="flex flex-wrap justify-center gap-4">
        <a href="/agents" 
           class="px-6 py-3 bg-white text-black rounded-xl font-medium hover:bg-zinc-200 transition">
            Ver Agentes
        </a>
        <a href="/run" 
           class="px-6 py-3 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-medium transition">
            Ejecutar Agente
        </a>
        <a href="/approvals" 
           class="px-6 py-3 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-medium transition">
            Aprobaciones
        </a>
    </div>
</div>
{% endblock %}