@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Contact Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo->meta_description ?? 'Contact Kevron Suites and Apartments in Adeniyi Jones, Ikeja for bookings, availability, WhatsApp support, airport pickup, corporate stays, and guest enquiries.')

@section('content')
<!-- Custom Styles for Contact Dashboard View -->
<style>
    /* Styling Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #F4F8FF;
    }
    ::-webkit-scrollbar-thumb {
        background: #2B3192;
        border-radius: 3px;
    }
    /* Typography Caps */
    .contact-luxury-h1 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        line-height: 1.2;
        color: #080D2B;
    }
    .contact-luxury-h2 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.1rem, 3vw, 1.4rem);
        line-height: 1.3;
        color: #080D2B;
    }
    .contact-luxury-h3 {
        font-family: 'Marcellus', serif;
        font-size: clamp(0.95rem, 2.5vw, 1.2rem);
        line-height: 1.3;
        color: #080D2B;
    }
    .contact-body-text {
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem !important;
        color: #4b5563;
        line-height: 1.7;
    }
    .contact-pill-btn {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.8rem;
        border-radius: 50px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow: 0 4px 6px -1px rgba(43, 49, 146, 0.1), 0 2px 4px -1px rgba(43, 49, 146, 0.06);
    }
    .contact-pill-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(43, 49, 146, 0.15), 0 3px 6px rgba(43, 49, 146, 0.1);
    }
    .contact-flat-card {
        border-radius: 0.1rem;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    }
    .contact-flat-card:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    }
    .honeypot-field {
        display: none !important;
        visibility: hidden !important;
    }
</style>

<!-- Breadcrumbs Nav (diff background) -->
<nav class="bg-[#F4F8FF] py-3.5 border-b border-slate-100" aria-label="Breadcrumb">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ol class="flex items-center space-x-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
            <li>
                <a href="{{ url('/') }}" class="hover:text-[#2B3192]">Home</a>
            </li>
            <li><span>/</span></li>
            <li class="text-slate-600 font-bold" aria-current="page">Contact Us</li>
        </ol>
    </div>
</nav>

