@extends('layouts.app')
@php $active_page = 'contact'; @endphp



@section('content')
<main x-data="{ 
      scrolled: false,
      backToTop: false,
      showSuccess: {{ session('success') ? 'true' : 'false' }},
      init() {
          if (this.showSuccess) {
              setTimeout(() => this.showSuccess = false, 5000);
          }
      }
  }" 
  @scroll.window="scrolled = window.pageYOffset > 20; backToTop = window.pageYOffset > 300">

    <!-- Success Notification -->
    <div x-show="showSuccess" x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="translate-y-4 opacity-0 scale-95"
         x-transition:enter-end="translate-y-0 opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="fixed top-24 right-6 z-[100] flex items-center gap-4 px-6 py-4 rounded-xl shadow-2xl bg-white border border-green-100">
        <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-500 shrink-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>
        <div>
            <h4 class="font-bold text-slate-900 text-sm">Message Sent!</h4>
            <p class="text-slate-500 text-xs">We'll get back to you shortly.</p>
        </div>
    </div>

    <!-- Error Validation Messages -->
    @if ($errors->any())
    <div class="fixed top-24 right-6 z-[100] flex flex-col gap-2 px-6 py-4 rounded-xl shadow-2xl bg-white border border-red-100 max-w-sm">
        @foreach ($errors->all() as $error)
        <div class="flex items-start gap-3">
            <div class="w-6 h-6 rounded-full bg-red-50 flex items-center justify-center text-red-500 shrink-0 mt-0.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
            </div>
            <div>
                <p class="text-slate-700 text-sm font-medium">{{ $error }}</p>
            </div>
        </div>
        @endforeach
    </div>
    @endif

    <!-- Hero Section -->
    <section class="relative pt-32 pb-20 bg-slate-50 overflow-hidden">
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-brand-primary/10 blur-3xl"></div>
            <div class="absolute top-[40%] -left-[10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-3xl"></div>
        </div>
        <div class="container mx-auto px-6 relative z-10 text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/10 text-brand-primary text-xs font-bold uppercase tracking-wider mb-6">
                Get in Touch
            </div>
            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight">
                Contact <span class="text-brand-primary">Us</span>
            </h1>
            <p class="text-lg text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                Have a project in mind or just want to say hello? We'd love to hear from you.
            </p>
        </div>
    </section>

    <!-- Contact Content -->
    <section class="py-24 bg-white">
         <div class="container mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16">
                <!-- Info Side -->
                <div>
                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Let's Discuss Your Needs</h2>
                    <p class="text-slate-600 mb-10 leading-relaxed">
                        Whether you have a question about our services, pricing, or just want to explore a potential partnership, our team is ready to help.
                    </p>
                    <div class="space-y-8">
                        <div class="flex items-start gap-5">
                            <div class="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-primary shrink-0">
                                <svg class="w-5 h-5" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg text-slate-900">Visit Us</h4>
                                <p class="text-slate-600">{!! $settings['contact_address'] ?? 'Ali Hassan Mwinyi Road<br>Dar es Salaam, Tanzania' !!}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-5">
                            <div class="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-primary shrink-0">
                                <svg class="w-5 h-5" 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"></path></svg>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg text-slate-900">Email Us</h4>
                                <a href="mailto:{{ $settings['contact_email'] ?? 'info@extensivecreativity.com' }}" class="text-brand-primary hover:underline">{{ $settings['contact_email'] ?? 'info@extensivecreativity.com' }}</a>
                            </div>
                        </div>
                        <div class="flex items-start gap-5">
                            <div class="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-primary shrink-0">
                                <svg class="w-5 h-5" 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"></path></svg>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg text-slate-900">Call Us</h4>
                                <a href="tel:{{ $settings['contact_phone'] ?? '+255123456789' }}" class="text-slate-600 hover:text-brand-primary transition">{{ $settings['contact_phone'] ?? '+255 123 456 789' }}</a>
                            </div>
                        </div>
                    </div>

                    <!-- Map -->
                    <div class="mt-10 h-64 bg-slate-100 rounded-2xl overflow-hidden shadow-inner relative">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126743.59363574163!2d39.201479262499994!3d-6.792353999999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x185c4bae169bd6f1%3A0x30378e932b50930!2sDar%20es%20Salaam!5e0!3m2!1sen!2stz!4v1650000000000!5m2!1sen!2stz" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="absolute inset-0 filter grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition duration-700"></iframe>
                    </div>
                </div>

                <!-- Form Side -->
                <div class="bg-white rounded-2xl p-8 md:p-10 shadow-xl border border-slate-100">
                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                        @csrf
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Name</label>
                                <input type="text" name="name" value="{{ old('name') }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition" placeholder="John Doe">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Email</label>
                                <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition" placeholder="john@example.com">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">Phone (Optional)</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition" placeholder="+255 ...">
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">Department</label>
                            <select name="department" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition">
                                <option value="General Inquiry" @selected(old('department') == 'General Inquiry')>General Inquiry</option>
                                @foreach ($departments as $division)
                                    <option value="{{ $division->title }}" @selected(old('department') == $division->title)>{{ $division->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">Message</label>
                            <textarea name="message" rows="5" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition" placeholder="How can we help you?">{{ old('message') }}</textarea>
                        </div>
                        <button type="submit" class="w-full py-4 bg-brand-primary text-white font-bold rounded-lg hover:bg-brand-accent transition shadow-lg shadow-brand-primary/30">Send Message</button>
                    </form>
                </div>
            </div>
         </div>
    </section>
</main>
@endsection
