{% extends "base.html" %}
{% block title %}Home | Algorithm Analyzer, By Mohammed Usman{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h1>⚡ ALGORITHM COMMAND CENTER</h1>
    <p>The most advanced algorithm analysis suite ever built — now with immersive Flask UI.</p>
    <div class="header-line"></div>
</div>

<div class="grid grid-4 animate-in delay-1" style="margin-bottom: 32px;">
    <div class="glass-card">
        <div class="metric-label">Algorithms</div>
        <div class="metric-value">50+</div>
    </div>
    <div class="glass-card">
        <div class="metric-label">Categories</div>
        <div class="metric-value">11</div>
    </div>
    <div class="glass-card">
        <div class="metric-label">Visualizations</div>
        <div class="metric-value">Live</div>
    </div>
    <div class="glass-card">
        <div class="metric-label">Status</div>
        <div class="metric-value" style="color: var(--green);">Online</div>
    </div>
</div>

<div class="section-divider animate-in delay-2">
    <h3>▸ FEATURE MATRIX</h3>
    <div class="line"></div>
</div>

<div class="grid grid-3 animate-in delay-2">
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">🕸️ Graph Theory</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">BFS, DFS, Dijkstra, Bellman-Ford, Floyd-Warshall, Prim, Kruskal, Topological Sort, Kosaraju SCC, A* Search with interactive NetworkX visualization.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">10+ Algorithms</span>
            <span class="badge badge-violet">Live Viz</span>
        </div>
    </div>
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">🔍 Searching</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">Linear, Binary, Jump, Interpolation, Exponential, Ternary, Fibonacci Search with complexity tracking and benchmark comparison.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">8 Algorithms</span>
            <span class="badge badge-green">Benchmark</span>
        </div>
    </div>
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">📊 Sorting</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">Bubble, Selection, Insertion, Merge, Quick, Heap, Shell, Cocktail, Comb, Counting, Radix, Bucket, Timsort with step-by-step animation.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">13 Algorithms</span>
            <span class="badge badge-yellow">Step Viz</span>
        </div>
    </div>
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">🧩 Dynamic Programming</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">0/1 Knapsack, Unbounded Knapsack, LCS, Edit Distance, Matrix Chain, Coin Change, LIS with DP table heatmap visualization.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">7+ Problems</span>
            <span class="badge badge-violet">Table Viz</span>
        </div>
    </div>
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">💎 Greedy</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">Activity Selection, Fractional Knapsack, Huffman Coding, Job Sequencing, Minimum Coins with interactive inputs.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">5 Algorithms</span>
            <span class="badge badge-green">Interactive</span>
        </div>
    </div>
    <div class="glass-card">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">🌲 Backtracking</h3>
        <p style="color: #94a3b8; font-size: 14px; line-height: 1.6;">N-Queens, Sudoku Solver, Subset Sum, Graph Coloring, Hamiltonian Cycle with visual puzzle representation.</p>
        <div style="margin-top: 12px;">
            <span class="badge badge-cyan">5 Puzzles</span>
            <span class="badge badge-yellow">Visual</span>
        </div>
    </div>
</div>


<div class="glass-card animate-in delay-3" style="text-align: center; padding: 32px; margin-bottom: 32px;">
    <div style="display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;">
        <a href="https://github.com/issu321" target="_blank" class="btn-liquid" style="display: inline-flex; align-items: center; gap: 8px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            Developer-Profile(Git-Hub)
        </a>
        <a href="https://github.com/issu321/ADA-Python" target="_blank" class="btn-liquid btn-liquid-glow" style="display: inline-flex; align-items: center; gap: 8px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            ADA-Python Repository
        </a>
    </div>
</div>

<div class="section-divider animate-in delay-3">
    <h3>▸ QUICK ACCESS</h3>
    <div class="line"></div>
</div>

<div class="grid grid-4 animate-in delay-3" style="margin-bottom: 40px;">
    <a href="/graph" class="glass-card" style="text-decoration: none; text-align: center;">
        <div style="font-size: 32px; margin-bottom: 8px;">🕸️</div>
        <div style="font-family: 'Orbitron'; color: #f8fafc; font-size: 14px;">Graph</div>
    </a>
    <a href="/search" class="glass-card" style="text-decoration: none; text-align: center;">
        <div style="font-size: 32px; margin-bottom: 8px;">🔍</div>
        <div style="font-family: 'Orbitron'; color: #f8fafc; font-size: 14px;">Search</div>
    </a>
    <a href="/sort" class="glass-card" style="text-decoration: none; text-align: center;">
        <div style="font-size: 32px; margin-bottom: 8px;">📊</div>
        <div style="font-family: 'Orbitron'; color: #f8fafc; font-size: 14px;">Sort</div>
    </a>
    <a href="/benchmark" class="glass-card" style="text-decoration: none; text-align: center;">
        <div style="font-size: 32px; margin-bottom: 8px;">⏱️</div>
        <div style="font-family: 'Orbitron'; color: #f8fafc; font-size: 14px;">Benchmark</div>
    </a>
</div>

<div class="glass-card animate-in delay-3" style="text-align: center; padding: 32px;">
    <h2 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">Ready to Analyze?</h2>
    <p style="color: #94a3b8; margin-bottom: 20px;">Select any category from the navigation to start exploring algorithms with real-time performance profiling.</p>
    <a href="/graph" class="btn-liquid btn-liquid-glow">Launch Graph Analyzer</a>
</div>
{% endblock %}