<!-- 1. Hero Section -->
<section class="bg-white py-16 relative overflow-hidden">
    <!-- Ambient Radial Blur Blobs for Rich Aesthetics -->
    <div class="absolute -top-40 -left-40 w-96 h-96 bg-[#2B3192]/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-10 right-0 w-80 h-80 bg-[#D6A84F]/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            <div class="lg:col-span-6 space-y-6">
                <!-- Trust Chips -->
                <div class="flex flex-wrap gap-2">
                    <span class="inline-block bg-[#F4F8FF] text-[#2B3192] text-[9px] uppercase tracking-wider font-bold py-1 px-3.5 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">Booking Support</span>
                    <span class="inline-block bg-[#F4F8FF] text-[#2B3192] text-[9px] uppercase tracking-wider font-bold py-1 px-3.5 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">WhatsApp Enquiry</span>
                    <span class="inline-block bg-[#F4F8FF] text-[#2B3192] text-[9px] uppercase tracking-wider font-bold py-1 px-3.5 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">Ikeja Location</span>
                    <span class="inline-block bg-[#F4F8FF] text-[#2B3192] text-[9px] uppercase tracking-wider font-bold py-1 px-3.5 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">Airport Pickup</span>
                    <span class="inline-block bg-[#F4F8FF] text-[#2B3192] text-[9px] uppercase tracking-wider font-bold py-1 px-3.5 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">Corporate Stays</span>
                </div>
                <h1 class="contact-luxury-h1 font-bold text-slate-900 leading-tight">
                    Contact Kevron Suites and Apartments
                </h1>
                <p class="contact-body-text text-slate-600">
                    Get in touch with Kevron Suites and Apartments in Adeniyi Jones, Ikeja for bookings, availability enquiries, airport pickup, corporate stays, long stays, guest support and general enquiries.
                </p>
                <div class="pt-4 flex flex-col sm:flex-row flex-wrap gap-4">
                    <a href="#leads-panel" class="contact-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-3.5 px-8 text-center telemetry-trigger" data-event="explore_contact_clicked">
                        Send Enquiry
                    </a>
                    <a href="{{ url('/accessibility-statement') }}" class="contact-pill-btn border border-[#2B3192] text-[#2B3192] hover:bg-[#2B3192] hover:text-white py-3.5 px-8 text-center">
                        Accessibility Support
                    </a>
                    <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20make%20an%20enquiry." target="_blank" class="contact-pill-btn bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white py-3.5 px-8 text-center flex items-center justify-center space-x-2 telemetry-trigger shadow-md shadow-emerald-500/10" data-event="whatsapp_clicked">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.965C16.49 1.977 14.021.952 11.4.952c-5.442 0-9.866 4.372-9.87 9.802-.001 1.776.477 3.51 1.385 5.03L1.93 21.67l6.027-1.576c1.603.951 3.19 1.45 4.82 1.45zm5.405-3.69c-.269-.134-1.597-.788-1.846-.878-.25-.09-.431-.135-.613.135-.18.27-.7.878-.857 1.058-.159.18-.317.2-.587.066-1.002-.502-1.745-.884-2.426-2.05-.175-.3-.175-.49-.077-.677.098-.188.269-.315.404-.472.135-.157.18-.27.27-.45.09-.18.045-.337-.023-.472-.068-.135-.613-1.478-.839-2.023-.22-.53-.443-.457-.613-.465-.16-.008-.344-.01-.527-.01-.184 0-.485.068-.74.346-.253.277-.968.946-.968 2.308 0 1.36.99 2.674 1.129 2.859.139.186 1.947 2.973 4.717 4.168.659.284 1.173.454 1.573.58.662.21 1.264.18 1.74.11.53-.078 1.597-.652 1.821-1.25.225-.597.225-1.11.157-1.218-.067-.11-.25-.18-.519-.315z"/>
                        </svg>
                        <span>WhatsApp Quick Chat</span>
                    </a>
                </div>
            </div>
            <div class="lg:col-span-6">
                <!-- Explicit Layout Stable Heights to prevent CLS -->
                <div class="contact-flat-card overflow-hidden bg-slate-100 relative h-[300px] sm:h-[400px] lg:h-[440px] transition-transform duration-500 hover:scale-[1.01] hover:shadow-md">
                    <img src="{{ asset('pictures/living-room.jpg') }}" alt="Kevron Executive Concierge Support Desk" class="w-full h-full object-cover lazy-loading" loading="lazy">
                    <div class="absolute bottom-4 left-4 bg-slate-950/70 p-3 rounded text-[10px] text-slate-200 font-semibold italic backdrop-blur-sm border border-white/10">
                        Visual of Kevron Suites and Apartments Luxury Lounge.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 2. Contact Information Cards Grid -->
