{% 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 %}
    <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">{{'cgu_page_title'|trans}}</h1>

        <p class="text-sm text-red-600 mb-6 italic">{{'cgu_intro_disclaimer'|trans}}</p>

        {# SECTION 1 : ACCEPTATION #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'cgu_section1_title'|trans}}</h2>
            <p class="text-gray-700">
                {{'cgu_section1_p1'|trans({
                    '%link%': '<a href="' ~ app.request.schemeAndHttpHost ~ '" class="text-red-600 hover:underline">e-cosplay.fr</a>'
                })|raw}}
            </p>
            <p class="text-gray-700 mt-2">{{'cgu_section1_p2'|trans}}</p>
        </section>

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

        {# SECTION 2 : SERVICES PROPOSÉS #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'cgu_section2_title'|trans}}</h2>
            <p class="text-gray-700">{{'cgu_section2_p1'|trans}}</p>

            <p class="text-gray-700 mt-2">{{'cgu_section2_p2'|trans}}</p>
            <ul class="list-disc list-inside ml-4 mt-2 text-gray-700 space-y-1">
                <li>{{'cgu_section2_list1'|trans}}</li>
                <li>{{'cgu_section2_list2'|trans}}</li>
                <li>{{'cgu_section2_list3'|trans}}</li>
            </ul>
        </section>

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

        {# SECTION 3 : ACCÈS ET UTILISATION #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'cgu_section3_title'|trans}}</h2>
            <p class="text-gray-700">{{'cgu_section3_p1'|trans}}</p>

            <p class="text-gray-700 mt-2 font-semibold">{{'cgu_section3_subtitle1'|trans}}</p>
            <p class="text-gray-700">{{'cgu_section3_p2'|trans}}</p>

            <p class="text-gray-700 mt-2 font-semibold">{{'cgu_section3_subtitle2'|trans}}</p>
            <p class="text-gray-700">{{'cgu_section3_p3'|trans}}</p>
        </section>

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

        {# SECTION 4 : RESPONSABILITÉ #}
        <section class="mb-8">
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'cgu_section4_title'|trans}}</h2>
            <p class="text-gray-700">{{'cgu_section4_p1'|trans}}</p>
            <p class="text-gray-700 mt-2">{{'cgu_section4_p2'|trans}}</p>

            <p class="text-gray-700 mt-4 font-bold">{{'cgu_section4_subtitle1'|trans}}</p>
            <p class="text-gray-700">{{'cgu_section4_p3'|trans}}</p>
        </section>

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

        {# SECTION 5 : DROIT APPLICABLE #}
        <section>
            <h2 class="text-2xl font-semibold text-gray-800 mb-3">{{'cgu_section5_title'|trans}}</h2>
            <p class="text-gray-700">{{'cgu_section5_p1'|trans}}</p>
            <p class="text-gray-700 mt-2">{{'cgu_section5_p2'|trans}}</p>
        </section>

    </div>
{% endblock %}
