{% extends 'base.html.twig' %}

{% block title %}Accueil - {{ parent() }}{% endblock %}

{% block body %}
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    {# Hero Section #}
    <section class="relative px-4 py-20 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-7xl">
            <div class="text-center">
                <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
                    <span class="block">Bienvenue sur</span>
                    <span class="block text-indigo-600 dark:text-indigo-400">2ABCORP</span>
                </h1>
                <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
                    Une plateforme moderne et sécurisée pour gérer votre activité.
                    Authentification avancée, gestion des utilisateurs et bien plus encore.
                </p>
                <div class="mt-10 flex justify-center">
                    <a href="{{ path('app_login') }}"
                       class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-8 py-3 text-base font-medium text-white shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800 transition-colors duration-200">
                        Se connecter
                    </a>
                </div>
            </div>
        </div>
    </section>

    {# Features Section #}
    <section class="px-4 py-16 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
        <div class="mx-auto max-w-7xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Fonctionnalités</h2>
                <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">
                    Tout ce dont vous avez besoin pour gérer votre activité en toute sécurité
                </p>
            </div>

            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                {# Feature 1: Authentification sécurisée #}
                <div class="rounded-lg bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Authentification sécurisée</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        Connexion sécurisée avec authentification à deux facteurs (2FA), vérification d'IP et gestion des appareils.
                    </p>
                </div>

                {# Feature 2: Gestion des utilisateurs #}
                <div class="rounded-lg bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Gestion des utilisateurs</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        Système complet de gestion des utilisateurs avec rôles multiples et permissions granulaires.
                    </p>
                </div>

                {# Feature 3: Sécurité avancée #}
                <div class="rounded-lg bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Sécurité avancée</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        Blocage d'IP, détection de menaces, logging complet et notifications de sécurité en temps réel.
                    </p>
                </div>

                {# Feature 4: Tableau de bord intuitif #}
                <div class="rounded-lg bg-gradient-to-br from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-green-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Tableau de bord intuitif</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        Interface moderne avec statistiques en temps réel, graphiques et métriques détaillées.
                    </p>
                </div>

                {# Feature 5: Notifications #}
                <div class="rounded-lg bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-yellow-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Notifications intelligentes</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        Alertes email configurables pour les événements de sécurité et les activités importantes.
                    </p>
                </div>

                {# Feature 6: API REST #}
                <div class="rounded-lg bg-gradient-to-br from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 p-6 shadow-lg">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-600 text-white">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                    </div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">API REST complète</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">
                        API REST documentée avec JWT pour intégrer facilement vos applications tierces.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {# CTA Section #}
    <section class="px-4 py-16 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-4xl text-center">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Prêt à commencer ?</h2>
            <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">
                Connectez-vous pour accéder à toutes nos fonctionnalités.
            </p>
            <div class="mt-8 flex justify-center">
                <a href="{{ path('app_login') }}"
                   class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-8 py-3 text-base font-medium text-white shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800 transition-colors duration-200">
                    Se connecter
                </a>
            </div>
        </div>
    </section>

    {# Footer #}
    <footer class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-8 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-7xl">
            <div class="text-center text-sm text-gray-500 dark:text-gray-400">
                <p>&copy; {{ 'now'|date('Y') }} 2ABCORP. Tous droits réservés.</p>
            </div>
        </div>
    </footer>
</div>
{% endblock %}