<section class="bg-[#F4F8FF] py-16 border-t border-b border-slate-100" x-data="clipboardManager()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="contact-luxury-h2 font-bold text-center mb-10 text-slate-900">Concierge Coordinates</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- Address Card -->
            <div class="contact-flat-card bg-white p-6 space-y-4 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <div class="space-y-2">
                    <div class="w-8 h-8 rounded-full bg-[#F4F8FF] text-[#2B3192] flex items-center justify-center shadow-[rgba(0,0,0,0.03)_0px_2px_4px_0px]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" 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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                    <h4 class="text-xs font-bold text-[#2B3192]">Address Coordinates</h4>
                    <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">{{ $address }}</p>
                </div>
                <button @click="copyText('{{ $address }}', 'Address copied to clipboard!')" class="text-[10px] font-bold text-[#D6A84F] hover:underline text-left self-start focus:outline-none">Copy Address →</button>
            </div>

            <!-- Phone Card -->
            <div class="contact-flat-card bg-white p-6 space-y-4 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <div class="space-y-2">
                    <div class="w-8 h-8 rounded-full bg-[#F4F8FF] text-[#2B3192] flex items-center justify-center shadow-[rgba(0,0,0,0.03)_0px_2px_4px_0px]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                    </div>
                    <h4 class="text-xs font-bold text-[#2B3192]">Telephone Desk</h4>
                    <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Call our support coordinates directly for instant assistance.</p>
                    <a href="tel:{{ str_replace(' ', '', $phone) }}" class="block text-[11px] text-[#2B3192] font-bold">{{ $phone }}</a>
                </div>
                <div class="flex space-x-4">
                    <a href="tel:{{ str_replace(' ', '', $phone) }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline focus:outline-none">Call Now →</a>
                    <button @click="copyText('{{ $phone }}', 'Phone number copied!')" class="text-[10px] font-bold text-slate-400 hover:underline focus:outline-none">Copy Phone</button>
                </div>
            </div>

            <!-- Email Card -->
            <div class="contact-flat-card bg-white p-6 space-y-4 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <div class="space-y-2">
                    <div class="w-8 h-8 rounded-full bg-[#F4F8FF] text-[#2B3192] flex items-center justify-center shadow-[rgba(0,0,0,0.03)_0px_2px_4px_0px]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" 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>
                    <h4 class="text-xs font-bold text-[#2B3192]">Email Enquiries</h4>
                    <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Write our executive hospitality desk for quotes and support.</p>
                    <a href="mailto:{{ $email }}" class="block text-[11px] text-[#2B3192] font-bold">{{ $email }}</a>
                </div>
                <div class="flex space-x-4">
                    <a href="mailto:{{ $email }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline focus:outline-none">Email Us →</a>
                    <button @click="copyText('{{ $email }}', 'Email coordinates copied!')" class="text-[10px] font-bold text-slate-400 hover:underline focus:outline-none">Copy Email</button>
                </div>
            </div>

            <!-- WhatsApp Card -->
            <div class="contact-flat-card bg-white p-6 space-y-4 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <div class="space-y-2">
                    <div class="w-8 h-8 rounded-full bg-[#F4F8FF] text-[#2B3192] flex items-center justify-center shadow-[rgba(0,0,0,0.03)_0px_2px_4px_0px]">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.965C16.49 1.977 14.021.952 11.4.952c-5.442 0-9.866 4.372-9.87 9.802-.001 1.776.477 3.51 1.385 5.03L1.93 21.67l6.027-1.576c1.603.951 3.19 1.45 4.82 1.45zm5.405-3.69c-.269-.134-1.597-.788-1.846-.878-.25-.09-.431-.135-.613.135-.18.27-.7.878-.857 1.058-.159.18-.317.2-.587.066-1.002-.502-1.745-.884-2.426-2.05-.175-.3-.175-.49-.077-.677.098-.188.269-.315.404-.472.135-.157.18-.27.27-.45.09-.18.045-.337-.023-.472-.068-.135-.613-1.478-.839-2.023-.22-.53-.443-.457-.613-.465-.16-.008-.344-.01-.527-.01-.184 0-.485.068-.74.346-.253.277-.968.946-.968 2.308 0 1.36.99 2.674 1.129 2.859.139.186 1.947 2.973 4.717 4.168.659.284 1.173.454 1.573.58.662.21 1.264.18 1.74.11.53-.078 1.597-.652 1.821-1.25.225-.597.225-1.11.157-1.218-.067-.11-.25-.18-.519-.315z"/>
                        </svg>
                    </div>
                    <h4 class="text-xs font-bold text-[#2B3192]">WhatsApp Desk</h4>
                    <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Direct connection to digital live hosts for fast support.</p>
                </div>
                <a href="https://wa.me/{{ $whatsapp }}" target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline text-left self-start focus:outline-none">Chat on WhatsApp →</a>
            </div>
        </div>
    </div>
</section>

