{% extends "base.html" %}

{% block title %}HYDRA-24 Demo Suite - Interactive Demonstration{% endblock %}

{% block content %}
<div class="hero">
    <h1>See HYDRA-24 in Action</h1>
    <p class="hero-subtitle">Interactive demos showing how we prevent $50M+ regulatory violations</p>
    <div class="hero-cta">
        <a href="#demos" class="btn btn-primary">Run Live Demos</a>
        <a href="/demo/performance" class="btn btn-secondary">View Performance</a>
    </div>
</div>

<section id="demos" class="demo-cards">
    <div class="demo-card" data-scenario="credit-scoring">
        <div class="card-icon">⚖️</div>
        <h2>ECOA Fairness Detection</h2>
        <p class="card-description">See how we catch $2.4M violations before production</p>
        <div class="card-metrics">
            <div class="metric">
                <span class="metric-value">10,000</span>
                <span class="metric-label">applicants analyzed</span>
            </div>
            <div class="metric">
                <span class="metric-value">82%</span>
                <span class="metric-label">model accuracy</span>
            </div>
            <div class="metric">
                <span class="metric-value">0.76</span>
                <span class="metric-label">DI ratio detected</span>
            </div>
        </div>
        <a href="/demo/credit-scoring" class="btn btn-demo">Run Demo →</a>
    </div>

</section>

<section class="tech-moats">
    <h2>Technology Moats</h2>
    <p class="section-subtitle">Competitive advantages that make HYDRA-24 production-ready</p>
    <div class="moat-cards">
        <div class="moat-card">
            <h3>24-bit Fingerprints</h3>
            <p>3 bytes per value</p>
            <span class="moat-stat">30x more compact than alternatives</span>
        </div>
        <div class="moat-card">
            <h3>100% Accuracy</h3>
            <p>Zero false positives</p>
            <span class="moat-stat">Value-level source tracking</span>
        </div>
        <div class="moat-card">
            <h3>Tamper-Proof</h3>
            <p>Merkle tree anchoring</p>
            <span class="moat-stat">Cryptographic verification</span>
        </div>
        <div class="moat-card">
            <h3>Production Scale</h3>
            <p>&lt;5% overhead</p>
            <span class="moat-stat">100M+ predictions tested</span>
        </div>
    </div>
</section>

<section class="performance-highlights">
    <h2>Performance Highlights</h2>
    <div class="perf-grid">
        <div class="perf-stat">
            <div class="stat-value">&lt; 5%</div>
            <div class="stat-label">Runtime Overhead</div>
        </div>
        <div class="perf-stat">
            <div class="stat-value">3 Bytes</div>
            <div class="stat-label">Per Value</div>
        </div>
        <div class="perf-stat">
            <div class="stat-value">&lt; 100ms</div>
            <div class="stat-label">Query Time</div>
        </div>
        <div class="perf-stat">
            <div class="stat-value">100M+</div>
            <div class="stat-label">Predictions Tested</div>
        </div>
    </div>
    <a href="/demo/performance" class="btn btn-secondary">View Full Benchmarks →</a>
</section>

<style>
.hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    margin-bottom: 60px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #d1d5db;
    margin-bottom: 40px;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.demo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.demo-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.demo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.demo-card h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #fbbf24;
}

.card-description {
    color: #d1d5db;
    margin-bottom: 25px;
}

.card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fbbf24;
}

.metric-label {
    display: block;
    font-size: 0.85rem;
    color: #9ca3af;
}

.tech-moats {
    margin-bottom: 80px;
    text-align: center;
}

.tech-moats h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-subtitle {
    color: #9ca3af;
    margin-bottom: 40px;
}

.moat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.moat-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 30px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.moat-card:hover {
    border-color: #fbbf24;
}

.moat-card h3 {
    color: #fbbf24;
    margin-bottom: 10px;
}

.moat-card p {
    color: #d1d5db;
    margin-bottom: 10px;
}

.moat-stat {
    display: block;
    font-size: 0.9rem;
    color: #9ca3af;
}

.performance-highlights {
    text-align: center;
    padding: 60px 20px;
    background: #1f2937;
    border-radius: 12px;
}

.performance-highlights h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.perf-stat {
    padding: 20px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1rem;
    color: #9ca3af;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.5);
}

.btn-secondary {
    background: transparent;
    border: 2px solid #fbbf24;
    color: #fbbf24;
}

.btn-secondary:hover {
    background: #fbbf24;
    color: #000;
}

.btn-demo {
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #000;
}
</style>
{% endblock %}