{% extends "base.html" %}

{% block title %}{{ translations.subtitle_toolkit if translations else 'Subtitle Toolkit' }} - Home{% endblock %}

{% block content %}
<div class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-900 mb-4 dark:text-white">{{ translations.subtitle_toolkit if translations else 'Subtitle Toolkit' }}</h1>
    <p class="text-xl text-gray-600 max-w-3xl mx-auto dark:text-gray-300">
        {{ translations.subtitle_manipulation if translations else 'A modern, simple, fast, and secure web interface for subtitle manipulation and translation tools.' }}
    </p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <a href="/timeshift" class="tool-card bg-white rounded-lg p-6 shadow-md hover:shadow-lg dark:bg-slate-800">
        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-2xl dark:bg-slate-700 dark:text-blue-400">
                🕐
            </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-white">{{ translations.time_shift_tool if translations else 'Time Shift Tool' }}</h3>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.time_shift_desc if translations else 'Shift timestamps in subtitle files to fix synchronization issues with videos.' }}
        </p>
    </a>

    <a href="/autosync" class="tool-card bg-white rounded-lg p-6 shadow-md hover:shadow-lg dark:bg-slate-800">
        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-2xl dark:bg-slate-700 dark:text-indigo-400">
                🎯
            </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-white">{{ translations.auto_sync_tool if translations else 'Auto Sync Tool' }}</h3>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.auto_sync_desc if translations else 'Fix subtitle drift by applying time-varying offset correction for frame rate issues.' }}
        </p>
    </a>

    <a href="/mkv2srt" class="tool-card bg-white rounded-lg p-6 shadow-md hover:shadow-lg dark:bg-slate-800">
        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-2xl dark:bg-slate-700 dark:text-green-400">
                🎬
            </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-white">{{ translations.mkv_to_srt_tool if translations else 'MKV to SRT Tool' }}</h3>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.mkv_to_srt_desc if translations else 'Extract subtitles from MKV files and convert them to SRT format.' }}
        </p>
    </a>

    <a href="/translate" class="tool-card bg-white rounded-lg p-6 shadow-md hover:shadow-lg dark:bg-slate-800">
        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-2xl dark:bg-slate-700 dark:text-purple-400">
                🌐
            </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-white">{{ translations.translate_tool if translations else 'Subtitle Translation Tool' }}</h3>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.translate_desc if translations else 'Translate subtitle files using AI models with customizable instructions.' }}
        </p>
    </a>

    <a href="/convert" class="tool-card bg-white rounded-lg p-6 shadow-md hover:shadow-lg dark:bg-slate-800">
        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center text-2xl dark:bg-slate-700 dark:text-orange-400">
                🔄
            </div>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-white">{{ translations.convert_tool if translations else 'Format Converter Tool' }}</h3>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.convert_desc if translations else 'Convert subtitle files between different formats (SRT, VTT, ASS, TTML, and more).' }}
        </p>
    </a>
</div>

<div class="bg-white rounded-lg shadow-md p-6 dark:bg-slate-800">
    <h2 class="text-2xl font-bold text-gray-900 mb-4 dark:text-white">{{ translations.select_tool if translations else 'How to Use' }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-10 w-10 rounded-full bg-blue-100 dark:bg-slate-700">
                    <span class="text-blue-800 font-bold dark:text-blue-400">1</span>
                </div>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ translations.select_tool if translations else 'Select Tool' }}</h3>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ translations.select_tool_desc if translations else 'Choose the subtitle tool you want to use from the navigation menu or cards above.' }}</p>
            </div>
        </div>
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-10 w-10 rounded-full bg-blue-100 dark:bg-slate-700">
                    <span class="text-blue-800 font-bold dark:text-blue-400">2</span>
                </div>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ translations.upload_file if translations else 'Upload File' }}</h3>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ translations.upload_file_desc if translations else 'Upload your subtitle or video file and configure the tool settings.' }}</p>
            </div>
        </div>
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="flex items-center justify-center h-10 w-10 rounded-full bg-blue-100 dark:bg-slate-700">
                    <span class="text-blue-800 font-bold dark:text-blue-400">3</span>
                </div>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ translations.get_results if translations else 'Get Results' }}</h3>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ translations.get_results_desc if translations else 'Download your processed subtitle file with the results.' }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}