<!-- 3. Conversion Enquiries Form Panel -->
<section id="leads-panel" class="bg-white py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8" x-data="leadFormsManager()">
        <div class="text-center mb-8">
            <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block mb-2">Lead Channels</span>
            <h2 class="contact-luxury-h2 font-bold text-slate-900">Send an Enquiry</h2>
        </div>

        <!-- Dynamic Form Tabs Switcher -->
        <div class="flex border-b border-slate-200 mb-8 max-w-md mx-auto">
            <button @click="activeTab = 'general'" :class="activeTab === 'general' ? 'border-[#2B3192] text-[#2B3192]' : 'border-transparent text-slate-400 hover:text-slate-600'" class="flex-1 text-center py-2.5 text-xs font-bold border-b-2 uppercase tracking-wider transition-colors focus:outline-none">
                General
            </button>
            <button @click="activeTab = 'booking'" :class="activeTab === 'booking' ? 'border-[#2B3192] text-[#2B3192]' : 'border-transparent text-slate-400 hover:text-slate-600'" class="flex-1 text-center py-2.5 text-xs font-bold border-b-2 uppercase tracking-wider transition-colors focus:outline-none">
                Availability
            </button>
            <button @click="activeTab = 'corporate'" :class="activeTab === 'corporate' ? 'border-[#2B3192] text-[#2B3192]' : 'border-transparent text-slate-400 hover:text-slate-600'" class="flex-1 text-center py-2.5 text-xs font-bold border-b-2 uppercase tracking-wider transition-colors focus:outline-none">
                Corporate B2B
            </button>
        </div>

        <!-- AJAX Form Containers -->
        <div class="bg-slate-50 border border-slate-100 rounded-sm p-8 shadow-sm">
            
            <!-- Toast Feedback Banner -->
            <div x-show="toast.show" x-transition :class="toast.success ? 'bg-emerald-50 border-emerald-100 text-emerald-600' : 'bg-rose-50 border-rose-100 text-rose-600'" class="p-4 rounded-sm text-xs font-semibold mb-6 border flex items-center justify-between">
                <span x-text="toast.message"></span>
                <button @click="toast.show = false" class="focus:outline-none text-slate-400 hover:text-slate-600 ml-4">✖</button>
            </div>

            <!-- Tab 1: General Enquiry Form -->
            <form x-show="activeTab === 'general'" @submit.prevent="submitForm('{{ route('contact.general') }}', 'general')" class="space-y-4 text-xs font-semibold">
                @csrf
                <!-- Honeypot -->
                <input type="text" name="confirm_email" class="honeypot-field" autocomplete="off" placeholder="Confirm Email">

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Full Name *</label>
                        <input type="text" required name="full_name" placeholder="John Doe"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Email Address *</label>
                        <input type="email" required name="email" placeholder="johndoe@example.com"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Phone / WhatsApp</label>
                        <input type="text" name="phone" placeholder="+234 803 123 4567"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Enquiry Type *</label>
                        <select required name="enquiry_type" class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                            <option value="">Select Enquiry Reason</option>
                            @foreach($enquiryTypes as $type)
                            <option value="{{ $type->slug }}">{{ $type->name }}</option>
                            @endforeach
                            @if($enquiryTypes->isEmpty())
                            <option value="general">General Enquiry</option>
                            <option value="booking">Booking / Stay Request</option>
                            <option value="corporate">Corporate Staff Stay</option>
                            @endif
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Apartment Interest</label>
                        <select name="apartment_interest" class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                            <option value="">Select Suite Type</option>
                            <option value="1_bedroom">1 Bedroom Master Suite</option>
                            <option value="2_bedroom">2 Bedroom Luxury Apartment</option>
                            <option value="3_bedroom">3 Bedroom Luxury Apartment</option>
                            <option value="4_bedroom">4 Bedroom Luxury Apartment</option>
                            <option value="not_sure">Not Sure / Multiple</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Preferred Contact Method *</label>
                    <div class="flex items-center space-x-6 pt-1">
                        <label class="flex items-center space-x-2 text-slate-600 font-medium">
                            <input type="radio" required name="preferred_contact_method" value="email" checked class="text-[#2B3192] focus:ring-[#2B3192]">
                            <span>Email</span>
                        </label>
                        <label class="flex items-center space-x-2 text-slate-600 font-medium">
                            <input type="radio" required name="preferred_contact_method" value="phone" class="text-[#2B3192] focus:ring-[#2B3192]">
                            <span>Phone</span>
                        </label>
                        <label class="flex items-center space-x-2 text-slate-600 font-medium">
                            <input type="radio" required name="preferred_contact_method" value="whatsapp" class="text-[#2B3192] focus:ring-[#2B3192]">
                            <span>WhatsApp</span>
                        </label>
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Message / Requirements *</label>
                    <textarea required name="message" rows="4" placeholder="Hello, I would like to request details on..."
                              class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium"></textarea>
                </div>

                <div class="flex items-start space-x-2 pt-2">
                    <input type="checkbox" required id="privacy_general" class="mt-0.5 rounded text-[#2B3192] focus:ring-[#2B3192]">
                    <label for="privacy_general" class="text-[10px] text-slate-500 font-semibold leading-relaxed select-none">
                        I consent to Kevron Suites processing my details to facilitate my executive concierge request.
                    </label>
                </div>

                <div class="pt-2">
                    <button type="submit" :disabled="loading" class="contact-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white w-full py-3.5 uppercase tracking-wider font-bold">
                        <span x-show="!loading">Submit General Enquiry</span>
                        <span x-show="loading">Processing lead...</span>
                    </button>
                </div>
            </form>

            <!-- Tab 2: Booking Enquiry Form -->
            <form x-show="activeTab === 'booking'" @submit.prevent="submitForm('{{ route('contact.booking') }}', 'booking')" class="space-y-4 text-xs font-semibold">
                @csrf
                <input type="text" name="confirm_email" class="honeypot-field" autocomplete="off" placeholder="Confirm Email">

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Full Name *</label>
                        <input type="text" required name="full_name" placeholder="John Doe"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Email Address *</label>
                        <input type="email" required name="email" placeholder="johndoe@example.com"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Phone / WhatsApp</label>
                        <input type="text" name="phone" placeholder="+234 803 123 4567"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Check-In Date *</label>
                        <input type="date" required name="check_in"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Check-Out Date *</label>
                        <input type="date" required name="check_out"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Number of Guests *</label>
                        <input type="number" required min="1" max="20" name="guests_count" value="1"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Preferred Suite</label>
                        <select name="apartment_type" class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                            <option value="">Select Apartment</option>
                            <option value="1 Bedroom Master Suite">1 Bedroom Master Suite — ₦150,000</option>
                            <option value="2 Bedroom Luxury Apartment">2 Bedroom Luxury Apartment — ₦200,000</option>
                            <option value="3 Bedroom Luxury Apartment">3 Bedroom Luxury Apartment — ₦250,000</option>
                            <option value="4 Bedroom Luxury Apartment">4 Bedroom Luxury Apartment — ₦300,000</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Purpose of Stay</label>
                        <select name="purpose_of_stay" class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                            <option value="">Select Purpose</option>
                            <option value="Leisure">Leisure / Staycation</option>
                            <option value="Family Visit">Family visit</option>
                            <option value="Business Travel">Business / Corporate travel</option>
                            <option value="Long Stay">Extended stay / Relocation</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Airport Pickup? *</label>
                        <select required name="airport_pickup_required" class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                            <option value="not_sure">Not Sure yet</option>
                            <option value="yes">Yes, Airport Pickup Required</option>
                            <option value="no">No pickup needed</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Message / Special Requests</label>
                    <textarea name="message" rows="3" placeholder="Please list flight details, dietary requirements, snooker requests, etc."
                              class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium"></textarea>
                </div>

                <div class="flex items-start space-x-2 pt-2">
                    <input type="checkbox" required id="privacy_booking" class="mt-0.5 rounded text-[#2B3192] focus:ring-[#2B3192]">
                    <label for="privacy_booking" class="text-[10px] text-slate-500 font-semibold leading-relaxed select-none">
                        I consent to Kevron Suites processing my reservation coordinates.
                    </label>
                </div>

                <div class="pt-2">
                    <button type="submit" :disabled="loading" class="contact-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white w-full py-3.5 uppercase tracking-wider font-bold">
                        <span x-show="!loading">Submit Booking Enquiry</span>
                        <span x-show="loading">Checking vacancies...</span>
                    </button>
                </div>
            </form>

            <!-- Tab 3: B2B Corporate Enquiry Form -->
            <form x-show="activeTab === 'corporate'" @submit.prevent="submitForm('{{ route('contact.corporate') }}', 'corporate')" class="space-y-4 text-xs font-semibold">
                @csrf
                <input type="text" name="confirm_email" class="honeypot-field" autocomplete="off" placeholder="Confirm Email">

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Company Name *</label>
                        <input type="text" required name="company_name" placeholder="Acme Corporation"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Contact Person *</label>
                        <input type="text" required name="contact_person" placeholder="HR Procurement Officer"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Corporate Email *</label>
                        <input type="email" required name="email" placeholder="procurement@acme.com"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Phone / WhatsApp *</label>
                        <input type="text" required name="phone" placeholder="+234 803 123 4567"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Target Check-In *</label>
                        <input type="date" required name="check_in"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Target Check-Out</label>
                        <input type="date" name="check_out"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Total Staff Guests *</label>
                        <input type="number" required min="1" max="100" name="guests_count" value="1"
                               class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium">
                    </div>
                </div>

                <div class="flex items-center space-x-3.5 py-1">
                    <input type="checkbox" id="vat_invoice" name="vat_invoice" value="1" class="rounded text-[#2B3192] focus:ring-[#2B3192]">
                    <label for="vat_invoice" class="text-[10px] text-slate-600 font-semibold select-none">
                        Requires official corporate VAT invoice and B2B billing setup.
                    </label>
                </div>

                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Accommodation Needs / Custom Terms</label>
                    <textarea name="message" rows="3" placeholder="Please list corporate requirements, multiple room distributions, or extended long-stay terms."
                              class="w-full bg-white border border-slate-200 rounded px-3.5 py-2 text-slate-950 focus:outline-none focus:border-[#2B3192] font-medium"></textarea>
                </div>

                <div class="flex items-center justify-between pt-2">
                    <a href="{{ url('/corporate-stays') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline focus:outline-none">Go to B2B Corporate Portal →</a>
                    <button type="submit" :disabled="loading" class="contact-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-3.5 px-8 uppercase tracking-wider font-bold">
                        <span x-show="!loading">Submit B2B Enquiry</span>
                        <span x-show="loading">Logging company lead...</span>
                    </button>
                </div>
            </form>

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

