{% extends 'base.twig' %}

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

{% block canonical_url %}
    <link rel="canonical" href="{{ url('app_cgu') }}" />
{% 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": "{{'cgu_short_title'|trans}}",
              "item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <main id="cgu" 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">
                    {{ 'cgu_page_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>
                <p class="mt-6 text-xs font-bold text-red-600 uppercase tracking-widest italic bg-red-50 inline-block px-4 py-1 border-l-4 border-red-600">
                    {{ 'cgu_intro_disclaimer'|trans }}
                </p>
            </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">TERMS</span>
            </div>
        </header>

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

            {# 1. ACCEPTATION #}
            <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">// {{'cgu_section1_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)] italic">
                    <div class="space-y-4 text-gray-700">
                        <p class="text-lg font-bold text-gray-900">
                            {{'cgu_section1_p1'|trans({
                                '%link%': '<span class="text-indigo-600 underline">e-cosplay.fr</span>'
                            })|raw}}
                        </p>
                        <p class="text-sm leading-relaxed">{{'cgu_section1_p2'|trans}}</p>
                    </div>
                </div>
            </section>

            {# 2. SERVICES PROPOSÉS #}
            <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">// {{'cgu_section2_title'|trans}}</span>
                </div>
                <div class="bg-gray-900 text-white p-8 rounded-lg border-r-8 border-yellow-500 shadow-xl italic">
                    <p class="mb-6 text-gray-300">{{'cgu_section2_p1'|trans}}</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-white/5 p-4 border border-white/10 hover:bg-white/10 transition-colors">
                            <span class="text-yellow-500 font-black block mb-2">01.</span>
                            <p class="text-xs uppercase font-bold tracking-tight">{{'cgu_section2_list1'|trans}}</p>
                        </div>
                        <div class="bg-white/5 p-4 border border-white/10 hover:bg-white/10 transition-colors">
                            <span class="text-yellow-500 font-black block mb-2">02.</span>
                            <p class="text-xs uppercase font-bold tracking-tight">{{'cgu_section2_list2'|trans}}</p>
                        </div>
                        <div class="bg-white/5 p-4 border border-white/10 hover:bg-white/10 transition-colors">
                            <span class="text-yellow-500 font-black block mb-2">03.</span>
                            <p class="text-xs uppercase font-bold tracking-tight">{{'cgu_section2_list3'|trans}}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# 3. ACCÈS ET UTILISATION #}
            <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">// {{'cgu_section3_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)] italic">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                        <div class="space-y-3">
                            <h3 class="text-indigo-600 font-black uppercase text-xs tracking-widest border-b-2 border-indigo-50 pb-1">{{'cgu_section3_subtitle1'|trans}}</h3>
                            <p class="text-sm text-gray-600">{{'cgu_section3_p2'|trans}}</p>
                        </div>
                        <div class="space-y-3">
                            <h3 class="text-indigo-600 font-black uppercase text-xs tracking-widest border-b-2 border-indigo-50 pb-1">{{'cgu_section3_subtitle2'|trans}}</h3>
                            <p class="text-sm text-gray-600">{{'cgu_section3_p3'|trans}}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# 4. RESPONSABILITÉ #}
            <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">//  {{'cgu_section4_title'|trans}}</span>
                </div>
                <div class="bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(220,38,38,1)] italic">
                    <div class="space-y-6">
                        <div class="flex flex-col md:flex-row gap-6">
                            <p class="text-sm text-gray-600 flex-1">{{'cgu_section4_p1'|trans}}</p>
                            <p class="text-sm text-gray-600 flex-1">{{'cgu_section4_p2'|trans}}</p>
                        </div>
                        <div class="bg-red-50 p-6 border-l-4 border-red-600">
                            <h4 class="text-red-600 font-black uppercase text-xs mb-2 tracking-widest">{{'cgu_section4_subtitle1'|trans}}</h4>
                            <p class="text-sm font-bold text-gray-900">{{'cgu_section4_p3'|trans}}</p>
                        </div>
                    </div>
                </div>
            </section>

            {# 5. DROIT APPLICABLE #}
            <section class="relative">
                <div class="bg-gray-900 text-white p-10 rounded-lg border-b-8 border-indigo-600 shadow-xl italic text-center">
                    <h2 class="text-indigo-400 font-black uppercase tracking-widest mb-4 italic text-xl">// {{'cgu_section5_title'|trans}}</h2>
                    <div class="max-w-2xl mx-auto space-y-2">
                        <p class="text-lg font-black uppercase tracking-tighter">{{'cgu_section5_p1'|trans}}</p>
                        <p class="text-sm text-gray-400">{{'cgu_section5_p2'|trans}}</p>
                    </div>
                </div>
            </section>

        </div>
    </main>
{% endblock %}