@extends('layouts.app')

@section('title', 'Contact Us - Khmer Foundation Appraisals')

@section('content')
    <!-- Hero Section -->
    <section class="relative h-[400px] overflow-hidden">
        <div class="absolute inset-0 bg-primary/90 z-10"></div>
        <div
            class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')] bg-cover bg-center parallax-bg">
        </div>
        <div class="container-custom relative z-20 h-full flex flex-col justify-center text-center">
            <h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight animate-fade-in-up">
                Get In <span class="text-secondary">Touch</span>
            </h1>
            <p class="text-xl text-white/80 max-w-2xl mx-auto font-light animate-fade-in-up delay-100">
                Our team is ready to assist you with professional property valuation and consultancy services.
            </p>
        </div>
    </section>

    <section class="py-24 bg-gray-50 relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute top-0 right-0 w-1/2 h-full bg-white skew-x-12 transform origin-top-right"></div>

        <div class="container-custom relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">

                <!-- Contact Information -->
                <div class="space-y-10">
                    <div>
                        <span
                            class="inline-block px-4 py-2 bg-secondary/10 text-primary text-sm font-bold uppercase tracking-widest rounded-full mb-6">
                            Contact Information
                        </span>
                        <h2 class="section-title text-4xl mb-6">We're Here for You</h2>
                        <p class="text-gray-600 text-lg leading-relaxed">
                            Have questions about your property? Need a professional appraisal? Contact us today for a
                            consultation tailored to your needs.
                        </p>
                    </div>

                    <div
                        class="bg-white p-8 rounded-[2rem] shadow-[0_10px_40px_rgba(0,0,0,0.05)] border border-gray-100 space-y-8">
                        <!-- Head Office -->
                        <div class="flex items-start group">
                            <div
                                class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
                                <svg class="w-6 h-6 text-primary group-hover:text-white transition-colors" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-primary mb-2">Head Office</h4>
                                <p class="text-gray-600 leading-relaxed">
                                    No. 36A, St. 210, Sangkat Teuk Laak III,<br>
                                    Khan Tuol Kork, Phnom Penh, Cambodia.
                                </p>
                            </div>
                        </div>

                        <div class="w-full h-px bg-gray-100"></div>

                        <!-- Phone -->
                        <div class="flex items-start group">
                            <div
                                class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
                                <svg class="w-6 h-6 text-primary group-hover:text-white transition-colors" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        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" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-primary mb-2">Phone Contacts</h4>
                                <div class="space-y-1">
                                    <p class="text-gray-600 flex items-center">
                                        <span class="w-2 h-2 bg-secondary rounded-full mr-2"></span>
                                        (+855) 023 238 388 <span
                                            class="text-xs bg-gray-100 px-2 py-0.5 rounded ml-2 text-gray-500">Office</span>
                                    </p>
                                    <p class="text-primary font-bold flex items-center">
                                        <span class="w-2 h-2 bg-secondary rounded-full mr-2 animate-pulse"></span>
                                        (+855) 099 283 388 <span
                                            class="text-xs bg-secondary/10 px-2 py-0.5 rounded ml-2 text-secondary">Hotline</span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="w-full h-px bg-gray-100"></div>

                        <!-- Email -->
                        <div class="flex items-start group">
                            <div
                                class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
                                <svg class="w-6 h-6 text-primary group-hover:text-white transition-colors" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.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" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-primary mb-2">Email Us</h4>
                                <div class="space-y-1">
                                    <a href="mailto:info@kfa.com.kh"
                                        class="text-gray-600 hover:text-secondary transition-colors block">info@kfa.com.kh</a>
                                    <a href="mailto:sales@kfa.com.kh"
                                        class="text-gray-600 hover:text-secondary transition-colors block">sales@kfa.com.kh</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="bg-white p-10 rounded-[2.5rem] shadow-2xl relative overflow-hidden border border-gray-50">
                    <div class="absolute top-0 right-0 w-40 h-40 bg-secondary/5 rounded-bl-[10rem]"></div>

                    <h3 class="text-3xl font-bold text-primary mb-8 relative z-10">Send a Message</h3>

                    <form id="contact-form" class="space-y-6 relative z-10">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="group">
                                <label
                                    class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block group-focus-within:text-secondary transition-colors">
                                    Full Name <span class="text-secondary">*</span>
                                </label>
                                <input type="text" required
                                    class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-primary font-medium focus:outline-none focus:border-secondary focus:ring-4 focus:ring-secondary/10 transition-all placeholder:text-gray-400"
                                    placeholder="John Doe">
                            </div>
                            <div class="group">
                                <label
                                    class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block group-focus-within:text-secondary transition-colors">
                                    Email Address <span class="text-secondary">*</span>
                                </label>
                                <input type="email" required
                                    class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-primary font-medium focus:outline-none focus:border-secondary focus:ring-4 focus:ring-secondary/10 transition-all placeholder:text-gray-400"
                                    placeholder="john@example.com">
                            </div>
                        </div>

                        <div class="group">
                            <label
                                class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block group-focus-within:text-secondary transition-colors">
                                Subject
                            </label>
                            <input type="text"
                                class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-primary font-medium focus:outline-none focus:border-secondary focus:ring-4 focus:ring-secondary/10 transition-all placeholder:text-gray-400"
                                placeholder="How may we help you?">
                        </div>

                        <div class="group">
                            <label
                                class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block group-focus-within:text-secondary transition-colors">
                                Message <span class="text-secondary">*</span>
                            </label>
                            <textarea rows="5" required
                                class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-primary font-medium focus:outline-none focus:border-secondary focus:ring-4 focus:ring-secondary/10 transition-all placeholder:text-gray-400 resize-none"
                                placeholder="Please detail your inquiry..."></textarea>
                        </div>

                        <div class="pt-2">
                            <button type="submit" class="w-full btn-primary group relative overflow-hidden !rounded-xl">
                                <span class="relative z-10 flex items-center justify-center gap-2">
                                    Send Message
                                    <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                    </svg>
                                </span>
                            </button>
                        </div>

                        <p class="text-xs text-gray-400 text-center font-medium mt-4">
                            We typically reply within 24 hours. Your information remains confidential.
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="h-[500px] w-full relative z-0">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d125096.39343394628!2d104.83592670732422!3d11.562108622997365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3109513dc76a6be3%3A0x9c010ee85ab525bb!2sPhnom%20Penh!5e0!3m2!1sen!2skh!4v1647842345678!5m2!1sen!2skh"
            width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
            class="filter grayscale hover:grayscale-0 transition-all duration-700">
        </iframe>
    </section>
@endsection