<!-- 4. Interactive WhatsApp Prefilled Actions -->
<section class="bg-[#F4F8FF] py-16 border-t border-b border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block mb-2">WhatsApp Quick Chat</span>
            <h2 class="contact-luxury-h2 font-bold text-slate-900">Prefabricated Direct Messages</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
            <div class="contact-flat-card bg-white p-6 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">General Enquiry</h4>
                <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">"Hello, I would like to make an enquiry regarding..."</p>
                <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20make%20an%20enquiry." target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline self-start">Start Chat →</a>
            </div>

            <div class="contact-flat-card bg-white p-6 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Apartment Booking</h4>
                <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">"Hello, I would like to check availability and book..."</p>
                <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20check%20availability%20and%20book%20an%20apartment%20in%20Ikeja." target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline self-start">Start Chat →</a>
            </div>

            <div class="contact-flat-card bg-white p-6 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Airport Pickup</h4>
                <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">"Hello, I would like to request airport pickup..."</p>
                <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20request%20airport%20pickup%20for%20my%20stay%20in%20Ikeja." target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline self-start">Start Chat →</a>
            </div>

            <div class="contact-flat-card bg-white p-6 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Corporate Stays</h4>
                <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">"Hello, I would like to enquire about corporate B2B..."</p>
                <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20enquire%20about%20corporate%20accommodation%20for%20staff." target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline self-start">Start Chat →</a>
            </div>

            <div class="contact-flat-card bg-white p-6 flex flex-col justify-between hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Long Stays</h4>
                <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">"Hello, I would like to request weekly/monthly stays..."</p>
                <a href="https://wa.me/{{ $whatsapp }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20request%20weekly%20or%20monthly%20stay%20options." target="_blank" class="text-[10px] font-bold text-[#16A34A] hover:underline self-start">Start Chat →</a>
            </div>
        </div>
    </div>
