@extends('app')

@section('title', '(RE)Sources Relationnelles - Accueil')

@section('content')
        <section class="py-16 md:py-28 gradient-light">
            <div class="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 text-center md:text-left">
                    <h2 class="text-5xl md:text-6xl font-bold leading-tight mb-8">
                        Créer, renforcer et enrichir vos <span class="text-niagara">relations</span>.
                    </h2>
                    <p class="text-lg md:text-xl text-gray-700 mb-10 leading-relaxed max-w-xl mx-auto md:mx-0">
                        La plateforme citoyenne dédiée à la qualité des liens : famille, amis, couple ou collègues.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                        <a href="{{ route('resources.index') }}" class="px-8 py-4 gradient-niagara text-white rounded-lg font-bold text-lg hover:shadow-lg hover:-translate-y-1 transition-smooth duration-200 inline-block">
                            Explorer les ressources
                        </a>
                        <button class="px-8 py-4 bg-white border-2 border-gray-300 rounded-lg font-bold text-lg text-gray-900 hover:border-niagara hover:text-niagara transition-smooth duration-200">
                            Aide
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 mt-12 md:mt-0 flex justify-center">
                    <div class="p-4 bg-white rounded-full shadow-2xl">
                        <img 
                            src="{{ asset('img/logo.jpg') }}" 
                            alt="Logo officiel (RE)Sources Relationnelles" 
                            class="w-72 h-72 md:w-80 md:h-80 object-contain rounded-full border-4 border-candlelight"
                        />
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 border-y border-gray-200">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Données Protégées -->
                    <div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
                        <div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">🛡️</div>
                        <h3 class="font-bold text-xl mb-3 text-gray-800">Données Protégées</h3>
                        <p class="text-gray-600 leading-relaxed">Conformité RGPD et chiffrement de vos échanges.</p>
                    </div>
                    
                    <!-- Hébergement Français -->
                    <div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
                        <div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">🇫🇷</div>
                        <h3 class="font-bold text-xl mb-3 text-gray-800">Hébergement Français</h3>
                        <p class="text-gray-600 leading-relaxed">Données stockées sur un Cloud Souverain.</p>
                    </div>
                    
                    <!-- Accessibilité -->
                    <div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
                        <div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">♿</div>
                        <h3 class="font-bold text-xl mb-3 text-gray-800">Accessibilité</h3>
                        <p class="text-gray-600 leading-relaxed">Interface optimisée pour tous les citoyens (RGAA).</p>
                    </div>
                </div>
            </div>
        </section>
@endsection