@extends('layout.v2.app')

@section('content')

{{-- ================= HERO ================= --}}
<section class="relative bg-navy text-white overflow-hidden">
    {{-- dekorasi --}}
    <div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-orange/20 blur-3xl"></div>
    <div class="absolute -bottom-32 -left-24 w-96 h-96 rounded-full bg-white/5 blur-3xl"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-28 text-center">
        <nav class="flex items-center justify-center gap-2 text-sm text-white/60 mb-4">
            <a href="{{ url('/') }}" class="hover:text-white transition">Home</a>
            <i class="las la-angle-right text-xs"></i>
            <span class="text-white">Contact Us</span>
        </nav>

        <h1 class="text-4xl sm:text-5xl font-bold tracking-tight">Get in Touch With Us</h1>
        <p class="mt-4 max-w-2xl mx-auto text-white/70 leading-relaxed">
            Have a question about a travel package or want to plan a custom trip?
            Our team is ready to help you create an unforgettable journey.
        </p>
    </div>
</section>

{{-- ================= INFO CARDS ================= --}}
<section class="relative z-10 -mt-14">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

            {{-- Phone --}}
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-lg transition p-6">
                <div class="w-12 h-12 rounded-lg bg-orange/10 text-orange flex items-center justify-center mb-4">
                    <i class="las la-phone text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy">Call Us</h3>
                <p class="text-sm text-gray-400 mt-1">Mon - Sat, 08.00 - 17.00</p>
                <a href="tel:+6281234567890" class="block mt-3 text-sm font-semibold text-navy hover:text-orange transition">
                    +62 812-3456-7890
                </a>
            </div>

            {{-- WhatsApp --}}
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-lg transition p-6">
                <div class="w-12 h-12 rounded-lg bg-orange/10 text-orange flex items-center justify-center mb-4">
                    <i class="lab la-whatsapp text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy">WhatsApp</h3>
                <p class="text-sm text-gray-400 mt-1">Fast response via chat</p>
                <a href="https://wa.me/6281234567890" target="_blank" rel="noopener"
                   class="block mt-3 text-sm font-semibold text-navy hover:text-orange transition">
                    Chat Now
                </a>
            </div>

            {{-- Email --}}
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-lg transition p-6">
                <div class="w-12 h-12 rounded-lg bg-orange/10 text-orange flex items-center justify-center mb-4">
                    <i class="las la-envelope text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy">Email Us</h3>
                <p class="text-sm text-gray-400 mt-1">We reply within 24 hours</p>
                <a href="mailto:hello@yourtravel.com" class="block mt-3 text-sm font-semibold text-navy hover:text-orange transition">
                    hello@yourtravel.com
                </a>
            </div>

            {{-- Office --}}
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-lg transition p-6">
                <div class="w-12 h-12 rounded-lg bg-orange/10 text-orange flex items-center justify-center mb-4">
                    <i class="las la-map-marker-alt text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy">Visit Our Office</h3>
                <p class="text-sm text-gray-400 mt-1">Jl. Malioboro No. 123,</p>
                <p class="text-sm font-semibold text-navy">Yogyakarta, Indonesia</p>
            </div>

        </div>
    </div>
</section>