</section>

<!-- 5. Map Settings and Directions Guides -->
<section class="bg-white py-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-12 gap-12 items-center">
            <div class="lg:col-span-6 space-y-6">
                <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block">Directions guide</span>
                <h2 class="contact-luxury-h2 font-bold text-slate-900">Map & Coordinates</h2>
                <div class="space-y-4 text-xs font-semibold text-slate-600">
                    <p>
                        Kevron Suites and Apartments is located in the premium, highly secure neighborhood of Adeniyi Jones, Ikeja, Lagos, Nigeria.
                    </p>
                    <p class="flex items-start space-x-2">
                        <span class="text-amber-500">📍</span>
                        <span>7B Regina Coker Street, Adeniyi Jones, Ikeja / No. 8 Ogunlowo Street, Adeniyi Jones, Ikeja, Lagos 100271, Nigeria.</span>
                    </p>
                </div>
                <div class="pt-2 flex flex-wrap gap-4">
                    <a href="{{ $mapDirections }}" target="_blank" class="contact-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-2.5 px-6 text-center telemetry-trigger" data-event="directions_clicked">
                        Open in Google Maps
                    </a>
                    <a href="{{ url('/location-neighbourhood-guide-ikeja') }}" class="contact-pill-btn border border-[#2B3192] text-[#2B3192] hover:bg-[#2B3192] hover:text-white py-2.5 px-6 text-center telemetry-trigger" data-event="location_clicked">
                        Neighbourhood Map
                    </a>
                    <a href="{{ url('/airport-pickup-car-rental') }}" class="contact-pill-btn bg-[#D6A84F] hover:bg-[#c49842] text-white py-2.5 px-6 text-center telemetry-trigger" data-event="airport_clicked">
                        Airport Pickup
                    </a>
                </div>
            </div>
            
            <div class="lg:col-span-6">
                <!-- Double-Bordered Dashboard Frame with Aspect Ratio to avoid CLS -->
                <div class="contact-flat-card p-2 bg-white border border-slate-200 shadow-[0_4px_20px_rgba(43,49,146,0.04)] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_12px_30px_rgba(43,49,146,0.08)]">
                    <div class="contact-flat-card overflow-hidden bg-slate-100 h-80 relative border border-[#D6A84F]/30">
                        <iframe src="{{ $mapEmbed }}" class="w-full h-full border-0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Google Map of Kevron Suites and Apartments, Ikeja, Lagos"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 6. Support Hours & Social Channels (diff background) -->
