{% extends "base.html" %}

{% block title %}sdexe — Local Tools{% endblock %}

{% block content %}
    <main class="home-main">
        <div class="hero">
            <h1>Your local <span class="hero-accent">sdexe</span></h1>
            <p class="subtitle">Fast, private tools that run entirely on your machine. No uploads, no accounts.</p>
        </div>

        <div class="tool-grid">
            <a href="/media" class="tool-card" data-category="media">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/>
                    </svg>
                </div>
                <h2>Media Downloader</h2>
                <p>Download videos &amp; audio from YouTube, Instagram, and 1000+ sites</p>
            </a>

            <a href="/pdf" class="tool-card" data-category="pdf">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                    </svg>
                </div>
                <h2>PDF Tools</h2>
                <p>Merge, split, and convert PDFs locally</p>
            </a>

            <a href="/images" class="tool-card" data-category="images">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5"/>
                        <polyline points="21 15 16 10 5 21"/>
                    </svg>
                </div>
                <h2>Image Tools</h2>
                <p>Resize, compress, and convert images</p>
            </a>

            <a href="/convert" class="tool-card" data-category="convert">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="16 16 12 12 8 16"/>
                        <line x1="12" y1="12" x2="12" y2="21"/>
                        <path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/>
                    </svg>
                </div>
                <h2>File Converter</h2>
                <p>Convert between file formats locally</p>
            </a>

            <a href="/av" class="tool-card" data-category="av">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                        <path d="M19.07 4.93a10 10 0 010 14.14"/>
                        <path d="M15.54 8.46a5 5 0 010 7.07"/>
                    </svg>
                </div>
                <h2>AV Tools</h2>
                <p>Convert, trim, and process audio and video files</p>
            </a>

            <a href="/text" class="tool-card" data-category="text">
                <div class="tool-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                        <polyline points="4 7 4 4 20 4 20 7"/>
                        <line x1="9" y1="20" x2="15" y2="20"/>
                        <line x1="12" y1="4" x2="12" y2="20"/>
                    </svg>
                </div>
                <h2>Text Tools</h2>
                <p>Word count, regex, Base64, hashing, diff, and more</p>
            </a>
        </div>
    </main>
{% endblock %}