{{-- ================= FORM + MAP ================= --}}
<section class="py-16 lg:py-24 bg-gray-50 mt-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-10">

            {{-- ===== FORM ===== --}}
            <div class="lg:col-span-3">
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 sm:p-10">
                    <span class="text-orange text-sm font-semibold uppercase tracking-wider">Send a Message</span>
                    <h2 class="text-2xl sm:text-3xl font-bold text-navy mt-2">We'd love to hear from you</h2>
                    <p class="text-gray-400 mt-2 mb-8">
                        Fill out the form below and our team will get back to you as soon as possible.
                    </p>

                    {{-- Success alert --}}
                    @if (session('success'))
                        <div class="mb-6 flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700">
                            <i class="las la-check-circle text-2xl"></i>
                            <p class="text-sm">{{ session('success') }}</p>
                        </div>
                    @endif

                    <form action="" method="POST" class="space-y-5"
                          onsubmit="this.querySelector('button[type=submit]').disabled = true;">
                        @csrf

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            {{-- Name --}}
                            <div>
                                <label for="name" class="block text-sm font-medium text-navy mb-1.5">Full Name</label>
                                <input type="text" id="name" name="name" value="{{ old('name') }}" required
                                       placeholder="John Doe"
                                       class="w-full rounded-lg border px-4 py-3 text-sm text-navy placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-orange/40 focus:border-orange transition
                                              @error('name') border-red-400 @else border-gray-200 @enderror" />
                                @error('name')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Email --}}
                            <div>
                                <label for="email" class="block text-sm font-medium text-navy mb-1.5">Email Address</label>
                                <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                       placeholder="you@example.com"
                                       class="w-full rounded-lg border px-4 py-3 text-sm text-navy placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-orange/40 focus:border-orange transition
                                              @error('email') border-red-400 @else border-gray-200 @enderror" />
                                @error('email')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            {{-- Phone --}}
                            <div>
                                <label for="phone" class="block text-sm font-medium text-navy mb-1.5">Phone / WhatsApp</label>
                                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}"
                                       placeholder="+62 812 3456 7890"
                                       class="w-full rounded-lg border px-4 py-3 text-sm text-navy placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-orange/40 focus:border-orange transition
                                              @error('phone') border-red-400 @else border-gray-200 @enderror" />
                                @error('phone')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Subject --}}
                            <div>
                                <label for="subject" class="block text-sm font-medium text-navy mb-1.5">Subject</label>
                                <select id="subject" name="subject" required
                                        class="w-full rounded-lg border px-4 py-3 text-sm text-navy bg-white focus:outline-none focus:ring-2 focus:ring-orange/40 focus:border-orange transition
                                               @error('subject') border-red-400 @else border-gray-200 @enderror">
                                    <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Select a subject</option>
                                    @foreach (['Package Inquiry', 'Custom Trip', 'Booking & Payment', 'Partnership', 'Other'] as $option)
                                        <option value="{{ $option }}" {{ old('subject') === $option ? 'selected' : '' }}>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('subject')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        {{-- Message --}}
                        <div>
                            <label for="message" class="block text-sm font-medium text-navy mb-1.5">Your Message</label>
                            <textarea id="message" name="message" rows="6" required
                                      placeholder="Tell us about your travel plans, number of travelers, preferred dates..."
                                      class="w-full rounded-lg border px-4 py-3 text-sm text-navy placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-orange/40 focus:border-orange transition resize-none
                                             @error('message') border-red-400 @else border-gray-200 @enderror">{{ old('message') }}</textarea>
                            @error('message')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pt-2">
                            <p class="text-xs text-gray-400 flex items-center gap-1">
                                <i class="las la-lock text-base"></i>
                                Your information is safe and will never be shared.
                            </p>
                            <button type="button"
                                    class="inline-flex items-center justify-center gap-2 bg-orange text-white text-sm font-semibold px-8 py-3 rounded-lg hover:opacity-90 hover:shadow-lg transition disabled:opacity-60 disabled:cursor-not-allowed">
                                Send Message
                                <i class="las la-paper-plane text-lg"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ===== SIDEBAR ===== --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Map --}}
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    <iframe
                        src="https://www.google.com/maps?q=Yogyakarta&output=embed"
                        class="w-full h-72 border-0"
                        allowfullscreen
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Office location"></iframe>
                    <div class="p-5">
                        <h3 class="font-bold text-navy">Our Office</h3>
                        <p class="text-sm text-gray-400 mt-1 leading-relaxed">
                            Jl. Malioboro No. 123, Yogyakarta,<br />
                            Daerah Istimewa Yogyakarta 55213
                        </p>
                    </div>
                </div>

                {{-- Opening hours --}}
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-orange/10 text-orange flex items-center justify-center">
                            <i class="las la-clock text-xl"></i>
                        </div>
                        <h3 class="font-bold text-navy">Opening Hours</h3>
                    </div>
                    <ul class="text-sm divide-y divide-gray-100">
                        <li class="flex justify-between py-2.5">
                            <span class="text-gray-400">Monday - Friday</span>
                            <span class="font-medium text-navy">08.00 - 17.00</span>
                        </li>
                        <li class="flex justify-between py-2.5">
                            <span class="text-gray-400">Saturday</span>
                            <span class="font-medium text-navy">08.00 - 14.00</span>
                        </li>
                        <li class="flex justify-between py-2.5">
                            <span class="text-gray-400">Sunday</span>
                            <span class="font-medium text-orange">Closed</span>
                        </li>
                    </ul>
                </div>

                {{-- Social --}}
                <div class="bg-navy rounded-2xl p-6 text-white">
                    <h3 class="font-bold">Follow Our Journey</h3>
                    <p class="text-sm text-white/60 mt-1">Get travel inspiration and the latest promos.</p>
                    <div class="flex gap-3 mt-4">
                        <a href="#" aria-label="Instagram"
                           class="w-10 h-10 rounded-lg bg-white/10 hover:bg-orange flex items-center justify-center transition">
                            <i class="lab la-instagram text-xl"></i>
                        </a>
                        <a href="#" aria-label="Facebook"
                           class="w-10 h-10 rounded-lg bg-white/10 hover:bg-orange flex items-center justify-center transition">
                            <i class="lab la-facebook-f text-xl"></i>
                        </a>
                        <a href="#" aria-label="TikTok"
                           class="w-10 h-10 rounded-lg bg-white/10 hover:bg-orange flex items-center justify-center transition">
                            <i class="lab la-tiktok text-xl"></i>
                        </a>
                        <a href="#" aria-label="YouTube"
                           class="w-10 h-10 rounded-lg bg-white/10 hover:bg-orange flex items-center justify-center transition">
                            <i class="lab la-youtube text-xl"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<!-- ============ 12. FAQ ============ -->
