{% extends "base.html" %}

{% block title %}Welcome - {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="text-center py-12">
    <h1 class="text-4xl font-bold text-gray-900 mb-4">
        Welcome to {{ settings.APP_NAME }}
    </h1>
    <p class="text-gray-600 text-lg mb-8">
        Your FastStack project is ready to go!
    </p>
    <div class="space-x-4">
        <a href="/demo"
           class="inline-block px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium">
            <i class="fas fa-magic mr-2"></i>FastUI Demo
        </a>
        <a href="/admin/"
           class="inline-block px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium">
            <i class="fas fa-cog mr-2"></i>Admin Panel
        </a>
        <a href="/docs"
           class="inline-block px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium">
            <i class="fas fa-book mr-2"></i>API Docs
        </a>
    </div>
</div>

<!-- Features -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-bolt text-indigo-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Fast & Async</h3>
        <p class="text-gray-600">
            Built on FastAPI with async support for maximum performance.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-database text-green-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">SQLModel ORM</h3>
        <p class="text-gray-600">
            Type-safe database models with automatic migrations via Alembic.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Built-in Auth</h3>
        <p class="text-gray-600">
            Secure authentication with password hashing and session management.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-puzzle-piece text-yellow-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Modular Apps</h3>
        <p class="text-gray-600">
            Organize your code with reusable app modules like Django.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-desktop text-red-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Admin Panel</h3>
        <p class="text-gray-600">
            Auto-generated admin interface for your models.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-terminal text-blue-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Powerful CLI</h3>
        <p class="text-gray-600">
            Create projects, apps, and manage migrations with ease.
        </p>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-wand-magic-sparkles text-white text-xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">FastUI</h3>
        <p class="text-gray-600">
            Server-Driven Interactivity with HTMX, Alpine.js, ECharts, and Tailwind.
        </p>
    </div>
</div>

<!-- Quick Links -->
<div class="mt-12 bg-white rounded-lg shadow p-6">
    <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Links</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="/demo" class="flex items-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100">
            <i class="fas fa-wand-magic-sparkles text-indigo-500 mr-3"></i>
            <span class="text-gray-700">FastUI Demo</span>
        </a>
        <a href="/admin/" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            <i class="fas fa-cog text-gray-500 mr-3"></i>
            <span class="text-gray-700">Admin Panel</span>
        </a>
        <a href="/docs" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            <i class="fas fa-book text-gray-500 mr-3"></i>
            <span class="text-gray-700">API Docs</span>
        </a>
        <a href="/auth/login" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            <i class="fas fa-sign-in-alt text-gray-500 mr-3"></i>
            <span class="text-gray-700">Login</span>
        </a>
        <a href="/health" class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            <i class="fas fa-heartbeat text-gray-500 mr-3"></i>
            <span class="text-gray-700">Health Check</span>
        </a>
    </div>
</div>
{% endblock %}