@extends('frontend.layout')

@section('title', 'Inve Security - ' . t('about_title'))
@section('description', 'Discover the golden standard of excellence at Inve Security. Our commitment to premium security solutions, innovation, and client success in Saudi Arabia.')

@section('content')
    <!-- HERO SECTION -->
    <section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-gold-50 via-white to-gold-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-gold-900/10 transition-colors duration-500">
        <!-- Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <!-- Gradient Orbs -->
            <div class="absolute top-1/4 -left-20 w-96 h-96 bg-gradient-to-br from-gold-500/20 to-gold-300/30 dark:from-gold-500/10 dark:to-gold-300/5 rounded-full blur-3xl opacity-60 dark:opacity-30"></div>
            <div class="absolute bottom-1/3 -right-24 w-80 h-80 bg-gradient-to-tr from-gold-500/15 to-transparent dark:from-gold-500/5 dark:to-transparent rounded-full blur-3xl opacity-40 dark:opacity-20"></div>
            
            <!-- Animated Grid Pattern -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
                <div
                    class="absolute inset-0 bg-[linear-gradient(90deg,transparent_95%,rgba(250,204,21,0.1)_100%)] animate-shimmer bg-[length:200%_100%]">
                </div>
                <div class="absolute inset-0 bg-[linear-gradient(rgba(250,204,21,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(250,204,21,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)]"></div>
            </div>
            
            <!-- Floating Particles -->
            <div class="absolute inset-0">
                <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-gold-500 rounded-full animate-float"
                    style="animation-delay: 0s"></div>
                <div class="absolute top-1/3 right-1/3 w-1 h-1 bg-gold-400 rounded-full animate-float"
                    style="animation-delay: 1s"></div>
                <div class="absolute bottom-1/4 left-1/3 w-3 h-3 bg-gold-600 rounded-full animate-float"
                    style="animation-delay: 2s"></div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-6 relative z-10 py-20">
            <div class="text-center">
                <!-- Premium Badge -->
                <div class="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-gold-500/10 to-gold-300/10 dark:from-gold-500/20 dark:to-gold-300/5 border border-gold-500/30 dark:border-gold-500/40 rounded-full mb-8 backdrop-blur-sm group hover:border-gold-500 transition-all duration-300">
                    <div class="w-2 h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full animate-pulse"></div>
                    <span class="text-sm font-semibold text-gold-600 dark:text-gold-400 group-hover:scale-105 transition-transform">
                        {{ t('about_subtitle') }}
                    </span>
                    <svg class="w-4 h-4 text-gold-500 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>

                <!-- Main Heading with Gradient -->
                <h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6 text-gray-900 dark:text-white">
                    {{ t('about_title_line1') }}
                    <span class="bg-gradient-to-r from-gold-500 via-gold-400 to-gold-500 bg-clip-text text-transparent animate-gradient-x">
                        {{ t('about_title_line2') }}
                    </span>
                </h1>

                <!-- Subheading -->
                <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
                    {{ t('about_description') }}
                </p>
                
                <!-- Stats -->
                <div class="grid grid-cols-3 gap-8 max-w-lg mx-auto animate-fade-in">
                    <div class="text-center group">
                        <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                5+
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">
                            {{ t('years_experience') }}</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                500+
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">
                            {{ t('hero_clients') }}</div>
                    </div>
                    <div class="text-center group">
                        <div class="text-4xl font-bold text-gray-900 dark:text-white mb-2 group-hover:scale-110 transition-transform duration-300">
                            <span class="bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                98%
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium tracking-wide">
                            {{ t('hero_success') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- OUR STORY SECTION -->
    <section class="py-20 bg-gradient-to-b from-gold-50/30 via-white to-transparent dark:from-gray-800/50 dark:via-gray-900 dark:to-transparent">
        <div class="max-w-6xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <!-- Left Content -->
                <div class="animate-slide-up">
                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gold-500/10 to-transparent dark:from-gold-500/5 border border-gold-500/20 rounded-full mb-6">
                        <span class="text-sm font-semibold text-gold-600 dark:text-gold-400">Our Journey</span>
                    </div>
                    
                    <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                        <span class="bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">{{ t('story_title') }}</span>
                    </h2>
                    
                    <div class="space-y-6 text-gray-600 dark:text-gray-300">
                        <p class="text-lg leading-relaxed">{{ t('story_paragraph1') }}</p>
                        <p class="text-lg leading-relaxed">{{ t('story_paragraph2') }}</p>
                        <p class="text-lg leading-relaxed">{{ t('story_paragraph3') }}</p>
                    </div>
                    
                    <!-- Milestones -->
                    <div class="mt-12 grid grid-cols-2 gap-8 animate-fade-in animation-delay-300">
                        <div class="text-center p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 transition-all duration-300 hover:scale-105">
                            <div class="text-3xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-2">2015</div>
                            <div class="text-lg font-medium text-gray-900 dark:text-white">{{ t('milestone1_title') }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">{{ t('milestone1_desc') }}</div>
                        </div>
                        <div class="text-center p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 transition-all duration-300 hover:scale-105">
                            <div class="text-3xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-2">2020</div>
                            <div class="text-lg font-medium text-gray-900 dark:text-white">{{ t('milestone2_title') }}</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">{{ t('milestone2_desc') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Right Content - Image -->
                <div class="relative animate-slide-up animation-delay-200">
                    <div class="relative aspect-[4/3] rounded-3xl overflow-hidden border-8 border-transparent bg-gradient-to-br from-gold-500 via-gold-400 to-gold-500 p-1 animate-gradient-x">
                        <div class="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
                            <img 
                                src="https://lh6.googleusercontent.com/proxy/60kki0be8daR5kxSO6kOpTYVgo6MPrYnv_lmKlukBm3T6lNMicpCvkTZxg7QaHbui4KpXPxmVssoXzlt" 
                                alt="Our Team"
                                class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
                            >
                            <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        </div>
                    </div>
                    
                    <!-- Floating Badge -->
                    <div class="absolute -bottom-6 -right-6 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md rounded-2xl p-8 shadow-2xl border border-white/20 dark:border-gray-700/50 animate-slide-up animation-delay-400">
                        <div class="text-center">
                            <div class="text-4xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-2">Award</div>
                            <div class="text-lg font-medium text-gray-900 dark:text-white">Winning</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">Team Excellence</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<!-- OUR VALUES SECTION -->
<section class="py-20 bg-gradient-to-b from-white via-gold-50/20 to-white dark:from-gray-900 dark:via-gold-900/5 dark:to-gray-900">
    <div class="max-w-6xl mx-auto px-6">
        <div class="text-center mb-16 animate-slide-up">
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gold-500/10 to-transparent dark:from-gold-500/5 border border-gold-500/20 rounded-full mb-6">
                <span class="text-sm font-semibold text-gold-600 dark:text-gold-400">Our Foundation</span>
            </div>
            
            <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                Our <span class="bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">Values</span>
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                The principles that guide how we build, structure, and support businesses.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Value 1 -->
            <div class="group p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-2 animate-slide-up animation-delay-200">
                <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-gold-500 dark:text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Excellence in Execution</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">We don't aim for speed alone—we focus on doing things correctly, thoroughly, and in line with Saudi regulations from day one.</p>
            </div>

            <!-- Value 2 -->
            <div class="group p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-2 animate-slide-up animation-delay-300">
                <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-gold-500 dark:text-gold-400" 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="text-2xl font-bold text-gray-900 dark:text-white mb-4">Integrity & Transparency</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Clear communication, honest guidance, and ethical execution form the foundation of every client relationship we build.</p>
            </div>

            <!-- Value 3 -->
            <div class="group p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-2 animate-slide-up animation-delay-400">
                <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-gold-500 dark:text-gold-400" 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="text-2xl font-bold text-gray-900 dark:text-white mb-4">Strategic Thinking</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">We design business structures with the future in mind—considering compliance, scalability, and long-term sustainability.</p>
            </div>
        </div>
        
        <!-- Additional Values Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
            <!-- Value 4 -->
            <div class="group p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-2 animate-slide-up animation-delay-500">
                <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-gold-500 dark:text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Compliance First</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Every decision we make prioritizes legal clarity, regulatory alignment, and risk reduction—no shortcuts, no grey areas.</p>
            </div>

            <!-- Value 5 -->
            <div class="group p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:-translate-y-2 animate-slide-up animation-delay-600">
                <div class="w-16 h-16 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-8 h-8 text-gold-500 dark:text-gold-400" 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="text-2xl font-bold text-gray-900 dark:text-white mb-4">Collaborative Partnership</h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">We work with our clients as long-term partners, supporting them beyond setup through compliance, growth, and expansion stages.</p>
            </div>
        </div>
    </div>
</section>


  
@endsection