{{-- Page À propos du site --}}
@extends("layouts.base")

{{-- Titre de la page --}}
@section("title", __("about.page_title"))

{{-- Contenu principal --}}
@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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                        ></path>
                    </svg>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                    {{ __("about.main_title") }}
                </h1>
                <p
                    class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed"
                >
                    {{ __("about.main_subtitle") }}
                </p>
            </div>

            {{-- Contenu principal --}}
            <div class="space-y-12">
                {{-- Section Mission --}}
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                ></path>
                            </svg>
                        </div>
                        <h2 class="text-3xl font-bold text-gray-900">
                            {{ __("about.mission_title") }}
                        </h2>
                    </div>
                    <div
                        class="prose prose-lg max-w-none text-gray-700 leading-relaxed"
                    >
                        <p class="mb-6">{{ __("about.mission_intro") }}</p>

                        <div class="bg-blue-50 rounded-xl p-6 my-8">
                            <p class="text-blue-900 font-medium text-lg">
                                {{ __("about.mission_quote") }}
                            </p>
                        </div>

                        <p class="mb-6">
                            {{ __("about.mission_description") }}
                        </p>
                        <p>{{ __("about.mission_impact") }}</p>
                    </div>
                </div>

                {{-- Section Valeurs --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-8">
                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                ></path>
                            </svg>
                        </div>
                        <h2 class="text-3xl font-bold text-gray-900">
                            {{ __("about.values_title") }}
                        </h2>
                    </div>

                    <div class="grid md:grid-cols-2 gap-8">
                        {{-- Valeur 1: Bienveillance --}}
                        <div
                            class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6"
                        >
                            <div class="flex items-center mb-4">
                                <span class="text-2xl mr-3">💚</span>
                                <h3
                                    class="text-xl font-semibold text-green-900"
                                >
                                    {{ __("about.value_kindness_title") }}
                                </h3>
                            </div>
                            <p class="text-green-800">
                                {{ __("about.value_kindness_description") }}
                            </p>
                        </div>

                        {{-- Valeur 2: Respect --}}
                        <div
                            class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6"
                        >
                            <div class="flex items-center mb-4">
                                <span class="text-2xl mr-3">🤝</span>
                                <h3 class="text-xl font-semibold text-blue-900">
                                    {{ __("about.value_respect_title") }}
                                </h3>
                            </div>
                            <p class="text-blue-800">
                                {{ __("about.value_respect_description") }}
                            </p>
                        </div>

                        {{-- Valeur 3: Soutien --}}
                        <div
                            class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-xl p-6"
                        >
                            <div class="flex items-center mb-4">
                                <span class="text-2xl mr-3">🤗</span>
                                <h3
                                    class="text-xl font-semibold text-purple-900"
                                >
                                    {{ __("about.value_support_title") }}
                                </h3>
                            </div>
                            <p class="text-purple-800">
                                {{ __("about.value_support_description") }}
                            </p>
                        </div>

                        {{-- Valeur 4: Anonymat --}}
                        <div
                            class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-6"
                        >
                            <div class="flex items-center mb-4">
                                <span class="text-2xl mr-3">🔒</span>
                                <h3 class="text-xl font-semibold text-pink-900">
                                    {{ __("about.value_anonymity_title") }}
                                </h3>
                            </div>
                            <p class="text-pink-800">
                                {{ __("about.value_anonymity_description") }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Section Espoir --}}
                <div
                    class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-xl p-8 md:p-12 text-white"
                >
                    <div class="text-center">
                        <div
                            class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-6"
                        >
                            <span class="text-3xl">✨</span>
                        </div>
                        <h2 class="text-3xl font-bold mb-6">
                            {{ __("about.hope_title") }}
                        </h2>
                        <div class="max-w-4xl mx-auto">
                            <p class="mb-6 text-lg text-white leading-relaxed">
                                {{ __("about.hope_intro") }}
                            </p>
                            <p class="mb-6 text-white leading-relaxed">
                                {{ __("about.hope_vision") }}
                            </p>
                            <p class="text-xl font-medium text-white">
                                {{ __("about.hope_message") }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Section Communauté --}}
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                    <div class="flex items-center mb-8">
                        <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                                ></path>
                            </svg>
                        </div>
                        <h2 class="text-3xl font-bold text-gray-900">
                            {{ __("about.community_title") }}
                        </h2>
                    </div>

                    <div
                        class="prose prose-lg max-w-none text-gray-700 leading-relaxed"
                    >
                        <p class="mb-6">
                            {{ __("about.community_description") }}
                        </p>
                        <p class="mb-8">
                            {{ __("about.community_invitation") }}
                        </p>

                        <div
                            class="bg-yellow-50 rounded-xl p-6 border-l-4 border-yellow-400"
                        >
                            <p class="text-yellow-900 font-medium">
                                {{ __("about.community_reminder") }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Appel à l'action --}}
                <div
                    class="text-center bg-white rounded-2xl shadow-xl p-8 md:p-12"
                >
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">
                        {{ __("about.cta_title") }}
                    </h2>
                    <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
                        {{ __("about.cta_description") }}
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        @guest
                            <a
                                href="{{ route("register") }}"
                                class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg"
                            >
                                {{ __("about.cta_join") }}
                            </a>
                        @else
                            <a
                                href="{{ route("confession.create") }}"
                                class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg"
                            >
                                {{ __("about.cta_share") }}
                            </a>
                        @endguest

                        <a
                            href="{{ route("home") }}"
                            class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-8 rounded-lg transition-colors duration-200"
                        >
                            {{ __("about.cta_explore") }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection