@extends('layouts.app')

@section('title', 'À propos - KONTIXX Agency')
@section('footer-tagline', 'Un partenaire digital engagé à vos côtés. Expertise, transparence et accompagnement au cœur de notre approche.')

@section('content')
    {{-- HERO --}}
    <section class="section-premium bg-gradient-premium py-24 lg:py-32 relative overflow-hidden">
        {{-- DECORATIVE ELEMENTS --}}
        <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-transparent rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tl from-orange-400/20 to-transparent rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
                    <span class="text-premium-gradient">À propos de KONTIXX Agency</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
                    Le digital au service de vos ambitions
                </p>
            </div>
        </div>
    </section>

    {{-- NOTRE MISSION --}}
    <section class="py-24 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="animate-fade-in-up-premium">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Notre Mission</h2>
                    <p class="text-lg md:text-xl text-gray-700 mb-6 leading-relaxed">
                        KONTIXX Agency est une agence digitale spécialisée dans la création de solutions web et mobiles innovantes. Nous accompagnons les entreprises dans la création de solutions digitales performantes, durables et orientées résultats.
                    </p>
                    <p class="text-lg md:text-xl text-gray-700 mb-6 leading-relaxed">
                        Notre mission est de transformer vos idées en réalité digitale, en vous accompagnant à chaque étape de votre projet.
                    </p>
                    <p class="text-lg md:text-xl text-gray-700 leading-relaxed">
                        Avec une approche personnalisée et une expertise technique solide, nous vous aidons à atteindre vos objectifs et à développer votre présence digitale.
                    </p>
                </div>
                <div class="card-premium glass-premium p-10 rounded-2xl shadow-premium animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                    <div class="space-y-6">
                        <div class="flex items-start space-x-4 group/item">
                            <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2 text-lg">Expertise technique</h3>
                                <p class="text-gray-600">Technologies modernes et meilleures pratiques</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-4 group/item">
                            <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2 text-lg">Accompagnement personnalisé</h3>
                                <p class="text-gray-600">Solutions sur mesure adaptées à vos besoins</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-4 group/item">
                            <div class="w-14 h-14 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2 text-lg">Support continu</h3>
                                <p class="text-gray-600">Suivi et maintenance après livraison</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- NOS VALEURS --}}
    <section class="py-24 bg-gradient-premium relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fade-in-up-premium">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Valeurs</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="card-premium glass-premium p-8 rounded-2xl text-center hover-lift animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                    <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <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 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>
                    <h3 class="font-bold text-gray-900 mb-3 text-xl">Excellence</h3>
                    <p class="text-gray-600">Qualité et performance dans chaque projet</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl text-center hover-lift animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                    <div class="w-20 h-20 bg-gradient-warm rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-xl">Transparence</h3>
                    <p class="text-gray-600">Communication claire et honnête</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl text-center hover-lift animate-fade-in-up-premium" style="animation-delay: 0.3s;">
                    <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <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="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-xl">Innovation</h3>
                    <p class="text-gray-600">Solutions créatives et modernes</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl text-center hover-lift animate-fade-in-up-premium" style="animation-delay: 0.4s;">
                    <div class="w-20 h-20 bg-gradient-brown rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <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="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>
                    <h3 class="font-bold text-gray-900 mb-3 text-xl">Partnership</h3>
                    <p class="text-gray-600">Accompagnement sur le long terme</p>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <section class="section-padding bg-gradient-to-br from-gray-50 via-white to-blue-50/30 relative overflow-hidden cta-final-section">
        {{-- LIGNE DÉCORATIVE EN HAUT --}}
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-200/50 to-transparent"></div>
        
        {{-- ÉLÉMENTS DÉCORATIFS SUBTILS --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100/20 rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
                    <span class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                        Prêt à travailler avec nous ?
                    </span>
                </h2>
                <a href="{{ route('contact') }}" class="btn-premium inline-flex items-center gap-3 group">
                    <span class="relative z-10">Contactez-nous</span>
                    <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>
@endsection