<%@ 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 | Discussion privée moderne en Java JEE</title>
    <meta name="description" content="RJLResaka est une application de discussion privée en Java JEE avec authentification, liste d'utilisateurs, chat et style moderne inspiré de Messenger.">
    <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="hero-card hero-grid">
            <div>
                <span class="hero-badge">RJLResaka • Java JEE</span>
                <h1 class="hero-title">Discutez comme sur Messenger, dans votre propre application web.</h1>
                <p class="hero-copy">
                    Inscription, connexion, mot de passe oublié, liste d'utilisateurs, discussion privée,
                    design clair et responsive. La prochaine étape ajoute les vraies conversations,
                    les pièces jointes et les réactions.
                </p>
                <div class="hero-actions">
                    <a class="button primary" href="${pageContext.request.contextPath}/register">Créer un compte</a>
                    <a class="button secondary" href="${pageContext.request.contextPath}/login">Se connecter</a>
                </div>
                <ul class="hero-list">
                    <li>Tomcat 9 + Servlet/JSP</li>
                    <li>MySQL Workbench</li>
                    <li>Base prête pour chat privé + fichiers</li>
                </ul>
            </div>
            <aside class="preview-card">
                <div class="preview-window">
                    <div class="preview-topbar">
                        <span></span><span></span><span></span>
                    </div>
                    <div class="preview-chat">
                        <div class="preview-bubble incoming">Salut 👋 prêt pour l'examen ?</div>
                        <div class="preview-bubble outgoing">Oui, RJLResaka avance bien !</div>
                        <div class="preview-users">
                            <div class="mini-user active">AM</div>
                            <div class="mini-user">JR</div>
                            <div class="mini-user">LK</div>
                            <div class="mini-user">TS</div>
                        </div>
                    </div>
                </div>
            </aside>
        </section>
    </main>
    <script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
</body>
</html>
