<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RJLResaka | Chat privé et groupes style Facebook</title>
    <meta name="description" content="RJLResaka est une application de discussion Java JEE inspirée de Facebook Messenger avec demandes d'amis, groupes, pièces jointes et réactions.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
</head>
<body>
    <main class="landing-shell">
        <section class="landing-topbar">
            <a class="brand" href="${pageContext.request.contextPath}/home">
                <img src="${pageContext.request.contextPath}/assets/img/logo_resaka.png" alt="Logo RJLResaka" width="56" height="56">
                <div>
                    <strong>RJLResaka</strong>
                    <span>Java JEE • Tomcat 9 • MySQL Workbench</span>
                </div>
            </a>
            <div class="hero-actions compact">
                <a class="button secondary" href="${pageContext.request.contextPath}/login">Connexion</a>
                <a class="button primary" href="${pageContext.request.contextPath}/register">Créer un compte</a>
            </div>
        </section>

        <section class="hero-card hero-grid">
            <div>
                <span class="hero-badge">Version finale Facebook-like</span>
                <h1 class="hero-title">Une messagerie claire comme Facebook, avec amis, groupes et chat en temps réel côté UI.</h1>
                <p class="hero-copy">
                    Votre projet final RJLResaka comprend maintenant l'inscription, la connexion, le mot de passe oublié,
                    les conversations privées, les groupes de discussion, les demandes d'amis, les réactions,
                    l'envoi de pièces jointes et une interface blanche inspirée de Facebook Messenger.
                </p>
                <div class="hero-actions">
                    <a class="button primary" href="${pageContext.request.contextPath}/register">Commencer</a>
                    <a class="button secondary" href="${pageContext.request.contextPath}/login">J'ai déjà un compte</a>
                </div>
                <ul class="hero-list">
                    <li>Demandes d'amis et acceptation/refus</li>
                    <li>Création de groupes avec vos amis</li>
                    <li>Design clair moderne type Facebook/Messenger</li>
                </ul>
            </div>
            <aside class="preview-card messenger-preview">
                <div class="preview-window fb-window">
                    <div class="preview-topbar">
                        <span></span><span></span><span></span>
                    </div>
                    <div class="preview-chat advanced">
                        <div class="preview-sidebar">
                            <div class="preview-contact active">AM</div>
                            <div class="preview-contact">JR</div>
                            <div class="preview-contact">GR</div>
                        </div>
                        <div class="preview-conversation">
                            <div class="preview-message incoming">Salut, tu as vu la demande d'ami ?</div>
                            <div class="preview-message outgoing">Oui 👍 et j'ai créé le groupe du projet.</div>
                            <div class="preview-attachment">📎 cahier-des-charges.pdf</div>
                            <div class="preview-reactions">❤️ 3&nbsp;&nbsp;😂 1</div>
                        </div>
                    </div>
                </div>
            </aside>
        </section>
    </main>
    <script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
</body>
</html>
