{% extends 'base.html.twig' %}

{% block title %}Mentions Légales - E-Cosplay Ticket{% endblock %}
{% block meta_description %}Mentions Légales de la plateforme E-Cosplay Ticket{% endblock %}

{% block structured_data %}
    {{ parent() }}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                { "@type": "ListItem", "position": 1, "name": "Accueil", "item": "{{ url('app_home') }}" },
                { "@type": "ListItem", "position": 2, "name": "Mentions Légales", "item": "{{ url('app_mentions_legales') }}" }
            ]
        }
    </script>
{% endblock %}

{% block body %}
<div class="max-w-6xl mx-auto px-4 py-12 text-gray-800">

    {# ── Header ── #}
    <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">
                Mentions Légales
            </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 ── #}
        <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. Objet et Promotion du Site</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">E-Cosplay Ticket est une plateforme de billetterie en ligne destinée aux associations, proposée à tarifs réduits. Elle a pour objectif de faciliter la gestion, la génération et le contrôle de tickets pour les événements associatifs.</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> La génération de tickets numériques avec QR code unique.</li>
                    <li class="flex items-center gap-2"><span class="text-yellow-500 font-black">/</span> Le scan et le contrôle d'accès aux événements.</li>
                    <li class="flex items-center gap-2"><span class="text-yellow-500 font-black">/</span> Le paiement sécurisé via Stripe.</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">// 2. Identification de l'Éditeur du Site</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">Nom de l'Association :</strong> E-Cosplay</p>
                    <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">Numéro RNA :</strong> W022006988</p>
                    <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">SIREN :</strong> 943121517</p>
                    <p><strong class="text-yellow-500 uppercase tracking-widest text-xs">Adresse du siège social :</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">Directeur de la publication :</strong></p>
                    <span class="text-xl font-black uppercase text-white">Serreau Jovann</span>
                    <p class="text-xs text-gray-400 mt-1">Directeur en charge de la gestion de la billetterie</p>
                    <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 & 4 ── #}
        <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">// 3. Hébergement du Site</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">1600 Amphitheatre Parkway, Mountain View, CA 94043, États-Unis (Siège social)</p>
                    <p class="mt-4 text-[10px] font-mono bg-gray-100 p-2">Google Cloud Netherlands B.V., O'Mahony's Corner, Block R, Spencer Dock, Dublin 1, Irlande.</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">// 4. Propriété Intellectuelle et Droit à l'Image</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">L'association E-Cosplay est propriétaire des droits de propriété intellectuelle ou détient les droits d'usage sur tous les éléments accessibles sur le site.</p>
                    <p class="font-bold text-red-600 uppercase text-xs tracking-tighter">Toute reproduction, représentation, modification, publication, adaptation de tout ou partie des éléments du site, quel que soit le moyen ou le procédé utilisé, est interdite, sauf autorisation écrite préalable de l'association E-Cosplay.</p>
                </div>
            </section>
        </div>

        {# ── 5. RGPD ── #}
        <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. Protection des Données Personnelles (RGPD)</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">Conformément au Règlement Général sur la Protection des Données (RGPD), l'association E-Cosplay s'engage à protéger la confidentialité des données personnelles collectées. Pour toute information ou exercice de vos droits Informatique et Libertés sur les traitements de données personnelles, vous pouvez contacter notre Délégué à la Protection des Données (DPO).</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 & 7 ── #}
        <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">// 6. Partenariats et Publicité</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">
                    La présence de partenaires sur le site internet de l'association E-Cosplay est le fruit d'une collaboration formalisée.
                </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">// 7. Limitations de Responsabilité</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">
                    L'association E-Cosplay ne pourra être tenue responsable des dommages directs et indirects causés au matériel de l'utilisateur, lors de l'accès au site, et résultant soit de l'utilisation d'un matériel ne répondant pas aux spécifications indiquées au point 4, soit de l'apparition d'un bug ou d'une incompatibilité.
                </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">// 8. Droit applicable et attribution de juridiction</h2>
                <p class="text-sm font-bold">Tout litige en relation avec l'utilisation du site E-Cosplay Ticket est soumis au droit français. Il est fait attribution exclusive de juridiction aux tribunaux compétents de Laon.</p>
            </div>
        </section>

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