{% extends 'base.twig' %}

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

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

{% block body %}
    <main id="cookies" 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">
                    {{ 'cookie_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">TRACK</span>
            </div>
        </header>

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

            {# SECTION 1 : INTRODUCTION #}
            <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">
                    // 1. {{ 'cookie_intro_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)]">
                    <p class="text-sm italic leading-relaxed text-gray-700">
                        {{ 'cookie_intro_text'|trans }}
                    </p>
                </div>
            </section>

            {# SECTION 2 : TYPES DE COOKIES #}
            <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">
                    // 2. {{ 'cookie_types_title'|trans }}
                </span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white border-2 border-gray-900 p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] italic">
                        <h3 class="font-black uppercase text-green-600 mb-2 border-b-2 border-green-100 pb-1">{{ 'cookie_essential_label'|trans }}</h3>
                        <p class="text-[11px] text-gray-600 leading-relaxed">{{ 'cookie_essential_desc'|trans }}</p>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] italic">
                        <h3 class="font-black uppercase text-blue-600 mb-2 border-b-2 border-blue-100 pb-1">{{ 'cookie_analytics_label'|trans }}</h3>
                        <p class="text-[11px] text-gray-600 leading-relaxed">{{ 'cookie_analytics_desc'|trans }}</p>
                    </div>
                    <div class="bg-white border-2 border-gray-900 p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] italic">
                        <h3 class="font-black uppercase text-red-600 mb-2 border-b-2 border-red-100 pb-1">{{ 'cookie_marketing_label'|trans }}</h3>
                        <p class="text-[11px] text-gray-600 leading-relaxed">{{ 'cookie_marketing_desc'|trans }}</p>
                    </div>
                </div>
            </section>

            {# SECTION 3 : LISTE TECHNIQUE #}
            <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">
                    // 3. {{ 'cookie_list_title'|trans }}
                </span>
                </div>
                <div class="bg-white border-2 border-gray-900 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] overflow-hidden italic">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-900">
                            <thead class="bg-gray-100">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-widest">{{ 'cookie_table_name'|trans }}</th>
                                <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-widest">{{ 'cookie_table_purpose'|trans }}</th>
                                <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-widest">{{ 'cookie_table_duration'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 text-[11px] font-medium">
                            <tr class="hover:bg-yellow-50 transition-colors">
                                <td class="px-6 py-4 font-mono text-indigo-600">__Host-session</td>
                                <td class="px-6 py-4 text-gray-600">{{ 'cookie_table_session_desc'|trans }}</td>
                                <td class="px-6 py-4 uppercase font-bold tracking-tighter">Session</td>
                            </tr>
                            <tr class="hover:bg-yellow-50 transition-colors bg-gray-50/50">
                                <td class="px-6 py-4 font-mono text-indigo-600">__cf_bm</td>
                                <td class="px-6 py-4 text-gray-600">{{ 'cookie_table_cfbm_desc'|trans }}</td>
                                <td class="px-6 py-4 uppercase font-bold tracking-tighter">30 min</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            {# SECTION 4 : PARTENAIRES SÉCURITÉ #}
            <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">
                    // 4. {{ 'cookie_security_title'|trans }}
                </span>
                </div>
                <div class="bg-gray-900 text-white p-8 rounded-lg border-l-8 border-indigo-500 shadow-xl italic">
                    <p class="text-sm text-gray-300 mb-6">{{ 'cookie_security_desc'|trans }}</p>
                    <a href="https://www.cloudflare.com/cookie-policy/" target="_blank" class="inline-flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 font-black uppercase text-xs skew-x-[-10deg] hover:bg-white hover:text-gray-900 transition-all">
                        <span class="skew-x-[10deg] block tracking-tighter">{{ 'cookie_security_link'|trans }}</span>
                    </a>
                </div>
            </section>

            {# SECTION 5 : MAÎTRISE DU NAVIGATEUR #}
            <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">
                    // 5. {{ 'cookie_control_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)] flex flex-col md:flex-row gap-8 items-center italic">
                    <div class="flex-1 text-sm text-gray-600">
                        {{ 'cookie_control_desc'|trans }}
                    </div>
                    <a href="https://www.cnil.fr/fr/cookies-les-outils-pour-les-maitriser" target="_blank" class="w-full md:w-auto bg-gray-900 text-yellow-500 px-8 py-4 font-black uppercase text-center skew-x-[-10deg] hover:bg-indigo-600 hover:text-white transition-all">
                        <span class="skew-x-[10deg] block tracking-tighter">{{ 'cookie_cnil_btn'|trans }}</span>
                    </a>
                </div>
            </section>

            {# SECTION 6 : CONSENTEMENT FINAL #}
            <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">
                    // 6. {{ 'cookie_consent_title'|trans }}
                </span>
                </div>
                <div class="bg-yellow-500 border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] italic text-sm font-black text-gray-900 uppercase tracking-tighter">
                    {{ 'cookie_consent_footer'|trans }}
                </div>
            </section>

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