{% extends 'base.twig' %}

{# --- METADATA & SCHEMA --- #}
{% block title %}{{'page.presentation.title'|trans}}{% endblock %}
{% block meta_description %}{{'page.presentation.description'|trans}}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages') }}" />{% endblock %}
{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
        {
        "@type": "ListItem",
        "position": 1,
        "name": "{{ 'breadcrumb.home'|trans }}",
"item": "{{ app.request.schemeAndHttpHost }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "{{ 'page_presentation.breadcrumb'|trans }}",
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
}
]
}
    </script>
{% endblock %}

{# --- BODY --- #}
{% block body %}
    <main class="py-16 bg-gray-100/50 min-h-screen">

        {# Wrapper global pour centrer le contenu et gérer le padding mobile #}
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            {# Titre Style Moderne/Anime Épuré #}
            <h1 class="text-5xl md:text-6xl font-extrabold text-center mb-12 relative
                   tracking-tight pb-2 text-gray-900">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> - {{ 'page.presentation.header'|trans }}
                <span class="block w-24 h-1 mx-auto mt-2 bg-gradient-to-r from-red-500 to-yellow-500 rounded-full"></span>
            </h1>

            {# Conteneur des Fonctionnalités #}
            <div class="bg-white p-6 sm:p-8 md:p-14 rounded-3xl shadow-[0_20px_40px_-10px_rgba(0,0,0,0.2)] border-t-8 border-yellow-500/80">
                <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
                    {{ 'page.presentation.subtitle'|trans }}
                </h2>
                <p class="text-xl text-gray-600 mb-6 leading-relaxed text-center font-medium">
                    {{ 'page.presentation.intro_paragraph_1'|trans }}<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> {{ 'page.presentation.intro_paragraph_1_2'|trans }}
                </p>

                {# Clarification du Rôle de l'EPage #}
                <p class="text-lg sm:text-xl text-gray-700 mb-10 leading-relaxed text-center font-medium border-l-4 border-yellow-500 pl-4 sm:pl-6 py-3 bg-yellow-50 rounded-lg italic">
                    {{ 'page.presentation.intro_paragraph_2'|trans({
                        'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                        'strong_tag': '<strong>',
                        'strong_end_tag': '</strong>',
                        'warning_tag': '<strong class="text-red-600/90 block mt-2">'
                    })|raw }}
                </p>

                {# GRILLE DES FONCTIONNALITÉS (devient 1 colonne sur mobile, 2 sur md, 3 sur lg) #}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-10 text-gray-700">

                    {# Bloc 1: Visibilité Maximale (Loupe) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.seo.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.seo.description'|trans({
                                'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
                            })|raw }}</p>
                    </div>

                    {# Bloc 2: Centralisation de Contenu (Chaîne) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3"/><path d="M9 17H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/><line x1="8" x2="16" y1="12" y2="12"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.nexus.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.nexus.description'|trans({
                                'strong_tag': '<strong>',
                                'strong_end_tag': '</strong>'
                            })|raw }}</p>
                    </div>

                    {# Bloc 3: Annonces & Événements (Calendrier) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.convention.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.convention.description'|trans }}</p>
                    </div>

                    {# Bloc 4: Intégration E-Cosplay (Cœur) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-heart"><path d="M11 14h2a2 2 0 0 0 2-2V7.5l-3.24-3.24a1 1 0 0 0-1.42 0L8 7.5V12a2 2 0 0 0 2 2h2"/><path d="M10 10l.02.02"/><path d="M14 10l.02.02"/><path d="M20 16c0 4.42-3.58 8-8 8s-8-3.58-8-8 8-16 8-16 8 11.58 8 16z"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.approval.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.approval.description'|trans({
                                'strong_tag': '<strong>',
                                'strong_end_tag': '</strong>'
                            })|raw }}</p>
                    </div>

                    {# Bloc 5: Modération et Sécurité (Bouclier) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.security.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">
                            {{ 'page.presentation.feature.security.description'|trans({
                                'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                                'strong_tag': '<strong>',
                                'strong_end_tag': '</strong>'
                            })|raw }}
                        </p>
                        <p class="text-lg mt-2">
                            {{ 'page.presentation.feature.security.encrypted_data'|trans({
                                'strong_tag': '<strong>',
                                'strong_end_tag': '</strong>'
                            })|raw }}
                        </p>
                        <p class="text-lg mt-2">
                            {{ 'page.presentation.feature.security.data_minimum'|trans }}
                        </p>
                        <p class="text-lg mt-2">
                            {{ 'page.presentation.feature.security.no_fly_inscription'|trans({
                                'strong_tag': '<strong>',
                                'strong_end_tag': '</strong>'
                            })|raw }}
                        </p>
                    </div>

                    {# Bloc 6: Formulaire de Contact Sécurisé (Mail Check) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check"><path d="M22 10V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h10"/><path d="m22 10-7.23 6.11a3 3 0 0 1-3.48 0L2 10"/><path d="m16 22 2 2 4-4"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.contact.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">
                            {{ 'page.presentation.feature.contact.description'|trans }}
                            <br><span class="text-sm mt-2 block text-gray-500 font-medium">{{ 'page.presentation.feature.contact.disclaimer'|trans}}<a target="_blank" class='text-red-500 hover:text-red-600 underline font-bold transition duration-300' href='{{  path('app_rgpd') }}'>{{ 'page.presentation.feature.contact.policy_text'|trans }}</a></span>
                        </p>
                    </div>

                    {# Bloc 7: Personalisation (Palette) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="10.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.92 0 1.63-.67 1.95-1.57.17-.46.33-.87.49-1.29.35-.91.78-1.78 1.3-2.58.6-1.14 1.34-2.13 2.22-2.91.88-.78 1.94-1.28 3.12-1.28C21.5 10.5 22 6.5 22 12c0-5.5-4.5-10-10-10z"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.customization.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.customization.description'|trans({
                                'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
                            })|raw }}</p>
                    </div>

                    {# Bloc 8: Suivi / Analytics (Activity) #}
                    <div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
                        <div class="flex items-center space-x-4 mb-3">
                        <span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                        </span>
                            <h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.analytics.title'|trans }}</h3>
                        </div>
                        <p class="text-lg">{{ 'page.presentation.feature.analytics.description'|trans }}</p>
                    </div>
                </div>
            </div>


            {# BLOC : OFFRE SANS ENGAGEMENT #}
            <div class="mt-12 p-6 sm:p-8 bg-white border-2 border-red-500 rounded-2xl shadow-xl text-center">
                <h4 class="text-xl sm:text-3xl font-extrabold text-gray-900 mb-3 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-launch mr-3 text-red-500"><path d="M10 21h4c1.1 0 2-.9 2-2v-7a2 2 0 0 0-2-2h-4c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2z"/><path d="M12 10a2 2 0 0 0 2-2V4a2 2 0 1 0-4 0v4a2 2 0 0 0 2 2z"/><path d="M7 16l-3 3"/><path d="M17 16l3 3"/><path d="M12 21v-2"/></svg>
                    {{ 'page.presentation.flexibility.title'|trans }}
                </h4>
                <p class="text-lg sm:text-xl text-gray-700 leading-relaxed">
                    {{ 'page.presentation.flexibility.no_commitment'|trans({
                        'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                        'strong_tag': '<strong>',
                        'strong_end_tag': '</strong>'
                    })|raw }}
                </p>
                <p class="text-base sm:text-lg text-gray-600 mt-2">
                    {{ 'page.presentation.flexibility.renewal_auto'|trans|raw }}
                    <strong>{{ 'page.presentation.flexibility.periods_cancel'|trans }}</strong>
                </p>
            </div>

            {# Appel à l'action pour les étapes #}
            <div class="text-center mt-16">
                <h3 class="text-2xl sm:text-3xl font-extrabold text-gray-800 mb-5">{{ 'page.presentation.call_to_action'|trans }}</h3>
            </div>

            {# CONTENEUR DE GRILLE POUR LES 3 BLOCS D'INFORMATION #}
            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">

                {# BLOC 1: INFO TECHNIQUE NOM DE DOMAINE #}
                <div class="p-6 sm:p-8 bg-yellow-50 border border-yellow-300 rounded-xl shadow-md text-gray-700">
                    <h4 class="text-xl sm:text-2xl font-extrabold text-yellow-700 mb-3 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-square mr-2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m10 13-2-2 2-2"/><path d="m14 11 2 2-2 2"/></svg>
                        {{ 'page.presentation.domain_info.title'|trans }}
                    </h4>
                    <p class="text-base sm:text-lg leading-relaxed">
                        <strong>{{ 'page.presentation.domain_info.no_domain_question'|trans }}</strong>
                        <br>{{ 'page.presentation.domain_info.default_url'|trans({
                            'url_part': '<code class="bg-gray-200 text-yellow-800 p-1 rounded font-mono text-sm">votre_pseudo.<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">e-cosplay</span>.com</code>'
                        })|raw }}
                    </p>
                    <p class="text-base sm:text-lg leading-relaxed mt-3">
                        <strong>{{ 'page.presentation.domain_info.has_domain_question'|trans }}</strong>
                        <br>{{ 'page.presentation.domain_info.cname_guide'|trans({
                            'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
                        })|raw }}
                    </p>
                    <p class="text-base sm:text-lg leading-relaxed mt-3 border-t pt-3 border-yellow-300">
                        <strong class="text-yellow-700">{{ 'page.presentation.domain_info.purchase_title'|trans }}</strong>
                        <br>{{ 'page.presentation.domain_info.partner_purchase'|trans({
                            'partner_strong': '<strong>SARL SITECONSEIL</strong>'
                        })|raw }}
                    </p>
                </div>

                {# BLOC 2: INFO LÉGALE COPYRIGHT #}
                <div class="p-6 sm:p-8 bg-blue-50 border border-blue-300 rounded-xl shadow-md text-gray-700">
                    <h4 class="text-xl sm:text-2xl font-extrabold text-blue-700 mb-3 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gavel mr-2"><path d="m15 11-8 8"/><path d="m14 4 6 6"/><path d="m4 4 6 6"/><path d="M17 17l5 5"/><path d="m15 11-1 1-2 2-2 2"/></svg>
                        {{ 'page.presentation.copyright_info.title'|trans }}
                    </h4>
                    <p class="text-base sm:text-lg leading-relaxed">
                        {{ 'page.presentation.copyright_info.responsibility'|trans({
                            'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                            'strong_tag': '<strong>',
                            'strong_end_tag': '</strong>',
                            'red_strong': '<strong class="text-red-600">'
                        })|raw }}
                    </p>
                    <p class="text-base sm:text-lg leading-relaxed mt-3">
                        <strong class="text-blue-700">{{ 'page.presentation.copyright_info.help_team'|trans }}</strong>
                        <br>{{ 'page.presentation.copyright_info.contact_us'|trans }}
                    </p>
                </div>

                {# BLOC 3: INFO FONCTIONNALITÉS SUPPLÉMENTAIRES #}
                <div class="p-6 sm:p-8 bg-red-50 border border-red-300 rounded-xl shadow-md text-gray-700">
                    <h4 class="text-xl sm:text-2xl font-extrabold text-red-700 mb-3 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap mr-2"><path d="M10 17l6-6-6-6v3H4v6h6z"/></svg>
                        {{ 'page.presentation.additional_features.title'|trans }}
                    </h4>
                    <p class="text-base sm:text-lg leading-relaxed">
                        {{ 'page.presentation.additional_features.request_support'|trans({
                            'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                            'strong_tag': '<strong>',
                            'strong_end_tag': '</strong>'
                        })|raw }}
                    </p>
                    <p class="text-base sm:text-lg leading-relaxed mt-3">
                        {{ 'page.presentation.additional_features.siteconseil_referral'|trans({
                            'partner_strong_cyan': '<strong class="text-cyan-700">SARL SITECONSEIL</strong>'
                        })|raw }}
                    </p>
                </div>

            </div>

            {# BLOC DE TARIFICATION EPage (CARTE UNIQUE AVEC SÉLECTEUR) - CENTRÉ ET RESPONSIVE #}
            <div class="mt-16 text-center" style="display: none">
                <h3 class="text-4xl font-extrabold text-gray-800 mb-8">{{ 'page.presentation.pricing.choose_period'|trans }}</h3>

                <div class="max-w-xl mx-auto p-6 sm:p-8 bg-white border-4 border-red-500 rounded-3xl shadow-2xl">

                    <h4 class="text-3xl font-bold text-gray-900 mb-6">
                        <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>
                    </h4>

                    {# SÉLECTEUR DE DURÉE (Utilise flex-wrap pour s'adapter sur mobile) #}
                    <div class="flex flex-wrap justify-center gap-2 sm:gap-4 mb-8 bg-gray-100 p-2 rounded-xl">

                        <label class="relative flex-1 cursor-pointer min-w-[70px]">
                            <input type="radio" name="duration" value="1M" class="peer hidden" checked onchange="updatePrice(this.value)">
                            <span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
                                     peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
                            {{ 'page.presentation.pricing.period_1m'|trans }}
                        </span>
                        </label>

                        <label class="relative flex-1 cursor-pointer group min-w-[70px]">
                            <input type="radio" name="duration" value="2M" class="peer hidden" onchange="updatePrice(this.value)">
                            <span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
                                     peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
                            {{ 'page.presentation.pricing.period_2m'|trans }}
                            <span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_2e'|trans }}</span>
                        </span>
                        </label>

                        <label class="relative flex-1 cursor-pointer group min-w-[70px]">
                            <input type="radio" name="duration" value="3M" class="peer hidden" onchange="updatePrice(this.value)">
                            <span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
                                     peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
                            {{ 'page.presentation.pricing.period_3m'|trans }}
                            <span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_3e'|trans }}</span>
                        </span>
                        </label>

                        <label class="relative flex-1 cursor-pointer group min-w-[70px]">
                            <input type="radio" name="duration" value="6M" class="peer hidden" onchange="updatePrice(this.value)">
                            <span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
                                     peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
                            {{ 'page.presentation.pricing.period_6m'|trans }}
                            <span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_0e'|trans }}</span>
                        </span>
                        </label>

                        <label class="relative flex-1 cursor-pointer group min-w-[70px]">
                            <input type="radio" name="duration" value="12M" class="peer hidden" onchange="updatePrice(this.value)">
                            <span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
                                     peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
                            {{ 'page.presentation.pricing.period_12m'|trans }}
                            <span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-red-700 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.best_deal'|trans }}</span>
                        </span>
                        </label>
                    </div>

                    {# AFFICHAGE DU PRIX DYNAMIQUE #}
                    <div class="text-5xl sm:text-6xl font-extrabold text-gray-900 my-6">
                        <span id="current-price">5€</span><span class="text-xl sm:text-2xl text-red-600"> {{ 'page.presentation.pricing.tax_info'|trans }}</span>
                    </div>

                    <p id="price-per-month" class="text-lg sm:text-xl text-gray-500 mb-8"></p>

                    {# BOUTON D'ACTION #}
                    <button onclick="redirectToCheckout()" class="w-full px-8 py-4 bg-gradient-to-r from-yellow-500 to-red-600 text-white font-extrabold text-xl rounded-xl transition duration-300 transform hover:scale-[1.03] shadow-lg shadow-red-300/50">
                        {{ 'page.presentation.pricing.cta_button'|trans }}
                    </button>

                    <p class="text-xs sm:text-sm text-gray-500 mt-4 italic">
                        {{ 'page.presentation.pricing.disclaimer'|trans }}
                    </p>
                </div>
            </div>
            {# BLOC PARTENARIAT SITECONSEIL #}
            <div class="mt-20 pt-10 pb-10 bg-white text-gray-900 rounded-3xl shadow-2xl border border-gray-200">
                <div class="text-center px-4 sm:px-6">
                    <h3 class="text-3xl sm:text-4xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">
                        {{ 'page.presentation.siteconseil_partner.title'|trans }}
                    </h3>
                    <p class="text-lg sm:text-xl text-gray-600 mb-6">
                        {{ 'page.presentation.siteconseil_partner.intro'|trans({
                            'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
                            'strong_tag': '<strong>',
                            'strong_end_tag': '</strong>'
                        })|raw }}
                    </p>

                    <div class="bg-gray-100 p-6 rounded-xl border-l-8 border-cyan-500 inline-block max-w-xl text-gray-900">
                        <p class="text-xl sm:text-2xl font-bold mb-2">{{ 'page.presentation.siteconseil_partner.recommended'|trans }}</p>
                        <p class="text-base sm:text-lg text-gray-700">
                            {{ 'page.presentation.siteconseil_partner.cms_info'|trans({
                                'partner_strong': '<strong>SARL SITECONSEIL</strong>',
                                'cms_strong': '<strong class="text-yellow-600">Esy-Flex</strong>'
                            })|raw }}
                        </p>
                        <p class="text-base sm:text-lg text-gray-700 mt-2">
                            {{ 'page.presentation.siteconseil_partner.offer_info'|trans }}
                        </p>
                        <a href="https://www.siteconseil.fr" target="_blank" class="mt-4 inline-block px-6 sm:px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-gray-900 font-extrabold text-base sm:text-lg rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
                            {{ 'page.presentation.siteconseil_partner.discover_button'|trans }}
                            <!-- Icone de Lien Externe -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block ml-2 h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M10 14L16.6 7.4"/></svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // Données de prix (en Euros HT)
            const pricing = {
                '1M': { price: 5, label: '5€ / mois' },
                '2M': { price: 8, label: '4€ / mois' },
                '3M': { price: 12, label: '4€ / mois' },
                '6M': { price: 25, label: '4.16€ / mois' },
                '12M': { price: 40, label: '3.33€ / mois' }
            };

            // Translation Keys (In a real Symfony app, these would be loaded from an assets file or context)
            const translations = {
                'monthly_renewal': '{{ 'page.presentation.js.monthly_renewal'|trans }}',
                'annual_billing': '{{ 'page.presentation.js.annual_billing'|trans }}',
                'periodic_billing': '{{ 'page.presentation.js.periodic_billing'|trans }}',
            };

            function updatePrice(duration) {
                const priceElement = document.getElementById('current-price');
                const perMonthElement = document.getElementById('price-per-month');

                const data = pricing[duration];

                if (data) {
                    priceElement.textContent = data.price + '€';

                    if (duration === '1M') {
                        perMonthElement.textContent = translations.monthly_renewal;
                    } else if (duration === '12M') {
                        // Use string replacement for translated text with interpolation
                        const translatedText = translations.annual_billing.replace(
                            '%average_price%', `<strong class="text-red-500">${data.label}</strong>`
                        );
                        perMonthElement.innerHTML = translatedText;
                    } else {
                        // Use string replacement for translated text with interpolation
                        const months = duration.replace('M', '');
                        const translatedText = translations.periodic_billing
                            .replace('%duration%', months)
                            .replace('%average_price%', `<strong class="text-red-500">${data.label}</strong>`);

                        perMonthElement.innerHTML = translatedText;
                    }
                }
            }

            // Initialiser le prix au chargement (pour l'abonnement 1M).
            // J'utilise turbo:load ou DOMContentLoaded comme fallback.
            function initializePrice() {
                updatePrice('1M');
            }

            function redirectToCheckout() {
                const selectedDurationInput = document.querySelector('input[name="duration"]:checked');

                if (selectedDurationInput) {
                    const selectedDuration = selectedDurationInput.value;

                    // --- AJOUT DE LA VALIDATION DE DURÉE ---
                    if (VALID_DURATIONS.includes(selectedDuration)) {
                        // Redirection avec le paramètre 'abo' valide
                        window.location.href = `/pages/onboaring?abo=${selectedDuration}`;
                    } else {
                        // Fallback si la durée sélectionnée n'est pas dans la liste des valides
                        console.error("Durée d'abonnement sélectionnée non valide:", selectedDuration);
                        // On peut rediriger vers la page par défaut si l'on ne veut pas bloquer l'utilisateur
                        window.location.href = `/pages/onboaring?abo=1M`;
                    }
                } else {
                    // Fallback si rien n'est sélectionné (redirection par défaut vers 1M ou page de découverte)
                    console.error("Aucune durée d'abonnement sélectionnée. Redirection par défaut.");
                    window.location.href = `/pages/onboaring?abo=1M`;
                }
            }

            if (typeof window.Turbo !== 'undefined') {
                document.addEventListener('turbo:load', initializePrice);
            } else {
                document.addEventListener('DOMContentLoaded', initializePrice);
            }
        </script>
    </main>


{% endblock %}