@extends('layouts.app')

@section('title', 'Portfolio - KONTIXX Agency')
@section('footer-tagline', 'Des projets concrets, des résultats mesurables. Découvrez comment nous accompagnons nos clients vers le succès digital.')

@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">Portfolio</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
                    Découvrez nos réalisations et les résultats obtenus pour nos clients
                </p>
            </div>
        </div>
    </section>

    {{-- PROJETS --}}
    <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 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {{-- PROJET 1 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-blue-500 via-blue-600 to-blue-700 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">E-commerce</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Site Web E-commerce</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Création d'une plateforme e-commerce moderne et performante avec système de paiement intégré.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">WordPress</span>
                        </div>
                    </div>
                </div>

                {{-- PROJET 2 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-orange-500 via-orange-600 to-red-600 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">Branding</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Identité Visuelle</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Refonte complète de l'identité visuelle avec logo, charte graphique et supports de communication.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">Design</span>
                        </div>
                    </div>
                </div>

                {{-- PROJET 3 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-700 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">Web</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Site Vitrine</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Site vitrine responsive avec design moderne et optimisation SEO pour améliorer la visibilité.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">SEO</span>
                        </div>
                    </div>
                </div>

                {{-- PROJET 4 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium" style="animation-delay: 0.3s;">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-green-500 via-green-600 to-teal-700 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">Marketing</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Stratégie Marketing Digital</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Mise en place d'une stratégie marketing digitale complète avec campagnes publicitaires et analytics.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">Stratégie</span>
                        </div>
                    </div>
                </div>

                {{-- PROJET 5 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium" style="animation-delay: 0.4s;">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-pink-500 via-pink-600 to-rose-700 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">Social Media</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Community Management</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Animation des réseaux sociaux avec création de contenu et gestion de la communauté.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">Content</span>
                        </div>
                    </div>
                </div>

                {{-- PROJET 6 --}}
                <div class="card-premium glass-premium rounded-2xl overflow-hidden group animate-fade-in-up-premium" style="animation-delay: 0.5s;">
                    <div class="image-overlay-premium h-56 bg-gradient-to-br from-cyan-500 via-cyan-600 to-blue-700 relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                        <div class="absolute top-4 right-4">
                            <span class="badge-premium">Développement</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-kontixx-blue transition-colors">Application Web</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Développement d'une application web sur mesure avec interface utilisateur intuitive.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="badge-premium">Sur mesure</span>
                        </div>
                    </div>
                </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">
                        Vous avez un projet similaire ?
                    </span>
                </h2>
                <a href="{{ route('contact') }}" class="btn-premium inline-flex items-center gap-3 group">
                    <span class="relative z-10">Parlons de votre projet</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