<section class="bg-[#F4F8FF] py-16 border-t border-b border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            <!-- Support hours list -->
            <div class="lg:col-span-6 space-y-6">
                <h3 class="contact-luxury-h3 font-bold text-[#2B3192] uppercase tracking-wider block mb-2">Concierge Hours</h3>
                
                <div class="bg-white border border-slate-200/60 rounded-[0.1rem] overflow-hidden shadow-sm">
                    <table class="w-full text-xs font-semibold text-slate-600">
                        <tbody>
                            @foreach($supportHours as $hour)
                            <tr class="border-b border-slate-100/60 hover:bg-slate-50 transition-colors">
                                <td class="py-3.5 px-4 text-[#2B3192]">{{ $hour->channel }}</td>
                                <td class="py-3.5 px-4 text-right font-bold text-slate-800">{{ $hour->hours }}</td>
                            </tr>
                            @endforeach
                            @if($supportHours->isEmpty())
                            <tr>
                                <td class="py-4 px-4 text-slate-400 italic text-center" colspan="2">
                                    Support hours will be displayed once confirmed by management. Please use WhatsApp or the contact form for enquiries.
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Social handles grid -->
            <div class="lg:col-span-6 space-y-6">
                <h3 class="contact-luxury-h3 font-bold text-[#D6A84F] uppercase tracking-wider block mb-2">Social Channels</h3>
                <p class="contact-body-text">
                    Follow Kevron Suites and Apartments online to watch walk-through videos, check out en-suite facilities, and receive discounts.
                </p>

                <div class="grid grid-cols-2 gap-4">
                    @foreach($socialLinks as $social)
                    <a href="{{ $social->url }}" target="_blank" class="contact-flat-card bg-white p-4 flex items-center space-x-3 hover:bg-slate-50 transition-all duration-300 telemetry-trigger" data-event="social_clicked" data-key="{{ $social->platform }}">
                        <span class="text-amber-500">🔗</span>
                        <div class="text-xs font-bold text-slate-800">
                            {{ $social->platform }}
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>

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

