@extends('frontend.layout')

@section('title', t('services_title') . ' - Inve Security')
@section('description', 'Premium security solutions including enterprise protection, cybersecurity, cloud security, and digital risk management in Saudi Arabia.')

@section('content')

    <!-- Premium Services Grid with Flip Cards -->
    <section class="py-20 bg-gradient-to-b from-transparent via-gold-50/20 to-transparent dark:from-transparent dark:via-gold-900/5 dark:to-transparent">
        <div class="max-w-6xl mx-auto px-6 -mt-16">
            <!-- Section Header -->
            <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 Premium Services</span>
                </div>
                
                <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                    Enterprise-Grade <span class="bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">Security</span>
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    Comprehensive security solutions designed for modern businesses
                </p>
            </div>

            @php
                $activeServices = $services->where('is_active', true);
                $serviceCount = $activeServices->count();
                $servicesArray = $activeServices->toArray();
                $serviceGroups = array_chunk($servicesArray, 3);
            @endphp

            @if ($serviceCount > 0)
                <!-- Services Grid with Flip Cards -->
                <div class="space-y-12">
                    @foreach ($serviceGroups as $groupIndex => $group)
                        <div class="grid md:grid-cols-3 grid-cols-1 gap-8">
                            @foreach ($group as $index => $service)
                                @php
                                    $animationDelay = ($groupIndex * 3 + $index) * 200;
                                @endphp
                                
                                <!-- Flip Card Container -->
                                <div class="flip-card animate-slide-up" style="animation-delay: {{ $animationDelay }}ms">
                                    <div class="flip-card-inner">
                                        <!-- Front of Card (Icon + Title Only) -->
                                        <div class="flip-card-front bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-100 dark:border-gray-700/50 rounded-3xl overflow-hidden shadow-xl p-8 text-center flex flex-col items-center justify-center">
                                            <!-- Gradient Border Overlay -->
                                            <div class="absolute inset-0 border-4 border-transparent rounded-3xl bg-gradient-to-br from-gold-500/0 via-gold-500/0 to-gold-500/0 group-hover:from-gold-500/20 group-hover:via-gold-500/10 group-hover:to-gold-500/20 transition-all duration-500"></div>
                                            
                                            <!-- Service Icon/Image -->
                                            <div class="relative mb-6">
                                                <div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-gold-500/20 to-gold-300/30 flex items-center justify-center overflow-hidden">
                                                    @if (isset($service['image']) && $service['image'])
                                                        <img src="{{ asset($service['image']) }}" alt="{{ $service['name'] }}"
                                                            class="w-16 h-16 object-contain">
                                                    @else
                                                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-gold-500/30 to-gold-400/40 flex items-center justify-center">
                                                            <i class="fas fa-shield-alt text-3xl text-gold-500 dark:text-gold-400"></i>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- Service Title -->
                                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-4">
                                                {{ $service['name'] }}
                                                <span class="block text-sm font-semibold text-gold-500 mt-2">
                                                    <i class="fas fa-crown mr-1"></i>Premium
                                                </span>
                                            </h3>

                                            <!-- Hover Hint -->
                                            <div class="absolute bottom-4 left-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                                <div class="flex items-center justify-center gap-2 text-sm text-gold-600 dark:text-gold-400">
                                                    <span>Hover to learn more</span>
                                                    <i class="fas fa-sync-alt text-xs"></i>
                                                </div>
                                            </div>

                                            <!-- Hover Effect Lines -->
                                            <div class="absolute inset-0 overflow-hidden rounded-3xl pointer-events-none">
                                                <div class="absolute -inset-1 bg-gradient-to-r from-gold-500 via-gold-400 to-gold-500 opacity-0 group-hover:opacity-5 blur-xl transition-opacity duration-500"></div>
                                            </div>
                                        </div>

                                        <!-- Back of Card (Description + Button) -->
                                        <div class="flip-card-back bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-100 dark:border-gray-700/50 rounded-3xl overflow-hidden shadow-xl p-8 text-center flex flex-col justify-center">
                                            <!-- Gold Overlay -->
                                            <div class="absolute inset-0 bg-gradient-to-br from-gold-500/5 via-gold-500/2 to-gold-300/5 rounded-3xl"></div>
                                            
                                            <!-- Back Content -->
                                            <div class="relative z-10">
                                                <!-- Service Title on Back -->
                                                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                                                    {{ $service['name'] }}
                                                </h3>

                                                <!-- Service Description -->
                                                <div class="h-32 overflow-y-auto mb-6 custom-scrollbar">
                                                    <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                                                        {{ $service['description'] }}
                                                    </p>
                                                </div>

                                                <!-- Service Features -->
                                                <div class="space-y-2 mb-6">
                                                    @if (isset($service['features']) && is_array($service['features']))
                                                        @foreach (array_slice($service['features'], 0, 3) as $feature)
                                                            <div class="flex items-center gap-2 text-xs text-gray-700 dark:text-gray-300">
                                                                <div class="w-1.5 h-1.5 bg-gold-500 rounded-full flex-shrink-0"></div>
                                                                <span class="text-left">{{ $feature }}</span>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>

                                                <!-- CTA Button -->
                                                <a href="/package/build"
                                                    class="inline-flex items-center justify-center 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 text-gold-600 dark:text-gold-400 font-semibold rounded-xl hover:bg-gradient-to-r hover:from-gold-500 hover:to-gold-600 hover:text-white transition-all duration-300 group/btn relative z-20">
                                                    <span class="relative z-10">Learn More</span>
                                                    <svg class="w-4 h-4 relative z-10 ml-2 transform group-hover/btn:translate-x-1 transition-transform"
                                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                                    </svg>
                                                    <div class="absolute inset-0 bg-gradient-to-r from-gold-500 to-gold-600 opacity-0 group-hover/btn:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                                                </a>
                                            </div>

                                            <!-- Back Indicator -->
                                            <div class="absolute top-4 right-4 opacity-50">
                                                <i class="fas fa-shield-alt text-gold-500 text-lg"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-20 animate-slide-up">
                    <div class="max-w-md mx-auto">
                        <div class="w-32 h-32 mx-auto mb-8 rounded-3xl bg-gradient-to-br from-gold-500/20 to-gold-300/30 flex items-center justify-center">
                            <i class="fas fa-shield-alt text-5xl text-gold-500/60"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
                            {{ t('no_services_available') }}
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400 mb-8">{{ t('check_back_later') }}</p>
                        <a href="/contact"
                            class="inline-flex items-center justify-center px-8 py-3 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 btn-gold">
                            <span>Contact Us</span>
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </section>

    <!-- Premium Features Section -->
    <section class="py-20 bg-gradient-to-b from-white via-gold-50/30 to-white dark:from-gray-900 dark:via-gold-900/10 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">{{ t('why_choose_invesecurity') }}</span>
                </div>
                
                <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                   {{ t('why_choose_invesecurity_desc') }}
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    {{ t('why_choose_invesecurity_desc2') }}
                </p>
            </div>

            <div class="grid md:grid-cols-3 grid-cols-1 gap-8">
                <!-- Feature 1 -->
                <div class="text-center p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 animate-fade-in animation-delay-200">
                    <div class="w-20 h-20 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-3xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-user-shield text-3xl text-gold-500"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ t('dedicated_business_advisory') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ t('dedicated_business_advisory_desc') }}</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="text-center p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 animate-fade-in animation-delay-300">
                    <div class="w-20 h-20 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-3xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-chart-line text-3xl text-gold-500"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ t('compliance_first_execution') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ t('compliance_first_execution_desc') }}</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="text-center p-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 animate-fade-in animation-delay-400">
                    <div class="w-20 h-20 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-3xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-award text-3xl text-gold-500"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ t('saudi_market_expertise') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ t('saudi_market_expertise_desc') }}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Add CSS for flip animation -->
    <style>
        /* Flip Card Container */
        .flip-card {
            perspective: 1000px;
            height: 384px; /* Match h-96 */
        }
        
        /* This container is needed to position the front and back side */
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        /* Do horizontal flip when you hover the flip box container */
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        
        /* Position the front and back side */
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* Safari */
            backface-visibility: hidden;
            border-radius: 1.5rem; /* Match rounded-3xl */
        }
        
        /* Style the front side (fallback if image is missing) */
        .flip-card-front {
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        
        /* Style the back side */
        .flip-card-back {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02), rgba(251, 191, 36, 0.05));
            color: white;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 2rem;
        }
        
        /* Custom scrollbar for description */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(245, 158, 11, 0.2);
            border-radius: 20px;
        }
        
        /* Smooth hover transition */
        .flip-card {
            transition: all 0.3s ease;
        }
        
        /* Ensure proper positioning */
        .flip-card-front, .flip-card-back {
            top: 0;
            left: 0;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .flip-card {
                height: 320px;
            }
        }
    </style>

@endsection