@component('layouts.app', [
    'title' => 'Contact Us',
    'metaDescription' => 'Contact Fintech — 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" :aria-pressed="(office === key).toString()"
                            :class="office === key ? 'bg-primary text-white dark:bg-secondary dark:text-ink' : '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 for="contact-name" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Name</label>
                                <input id="contact-name" name="name" type="text" required placeholder="Sabina Gurung" autocomplete="name"
                                       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 for="contact-email" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email</label>
                                <input id="contact-email" name="email" type="email" required placeholder="you@example.com" autocomplete="email"
                                       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 for="contact-subject" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Subject</label>
                            <select id="contact-subject" name="subject"
                                    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 for="contact-message" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Message</label>
                            <textarea id="contact-message" name="message" 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 dark:text-ink">
                            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="Fintech 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" aria-hidden="true"></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" aria-hidden="true"></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@fintech.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" aria-hidden="true"></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="Fintech office location"
                    :src="offices[office].map"
                    class="h-80 w-full grayscale-[20%]"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>

            <!-- Regulatory contacts — grievance/compliance/accessibility officer
                 disclosure, expected of a licensed payment service provider. -->
            <div class="reveal mt-14">
                <p class="mb-2 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">Regulatory &amp; Compliance</p>
                <h2 class="mb-6 font-heading text-2xl font-bold text-slate-900 dark:text-white">Named Officers for Regulatory Matters</h2>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                    @foreach ([
                        [
                            'icon' => 'fa-scale-balanced',
                            'role' => 'Grievance Officer',
                            'name' => 'Rajesh Sharma',
                            'note' => 'For unresolved customer complaints about your card, recharge, or a transaction. Acknowledged within 24 hours and resolved within 15 working days.',
                            'email' => 'grievance@fintech.com.np',
                            'phone' => '+977-1-4XXXXXX (ext. 101)',
                        ],
                        [
                            'icon' => 'fa-shield-halved',
                            'role' => 'Compliance Officer',
                            'name' => 'Anita Poudel',
                            'note' => 'For AML / KYC, data protection, and other regulatory compliance matters under NRB licensing.',
                            'email' => 'compliance@fintech.com.np',
                            'phone' => '+977-1-4XXXXXX (ext. 102)',
                        ],
                        [
                            'icon' => 'fa-universal-access',
                            'role' => 'Accessibility & Disability Officer',
                            'name' => 'Bikash Thapa',
                            'note' => 'For accessibility barriers, assistive-technology support, or feedback on how well this site meets WCAG guidelines.',
                            'email' => 'accessibility@fintech.com.np',
                            'phone' => '+977-1-4XXXXXX (ext. 103)',
                        ],
                    ] as $officer)
                        <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                            <span class="mb-3 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 {{ $officer['icon'] }}" aria-hidden="true"></i>
                            </span>
                            <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">{{ $officer['role'] }}</p>
                            <p class="mt-1 font-heading text-sm font-bold text-slate-900 dark:text-white">{{ $officer['name'] }}</p>
                            <p class="mt-2 text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $officer['note'] }}</p>
                            <div class="mt-3 space-y-1 text-xs text-slate-600 dark:text-slate-300">
                                <a href="mailto:{{ $officer['email'] }}" class="flex items-center gap-1.5 transition hover:text-primary dark:hover:text-secondary">
                                    <i class="fa-solid fa-envelope text-[10px]" aria-hidden="true"></i> {{ $officer['email'] }}
                                </a>
                                <a href="tel:{{ preg_replace('/[^\d+]/', '', $officer['phone']) }}" class="flex items-center gap-1.5 transition hover:text-primary dark:hover:text-secondary">
                                    <i class="fa-solid fa-phone text-[10px]" aria-hidden="true"></i> {{ $officer['phone'] }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endcomponent