@extends('frontend.layout')
@section('title', 'Inve Security - ' . t('Contact Information'))
@section('description', t('Contact Inve Security to learn more about our services and how we can help your business grow.'))

@section('content')
    <!-- LUXURY CONTACT INFO SECTION -->
    <section class="relative min-h-screen lg: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">
        <!-- Animated Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <!-- Gradient Orbs -->
            <div class="absolute top-1/4 -left-40 lg:-left-20 w-80 lg:w-96 h-80 lg: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 animate-pulse-gold opacity-60 dark:opacity-30"></div>
            <div class="absolute bottom-1/3 -right-32 lg:-right-24 w-64 lg:w-80 h-64 lg: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 animate-pulse-gold" style="animation-delay: 2s"></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] lg:bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)]"></div>
            </div>
        </div>

        <div class="w-full max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-8 lg:py-12 ">
            <!-- Step Indicator - Mobile Responsive -->
            <div class="md:flex items-center justify-center gap-2 lg:gap-3 mb-6 lg:mb-8 animate-slide-up overflow-x-auto pb-2 lg:pb-0 hidden">
                @for($i = 1; $i <= 6; $i++)
                    <div class="flex items-center gap-2 lg:gap-3 flex-shrink-0">
                        <div class="w-7 h-7 lg:w-8 lg:h-8 rounded-full flex items-center justify-center text-sm lg:text-base
                            @if($i == 2)
                                bg-gradient-to-br from-gold-500 to-gold-400 text-white font-bold
                            @elseif($i < 2)
                                bg-green-500 text-white font-bold
                            @else
                                bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 font-medium
                            @endif">
                            {{ $i }}
                        </div>
                        @if($i < 6)
                            <div class="w-6 lg:w-12 h-1 rounded-full
                                @if($i < 2)
                                    bg-green-500
                                @elseif($i == 2)
                                    bg-gradient-to-r from-green-500 to-gold-500
                                @else
                                    bg-gray-200 dark:bg-gray-700
                                @endif">
                            </div>
                        @endif
                    </div>
                @endfor
            </div>

            <!-- Premium Header -->
            <div class="text-center mb-6 lg:mb-10 animate-slide-up animation-delay-100 px-2">
                <!-- Progress Badge -->
                <div class="inline-flex items-center gap-2 lg:gap-3 px-4 lg:px-6 py-2 lg: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-4 lg:mb-6 backdrop-blur-sm">
                    <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full animate-pulse"></div>
                    <span class="text-xs lg:text-sm font-semibold text-gold-600 dark:text-gold-400 uppercase tracking-wider">
                        {{ t('Step 2 of 6') }}
                    </span>
                </div>

                <!-- Main Heading -->
                <h1 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight mb-3 lg:mb-4">
                    <span class="block text-gray-900 dark:text-white">{{ t('Contact Information') }}</span>
                    <span class="block bg-gradient-to-r from-gold-500 via-gold-400 to-gold-500 bg-clip-text text-transparent animate-gradient-x mt-1 lg:mt-2 text-lg sm:text-xl lg:text-2xl">
                        {{ t('Share your details to continue') }}
                    </span>
                </h1>

                <!-- Subheading -->
                <p class="text-sm lg:text-base text-gray-600 dark:text-gray-300 max-w-md mx-auto leading-relaxed px-2">
                    {{ t('Provide your contact information to proceed with your security consultation') }}
                </p>
            </div>

            <!-- Premium Form Container -->
            <div class="bg-white/80 dark:bg-gray-800/80  rounded-2xl lg:rounded-3xl p-4 sm:p-6 lg:p-8 border border-gray-100 dark:border-gray-700 shadow-xl lg:shadow-2xl animate-slide-up animation-delay-200">
                <form method="POST" class="space-y-4 sm:space-y-6 lg:space-y-8">
                    @csrf

                    <!-- Full Name -->
                    <div class="group">
                        <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 sm:mb-3 flex items-center gap-1.5 lg:gap-2">
                            <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full flex-shrink-0"></div>
                            {{ t('Full Name') }}
                            <span class="text-gold-500">*</span>
                        </label>
                        <div class="relative">
                            <div class="absolute left-3 lg:left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-gold-500 transition-colors">
                                <i class="fas fa-user text-base lg:text-lg"></i>
                            </div>
                            <input type="text" name="name" id="name" required
                                   value="{{ old('name', $contactinfo['name'] ?? '') }}"
                                   class="w-full pl-10 lg:pl-12 pr-3 lg:pr-4 py-3 lg:py-4 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg lg:rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400   group-hover:border-gold-300 dark:group-hover:border-gold-500/40 text-sm lg:text-base"
                                   placeholder="{{ t('Enter your full name') }}">
                        </div>
                        @error('name')
                        <div class="flex items-center gap-1.5 lg:gap-2 mt-1 lg:mt-2 text-red-500 text-xs lg:text-sm">
                            <i class="fas fa-exclamation-circle text-xs lg:text-sm"></i>
                            <span class="font-medium">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <!-- Email Address -->
                    <div class="group">
                        <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 sm:mb-3 flex items-center gap-1.5 lg:gap-2">
                            <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full flex-shrink-0"></div>
                            {{ t('Email Address') }}
                            <span class="text-gold-500">*</span>
                        </label>
                        <div class="relative">
                            <div class="absolute left-3 lg:left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-gold-500 transition-colors">
                                <i class="fas fa-envelope text-base lg:text-lg"></i>
                            </div>
                            <input type="email" name="email" id="email" required
                                   value="{{ old('email', $contactinfo['email'] ?? '') }}"
                                   class="w-full pl-10 lg:pl-12 pr-3 lg:pr-4 py-3 lg:py-4 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg lg:rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400   group-hover:border-gold-300 dark:group-hover:border-gold-500/40 text-sm lg:text-base"
                                   placeholder="{{ t('your@email.com') }}">
                        </div>
                        @error('email')
                        <div class="flex items-center gap-1.5 lg:gap-2 mt-1 lg:mt-2 text-red-500 text-xs lg:text-sm">
                            <i class="fas fa-exclamation-circle text-xs lg:text-sm"></i>
                            <span class="font-medium">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <!-- Company Name -->
                    <div class="group">
                        <label for="company" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 sm:mb-3 flex items-center gap-1.5 lg:gap-2">
                            <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full flex-shrink-0"></div>
                            {{ t('Proposed Company Name') }}
                        </label>
                        <div class="relative">
                            <div class="absolute left-3 lg:left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-gold-500 transition-colors">
                                <i class="fas fa-building text-base lg:text-lg"></i>
                            </div>
                            <input type="text" name="company" id="company"
                                   value="{{ old('company', $contactinfo['company'] ?? '') }}"
                                   class="w-full pl-10 lg:pl-12 pr-3 lg:pr-4 py-3 lg:py-4 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg lg:rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400   group-hover:border-gold-300 dark:group-hover:border-gold-500/40 text-sm lg:text-base"
                                   placeholder="{{ t('Your company name') }}">
                        </div>
                    </div>

                    <!-- Phone Number -->
                    <div class="group">
                        <label for="phone" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 sm:mb-3 flex items-center gap-1.5 lg:gap-2">
                            <div class="w-1.5 h-1.5 lg:w-2 lg:h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full flex-shrink-0"></div>
                            {{ t('Phone Number') }}
                        </label>
                        <div class="relative">
                             
                            <input type="tel" id="phone" name="phone"
                                   value="{{ old('phone', $contactinfo['phone'] ?? '') }}"
                                   class="w-full pl-10 lg:pl-12 pr-3 lg:pr-4 py-3 lg:py-4 bg-white/50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg lg:rounded-xl focus:ring-2 focus:ring-gold-500 focus:border-gold-500 dark:focus:ring-gold-400 dark:focus:border-gold-400 outline-none transition-all duration-200 text-gray-900 dark:text-white   group-hover:border-gold-300 dark:group-hover:border-gold-500/40 text-sm lg:text-base">
                            <input type="hidden" id="full_phone" name="full_phone">
                        </div>
                        @error('phone')
                        <div class="flex items-center gap-1.5 lg:gap-2 mt-1 lg:mt-2 text-red-500 text-xs lg:text-sm">
                            <i class="fas fa-exclamation-circle text-xs lg:text-sm"></i>
                            <span class="font-medium">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="pt-4 sm:pt-6 lg:pt-8">
                        <button type="submit"
                                class="w-full btn-gold px-4 sm:px-6 lg:px-8 py-3 lg:py-4 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-semibold rounded-lg lg:rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 gap-2 lg:gap-3 flex items-center justify-center group/btn text-sm sm:text-base">
                            <span>{{ t('Continue to Business Type') }}</span>
                            <i class="fas fa-arrow-right group-hover/btn:translate-x-1 transition-transform text-sm lg:text-base"></i>
                        </button>
                    </div>
                </form>

                <!-- Security Badge -->
                <div class="mt-4 sm:mt-6 lg:mt-8 pt-4 sm:pt-6 lg:pt-8 border-t border-gray-100 dark:border-gray-700">
                    <div class="flex items-center justify-center gap-2 lg:gap-3 text-xs lg:text-sm text-gray-500 dark:text-gray-400">
                        <div class="w-4 h-4 lg:w-5 lg:h-5 bg-gradient-to-br from-green-500/20 to-green-400/20 rounded flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-shield-alt text-green-500 text-xs lg:text-sm"></i>
                        </div>
                        <span class="text-center">{{ t('Your information is protected with enterprise-grade security') }}</span>
                    </div>
                </div>
            </div>

            <!-- Terms & Privacy -->
            <div class="mt-4 sm:mt-6 lg:mt-8 text-center animate-fade-in px-2">
                <p class="text-gray-500 dark:text-gray-400 text-xs lg:text-sm">
                    {{ t('By continuing, you agree to our') }}
                    <a href="#" class="text-gold-600 dark:text-gold-400 hover:text-gold-500 dark:hover:text-gold-300 font-medium hover:underline transition-colors">
                        {{ t('Terms') }}
                    </a>
                    {{ t('and') }}
                    <a href="#" class="text-gold-600 dark:text-gold-400 hover:text-gold-500 dark:hover:text-gold-300 font-medium hover:underline transition-colors">
                        {{ t('Privacy Policy') }}
                    </a>
                </p>
            </div>
        </div>
    </section>

    <!-- Phone Input Setup -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const phoneInput = document.querySelector("#phone");
            const iti = window.intlTelInput(phoneInput, {
                initialCountry: "sa",
                separateDialCode: true,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
                preferredCountries: ["sa", "ae", "us", "gb"],
                customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                    return "Enter your phone number";
                }
            });

            // Add gold border on focus
            phoneInput.addEventListener('focus', function() {
                this.parentElement.classList.add('ring-2', 'ring-gold-500/20', 'rounded-lg', 'lg:rounded-xl');
            });
            
            phoneInput.addEventListener('blur', function() {
                this.parentElement.classList.remove('ring-2', 'ring-gold-500/20', 'rounded-lg', 'lg:rounded-xl');
            });

            // Set full phone number on form submit
            document.querySelector("form").addEventListener("submit", function (e) {
                const fullPhone = iti.getNumber();
                if (fullPhone) {
                    document.querySelector("#full_phone").value = fullPhone;
                } else {
                    document.querySelector("#full_phone").value = '';
                }
            });

            // Make phone input dropdown responsive
            const adjustPhoneDropdown = () => {
                const isMobile = window.innerWidth < 768;
                const dropdown = document.querySelector('.iti__country-list');
                if (dropdown) {
                    if (isMobile) {
                        dropdown.style.maxHeight = '250px';
                        dropdown.style.width = '280px';
                        dropdown.style.left = '0';
                        dropdown.style.transform = 'translateX(-50%)';
                        dropdown.style.marginLeft = '50%';
                    } else {
                        dropdown.style.maxHeight = '';
                        dropdown.style.width = '';
                        dropdown.style.left = '';
                        dropdown.style.transform = '';
                        dropdown.style.marginLeft = '';
                    }
                }
            };

            // Adjust on load and resize
            adjustPhoneDropdown();
            window.addEventListener('resize', adjustPhoneDropdown);

            // Style the phone input dropdown for dark mode
            const style = document.createElement('style');
            style.textContent = `
                .iti { width: 100%; }
                .iti__selected-flag { 
                    padding: 0 12px;
                    background: transparent !important;
                }
                .iti__country-list {
                    border-radius: 12px;
                    border: 1px solid rgba(209, 213, 219, 0.3);
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                }
                .dark .iti__country-list {
                    background: #1f2937;
                    border-color: #4b5563;
                    color: white;
                }
                .dark .iti__country { 
                    color: #d1d5db;
                }
                .dark .iti__country:hover { 
                    background-color: #374151;
                }
                .iti__flag-box, .iti__country-name {
                    margin-right: 8px;
                }
                .iti__divider {
                    border-bottom-color: rgba(209, 213, 219, 0.3);
                }
                .dark .iti__divider {
                    border-bottom-color: #4b5563;
                }
                
                /* Mobile specific styles */
                @media (max-width: 640px) {
                    .iti__selected-flag { padding: 0 8px; }
                    .iti__flag-box { margin-right: 6px; }
                }
                
                @media (max-width: 768px) {
                    .iti__country-list {
                        font-size: 14px;
                    }
                }
            `;
            document.head.appendChild(style);
        });
    </script>

    <style>
        /* Custom Animations */
        @keyframes pulse-gold {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 0.4;
            }
        }

        @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-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(20px);
            }
            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-100 {
            animation-delay: 100ms;
        }

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

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

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

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

        /* 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 12px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px 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%);
            }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, rgba(250, 204, 21, 0.3), rgba(234, 179, 8, 0.3));
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, rgba(250, 204, 21, 0.5), rgba(234, 179, 8, 0.5));
        }

        /* Mobile Responsive Improvements */
        @media (max-width: 640px) {
            .min-h-screen {
                min-height: calc(100vh - 60px);
            }
            
            input, button {
                font-size: 16px !important; /* Prevents zoom on iOS */
            }
            
            .fixed.bottom-4 {
                bottom: 80px; /* Move above mobile browser controls */
            }
        }

        /* Prevent text overflow */
        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Better tap targets on mobile */
        @media (max-width: 768px) {
            button, 
            input, 
            a {
                min-height: 44px;
            }
            
            input, 
            select, 
            textarea {
                font-size: 16px;
            }
        }
    </style>
@endsection