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

{% block title %}{{ 'register_choice.title'|trans }} - {{ parent() }}{% endblock %}

{% block head %}
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section moderne -->
<section class="hero-section register-hero">
    <div class="hero-decoration">
        <i class="fas fa-user-plus"></i>
    </div>
    
    <div class="container">
        <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
            <h1 class="hero-title">
                Rejoignez Notre<br>
                <span style="color: var(--aef-accent-gold);">Communauté</span> d'Exception
            </h1>
            
            <p class="hero-subtitle">
                Découvrez l'univers fascinant des antiquités françaises. Que vous soyez passionné ou professionnel, 
                choisissez l'expérience qui vous correspond.
            </p>
            
            <div class="hero-stats">
                <div class="stat-item">
                    <span class="stat-number">150+</span>
                    <span class="stat-label">Antiquaires</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">12,500+</span>
                    <span class="stat-label">Objets d'Art</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">25+</span>
                    <span class="stat-label">Catégories</span>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block body %}
<div class="register-choice-page">
    <!-- Section de choix -->
    <section class="choice-section">
        <div class="container">
            <div class="section-header" data-aos="fade-up">
                <h2 class="section-title">Choisissez Votre Expérience</h2>
                <p class="section-subtitle">
                    Deux façons uniques de découvrir et participer à notre marketplace d'antiquités
                </p>
            </div>

            <div class="choice-grid">
                <!-- Carte Utilisateur -->
                <article class="choice-card user-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="choice-hero">
                        <div class="choice-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <h3 class="choice-title">{{ 'register_choice.user.title'|trans }}</h3>
                        <p class="choice-subtitle">{{ 'register_choice.user.description'|trans }}</p>
                    </div>
                    
                    <div class="choice-features">
                        <div class="feature-list">
                            <div class="feature-item">
                                <i class="fas fa-search text-success"></i>
                                <span>{{ 'register_choice.user.features.0'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-envelope text-success"></i>
                                <span>{{ 'register_choice.user.features.1'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-heart text-success"></i>
                                <span>{{ 'register_choice.user.features.2'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-newspaper text-success"></i>
                                <span>{{ 'register_choice.user.features.3'|trans }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice-footer">
                        <div class="choice-price">
                            <span class="price-badge">{{ 'register_choice.user.price'|trans }}</span>
                        </div>
                        <a href="{{ path('app_register_user', {'_locale': app.request.locale}) }}" class="btn-choice-primary">
                            <i class="fas fa-user-plus me-2"></i>
                            {{ 'register_choice.user.button'|trans }}
                        </a>
                        <p class="choice-note">{{ 'auth.quick_registration'|trans }}</p>
                    </div>
                </article>

                <!-- Carte Antiquaire -->
                <article class="choice-card dealer-card featured" data-aos="fade-up" data-aos-delay="400">
                    <div class="featured-badge">
                        <i class="fas fa-crown"></i>
                        <span>Professionnel</span>
                    </div>
                    
                    <div class="choice-hero">
                        <div class="choice-icon">
                            <i class="fas fa-store"></i>
                        </div>
                        <h3 class="choice-title">{{ 'register_choice.dealer.title'|trans }}</h3>
                        <p class="choice-subtitle">{{ 'register_choice.dealer.description'|trans }}</p>
                    </div>
                    
                    <div class="choice-features">
                        <div class="feature-list">
                            <div class="feature-item">
                                <i class="fas fa-globe text-primary"></i>
                                <span>{{ 'register_choice.dealer.features.0'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-chart-line text-primary"></i>
                                <span>{{ 'register_choice.dealer.features.1'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-tools text-primary"></i>
                                <span>{{ 'register_choice.dealer.features.2'|trans }}</span>
                            </div>
                            <div class="feature-item">
                                <i class="fas fa-headset text-primary"></i>
                                <span>{{ 'register_choice.dealer.features.3'|trans }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice-footer">
                        <div class="choice-price">
                            <span class="price-badge featured">{{ 'register_choice.dealer.price'|trans }}</span>
                        </div>
                        <a href="{{ path('app_register_antiquaire', {'_locale': app.request.locale}) }}" class="btn-choice-featured">
                            <i class="fas fa-store me-2"></i>
                            {{ 'register_choice.dealer.button'|trans }}
                        </a>
                        <p class="choice-note">{{ 'register_choice.dealer.trial'|trans }}</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Section d'aide -->
    <section class="help-section">
        <div class="container">
            <div class="help-card" data-aos="fade-up" data-aos-delay="600">
                <div class="help-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <div class="help-content">
                    <h4 class="help-title">{{ 'register_choice.help.title'|trans }}</h4>
                    <p class="help-description">{{ 'register_choice.help.description'|trans }}</p>
                    <a href="{{ path('subscription_plans') }}" class="btn-help">
                        <i class="fas fa-info-circle me-2"></i>{{ 'subscription.plans.title'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Section de navigation -->
    <section class="navigation-section">
        <div class="container">
            <div class="navigation-card" data-aos="fade-up" data-aos-delay="800">
                <div class="nav-content">
                    <h5 class="nav-title">{{ 'auth.already_member'|trans }}</h5>
                    <p class="nav-description">Connectez-vous à votre espace personnel pour découvrir toutes vos fonctionnalités.</p>
                    <a href="{{ path('app_login', {'_locale': app.request.locale}) }}" class="btn-nav-primary">
                        <i class="fas fa-sign-in-alt me-2"></i>{{ 'auth.login'|trans }}
                    </a>
                </div>
                <div class="nav-back">
                    <a href="{{ path('app_home_localized', {'_locale': app.request.locale}) }}" class="btn-back">
                        <i class="fas fa-arrow-left me-2"></i>{{ 'auth.back_to_home'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
/* Styles pour la page de choix d'inscription */
.register-hero {
    background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%);
    position: relative;
    overflow: hidden;
}

.register-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/texture-content-2.png');
    background-repeat: repeat;
    opacity: 0.1;
    z-index: 0;
}

.choice-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--aef-white) 0%, var(--aef-grey-light) 100%);
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.choice-card {
    background: var(--aef-white);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 136, 204, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.choice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/texture-content-1.png');
    background-repeat: repeat;
    opacity: 0.02;
    z-index: 0;
}

.choice-card > * {
    position: relative;
    z-index: 1;
}

.choice-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 136, 204, 0.2);
}

.choice-card.featured {
    border: 3px solid var(--aef-beige-primary);
    transform: scale(1.05);
}

.choice-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.featured-badge {
    position: absolute;
    top: -1px;
    right: 2rem;
    background: var(--aef-gradient-beige);
    color: var(--aef-white);
    padding: 0.5rem 1.5rem;
    border-radius: 0 0 15px 15px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.choice-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.choice-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--aef-gradient-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--aef-white);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3);
}

.dealer-card .choice-icon {
    background: var(--aef-gradient-beige);
    box-shadow: 0 8px 25px rgba(204, 136, 34, 0.3);
}

.choice-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--aef-text-dark);
    margin-bottom: 1rem;
}

.choice-subtitle {
    color: var(--aef-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.choice-features {
    margin-bottom: 2.5rem;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--aef-grey-light);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: var(--aef-blue-light);
}

.feature-item i {
    font-size: 1.2rem;
    width: 24px;
}

.feature-item span {
    font-weight: 500;
    color: var(--aef-text-dark);
}

.choice-footer {
    text-align: center;
}

.choice-price {
    margin-bottom: 1.5rem;
}

.price-badge {
    background: var(--aef-blue-light);
    color: var(--aef-blue-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
}

.price-badge.featured {
    background: var(--aef-gradient-beige);
    color: var(--aef-white);
}

.btn-choice-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--aef-gradient-blue);
    color: var(--aef-white);
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 250px;
    margin-bottom: 1rem;
}

.btn-choice-primary:hover {
    color: var(--aef-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4);
}

.btn-choice-featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--aef-gradient-beige);
    color: var(--aef-white);
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 250px;
    margin-bottom: 1rem;
}

.btn-choice-featured:hover {
    color: var(--aef-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(204, 136, 34, 0.4);
}

.choice-note {
    color: var(--aef-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.help-section {
    padding: 3rem 0;
    background: var(--aef-grey-light);
}

.help-card {
    background: var(--aef-white);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 136, 204, 0.1);
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.help-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--aef-gradient-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--aef-white);
    flex-shrink: 0;
}

.help-title {
    color: var(--aef-text-dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

.help-description {
    color: var(--aef-text-muted);
    margin-bottom: 1.5rem;
}

.btn-help {
    background: var(--aef-gradient-blue);
    color: var(--aef-white);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-help:hover {
    color: var(--aef-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3);
}

.navigation-section {
    padding: 3rem 0;
    background: var(--aef-white);
}

.navigation-card {
    background: var(--aef-grey-light);
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.nav-title {
    color: var(--aef-text-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.nav-description {
    color: var(--aef-text-muted);
    margin-bottom: 1rem;
}

.btn-nav-primary {
    background: var(--aef-gradient-blue);
    color: var(--aef-white);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-nav-primary:hover {
    color: var(--aef-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3);
}

.btn-back {
    color: var(--aef-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back:hover {
    color: var(--aef-blue-primary);
}

@media (max-width: 768px) {
    .choice-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .choice-card.featured {
        transform: none;
    }
    
    .choice-card.featured:hover {
        transform: translateY(-10px);
    }
    
    .help-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }
    
    .navigation-card {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }
}
</style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <!-- AOS Animation Script -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-out-cubic',
            once: true,
            offset: 50
        });
    </script>
{% endblock %}