@extends('frontend.layout')

@section('title', 'Inve Security - ' . t('hero_title_line2'))
@section('description',
    'Premium security solutions with golden standard excellence. Trusted by industry leaders across
    Saudi Arabia.')

@section('content')
    <!-- MODERN BUSINESS HERO SECTION -->

    @include('frontend.hero')

    <!-- REVIEWS SECTION -->

    @include('frontend.reviews')

    <!-- PARTNERS SECTION -->
    <section
        class="py-20 bg-gradient-to-b from-gold-50/50 via-white to-gold-50/30 dark:from-gray-950 dark:via-gray-900 dark:to-gold-900/10">
        <div class="max-w-7xl mx-auto px-6">
            <!-- Section Header -->
            <div class="text-center mb-16">
                <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">TRUSTED BY INDUSTRY
                        LEADERS</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">Partners</span>
                    & Clients
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
                    Collaborating with industry leaders to deliver exceptional security solutions across Saudi Arabia
                </p>
            </div>

            <!-- Partners Logos Grid -->
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
                <!-- Partner 1 -->


                @foreach ($partners as $partner)
                    <div class="group bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-2 flex items-center justify-center border border-gray-100 dark:border-gray-700/50 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300 hover:scale-105">
                            <img class="h-16 mx-auto" src="{{ asset('/storage/' . $partner->logo) }}" alt="">
                            <p class="text-sm text-center font-bold">{{ $partner->name }}</p>
                    </div>
                @endforeach

            </div>

            <!-- Stats -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
                <div
                    class="text-center p-8 bg-gradient-to-br from-white/80 to-white/60 dark:from-gray-800/80 dark:to-gray-900/60 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700/50">
                    <div
                        class="text-5xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-4">
                        500+</div>
                    <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Partnerships</div>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">Across Saudi Arabia</p>
                </div>
                <div
                    class="text-center p-8 bg-gradient-to-br from-white/80 to-white/60 dark:from-gray-800/80 dark:to-gray-900/60 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700/50">
                    <div
                        class="text-5xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-4">
                        98%</div>
                    <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Client Retention</div>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">Year-over-year</p>
                </div>
                <div
                    class="text-center p-8 bg-gradient-to-br from-white/80 to-white/60 dark:from-gray-800/80 dark:to-gray-900/60 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700/50">
                    <div
                        class="text-5xl font-bold bg-gradient-to-b from-gold-500 to-gold-400 bg-clip-text text-transparent mb-4">
                        24/7</div>
                    <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Support Coverage</div>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">Dedicated teams</p>
                </div>
            </div>
        </div>
    </section>


    <!-- BRANCHES SECTION -->
    <section class="py-12 bg-gold-50/50 dark:bg-gray-900">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center mb-16">
                <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 Locations</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">Branches</span>
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
                    Strategically located across major cities to serve you with local expertise and global
                    standards.
                </p>
            </div>


            <!-- Branches Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Riyadh Branch -->

                @foreach ($branches as $item)
                    <div
                        class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 transition-all duration-300 group">
                        <div class="p-8">
                            <!-- Branch Header -->
                            <div class="flex items-start justify-between mb-6">
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-1">
                                        {{ $item->name }}</h3>
                                    <p class="text-gray-500 dark:text-gray-400 text-sm">{{ $item->branch_type_name }}</p>
                                </div>
                                <div
                                    class="w-12 h-12 rounded-lg bg-gold-500/5 flex items-center justify-center group-hover:bg-gold-500/10 transition-colors">
                                    <svg class="w-6 h-6 text-gold-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
                                        </path>
                                    </svg>
                                </div>
                            </div>

                            <!-- Branch Details -->
                            <div class="space-y-4">
                                <div class="flex items-start gap-3">
                                    <svg class="w-5 h-5 text-gold-500 mt-0.5 flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                        </path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    <div>
                                        <p class="text-gray-700 dark:text-gray-300 text-sm">{{ $item->addressline1 }}
                                        </p>
                                        <p class="text-gray-500 dark:text-gray-400 text-xs mt-1">{{ $item->addressline2 }}
                                        </p>
                                    </div>
                                </div>

                                <div class="flex items-center gap-3">
                                    <svg class="w-5 h-5 text-gold-500 flex-shrink-0" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                        </path>
                                    </svg>
                                    <span class="text-gray-700 dark:text-gray-300 text-sm">{{ $item->phone }}</span>
                                </div>

                                <div class="flex items-center gap-3">
                                    <svg class="w-5 h-5 text-gold-500 flex-shrink-0" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <div>
                                        <p class="text-gray-700 dark:text-gray-300 text-sm">{{ $item->opening_day }}</p>
                                        <p class="text-gray-500 dark:text-gray-400 text-xs">{{ $item->opening_hour }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Branch Actions -->
                            <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
                                <div class="flex gap-3">
                                    <a href="tel:{{ $item->phone }}"
                                        class="flex-1 text-center px-4 py-2.5 bg-gold-500 text-white text-sm font-medium rounded-lg hover:bg-gold-600 transition-colors btn-gold">
                                        Call Now
                                    </a>
                                    <a href="{{ $item->maps_link }}" target="_blank"
                                        class="flex-1 text-center px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:border-gold-500 hover:text-gold-600 transition-colors">
                                        Directions
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>

            <!-- Contact CTA -->
            <div class="mt-16 text-center">
                <div class="max-w-2xl mx-auto">
                    <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Can't visit a branch?</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-8">
                        Contact our central support team for immediate assistance.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">

                        <a href="/contact"
                            class="inline-flex items-center gap-2 px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:border-gold-500 hover:text-gold-600 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                </path>
                            </svg>
                            Email Us
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Custom Animations -->
    <style>
        @keyframes pulse-gold {

            0%,
            100% {
                opacity: 0.7;
            }

            50% {
                opacity: 0.4;
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes gradient-x {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        .animate-pulse-gold {
            animation: pulse-gold 3s ease-in-out infinite;
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .animate-gradient-x {
            background-size: 200% auto;
            animation: gradient-x 3s ease infinite;
        }

        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animation-delay-200 {
            animation-delay: 200ms;
        }

        .animation-delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-400 {
            animation-delay: 400ms;
        }

        .animation-delay-500 {
            animation-delay: 500ms;
        }

        .animation-delay-600 {
            animation-delay: 600ms;
        }

        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
            background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }
    </style>
@endsection