@extends("layouts.base")

@section("title", __("terms.title"))

@section("content")
    <div class="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            {{-- En-tête de la page --}}
            <div class="text-center mb-12">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-6">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                    {{ __("terms.title") }}
                </h1>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed mb-8">
                    {{ __("terms.subtitle") }}
                </p>
            </div>

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

                {{-- Section 1: Object and Acceptance --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_1_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_1_text_1") }}
                        </p>
                        <div class="bg-blue-50 rounded-xl p-6 border-l-4 border-blue-400">
                            <p class="text-blue-900">
                                {{ __("terms.section_1_text_2") }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Section 2: Service Access --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v-2l-4-4L11.257 4.257A6 6 0 0118 11z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_2_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_2_text_1") }}
                        </p>
                        <p class="text-gray-600">
                            {{ __("terms.section_2_text_2") }}
                        </p>
                    </div>
                </div>

                {{-- Section 3: User Responsibilities --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_3_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_3_text_1") }}
                        </p>
                        <p class="text-gray-600">
                            {{ __("terms.section_3_text_2") }}
                        </p>
                    </div>
                </div>

                {{-- Section 4: Conduct Rules and Prohibited Content --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_4_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-6">
                            {{ __("terms.section_4_text") }}
                        </p>
                        <div class="bg-red-50 rounded-xl p-6 border-l-4 border-red-400 mb-6">
                            <ul class="space-y-2 text-red-900">
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_1") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_2") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_3") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_4") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_5") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_6") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_7") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_8") }}
                                </li>
                                <li class="flex items-start">
                                    <span class="w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                                    {{ __("terms.prohibited_content_9") }}
                                </li>
                            </ul>
                        </div>
                        <p class="text-gray-600 font-medium">
                            {{ __("terms.section_4_consequence") }}
                        </p>
                    </div>
                </div>

                {{-- Section 5: Age Restricted Content --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a4 4 0 118 0v4m-4 8a2 2 0 100-4 2 2 0 000 4zm6 0a2 2 0 100-4 2 2 0 000 4zm-6 4a2 2 0 100-4 2 2 0 000 4zm6 0a2 2 0 100-4 2 2 0 000 4z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_5_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_5_text_1") }}
                        </p>
                        <div class="bg-yellow-50 rounded-xl p-6 border-l-4 border-yellow-400">
                            <p class="text-yellow-900">
                                {{ __("terms.section_5_text_2") }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Section 6: Personal Data --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_6_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_6_text_1") }}
                        </p>
                        <p class="text-gray-600">
                            {{ __("terms.section_6_text_2") }}
                            <a href="{{ route("legal", app()->getLocale()) }}" class="text-indigo-600 hover:text-indigo-800 font-medium transition-colors duration-200">
                                {{ __("terms.legal_notice_link") }}
                            </a>.
                        </p>
                    </div>
                </div>

                {{-- Section 7: Intellectual Property --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_7_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_7_text_1") }}
                        </p>
                        <p class="text-gray-600">
                            {{ __("terms.section_7_text_2") }}
                        </p>
                    </div>
                </div>

                {{-- Section 8: Terms Modifications --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                            {{ __("terms.section_8_title") }}
                        </h2>
                    </div>
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                        <p class="text-lg mb-4">
                            {{ __("terms.section_8_text_1") }}
                        </p>
                        <div class="bg-teal-50 rounded-xl p-6 border-l-4 border-teal-400">
                            <p class="text-teal-900">
                                {{ __("terms.section_8_text_2") }}
                            </p>
                        </div>
                    </div>
                </div>

        {{-- Section 9: Applicable Law and Jurisdiction --}}
        <section class="mb-5">
            <h2 class="h4 text-secondary mb-3">
                {{ __("terms.section_9_title") }}
            </h2>
            <p class="text-muted">
                {{ __("terms.section_9_text") }}
            </p>
        </section>

        {{-- Section 10: Contact --}}
        <section class="mb-5">
            <h2 class="h4 text-secondary mb-3">
                {{ __("terms.section_10_title") }}
            </h2>
            <p class="lead">
                {{ __("terms.section_10_text") }}
                <a href="{{ route('contact', app()->getLocale()) }}" class="text-decoration-none text-primary">
                    {{ __('footer.contact') }}
                </a>.
            </p>
        </section>
    </div>
@endsection