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

{% block title %}Fonctionnalité Premium{% endblock %}
{% block breadcrumb %}Mise à niveau requise{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <div class="modern-card text-center" data-aos="fade-up">
                <div class="mb-4">
                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center"
                         style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fas fa-lock text-white fa-3x"></i>
                    </div>
                </div>

                <h2 class="fw-bold mb-3">Fonctionnalité Premium</h2>

                <p class="text-muted mb-4 fs-5">
                    {{ message|default('Cette fonctionnalité n\'est pas disponible avec votre plan actuel.') }}
                </p>

                <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
                    <i class="fas fa-info-circle me-3 fs-5"></i>
                    <div class="text-start">
                        {% if suggestedPlan == 'essential' %}
                            <strong>Plan Essential</strong> - 9,90€/mois
                            <br><small class="text-muted">Blog, Galeries, Contact, Statistiques, tous les widgets</small>
                        {% elseif suggestedPlan == 'pro' %}
                            <strong>Plan Pro</strong> - 19,90€/mois
                            <br><small class="text-muted">IA, Chatbot, E-commerce, Multi-utilisateurs, Analytics</small>
                        {% else %}
                            <strong>Passez à un plan supérieur</strong>
                            <br><small class="text-muted">Débloquez toutes les fonctionnalités</small>
                        {% endif %}
                    </div>
                </div>

                <div class="d-grid gap-3">
                    <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}"
                       class="btn btn-lg text-white fw-semibold"
                       style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fas fa-crown me-2"></i>
                        Passer au plan {{ suggestedPlan|default('supérieur')|capitalize }}
                    </a>
                    <a href="{{ path('dashboard') }}" class="btn btn-lg btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        Retour au tableau de bord
                    </a>
                </div>

                <div class="mt-4 pt-4 border-top">
                    <p class="text-muted small mb-0">
                        <i class="fas fa-question-circle me-1"></i>
                        Des questions ?
                        <a href="{{ path('our-contact') }}" class="text-decoration-none">Contactez-nous</a>
                    </p>
                </div>
            </div>

            <div class="text-center mt-4" data-aos="fade-up" data-aos-delay="100">
                <a href="{{ path('price') }}" class="text-decoration-none" style="color: #667eea;">
                    <i class="fas fa-table me-1"></i>
                    Comparer toutes les formules
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}