{# src/templates/visiteur/registration_success.html.twig #}
{% extends 'base_login.html.twig' %}

{% block title %}Inscription réussie | LoyerExpress{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --brand-primary: #72a333;
            --brand-dark: #0f172a;
            --bg-light: #f8fafc;
        }
        body { background-color: var(--bg-light); font-family: 'Inter', sans-serif; }
        
        .success-card {
            background: #ffffff;
            border-radius: 1.25rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
            padding: 3rem 2rem;
            text-align: center;
            max-width: 550px;
            margin: 1rem auto;
        }

        .icon-box {
            width: 80px;
            height: 80px;
            background: #ecfdf5;
            color: #10b981;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }

        .btn-login {
            background: var(--brand-primary);
            color: #fff;
            font-weight: 700;
            padding: 0.8rem 2rem;
            border-radius: 0.5rem;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s;
            border: none;
            font-size:13px
        }

        .btn-login:hover {
            background: #628d2c;
            color: #fff;
            transform: translateY(-1px);
        }

         .login_copy { 
            text-align: center; 
            font-size: 12px; 
            margin: 20px auto;
            width: 360px; 
        }
    </style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="success-card">
        <div style="margin-bottom:20px">
        <a class="flex-center text-decoration-none mb-4"  href="{{ path('app_visiteur') }}">
           
                <div style=""><img src="{{ asset('images/logo1.png') }}" alt="LOYER-EXPRESS" width="150"/></div>
                <div style="font-weight: 800;font-size: 1.25rem; letter-spacing: -0.5px;color:#72a333;display:block">LOYER-EXPRESS</div>
           
        </a>
        </div>
                                        
        <div class="icon-box">
            <i class="fas fa-check-circle"></i>
        </div>
        
        <h1 class="h3 fw-bold text-dark mb-3">Compte créé avec succès !</h1>
        
        <p class="text-muted mb-4">
            Bienvenue chez <strong>LoyerExpress</strong>. <br>
            Un email de confirmation a été envoyé à l'adresse :<br>
            <span class="text-dark fw-bold">{{ email }}</span>
        </p>

        <hr class="my-4 opacity-50">

        <p class="small text-muted mb-4">
            Vous pouvez maintenant vous connecter à votre espace de gestion pour commencer à configurer vos biens.
        </p>

        <a href="{{ path('app_entreprise_login') }}" class="btn-login">
            <i class="fas fa-sign-in-alt me-2"></i> SE CONNECTER
        </a>
    </div>
</div>

<p class="login_copy">
        <a href="{{ path('app_visiteur_cgu') }}" style="color: var(--express-green);">Conditions générales d'utilisation</a> - 
        <a href="{{ path('app_visiteur_confidentialite') }}" style="color: var(--express-green);">Politique de confidentialité</a>.<br>
        {{ "now"|date("Y") }} &copy; <strong>LoyerExpress</strong>
    </p>
{% endblock %}