@extends('layouts.app')

@section('title', 'Contact Us - LECL | London Education and Consulting LTD')
@section('description',
    'Get in touch with LECL - London Education and Consulting LTD. Contact our expert team for
    personalized guidance on studying abroad. Offices across UK, South Asia, Africa, and Europe.')

@section('og_title', 'Contact Us - LECL | London Education and Consulting LTD')
@section('og_description',
    'Get in touch with LECL for expert guidance on studying abroad. Contact our international
    team with offices across UK, South Asia, Africa, and Europe.')

@section('twitter_title', 'Contact Us - LECL | Study Abroad Experts')
@section('twitter_description',
    'Contact LECL for personalized guidance on studying abroad. Expert team with global
    presence.')

@section('content')
    <!-- Hero Section -->
    <section class="contact-hero-section position-relative overflow-hidden"
        style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%); min-height: 60vh; display: flex; align-items: center;">
        <!-- Animated Background Elements -->
        <div class="contact-bubbles-container">
            <div class="contact-bubble contact-bubble-1"></div>
            <div class="contact-bubble contact-bubble-2"></div>
            <div class="contact-bubble contact-bubble-3"></div>
            <div class="contact-bubble contact-bubble-4"></div>
            <div class="contact-bubble contact-bubble-5"></div>
        </div>

        <!-- Floating Icons -->
        <div class="position-absolute contact-float-icon" style="top: 15%; right: 10%;">
            <i class="bi bi-envelope-heart floating-enhanced"
                style="font-size: 3rem; color: white; animation-delay: 0s;"></i>
        </div>
        <div class="position-absolute contact-float-icon" style="top: 60%; left: 8%;">
            <i class="bi bi-telephone floating-enhanced" style="font-size: 2.5rem; color: white; animation-delay: 1s;"></i>
        </div>
        <div class="position-absolute contact-float-icon" style="top: 25%; left: 15%;">
            <i class="bi bi-geo-alt floating-enhanced" style="font-size: 2rem; color: white; animation-delay: 2s;"></i>
        </div>
        <div class="position-absolute contact-float-icon" style="top: 70%; right: 15%;">
            <i class="bi bi-chat-dots floating-enhanced" style="font-size: 2.2rem; color: white; animation-delay: 3s;"></i>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-3 fw-bold mb-4 text-white fade-in contact-hero-title"
                        style="line-height: 1.2; letter-spacing: -0.02em;">{{ $heroSection->title ?? 'Get In Touch' }}</h1>
                    <p class="lead text-white mb-5 fade-in stagger-2"
                        style="font-size: 1.3rem; font-weight: 300; opacity: 0.95; max-width: 600px; margin: 0 auto;">
                        {{ $heroSection->content ?? 'Ready to start your educational journey? Our expert team is here to guide you every step of the way. Let\'s make your dreams a reality.' }}
                    </p>
                    <div class="contact-scroll-indicator fade-in stagger-3">
                        <i class="bi bi-chevron-down" style="font-size: 2rem; animation: bounce 2s infinite;"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-5" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);">
        <div class="container">
            <div class="row">
                <!-- Contact Form -->
                <div class="col-lg-8 mx-auto">
                    <div class="contact-form-container bg-white rounded-4 shadow-lg p-5 slide-up section-animate"
                        style="border: 1px solid rgba(59, 130, 246, 0.1); backdrop-filter: blur(10px);">
                        <div class="text-center mb-5">
                            <h2 class="h1 fw-bold mb-3 contact-form-title" style="color: var(--primary-navy);">Send Us a
                                Message</h2>
                            <p class="text-muted">Fill out the form below and we'll get back to you within 24 hours</p>
                        </div>

                        <form id="contactForm" class="contact-form">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="form-floating contact-input-group">
                                        <input type="text" class="form-control contact-input" id="firstName"
                                            name="firstName" placeholder="First Name" required>
                                        <label for="firstName"><i class="bi bi-person me-2"></i>First Name</label>
                                        <div class="contact-input-border"></div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="form-floating contact-input-group">
                                        <input type="text" class="form-control contact-input" id="lastName"
                                            name="lastName" placeholder="Last Name" required>
                                        <label for="lastName"><i class="bi bi-person me-2"></i>Last Name</label>
                                        <div class="contact-input-border"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="form-floating contact-input-group">
                                        <input type="email" class="form-control contact-input" id="email"
                                            name="email" placeholder="Email Address" required>
                                        <label for="email"><i class="bi bi-envelope me-2"></i>Email Address</label>
                                        <div class="contact-input-border"></div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="form-floating contact-input-group">
                                        <input type="tel" class="form-control contact-input" id="phone"
                                            name="phone" placeholder="Phone Number">
                                        <label for="phone"><i class="bi bi-telephone me-2"></i>Phone Number</label>
                                        <div class="contact-input-border"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="form-floating contact-input-group">
                                    <select class="form-select contact-input" id="subject" name="subject" required>
                                        <option value="">Choose a subject</option>
                                        <option value="general">General Inquiry</option>
                                        <option value="admission">University Admission</option>
                                        <option value="visa">Visa Assistance</option>
                                        <option value="scholarship">Scholarship Information</option>
                                        <option value="consultation">Book Consultation</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <label for="subject"><i class="bi bi-chat-square-text me-2"></i>Subject</label>
                                    <div class="contact-input-border"></div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="form-floating contact-input-group">
                                    <textarea class="form-control contact-input" id="message" name="message" placeholder="Your Message"
                                        style="height: 120px;" required></textarea>
                                    <label for="message"><i class="bi bi-chat-dots me-2"></i>Your Message</label>
                                    <div class="contact-input-border"></div>
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-lg px-5 py-3 contact-submit-btn magnetic"
                                    style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%); border: none; color: white; font-weight: 600; border-radius: 50px; box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden;">
                                    <span class="btn-text">Send Message</span>
                                    <span class="btn-loading d-none">
                                        <i class="bi bi-arrow-clockwise spin"></i> Sending...
                                    </span>
                                    <div class="btn-ripple"></div>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Information Section -->
    <section class="py-5" style="background: white;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5">
                    <h2 class="h1 fw-bold mb-3 slide-up section-animate" style="color: var(--primary-navy);">
                        {{ $officesSection->title ?? 'Our Global Offices' }}</h2>
                    <p class="lead text-muted slide-up section-animate stagger-1">
                        {{ $officesSection->content ?? 'Connect with us at any of our international locations' }}</p>
                </div>
            </div>
            <div class="row g-4">
                @if ($officesSection && isset($officesSection->data['offices']))
                    @foreach ($officesSection->data['offices'] as $index => $office)
                        <div class="col-lg-6 col-md-6">
                            <div class="contact-info-card h-100 bg-white rounded-4 shadow-lg p-4 text-center slide-up section-animate stagger-{{ ($index % 3) + 1 }} magnetic"
                                style="border: 1px solid rgba(59, 130, 246, 0.1); transition: all 0.3s ease;">
                                <div class="contact-info-icon mb-3">
                                    <i class="bi bi-building" style="font-size: 3rem; color: var(--primary-blue);"></i>
                                </div>
                                <h4 class="fw-bold mb-3" style="color: var(--primary-navy);">{{ $office['city'] }},
                                    {{ $office['country'] }}</h4>
                                <p class="text-muted mb-3">{{ $office['description'] ?? 'Regional office' }}</p>
                                <div class="contact-details">
                                    <p class="mb-2"><i class="bi bi-geo-alt me-2"
                                            style="color: var(--primary-blue);"></i>{{ $office['address'] }}</p>
                                    <p class="mb-2"><i class="bi bi-telephone me-2"
                                            style="color: var(--primary-blue);"></i>{{ $office['phone'] }}</p>
                                    <p class="mb-2"><i class="bi bi-envelope me-2"
                                            style="color: var(--primary-blue);"></i>{{ $office['email'] }}</p>
                                    <p class="mb-0"><i class="bi bi-clock me-2"
                                            style="color: var(--primary-blue);"></i>{{ $office['hours'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <!-- Default offices if no data in database -->
                    <div class="col-lg-4 col-md-6">
                        <div class="contact-info-card h-100 bg-white rounded-4 shadow-lg p-4 text-center slide-up section-animate stagger-1 magnetic"
                            style="border: 1px solid rgba(59, 130, 246, 0.1); transition: all 0.3s ease;">
                            <div class="contact-info-icon mb-3">
                                <i class="bi bi-building" style="font-size: 3rem; color: var(--primary-blue);"></i>
                            </div>
                            <h4 class="fw-bold mb-3" style="color: var(--primary-navy);">London, UK</h4>
                            <p class="text-muted mb-3">Our headquarters and main office</p>
                            <div class="contact-details">
                                <p class="mb-2"><i class="bi bi-geo-alt me-2"
                                        style="color: var(--primary-blue);"></i>123 Education Street, London, UK</p>
                                <p class="mb-2"><i class="bi bi-telephone me-2"
                                        style="color: var(--primary-blue);"></i>+44 20 1234 5678</p>
                                <p class="mb-2"><i class="bi bi-envelope me-2"
                                        style="color: var(--primary-blue);"></i>london@lecl.com</p>
                                <p class="mb-0"><i class="bi bi-clock me-2"
                                        style="color: var(--primary-blue);"></i>Mon-Fri: 9AM-6PM GMT</p>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-lg-12">
                    {{-- <iframe src="https://maps.app.goo.gl/BtWT6U9XMcjnRoQr6"></iframe> --}}
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.3317758247813!2d0.00474997639056801!3d51.525474309383156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a7259a6843f9%3A0xa6bdaf07ca218811!2sLONDON%20EDUCATION%20%26%20CONSULTING%20LTD!5e0!3m2!1sen!2sbd!4v1763408384786!5m2!1sen!2sbd"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Contact Section -->
    <section class="py-5"
        style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="h1 fw-bold mb-4 text-white slide-up section-animate">
                        {{ $quickContactSection->title ?? 'Need Immediate Assistance?' }}</h2>
                    <p class="lead text-white mb-5 slide-up section-animate stagger-1" style="opacity: 0.9;">
                        {{ $quickContactSection->content ?? 'Our team is available 24/7 to answer your questions and provide guidance' }}
                    </p>
                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="quick-contact-item slide-up section-animate stagger-1 magnetic">
                                <div class="quick-contact-icon mb-3">
                                    <i class="bi bi-telephone-fill"
                                        style="font-size: 2.5rem; color: var(--accent-gold);"></i>
                                </div>
                                <h5 class="text-white mb-2">Call Us</h5>
                                <p class="text-white mb-0" style="opacity: 0.8;">+44 20 1234 5678</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="quick-contact-item slide-up section-animate stagger-2 magnetic">
                                <div class="quick-contact-icon mb-3">
                                    <i class="bi bi-envelope-fill"
                                        style="font-size: 2.5rem; color: var(--accent-gold);"></i>
                                </div>
                                <h5 class="text-white mb-2">Email Us</h5>
                                <p class="text-white mb-0" style="opacity: 0.8;">info@lecl.com</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="quick-contact-item slide-up section-animate stagger-3 magnetic">
                                <div class="quick-contact-icon mb-3">
                                    <i class="bi bi-chat-dots-fill"
                                        style="font-size: 2.5rem; color: var(--accent-gold);"></i>
                                </div>
                                <h5 class="text-white mb-2">Live Chat</h5>
                                <p class="text-white mb-0" style="opacity: 0.8;">Available 24/7</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Custom Styles for Contact Page -->
    <style>
        /* Contact Hero Animations */
        .contact-bubbles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .contact-bubble {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: contactFloat 6s ease-in-out infinite;
        }

        .contact-bubble-1 {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .contact-bubble-2 {
            width: 60px;
            height: 60px;
            top: 60%;
            right: 20%;
            animation-delay: 2s;
        }

        .contact-bubble-3 {
            width: 100px;
            height: 100px;
            top: 80%;
            left: 20%;
            animation-delay: 4s;
        }

        .contact-bubble-4 {
            width: 40px;
            height: 40px;
            top: 30%;
            right: 10%;
            animation-delay: 1s;
        }

        .contact-bubble-5 {
            width: 70px;
            height: 70px;
            top: 50%;
            left: 50%;
            animation-delay: 3s;
        }

        @keyframes contactFloat {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.7;
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
                opacity: 1;
            }
        }

        .contact-float-icon {
            animation: floatIcon 4s ease-in-out infinite;
        }

        @keyframes floatIcon {

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

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

        /* Contact Form Styles */
        .contact-form-container {
            position: relative;
            overflow: hidden;
        }

        .contact-form-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .contact-input-group {
            position: relative;
            margin-bottom: 1rem;
        }

        .contact-input {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: rgba(248, 250, 252, 0.5);
        }

        .contact-input:focus {
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
            background: white;
            transform: translateY(-2px);
        }

        .contact-input-border {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-navy), var(--primary-blue));
            transition: width 0.3s ease;
        }

        .contact-input:focus+label+.contact-input-border {
            width: 100%;
        }

        .contact-submit-btn {
            position: relative;
            overflow: hidden;
        }

        .contact-submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(30, 58, 138, 0.4);
        }

        .contact-submit-btn:active {
            transform: translateY(-1px);
        }

        .btn-ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: ripple 0.6s linear;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Contact Info Cards */
        .contact-info-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(30, 58, 138, 0.15);
        }

        .contact-info-icon {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        /* Quick Contact Items */
        .quick-contact-item {
            padding: 2rem;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .quick-contact-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

        .quick-contact-icon {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }

        /* Scroll Indicator */
        .contact-scroll-indicator {
            animation: bounce 2s infinite;
        }

        /* Magnetic Effect */
        .magnetic {
            transition: transform 0.3s ease;
        }

        .magnetic:hover {
            transform: scale(1.05);
        }

        /* Spin Animation */
        .spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .contact-hero-section {
                min-height: 50vh;
                padding: 60px 0;
            }

            .contact-float-icon {
                display: none;
            }

            .contact-form-container {
                padding: 2rem !important;
            }

            .quick-contact-item {
                padding: 1.5rem;
            }
        }
    </style>

    <!-- Contact Form JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contactForm');
            const submitBtn = contactForm.querySelector('.contact-submit-btn');
            const btnText = submitBtn.querySelector('.btn-text');
            const btnLoading = submitBtn.querySelector('.btn-loading');

            // Form submission handler
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Show loading state
                btnText.classList.add('d-none');
                btnLoading.classList.remove('d-none');
                submitBtn.disabled = true;

                // Create ripple effect
                createRipple(e, submitBtn);

                // Simulate form submission (replace with actual form handling)
                setTimeout(() => {
                    // Reset button state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    submitBtn.disabled = false;

                    // Show success message (you can customize this)
                    alert('Thank you for your message! We\'ll get back to you within 24 hours.');

                    // Reset form
                    contactForm.reset();
                }, 2000);
            });

            // Ripple effect function
            function createRipple(event, button) {
                const circle = document.createElement('span');
                const diameter = Math.max(button.clientWidth, button.clientHeight);
                const radius = diameter / 2;

                circle.style.width = circle.style.height = `${diameter}px`;
                circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
                circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
                circle.classList.add('btn-ripple');

                const ripple = button.getElementsByClassName('btn-ripple')[0];
                if (ripple) {
                    ripple.remove();
                }

                button.appendChild(circle);
            }

            // Input focus animations
            const inputs = document.querySelectorAll('.contact-input');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('focused');
                });

                input.addEventListener('blur', function() {
                    if (!this.value) {
                        this.parentElement.classList.remove('focused');
                    }
                });
            });

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in');
                    }
                });
            }, observerOptions);

            // Observe all animated elements
            document.querySelectorAll('.slide-up, .fade-in').forEach(el => {
                observer.observe(el);
            });
        });
    </script>
@endsection