{% 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 %}
    <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8 bg-white shadow-lg rounded-lg">
        <h1 class="text-3xl font-extrabold text-gray-900 border-b-2 border-red-600 pb-4 mb-8">{{'legal_page_title'|trans}}</h1>


        {# SECTION 1 : OBJET DU SITE #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section1_title'|trans}}</h2>
            <p class="text-gray-700">
                {{'legal_section1_p1'|trans({
                    '%site_url%': app.request.schemeAndHttpHost
                })|raw}}
            </p>

            <p class="text-gray-700 mt-2">{{'legal_section1_p2_intro'|trans}}</p>
            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-1">
                <li>{{'legal_section1_list1'|trans}}</li>
                <li>{{'legal_section1_list2'|trans}}</li>
                <li>{{'legal_section1_list3'|trans}}</li>
                <li><strong>{{'legal_section1_list4_strong'|trans}} :</strong> {{'legal_section1_list4_details'|trans}}</li>
            </ul>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 2 : ÉDITEUR #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section2_title'|trans}}</h2>
            <p class="text-gray-700">{{'legal_section2_p1_editor_intro'|trans}}</p>

            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-1">
                <li><strong>{{'legal_label_association_name'|trans}} :</strong> E-Cosplay</li>
                <li><strong>{{'legal_label_legal_status'|trans}} :</strong> {{'legal_status_details'|trans}}</li>
                <li><strong>{{'legal_label_rna'|trans}} :</strong> W022006988</li>
                <li><strong>{{'legal_label_siren'|trans}} :</strong> 943121517</li>
                <li><strong>{{'legal_label_address'|trans}} :</strong> 42 rue de Saint-Quentin, 02800 Beautor, FRANCE</li>
                <li><strong>{{'legal_label_email'|trans}} :</strong> <a href="mailto:contact@e-cosplay.fr" class="text-red-600 hover:underline">contact@e-cosplay.fr</a></li>
                <li><strong>{{'legal_label_publication_director'|trans}} :</strong> Serreau Jovann - ShokoCosplay</li>
            </ul>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 3 : HÉBERGEMENT #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section3_title'|trans}}</h2>
            <p class="text-gray-700">{{'legal_section3_p1_host_intro'|trans}}</p>

            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-1">
                <li><strong>{{'hosting_label_host_name'|trans}} :</strong> Google Cloud Platform</li>
                <li><strong>{{'hosting_label_company'|trans}} :</strong> Google LLC</li>
                <li><strong>{{'legal_label_address'|trans}} :</strong> {{'legal_host_address'|trans}}</li>
                <li><strong>{{'hosting_label_data_location'|trans}} :</strong> {{'legal_host_data_location'|trans}}</li>
            </ul>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 4 : PROPRIÉTÉ INTELLECTUELLE ET DROIT À L'IMAGE #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section4_title'|trans}}</h2>
            <p class="text-gray-700">{{'legal_section4_p1_ip'|trans}}</p>
            <p class="text-gray-700 mt-2">{{'legal_section4_p2_ip_details'|trans}}</p>

            <p class="text-gray-700 mt-4 font-bold text-lg">{{'legal_section4_subtitle_image_rights'|trans}} :</p>
            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-3">
                <li><strong>{{'legal_section4_list1_strong'|trans}} :</strong> {{'legal_section4_list1_details'|trans}}</li>
                <li><strong>{{'legal_section4_list2_strong'|trans}} :</strong> {{'legal_section4_list2_details'|trans}}</li>
                <li><strong>{{'legal_section4_list3_strong'|trans}} :</strong> {{'legal_section4_list3_details'|trans}}</li>
            </ul>

            <p class="text-gray-700 mt-4 font-medium">{{'legal_section4_p3_visual_content'|trans}}</p>

            <p class="text-gray-700 mt-3">{{'legal_section4_p4_reproduction'|trans}}</p>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 5 : RGPD ET DPO #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section5_title'|trans}}</h2>
            <p class="text-gray-700">{{'legal_section5_p1_rgpd'|trans}}</p>

            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-1">
                <li><strong>{{'legal_label_dpo_name'|trans}} :</strong> Serreau Jovann</li>
                <li><strong>{{'legal_label_dpo_num'|trans}} :</strong> DPO-167945</li>
                <li><strong>{{'legal_label_dpo_contact'|trans}} :</strong> <a href="mailto:rgpd@e-cosplay.fr" class="text-red-600 hover:underline">rgpd@e-cosplay.fr</a></li>
            </ul>
            <p class="text-gray-700 mt-3">{{'legal_section5_p2_privacy_link'|trans}}</p>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 6 : PARTENAIRES #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section6_title'|trans}}</h2>
            <p class="text-gray-700">{{'legal_section6_p1_partners'|trans}}</p>
            <p class="text-gray-700 mt-2">{{'legal_section6_p2_agreement'|trans}}</p>
            <p class="text-gray-700 mt-2">{{'legal_section6_p3_promotion'|trans}}</p>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 7 : LIMITATIONS DE RESPONSABILITÉ #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section7_title'|trans}}</h2>
            <p class="text-gray-700">
                {{'legal_section7_p1_liability'|trans({
                    '%site_url%': app.request.schemeAndHttpHost
                })|raw}}
            </p>
            <p class="text-gray-700 mt-3">{{'legal_section7_p2_interactive'|trans}}</p>
        </section>

        <hr class="my-8 border-gray-200">

        {# SECTION 8 : DROIT APPLICABLE #}
        <section>
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'legal_section8_title'|trans}}</h2>
            <p class="text-gray-700">
                {{'legal_section8_p1_law'|trans({
                    '%site_url%': app.request.schemeAndHttpHost
                })|raw}}
            </p>
        </section>

    </div>
{% endblock %}
