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

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

{% block body %}
<div class="container py-5">
    <!-- En-tête de bienvenue -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card aef-texture-section border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="aef-title h3 mb-2">
                                <i class="fas fa-user-circle me-2" style="color: var(--aef-blue-primary);"></i>
                                {{ 'dashboard.welcome'|trans({'%name%': user.firstName ?? user.email}) }}
                            </h1>
                            <p class="aef-text-muted mb-0">
                                {{ 'user_dashboard.discover_antiques'|trans }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <span class="badge" style="background-color: var(--aef-blue-primary); font-size: 1rem;">
                                <i class="fas fa-user me-1"></i>{{ 'user_dashboard.user_type'|trans }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions principales -->
    <div class="row g-4 mb-5">
        <div class="col-md-6 col-lg-3">
            <div class="card h-100 aef-interactive text-center">
                <div class="card-body p-4">
                    <div class="mb-3">
                        <i class="fas fa-bell fa-3x" style="color: var(--aef-blue-primary);"></i>
                    </div>
                    <h5 class="aef-subtitle">{{ 'user_dashboard.my_alerts.title'|trans }}</h5>
                    <p class="aef-text-muted small mb-3">
                        {{ 'user_dashboard.my_alerts.description'|trans }}
                    </p>
                    <a href="{{ path('user_alerts') }}" class="btn btn-primary">
                        <i class="fas fa-cog me-1"></i>{{ 'user_dashboard.my_alerts.link'|trans }}
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3">
            <div class="card h-100 aef-interactive text-center">
                <div class="card-body p-4">
                    <div class="mb-3">
                        <i class="fas fa-heart fa-3x" style="color: var(--aef-beige-primary);"></i>
                    </div>
                    <h5 class="aef-subtitle">{{ 'user_dashboard.my_favorites.title'|trans }}</h5>
                    <p class="aef-text-muted small mb-3">
                        {{ 'user_dashboard.my_favorites.description'|trans }}
                    </p>
                    <a href="{{ path('user_favorites') }}" class="btn btn-secondary-aef">
                        <i class="fas fa-heart me-1"></i>{{ 'user_dashboard.my_favorites.link'|trans }}
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3">
            <div class="card h-100 aef-interactive text-center">
                <div class="card-body p-4">
                    <div class="mb-3">
                        <i class="fas fa-envelope fa-3x" style="color: var(--aef-blue-primary);"></i>
                    </div>
                    <h5 class="aef-subtitle">{{ 'user_dashboard.newsletter.title'|trans }}</h5>
                    <p class="aef-text-muted small mb-3">
                        {{ 'user_dashboard.newsletter.description'|trans }}
                    </p>
                    <a href="{{ path('user_newsletter') }}" class="btn btn-primary">
                        <i class="fas fa-cog me-1"></i>{{ 'user_dashboard.newsletter.link'|trans }}
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3">
            <div class="card h-100 aef-interactive text-center">
                <div class="card-body p-4">
                    <div class="mb-3">
                        <i class="fas fa-user-cog fa-3x" style="color: var(--aef-beige-primary);"></i>
                    </div>
                    <h5 class="aef-subtitle">{{ 'user_dashboard.my_profile.title'|trans }}</h5>
                    <p class="aef-text-muted small mb-3">
                        {{ 'user_dashboard.my_profile.description'|trans }}
                    </p>
                    <a href="{{ path('user_profile') }}" class="btn btn-secondary-aef">
                        <i class="fas fa-cog me-1"></i>{{ 'user_dashboard.my_profile.link'|trans }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Section découverte -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header" style="background: var(--aef-gradient-beige); color: white;">
                    <h4 class="mb-0">
                        <i class="fas fa-gem me-2"></i>{{ 'user_dashboard.discoveries.title'|trans }}
                    </h4>
                </div>
                <div class="card-body p-4">
                    <div class="row text-center">
                        <div class="col-md-4 mb-3">
                            <div class="p-3">
                                <i class="fas fa-crown fa-2x mb-2" style="color: var(--aef-beige-primary);"></i>
                                <h6>{{ 'user_dashboard.discoveries.exceptional_objects'|trans }}</h6>
                                <p class="small text-muted">{{ 'user_dashboard.discoveries.exceptional_description'|trans }}</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3">
                                <i class="fas fa-palette fa-2x mb-2" style="color: var(--aef-blue-primary);"></i>
                                <h6>{{ 'user_dashboard.discoveries.art_decoration'|trans }}</h6>
                                <p class="small text-muted">{{ 'user_dashboard.discoveries.art_description'|trans }}</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3">
                                <i class="fas fa-chair fa-2x mb-2" style="color: var(--aef-beige-primary);"></i>
                                <h6>{{ 'user_dashboard.discoveries.antique_furniture'|trans }}</h6>
                                <p class="small text-muted">{{ 'user_dashboard.discoveries.furniture_description'|trans }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ path('catalog_index') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-eye me-2"></i>{{ 'user_dashboard.discoveries.view_all'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section devenir antiquaire -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, var(--aef-blue-light), var(--aef-beige-light));">
                <div class="card-body text-center p-5">
                    <h4 class="mb-3" style="color: var(--aef-blue-dark);">
                        <i class="fas fa-store me-2" style="color: var(--aef-beige-primary);"></i>
                        {{ 'user_dashboard.become_dealer.title'|trans }}
                    </h4>
                    <p class="lead mb-4" style="color: var(--aef-blue-dark);">
                        {{ 'user_dashboard.become_dealer.description'|trans }}
                    </p>
                    <div class="row text-center mb-4">
                        <div class="col-md-4">
                            <i class="fas fa-globe fa-2x mb-2" style="color: var(--aef-blue-primary);"></i>
                            <h6 style="color: var(--aef-blue-dark);">{{ 'user_dashboard.become_dealer.national_visibility'|trans }}</h6>
                        </div>
                        <div class="col-md-4">
                            <i class="fas fa-tools fa-2x mb-2" style="color: var(--aef-blue-primary);"></i>
                            <h6 style="color: var(--aef-blue-dark);">{{ 'user_dashboard.become_dealer.management_tools'|trans }}</h6>
                        </div>
                        <div class="col-md-4">
                            <i class="fas fa-handshake fa-2x mb-2" style="color: var(--aef-blue-primary);"></i>
                            <h6 style="color: var(--aef-blue-dark);">{{ 'user_dashboard.become_dealer.dedicated_support'|trans }}</h6>
                        </div>
                    </div>
                    <div>
                        <a href="{{ path('app_register_antiquaire') }}" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-store me-2"></i>{{ 'user_dashboard.become_dealer.become_button'|trans }}
                        </a>
                        <a href="{{ path('subscription_plans') }}" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-info-circle me-2"></i>{{ 'user_dashboard.become_dealer.view_plans'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}