<section id="faq" class="bg-white border-y border-gray-100">
    <div class="max-w-4xl mx-auto px-4 py-16">
        <div class="text-center mb-10">
            <p class="text-orange font-semibold text-sm tracking-wide">
                GOT QUESTIONS?
            </p>
            <h2 class="text-3xl font-extrabold mt-1">
                Frequently Asked Questions
            </h2>
        </div>

        <div class="space-y-3">
            <details class="group bg-gray-50 rounded-lg px-5 py-4" open>
                <summary
                    class="flex items-center justify-between cursor-pointer font-semibold text-navy"
                >
                    How do I book a private driver or tour?
                    <span
                        class="faq-icon text-orange text-xl transition-transform"
                        >+</span
                    >
                </summary>
                <p class="text-sm text-gray-500 mt-3">
                    Simply message us on WhatsApp or fill in the booking
                    widget above with your preferred date and service —
                    our team will confirm availability within minutes.
                </p>
            </details>
            <details class="group bg-gray-50 rounded-lg px-5 py-4">
                <summary
                    class="flex items-center justify-between cursor-pointer font-semibold text-navy"
                >
                    Are prices per person or per car?
                    <span
                        class="faq-icon text-orange text-xl transition-transform"
                        >+</span
                    >
                </summary>
                <p class="text-sm text-gray-500 mt-3">
                    Private driver services and most day tours are
                    priced per car, while multi-day overland packages
                    are priced per person. Each listing states the unit
                    clearly.
                </p>
            </details>
            <details class="group bg-gray-50 rounded-lg px-5 py-4">
                <summary
                    class="flex items-center justify-between cursor-pointer font-semibold text-navy"
                >
                    Do your drivers and guides speak English?
                    <span
                        class="faq-icon text-orange text-xl transition-transform"
                        >+</span
                    >
                </summary>
                <p class="text-sm text-gray-500 mt-3">
                    Yes, all our drivers and guides are trained and
                    speak conversational to fluent English, and are
                    familiar with international travelers' needs.
                </p>
            </details>
            <details class="group bg-gray-50 rounded-lg px-5 py-4">
                <summary
                    class="flex items-center justify-between cursor-pointer font-semibold text-navy"
                >
                    Is entrance ticket and fuel included in the price?
                    <span
                        class="faq-icon text-orange text-xl transition-transform"
                        >+</span
                    >
                </summary>
                <p class="text-sm text-gray-500 mt-3">
                    Our "no hidden cost" packages include fuel, parking,
                    and driver allowance. Entrance tickets are listed
                    separately on each tour so you know exactly what to
                    expect.
                </p>
            </details>
            <details class="group bg-gray-50 rounded-lg px-5 py-4">
                <summary
                    class="flex items-center justify-between cursor-pointer font-semibold text-navy"
                >
                    Can I customize my own itinerary?
                    <span
                        class="faq-icon text-orange text-xl transition-transform"
                        >+</span
                    >
                </summary>
                <p class="text-sm text-gray-500 mt-3">
                    Absolutely — our Private Driver services are fully
                    flexible. Just tell us your destinations and timing,
                    and we'll build a custom route for you.
                </p>
            </details>
        </div>
    </div>
</section>

@endsection