<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{% block title %}Hegreshere{% endblock %}</title>

    {# Tailwind CSS CDN #}
    <script src="https://cdn.tailwindcss.com"></script>

    {# FontAwesome & Google Fonts #}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"/>

    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100 flex flex-col min-h-screen">
<header class="bg-gray-900 text-white">
    <div class="container mx-auto flex justify-between items-center py-4 px-6">
        <div class="flex items-center">
            <i class="fas fa-briefcase text-2xl mr-2"></i>
            <span class="text-xl font-bold">HegreSphere</span>
        </div>
        <nav class="space-x-20">
            <a class="hover:text-teal-400" href="{{ path('app_index') }}">Accueil</a>
            <a class="hover:text-teal-400" href="{{ path('app_announcement_index') }}">Stages</a>
            <a class="hover:text-teal-400" href="{{ path('app_faq_index') }}">FAQ</a>
            <a class="hover:text-teal-400" href="{{ path('app_message_index') }}">Messagerie</a>
        </nav>
        <div class="flex space-x-4">
            <a class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-full" href="{{ path('app_profile') }}">
                Profil
            </a>
            <a class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full" href="{{ path('app_logout') }}">
                Déconnexion
            </a>
        </div>
    </div>
</header>

<main class="flex-grow">
    {% block body %}
    {% endblock %}
</main>

<footer class="bg-gray-800 text-gray-400">
    <div class="container mx-auto py-6 px-6 grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Company Info -->
        <div>
            <h3 class="text-white text-lg font-bold mb-4">À propos de nous</h3>
            <p>HegreSphere est une plateforme dédiée aux opportunités de stages et au soutien des étudiants dans leur parcours professionnel.</p>
        </div>

        <!-- Quick Links -->
        <div>
            <h3 class="text-white text-lg font-bold mb-4">Liens utiles</h3>
            <ul class="space-y-2">
                <li><a href="{{ path('app_index') }}" class="hover:text-teal-400">Accueil</a></li>
                <li><a href="{{ path('app_announcement_index') }}" class="hover:text-teal-400">Liste des stages</a></li>
            </ul>
        </div>

        <div>
            <h3 class="text-white text-lg font-bold mb-4">Contactez-nous</h3>
            <p>Email: support@hegresphere.com</p>
            <p>Téléphone: +33 1 23 45 67 89</p>
        </div>
    </div>
</footer>
</body>
</html>
