{% extends 'base.twig' %}

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

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

{% block body %}
    <main id="legal" 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">
                    {{ 'legal_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>
            </div>
            <div class="absolute top-0 right-0 -mr-8 opacity-[0.03] pointer-events-none select-none hidden md:block">
                <span class="text-[10rem] font-black italic uppercase tracking-tighter leading-none">LEGAL</span>
            </div>
        </header>

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

            {# 1. OBJET DU SITE #}
            <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">// {{'legal_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">
                    <p class="mb-4 text-gray-900 font-bold">{{'legal_section1_p1'|trans({'%site_url%': app.request.schemeAndHttpHost})|raw}}</p>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-center gap-2"><span class="text-yellow-500 font-black">/</span> {{'legal_section1_list1'|trans}}</li>
                        <li class="flex items-center gap-2"><span class="text-yellow-500 font-black">/</span> {{'legal_section1_list2'|trans}}</li>
                        <li class="flex items-center gap-2"><span class="text-yellow-500 font-black">/</span> {{'legal_section1_list3'|trans}}</li>
                    </ul>
                </div>
            </section>

            {# 2. ÉDITEUR #}
            <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">// {{'legal_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 grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2 text-sm">
                        <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">{{'legal_label_association_name'|trans}} :</strong> E-Cosplay</p>
                        <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">{{'legal_label_rna'|trans}} :</strong> W022006988</p>
                        <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">{{'legal_label_siren'|trans}} :</strong> 943121517</p>
                        <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">{{'legal_label_address'|trans}} :</strong> 42 rue de Saint-Quentin, 02800 Beautor</p>
                    </div>
                    <div class="flex flex-col justify-center items-start md:items-end">
                        <p class="mb-2"><strong class="text-yellow-500 uppercase tracking-widest text-xs">{{'legal_label_publication_director'|trans}} :</strong></p>
                        <span class="text-xl font-black uppercase text-white">Serreau Jovann</span>
                        <a href="mailto:contact@e-cosplay.fr" class="text-yellow-500 font-bold hover:underline mt-2">contact@e-cosplay.fr</a>
                    </div>
                </div>
            </section>

            {# 3. HÉBERGEMENT & 4. PROPRIÉTÉ #}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <section>
                    <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-2 font-black italic skew-x-[-15deg] mb-6 shadow-lg border-b-2 border-yellow-600">
                        <span class="skew-x-[15deg] block uppercase text-sm">//  {{'legal_section3_title'|trans}}</span>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 rounded-lg shadow-[6px_6px_0px_rgba(0,0,0,1)] italic text-sm">
                        <p class="font-black text-gray-900 uppercase mb-2">Google Cloud Platform</p>
                        <p class="text-gray-600">{{'legal_host_address'|trans}}</p>
                        <p class="mt-4 text-[10px] font-mono bg-gray-100 p-2">{{'legal_host_data_location'|trans}}</p>
                    </div>
                </section>

                <section>
                    <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-2 font-black italic skew-x-[-15deg] mb-6 shadow-lg border-b-2 border-yellow-600">
                        <span class="skew-x-[15deg] block uppercase text-sm">// {{'legal_section4_title'|trans}}</span>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 rounded-lg shadow-[6px_6px_0px_rgba(0,0,0,1)] italic text-sm">
                        <p class="text-gray-700 leading-tight mb-2">{{'legal_section4_p1_ip'|trans}}</p>
                        <p class="font-bold text-red-600 uppercase text-xs tracking-tighter">{{'legal_section4_p4_reproduction'|trans}}</p>
                    </div>
                </section>
            </div>

            {# 5. RGPD ET DPO #}
            <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">//  {{'legal_section5_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)] grid grid-cols-1 md:grid-cols-2 gap-8 italic">
                    <div>
                        <p class="text-sm text-gray-600 mb-4">{{'legal_section5_p1_rgpd'|trans}}</p>
                        <a href="mailto:rgpd@e-cosplay.fr" class="inline-block bg-yellow-500 text-gray-900 px-6 py-2 font-black uppercase text-xs skew-x-[-10deg]">
                            <span class="skew-x-[10deg] block">Contact DPO</span>
                        </a>
                    </div>
                    <div class="bg-gray-50 p-6 border-l-4 border-indigo-600">
                        <p class="text-xs font-black uppercase text-indigo-600 mb-2 tracking-widest">Identifiant DPO</p>
                        <p class="text-xl font-black text-gray-900">DPO-167945</p>
                    </div>
                </div>
            </section>

            {# 6. PARTENAIRES & 7. RESPONSABILITÉ #}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <section>
                    <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-2 font-black italic skew-x-[-15deg] mb-6 shadow-lg border-b-2 border-yellow-600">
                        <span class="skew-x-[15deg] block uppercase text-sm">// {{'legal_section6_title'|trans}}</span>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 rounded-lg shadow-[6px_6px_0px_rgba(0,0,0,1)] italic text-sm text-gray-600">
                        {{'legal_section6_p1_partners'|trans}}
                    </div>
                </section>

                <section>
                    <div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-2 font-black italic skew-x-[-15deg] mb-6 shadow-lg border-b-2 border-yellow-600">
                        <span class="skew-x-[15deg] block uppercase text-sm">// {{'legal_section7_title'|trans}}</span>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 rounded-lg shadow-[6px_6px_0px_rgba(0,0,0,1)] italic text-sm text-gray-600">
                        {{'legal_section7_p1_liability'|trans({'%site_url%': app.request.schemeAndHttpHost})|raw}}
                    </div>
                </section>
            </div>

            {# 8. DROIT APPLICABLE #}
            <section class="relative">
                <div class="bg-gray-900 text-white p-8 rounded-lg border-b-8 border-red-600 shadow-xl italic text-center">
                    <h2 class="text-red-500 font-black uppercase tracking-widest mb-4">// {{'legal_section8_title'|trans}}</h2>
                    <p class="text-sm font-bold">{{'legal_section8_p1_law'|trans({'%site_url%': app.request.schemeAndHttpHost})|raw}}</p>
                </div>
            </section>

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