@component('layouts.app', [
    'title' => 'Contact Us',
    'metaDescription' => 'Contact Yatra Card — office location, phone, email, live chat, and business hours.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Support',
        'title' => 'We\'d Love to Hear From You',
        'subtitle' => 'Questions about your card, a partnership idea, or press inquiry — reach us any way that works for you.',
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28"
              x-data="{
                  office: 'kathmandu',
                  offices: {
                      kathmandu: { name: 'Kathmandu (Head Office)', address: 'New Baneshwor, Kathmandu, Nepal', phone: '+977-1-4XXXXXX', map: 'https://www.google.com/maps?q=New+Baneshwor,+Kathmandu,+Nepal&output=embed' },
                      pokhara: { name: 'Pokhara Regional Office', address: 'Lakeside, Pokhara, Nepal', phone: '+977-61-XXXXXX', map: 'https://www.google.com/maps?q=Lakeside,+Pokhara,+Nepal&output=embed' },
                      bhaktapur: { name: 'Bhaktapur Support Center', address: 'Durbar Square Road, Bhaktapur, Nepal', phone: '+977-1-6XXXXXX', map: 'https://www.google.com/maps?q=Bhaktapur+Durbar+Square,+Nepal&output=embed' },
                  },
              }">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal mb-10 flex flex-wrap justify-center gap-2">
                <template x-for="(info, key) in offices" :key="key">
                    <button type="button" @click="office = key"
                            :class="office === key ? 'bg-primary text-white dark:bg-secondary' : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                            class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300" x-text="info.name"></button>
                </template>
            </div>

            <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">
                <!-- Contact form -->
                <div class="reveal-left rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel lg:col-span-3">
                    <h2 class="mb-6 font-heading text-xl font-bold text-slate-900 dark:text-white">Send Us a Message</h2>
                    <form data-toast-form data-toast-title="Message Sent!" data-toast-message="Our team will respond within 2 business hours." class="space-y-5">
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            <div>
                                <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Name</label>
                                <input type="text" required placeholder="Sabina Gurung"
                                       class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                            </div>
                            <div>
                                <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email</label>
                                <input type="email" required placeholder="you@example.com"
                                       class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                            </div>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Subject</label>
                            <select class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <option>General Inquiry</option>
                                <option>Card Issue</option>
                                <option>Partnership</option>
                                <option>Press</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Message</label>
                            <textarea required rows="4" placeholder="How can we help?"
                                      class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary"></textarea>
                        </div>
                        <button type="submit" class="w-full rounded-xl bg-primary py-3.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-[1.01] dark:bg-secondary">
                            Send Message
                        </button>
                    </form>
                </div>

                <!-- Contact info -->
                <div class="reveal-right space-y-5 lg:col-span-2">
                    <img src="https://picsum.photos/seed/yatra-office/500/240"
                         srcset="https://picsum.photos/seed/yatra-office/500/240 500w, https://picsum.photos/seed/yatra-office/1000/480 1000w"
                         sizes="(min-width: 1024px) 40vw, 100vw"
                         alt="Yatra Card head office building"
                         width="500" height="240" loading="lazy"
                         class="h-40 w-full rounded-2xl object-cover shadow-sm">

                    <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <div class="mb-3 flex items-center gap-3">
                            <span class="grid h-10 w-10 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary"><i class="fa-solid fa-location-dot"></i></span>
                            <p class="font-heading text-sm font-bold text-slate-900 dark:text-white" x-text="offices[office].name"></p>
                        </div>
                        <p class="text-sm text-slate-500 dark:text-slate-400" x-text="offices[office].address"></p>
                    </div>
                    <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <div class="mb-3 flex items-center gap-3">
                            <span class="grid h-10 w-10 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary"><i class="fa-solid fa-phone"></i></span>
                            <p class="font-heading text-sm font-bold text-slate-900 dark:text-white">Phone &amp; Email</p>
                        </div>
                        <p class="text-sm text-slate-500 dark:text-slate-400" x-text="offices[office].phone"></p>
                        <p class="text-sm text-slate-500 dark:text-slate-400">support@yatracard.com.np</p>
                    </div>
                    <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <div class="mb-3 flex items-center gap-3">
                            <span class="grid h-10 w-10 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary"><i class="fa-solid fa-clock"></i></span>
                            <p class="font-heading text-sm font-bold text-slate-900 dark:text-white">Business Hours</p>
                        </div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Sun – Fri, 9:00 AM – 6:00 PM</p>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Support chat: 24/7</p>
                    </div>
                </div>
            </div>

            <div class="reveal mt-10 overflow-hidden rounded-2xl border border-slate-100 shadow-sm dark:border-white/10">
                <iframe
                    title="Yatra Card office location"
                    :src="offices[office].map"
                    class="h-80 w-full grayscale-[20%]"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </section>
@endcomponent