<!-- 7. Dynamic FAQs Accordion -->
@if($faqs->isNotEmpty())
<section class="bg-white py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="contact-luxury-h2 font-bold text-center mb-8 text-slate-900">Enquiry FAQs</h2>
        
        <div class="space-y-4">
            @foreach($faqs as $faq)
            <div class="border border-slate-200/60 rounded-[0.1rem] overflow-hidden shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] transition-colors hover:bg-slate-50">
                <!-- Accordion Header Button -->
                <button class="contact-faq-trigger w-full py-4 px-5 text-left text-xs font-bold text-slate-800 flex items-center justify-between focus:outline-none focus:bg-[#F4F8FF]" aria-expanded="false" aria-controls="faq-content-{{ $faq->id }}">
                    <span>{{ $faq->question }}</span>
                    <span class="faq-icon transform transition-transform duration-300 text-slate-400">➕</span>
                </button>
                <!-- Accordion Content panel -->
                <div id="faq-content-{{ $faq->id }}" class="faq-panel hidden px-5 pb-4 text-[11px] text-slate-500 leading-relaxed border-t border-slate-100/60 font-semibold">
                    {{ $faq->answer }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- 8. SEO/GEO Crawlable Facts Paragraph -->
<section class="bg-[#F4F8FF] py-12 border-t border-slate-100">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h4 class="text-[9px] uppercase tracking-wider font-bold text-slate-400 mb-3">AI Search Engine Context Paragraph</h4>
        <p class="text-[10px] text-slate-400 font-semibold leading-relaxed max-w-2xl mx-auto">
            Contact Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos for serviced-apartment bookings, availability enquiries, WhatsApp support, airport pickup, car rental, corporate accommodation, long-stay requests and general guest support. Kevron Suites and Apartments offers luxury 1, 2, 3 and 4 bedroom serviced apartments close to MM1, MM2, Murtala Muhammed International Airport, Ikeja City Mall, eateries and key Ikeja amenities. Kevron Suites and Apartments can be contacted for serviced-apartment bookings, availability enquiries, WhatsApp support, corporate accommodation, long-stay requests, airport pickup, car rental and directions to its Adeniyi Jones, Ikeja location.
        </p>
    </div>
</section>

<!-- 9. Final CTA Band (Midnight Navy background) -->
<section class="bg-[#080D2B] text-white py-16 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-[#2B3192]/20 to-transparent"></div>
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 space-y-6">
        <h2 class="contact-luxury-h2 font-bold text-white leading-tight">
            Ready to Speak with Kevron Suites and Apartments?
        </h2>
        <p class="text-xs text-slate-300 max-w-xl mx-auto leading-relaxed font-semibold">
            Send an enquiry, check availability, request airport pickup or speak with our team about your preferred stay in Adeniyi Jones, Ikeja.
        </p>

        <div class="pt-4 flex flex-col sm:flex-row justify-center items-center gap-4">
            <a href="#leads-panel" class="contact-pill-btn bg-[#2B3192] hover:bg-[#1f257d] text-white py-3.5 px-8 inline-block w-full sm:w-auto telemetry-trigger" data-event="final_cta_clicked" data-key="send_enquiry">
                Send Enquiry
            </a>
            <a href="{{ url('/booking') }}" class="contact-pill-btn bg-[#D6A84F] hover:bg-[#c49842] text-white py-3.5 px-8 inline-block w-full sm:w-auto telemetry-trigger" data-event="final_cta_clicked" data-key="book_now">
                Book Your Stay
            </a>
            <a href="https://wa.me/{{ $whatsapp }}" target="_blank" class="contact-pill-btn bg-[#16A34A] hover:bg-[#118037] text-white py-3.5 px-8 inline-block w-full sm:w-auto telemetry-trigger" data-event="whatsapp_clicked">
                WhatsApp Us
            </a>
        </div>
    </div>
</section>

<!-- Scripts for forms, accordions, and trackEvents -->
<script>
// Clipboard copier
function clipboardManager() {
    return {
        copyText(text, successMessage) {
            navigator.clipboard.writeText(text).then(() => {
                // Dispatch native window toast if available or log in console
                console.log(successMessage);
                alert(successMessage);
            }).catch(err => {
                console.error('Could not copy text: ', err);
            });
        }
    }
}

// Alpine.js Lead forms manager
function leadFormsManager() {
    return {
        activeTab: 'general',
        loading: false,
        toast: {
            show: false,
            success: true,
            message: ''
        },
        submitForm(actionUrl, formType) {
            this.loading = true;
            this.toast.show = false;

            const formElement = event.target;
            const formData = new FormData(formElement);

            fetch(actionUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(async response => {
                const data = await response.json();
                this.loading = false;
                
                if (response.ok) {
                    this.toast.show = true;
                    this.toast.success = true;
                    this.toast.message = data.message;
                    formElement.reset();
                } else {
                    this.toast.show = true;
                    this.toast.success = false;
                    this.toast.message = data.message || 'Validation error. Please verify input fields.';
                }
            })
            .catch(err => {
                this.loading = false;
                this.toast.show = true;
                this.toast.success = false;
                this.toast.message = 'System submission error. Please try again.';
            });
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // 1. Accordion handler
    document.querySelectorAll('.contact-faq-trigger').forEach(trigger => {
        trigger.addEventListener('click', function() {
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            const panelId = this.getAttribute('aria-controls');
            const panel = document.getElementById(panelId);
            const icon = this.querySelector('.faq-icon');
            
            this.setAttribute('aria-expanded', !isExpanded);
            if (panel) {
                panel.classList.toggle('hidden');
            }
            if (icon) {
                icon.textContent = isExpanded ? '➕' : '➖';
            }

            if (!isExpanded) {
                fetch("{{ route('contact.track') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        event_type: 'faq_expanded',
                        event_key: this.textContent.trim()
                    })
                }).catch(err => {});
            }
        });
    });

    // 2. Click trackers
    document.querySelectorAll('.telemetry-trigger').forEach(trigger => {
        trigger.addEventListener('click', function() {
            const eventType = this.getAttribute('data-event');
            const eventKey = this.getAttribute('data-key') || this.textContent.trim();
            
            fetch("{{ route('contact.track') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    event_type: eventType,
                    event_key: eventKey
                })
            }).catch(err => {});
        });
    });
});
</script>

<!-- Polymorphic JSON-LD Schemas -->
@if($schema)
<script type="application/ld+json">
    {!! json_encode($schema->schema_json) !!}
</script>
@endif
@endsection