{% extends "public/base_public.html" %}
{% load static %}

{% block title %}SimpleAudit Studio — Reproducible AI Model Auditing Platform{% endblock %}

{% block body %}
<style>
  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108, 140, 255, 0.4); }
    50% { box-shadow: 0 0 20px 4px rgba(108, 140, 255, 0.6); }
  }
  .glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }

  @keyframes shimmer-sweep {
    0% { transform: translateX(-150%) skewX(-20deg); }
    60%, 100% { transform: translateX(250%) skewX(-20deg); }
  }
  .shimmer-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: shimmer-sweep 3s ease-in-out infinite;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .glow-pulse, .shimmer-btn::after { animation: none; }
  }
</style>
<div class="min-h-screen bg-gray-950 text-gray-200 flex flex-col">

  {# ── Hero ─────────────────────────────────────────────── #}
  <header class="flex-1 max-w-3xl mx-auto px-6 pt-24 pb-16 text-center w-full">
    <a href="/" class="inline-flex items-center gap-3 mb-10 group">
      <img src="{% static 'logo.png' %}" alt="SimpleAudit Studio logo" width="48" height="48"
           class="w-12 h-12 rounded-xl object-contain">
      <span class="text-xl font-bold text-gray-100 group-hover:text-white transition-colors">SimpleAudit Studio</span>
    </a>
    <h1 class="text-4xl md:text-5xl font-bold text-white leading-tight tracking-tight">
      Reproducible <span class="text-accent">AI model auditing</span>, self-hosted
    </h1>
    <p class="mt-6 text-lg text-gray-400 max-w-xl mx-auto leading-relaxed">
      Freeze every audit input — scenarios, model config, judge profile — so results stay
      verifiable years later. Built on the Target&nbsp;→&nbsp;Auditor&nbsp;→&nbsp;Judge engine.
    </p>
    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
      <a href="{% if user.is_authenticated %}/{% else %}/login/{% endif %}"
         class="glow-pulse shimmer-btn relative overflow-hidden px-6 py-3 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition-colors shadow-lg">
        {% if user.is_authenticated %}Open dashboard{% else %}Get started{% endif %}
      </a>
      <a href="https://github.com/SushantGautam/SimpleAuditStudio" target="_blank" rel="noopener"
         class="px-6 py-3 rounded-xl border border-gray-700 hover:border-accent/50 text-gray-200 font-medium transition-colors">
        View on GitHub
      </a>
    </div>
    <p class="mt-6 text-xs text-gray-600">Open source · MIT licensed</p>
  </header>

  {# ── Features (3 cards) ───────────────────────────────── #}
  <section class="max-w-4xl mx-auto px-6 pb-20 w-full">
    <div class="grid md:grid-cols-3 gap-6">
      <div class="rounded-2xl border border-gray-800 bg-surface-raised p-6">
        <h3 class="text-base font-semibold text-gray-100">Frozen inputs</h3>
        <p class="mt-2 text-sm text-gray-400 leading-relaxed">
          Every run pins exact scenario content, model config, and judge profile. Re-run any audit, get identical results.
        </p>
      </div>
      <div class="rounded-2xl border border-gray-800 bg-surface-raised p-6">
        <h3 class="text-base font-semibold text-gray-100">Any model endpoint</h3>
        <p class="mt-2 text-sm text-gray-400 leading-relaxed">
          Connect Ollama, vLLM, OpenAI, Together, Groq, or any OpenAI-compatible API. Credentials stay out of the database.
        </p>
      </div>
      <div class="rounded-2xl border border-gray-800 bg-surface-raised p-6">
        <h3 class="text-base font-semibold text-gray-100">Compare &amp; export</h3>
        <p class="mt-2 text-sm text-gray-400 leading-relaxed">
          Put audits side by side across models and prompts. Export CSV or JSON for downstream analysis.
        </p>
      </div>
    </div>
  </section>

  {# ── Footer ───────────────────────────────────────────── #}
  <footer class="border-t border-gray-800/60 mt-auto">
    <div class="max-w-4xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
      <p class="text-gray-500">© {{ current_year }} SimpleAudit Studio · MIT License</p>
      <nav class="flex items-center gap-6 text-gray-500">
        <a href="https://github.com/SushantGautam/SimpleAuditStudio" target="_blank" rel="noopener" class="hover:text-accent transition-colors">GitHub</a>
        <a href="https://pypi.org/project/simpleaudit-studio/" target="_blank" rel="noopener" class="hover:text-accent transition-colors">PyPI</a>
        <a href="https://github.com/kelkalot/simpleaudit" target="_blank" rel="noopener" class="hover:text-accent transition-colors">SimpleAudit engine</a>
      </nav>
    </div>
  </footer>
</div>
{% endblock %}