{% extends 'base.twig' %}

{% block title %}{{'rule_page_title'|trans}}{% endblock %}
{% block meta_description %}{{'rule_page_title'|trans}}{% endblock %}

{% block canonical_url %}
    <link rel="canonical" href="{{ url('app_rules') }}" />
{% endblock %}

{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "{{ "home_title"|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{ 'rule_title'|trans }}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <main id="rules" class="max-w-6xl mx-auto px-4 py-12 font-sans text-gray-800 bg-[#fbfbfb]">

        {# Header Dynamique Style Esport #}
        <header class="mb-20 relative py-10">
            <div class="relative z-10">
                <h1 class="text-5xl md:text-7xl font-black text-gray-900 tracking-tighter uppercase italic leading-none esrgaa-voice">
                    {{ 'rule_title'|trans }}
                </h1>
                <div class="mt-4 flex items-center gap-2">
                    <div class="h-2 w-24 bg-yellow-500 skew-x-[-20deg]"></div>
                    <div class="h-2 w-12 bg-gray-900 skew-x-[-20deg]"></div>
                </div>
            </div>
            <div class="absolute top-0 right-0 -mr-8 opacity-[0.03] pointer-events-none select-none hidden md:block">
                <span class="text-[12rem] font-black italic uppercase tracking-tighter leading-none">RULES</span>
            </div>
        </header>

        <div class="space-y-24">

            {# PRÉAMBULE #}
            <section class="relative">
                <div class="bg-gray-900 text-white rounded-tr-3xl rounded-bl-3xl p-8 mb-16 shadow-2xl relative border-l-8 border-yellow-500 skew-x-[-1deg]">
                    <div class="skew-x-[1deg]">
                        <h2 class="text-xl font-bold uppercase tracking-widest text-yellow-500 mb-4 italic">
                            // {{ 'rules_preamble_title'|trans }}
                        </h2>
                        <p class="text-gray-300 leading-relaxed italic">
                            {{ 'rules_preamble_text'|trans({'%date%': '29 novembre 2025', '%entry_date%': '1er décembre 2025'})|raw }}
                        </p>
                    </div>
                </div>
            </section>

            {# ARTICLE 01 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 01. {{ 'rules_art1_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)]">
                    <div class="space-y-6 text-gray-600 font-medium italic">
                        <p>{{ 'rules_art1_p1'|trans|raw }}</p>
                        <p>{{ 'rules_art1_p2'|trans|raw }}</p>
                        <div class="bg-gray-50 border-l-4 border-gray-900 p-4 text-sm font-bold uppercase tracking-tight">
                            {{ 'rules_art1_transparency'|trans }}
                        </div>
                    </div>
                </div>
            </section>

            {# ARTICLE 02 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 02. {{ 'rules_art2_main_title'|trans }}
                </span>
                </div>
                <div class="grid grid-cols-1 gap-8">
                    <div class="bg-white border-2 border-gray-200 p-6 rounded-lg shadow-sm italic">
                        <h3 class="text-xl font-black uppercase text-blue-600 mb-3">2.1 {{ 'rules_art2_1_title'|trans }}</h3>
                        <p class="text-gray-600">{{ 'rules_art2_1_p1'|trans|raw }}</p>
                        <p class="mt-4 text-xs font-bold text-blue-800 bg-blue-50 inline-block px-3 py-1 skew-x-[-5deg]">{{ 'rules_art2_1_notice'|trans }}</p>
                    </div>

                    <div class="bg-gray-900 text-white p-8 rounded-lg relative overflow-hidden border-b-8 border-red-600 shadow-xl">
                        <h3 class="text-2xl font-black italic uppercase text-red-500 mb-6 tracking-tighter">// 2.2 {{ 'rules_art2_2_title'|trans }}</h3>
                        <ul class="space-y-3 italic text-sm md:text-base">
                            <li class="flex gap-3 items-center bg-white/5 p-3 border border-white/10 skew-x-[-3deg]"><span class="text-red-500 font-black">▶</span> {{ 'rules_art2_2_reason1'|trans }}</li>
                            <li class="flex gap-3 items-center bg-white/5 p-3 border border-white/10 skew-x-[-3deg] font-bold text-red-400"><span class="text-red-500 font-black">▶</span> {{ 'rules_art2_2_reason2'|trans }}</li>
                            <li class="flex gap-3 items-center bg-white/5 p-3 border border-white/10 skew-x-[-3deg]"><span class="text-red-500 font-black">▶</span> {{ 'rules_art2_2_reason4'|trans }}</li>
                            <li class="flex gap-3 items-center bg-white/5 p-3 border border-white/10 skew-x-[-3deg]"><span class="text-red-500 font-black">▶</span> {{ 'rules_art2_2_reason5'|trans }}</li>
                        </ul>
                        <div class="mt-8 p-4 bg-red-600/10 border-l-4 border-red-600 text-xs italic">
                            <p class="font-bold text-red-500 mb-1 uppercase tracking-widest">{{ 'rules_art2_2_procedure'|trans|raw }}</p>
                            <p class="text-gray-400">{{ 'rules_art2_2_transparency'|trans }}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# ARTICLE 03 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 03. {{ 'rules_art3_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-purple-700 p-8 rounded-lg shadow-[8px_8px_0px_#6b21a8]">
                    <div class="space-y-6 italic">
                        <p class="text-lg font-bold text-gray-900 border-l-4 border-purple-200 pl-4">{{ 'rules_art3_request'|trans|raw }}</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-purple-50 p-4 skew-x-[-5deg] border border-purple-100">
                                <p class="font-black uppercase text-xs text-purple-700">{{ 'rules_art3_ballot_title'|trans }}</p>
                                <p class="text-xs font-bold">{{ 'rules_art3_ballot_desc'|trans }}</p>
                            </div>
                            <div class="bg-purple-50 p-4 skew-x-[-5deg] border border-purple-100">
                                <p class="font-black uppercase text-xs text-purple-700">{{ 'rules_art3_majority_title'|trans }}</p>
                                <p class="text-xs font-bold">{{ 'rules_art3_majority_desc'|trans }}</p>
                            </div>
                        </div>
                        <div class="p-6 bg-gray-900 text-white rounded-lg border-b-4 border-purple-500 relative overflow-hidden">
                            <h4 class="text-purple-400 font-black uppercase text-xs mb-3 italic tracking-widest">// {{ 'rules_art3_tally_title'|trans }}</h4>
                            <p class="mb-4 text-sm text-gray-300">{{ 'rules_art3_tally_p1'|trans }}</p>
                            <div class="bg-white/10 p-4 rounded skew-x-[-2deg] border border-white/10">
                                <p class="text-xl text-yellow-500 font-black uppercase italic">{{ 'rules_art3_tally_p2'|trans }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {# ARTICLE 04 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 04. {{ 'rules_art4_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(22,101,52,1)]">
                    <p class="mb-6 font-bold italic text-gray-700 underline decoration-green-200 decoration-4">{{ 'rules_art4_notice'|trans }}</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="p-5 bg-green-50 border-l-4 border-green-600 italic">
                            <p class="font-black uppercase text-xs text-green-800 mb-1">{{ 'rules_art4_normal_title'|trans }}</p>
                            <p class="text-sm font-medium text-gray-600">{{ 'rules_art4_normal_desc'|trans }}</p>
                        </div>
                        <div class="p-5 bg-green-50 border-l-4 border-green-600 italic">
                            <p class="font-black uppercase text-xs text-green-800 mb-1">{{ 'rules_art4_extra_title'|trans }}</p>
                            <p class="text-sm font-medium text-gray-600">{{ 'rules_art4_extra_desc'|trans }}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# ARTICLE 05 #}
            <section class="relative">
                <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-6 shadow-xl border-b-2 border-yellow-600">
                <span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
                    // 05. {{ 'rules_art5_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-cyan-600 p-8 rounded-lg shadow-[8px_8px_0px_#0891b2]">
                    <div class="space-y-6 italic text-sm md:text-base">
                        <p class="font-bold text-gray-800">{{ 'rules_art5_p1'|trans|raw }}</p>
                        <div class="bg-gray-900 text-cyan-400 p-6 rounded-tr-3xl rounded-bl-3xl border-l-8 border-cyan-600 shadow-inner">
                            <h4 class="font-black text-white text-xs mb-3 uppercase tracking-widest">// {{ 'rules_art5_stand_title'|trans }}</h4>
                            <p class="text-sm leading-relaxed text-gray-300 font-medium">
                                {{ 'rules_art5_stand_desc'|trans }}
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
{% endblock %}