@extends('layouts.app')

@section('title', $metaTitle)

@section('content')
<!-- Custom Styles to Ensure Brand Symmetry & Typography Size Caps -->
<style>
    /* Typography Caps */
    .acc-h1 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
        line-height: 1.3;
        color: #080D2B;
    }
    .acc-h2 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.1rem, 3vw, 1.45rem) !important;
        line-height: 1.3;
        color: #2B3192;
    }
    .acc-body, .acc-p, .acc-li {
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem !important;
        color: #4b5563;
        line-height: 1.7;
    }
    .acc-meta {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem !important;
        color: #64748B;
    }
    
    /* Kevron Luxury Component Radii Constraints */
    .luxury-card {
        border-radius: 0.1rem !important;
        border: 1px solid #DDE6F3;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
    .luxury-card:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
    }
    .luxury-btn {
        border-radius: 50px !important;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.875rem !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Scroll Spy & Table of Contents Styles */
    .toc-item {
        border-radius: 0.1rem;
        transition: all 0.2s ease;
    }
    .toc-active {
        background-color: #F4F8FF;
        color: #2B3192 !important;
        border-left: 3px solid #1FADEA;
        font-weight: 600;
    }
    
    /* Print Layout Styling */
    @media print {
        header, footer, .no-print, .toc-sidebar {
            display: none !important;
        }
        .print-full-width {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }
</style>

<!-- Schema Injection -->
@foreach($schemas as $schema)
<script type="application/ld+json">
    {!! json_encode($schema, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) !!}
</script>
@endforeach

<div x-data="accessibilityHandler()" class="min-h-screen bg-white">
    
    <!-- Hero / Header Section -->
    <header class="bg-gradient-to-r from-[#F4F8FF] to-[#DDE6F3] py-12 border-b border-[#DDE6F3]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex mb-4 text-xs font-semibold text-slate-400 no-print" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ url('/') }}" class="hover:text-[#2B3192]">Home</a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-3 h-3 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                            <span class="text-slate-600">Accessibility Statement</span>
                        </div>
                    </li>
                </ol>
            </nav>

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div class="max-w-3xl">
                    <h1 class="acc-h1 font-serif text-[#080D2B] mb-4">
                        {{ $page->title }}
                    </h1>
                    <p class="acc-body text-slate-600 max-w-2xl">
                        {{ $page->summary ?? 'Kevron Suites and Apartments is committed to providing a website and guest experience that is accessible, usable and welcoming for all guests, including people with disabilities and users of assistive technologies.' }}
                    </p>
                    
                    <!-- Trust Chips -->
                    <div class="mt-4 flex flex-wrap gap-2 no-print">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2B3192]/10 text-[#2B3192]">
                            Inclusive access
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#1FADEA]/10 text-[#1FADEA]">
                            Keyboard-friendly
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#D6A84F]/10 text-[#D6A84F]">
                            Readable content
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
                            Reduced motion
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#080D2B]/10 text-[#080D2B]">
                            Accessibility feedback
                        </span>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3 no-print shrink-0">
                    <a href="#support_request_section" @click.prevent="scrollTo('support_request_section')" class="luxury-btn bg-[#2B3192] text-white hover:bg-[#080D2B] px-5 py-2.5 text-xs inline-flex items-center gap-2 shadow-sm">
                        Request Support
                    </a>
                    <a href="{{ url('/contact') }}" class="luxury-btn bg-[#D6A84F] text-white hover:bg-[#080D2B] px-5 py-2.5 text-xs shadow-sm">
                        Contact Support
                    </a>
                    <a href="{{ url('/guest/dashboard') }}" class="luxury-btn bg-white border border-[#DDE6F3] text-slate-700 hover:bg-[#F4F8FF] px-5 py-2.5 text-xs shadow-sm">
                        Guest Manual
                    </a>
                </div>
            </div>

            <!-- Version & Status Details Panel -->
            <div class="mt-6 bg-white border border-[#DDE6F3] p-4 luxury-card flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-6">
                    <div>
                        <span class="acc-meta uppercase font-bold text-slate-400 block tracking-wider">Statement Version</span>
                        <span class="acc-body font-bold text-[#080D2B]">v{{ $page->version }}</span>
                    </div>
                    <div>
                        <span class="acc-meta uppercase font-bold text-slate-400 block tracking-wider">Effective Date</span>
                        <span class="acc-body font-bold text-[#080D2B]">{{ $page->effective_date ? $page->effective_date->format('F d, Y') : 'June 01, 2026' }}</span>
                    </div>
                    <div>
                        <span class="acc-meta uppercase font-bold text-slate-400 block tracking-wider">Last Reviewed</span>
                        <span class="acc-body font-bold text-[#080D2B]">{{ $page->last_reviewed_at ? $page->last_reviewed_at->format('F d, Y') : 'June 01, 2026' }}</span>
                    </div>
                    <div>
                        <span class="acc-meta uppercase font-bold text-slate-400 block tracking-wider">Target standard</span>
                        <span class="acc-body font-bold text-[#2B3192]">{{ $page->target_standard }} Level {{ $page->target_level }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span class="acc-meta uppercase font-bold text-emerald-600 tracking-wider">Approved & Live</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content Layout Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="lg:grid lg:grid-cols-4 lg:gap-8">
            
            <!-- Table of Contents Sticky Sidebar -->
            <aside class="toc-sidebar lg:col-span-1 mb-8 lg:mb-0 no-print">
                <div class="sticky top-6 bg-white border border-[#DDE6F3] p-5 luxury-card">
                    <h3 class="acc-h2 text-sm uppercase tracking-wider text-slate-400 mb-4 font-bold">Statement Navigation</h3>
                    
                    <!-- Search Input with Auto-Filter -->
                    <div class="mb-4 relative">
                        <input x-model="searchQuery" type="text" placeholder="Search sections..." class="w-full pl-8 pr-3 py-1.5 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] placeholder-slate-400">
                        <svg class="w-4 h-4 text-slate-400 absolute left-2.5 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </div>

                    <ul class="space-y-1 max-h-[50vh] overflow-y-auto pr-1 custom-scrollbar">
                        <template x-for="sec in filteredSections" :key="sec.key">
                            <li>
                                <a :href="'#' + sec.key" 
                                   @click.prevent="scrollTo(sec.key)" 
                                   class="block px-3 py-2 acc-meta text-slate-600 hover:bg-[#F4F8FF] hover:text-[#2B3192] toc-item"
                                   :class="activeSection === sec.key ? 'toc-active' : ''"
                                   x-text="sec.heading">
                                </a>
                            </li>
                        </template>
                        <li>
                            <a href="#property_profile_section" 
                               @click.prevent="scrollTo('property_profile_section')" 
                               class="block px-3 py-2 acc-meta text-slate-600 hover:bg-[#F4F8FF] hover:text-[#2B3192] toc-item"
                               :class="activeSection === 'property_profile_section' ? 'toc-active' : ''">
                                Property Accessibility
                            </a>
                        </li>
                        <li>
                            <a href="#support_request_section" 
                               @click.prevent="scrollTo('support_request_section')" 
                               class="block px-3 py-2 acc-meta text-slate-600 hover:bg-[#F4F8FF] hover:text-[#2B3192] toc-item"
                               :class="activeSection === 'support_request_section' ? 'toc-active' : ''">
                                Support Request
                            </a>
                        </li>
                        <li>
                            <a href="#feedback_form_section" 
                               @click.prevent="scrollTo('feedback_form_section')" 
                               class="block px-3 py-2 acc-meta text-slate-600 hover:bg-[#F4F8FF] hover:text-[#2B3192] toc-item"
                               :class="activeSection === 'feedback_form_section' ? 'toc-active' : ''">
                                Feedback Process
                            </a>
                        </li>
                        <li>
                            <a href="#accessibility_faqs" 
                               @click.prevent="scrollTo('accessibility_faqs')" 
                               class="block px-3 py-2 acc-meta text-slate-600 hover:bg-[#F4F8FF] hover:text-[#2B3192] toc-item"
                               :class="activeSection === 'accessibility_faqs' ? 'toc-active' : ''">
                                Accessibility FAQs
                            </a>
                        </li>
                    </ul>

                    <div class="mt-6 pt-6 border-t border-[#DDE6F3] flex flex-col gap-2">
                        <a href="{{ url('/privacy-policy') }}" class="acc-meta text-[#2B3192] hover:underline font-bold flex items-center gap-1">
                            <span>Privacy Policy</span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </a>
                        <a href="{{ url('/cookie-policy') }}" class="acc-meta text-[#2B3192] hover:underline font-bold flex items-center gap-1">
                            <span>Cookie Policy</span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </a>
                        <a href="{{ url('/safety-emergency-information') }}" class="acc-meta text-[#2B3192] hover:underline font-bold flex items-center gap-1">
                            <span>Safety & Emergency</span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </a>
                    </div>
                </div>
            </aside>

            <!-- Accessibility Sections -->
            <main class="lg:col-span-3 print-full-width">
                <div class="space-y-6">
                    
                    @foreach($page->sections as $index => $section)
                    <section id="{{ $section->section_key }}" 
                             class="p-6 transition-all duration-300 luxury-card {{ $index % 2 === 0 ? 'bg-white' : 'bg-[#F4F8FF]' }}"
                             x-ref="sec_{{$section->section_key}}">
                        <div class="flex items-center justify-between mb-4 border-b border-[#DDE6F3]/50 pb-3">
                            <h2 class="acc-h2 font-serif text-[#2B3192]">
                                {{ $section->heading }}
                            </h2>
                            <button @click="copyLink('{{ $section->section_key }}')" class="no-print text-slate-400 hover:text-[#1FADEA] transition-colors" title="Copy Section Link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 10.742l-3.413 3.412a3.83 3.83 0 005.414 5.415l3.413-3.413m-2.45-2.22l3.414-3.414a3.83 3.83 0 00-5.414-5.415l-3.414 3.414m5 5L10 14"/></svg>
                            </button>
                        </div>
                        
                        <div class="prose prose-slate max-w-none acc-body">
                            {!! $section->body !!}
                        </div>
                    </section>
                    @endforeach

                    <!-- Dynamic Property Accessibility Profile Section -->
                    <section id="property_profile_section" class="p-6 bg-white luxury-card" x-ref="sec_property_profile_section">
                        <div class="flex items-center justify-between mb-4 border-b border-[#DDE6F3]/50 pb-3">
                            <h2 class="acc-h2 font-serif text-[#2B3192]">
                                Property Accessibility Profile
                            </h2>
                            <button @click="copyLink('property_profile_section')" class="no-print text-slate-400 hover:text-[#1FADEA] transition-colors" title="Copy Section Link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 10.742l-3.413 3.412a3.83 3.83 0 005.414 5.415l3.413-3.413m-2.45-2.22l3.414-3.414a3.83 3.83 0 00-5.414-5.415l-3.414 3.414m5 5L10 14"/></svg>
                            </button>
                        </div>

                        <p class="acc-body text-slate-600 mb-6">
                            Review accessibility configurations for our luxury serviced-apartment locations in Ikeja. Please contact guest support prior to booking if you have highly specific mobility requirements.
                        </p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach($profiles as $prof)
                            <div class="p-4 bg-[#F4F8FF] border border-[#DDE6F3] rounded-sm">
                                <h3 class="font-serif font-bold text-[#080D2B] mb-3 text-sm flex items-center gap-1.5">
                                    <svg class="w-4 h-4 text-[#2B3192]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    {{ $prof->location->name ?? 'Kevron Location' }}
                                </h3>
                                <ul class="space-y-2 acc-body">
                                    <li class="flex items-center justify-between border-b border-[#DDE6F3]/50 pb-1 text-xs">
                                        <span class="text-slate-400 font-bold uppercase">Entrance</span>
                                        <span class="font-bold text-[#080D2B]">{{ $prof->entrance_access ?? 'To be confirmed' }}</span>
                                    </li>
                                    <li class="flex items-center justify-between border-b border-[#DDE6F3]/50 pb-1 text-xs">
                                        <span class="text-slate-400 font-bold uppercase">Elevator Lift</span>
                                        <span class="font-bold text-[#080D2B]">{{ $prof->lift_access ?? 'To be confirmed' }}</span>
                                    </li>
                                    <li class="flex items-center justify-between border-b border-[#DDE6F3]/50 pb-1 text-xs">
                                        <span class="text-slate-400 font-bold uppercase">Door Widths</span>
                                        <span class="font-bold text-[#080D2B]">{{ $prof->door_width ?? 'To be confirmed' }}</span>
                                    </li>
                                    <li class="flex items-center justify-between border-b border-[#DDE6F3]/50 pb-1 text-xs">
                                        <span class="text-slate-400 font-bold uppercase">Suite Acc</span>
                                        <span class="font-bold text-[#080D2B]">{{ $prof->bathroom_accessibility ?? 'To be confirmed' }}</span>
                                    </li>
                                    <li class="flex items-center justify-between border-b border-[#DDE6F3]/50 pb-1 text-xs">
                                        <span class="text-slate-400 font-bold uppercase">Assistance Animal</span>
                                        <span class="font-bold text-[#080D2B]">{{ $prof->assistance_animal_note ?? 'Allowed' }}</span>
                                    </li>
                                </ul>
                                @if($prof->public_note)
                                <p class="mt-3 text-xs acc-meta text-slate-500 leading-normal italic border-t border-[#DDE6F3]/50 pt-2">
                                    Note: {{ $prof->public_note }}
                                </p>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </section>

                    <!-- Interactive Support Request Form Card -->
                    <section id="support_request_section" class="p-6 bg-[#F4F8FF] luxury-card x-ref-sec_support_request_section no-print">
                        <div class="flex items-center justify-between mb-4 border-b border-[#DDE6F3] pb-3">
                            <h2 class="acc-h2 font-serif text-[#2B3192]">
                                Request Accessibility Support
                            </h2>
                            <svg class="w-5 h-5 text-[#2B3192]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        </div>

                        <!-- Session Notifications -->
                        @if(session('success') && request()->has('support_request'))
                        <div class="mb-6 p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-sm">
                            <p class="acc-body text-emerald-800 font-bold">{{ session('success') }}</p>
                        </div>
                        @endif

                        <form action="{{ route('accessibility.support_request') }}?support_request=1" method="POST" class="space-y-4">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="booking_reference" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Booking Reference (Optional)</label>
                                    <input type="text" id="booking_reference" name="booking_reference" value="{{ old('booking_reference') }}" placeholder="e.g. KSA-2026-1024" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                </div>
                                <div>
                                    <label for="full_name" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Guest Full Name *</label>
                                    <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required placeholder="Your full name" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="email" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Contact Email *</label>
                                    <input type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="your.email@example.com" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                </div>
                                <div>
                                    <label for="phone" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Phone / WhatsApp</label>
                                    <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="e.g. +234..." class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                </div>
                            </div>

                            <div>
                                <label for="requested_support_type" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Required Support Type *</label>
                                <select id="requested_support_type" name="requested_support_type" required class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                    <option value="">Select Support Category</option>
                                    <option value="step_free">Step-Free Entrance / Wheelchair Information</option>
                                    <option value="lift">Lift Access / Low-Floor Preference</option>
                                    <option value="bathroom">Adapted Suite Facilities</option>
                                    <option value="elderly">Elderly Guest / Arrival Assistance</option>
                                    <option value="mobility">Evacuation and Emergency Assistance</option>
                                    <option value="visual">Visual Support / High legibility formats</option>
                                    <option value="hearing">Hearing Support requirements</option>
                                    <option value="other">Other custom requirements</option>
                                </select>
                            </div>

                            <div>
                                <label for="details" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Specific details of your request</label>
                                <textarea id="details" name="details" rows="4" placeholder="Please describe any tools, configurations, or personal assistance that you need during your stay with us." class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white"></textarea>
                            </div>

                            <div class="flex items-start gap-2 pt-2">
                                <input type="checkbox" id="consent_acceptance" name="consent_acceptance" value="1" required class="mt-1 h-4 w-4 border-[#DDE6F3] text-[#2B3192] focus:ring-[#2B3192] rounded-sm">
                                <label for="consent_acceptance" class="acc-meta text-slate-500 leading-normal">
                                    I agree that my request is subject to verification and privacy management under the official Privacy Policy. *
                                </label>
                            </div>

                            <div class="pt-3">
                                <button type="submit" class="luxury-btn bg-[#2B3192] text-white hover:bg-[#080D2B] px-8 py-3 w-full md:w-auto shadow-md">
                                    Request Accessibility Support
                                </button>
                            </div>
                        </form>
                    </section>

                    <!-- Interactive Feedback Form Card -->
                    <section id="feedback_form_section" class="p-6 bg-white luxury-card x-ref-sec_feedback_form_section no-print">
                        <div class="flex items-center justify-between mb-4 border-b border-[#DDE6F3] pb-3">
                            <h2 class="acc-h2 font-serif text-[#2B3192]">
                                Submit Accessibility Feedback
                            </h2>
                            <svg class="w-5 h-5 text-[#2B3192]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                        </div>

                        <!-- Session Notifications -->
                        @if(session('success') && request()->has('feedback'))
                        <div class="mb-6 p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-sm">
                            <p class="acc-body text-emerald-800 font-bold">{{ session('success') }}</p>
                        </div>
                        @endif

                        <form action="{{ route('accessibility.feedback') }}?feedback=1" method="POST" enctype="multipart/form-data" class="space-y-4">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="fb_full_name" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Your Name (Optional)</label>
                                    <input type="text" id="fb_full_name" name="full_name" value="{{ old('full_name') }}" placeholder="Anonymous or Full name" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                                <div>
                                    <label for="fb_email" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Contact Email *</label>
                                    <input type="email" id="fb_email" name="email" value="{{ old('email') }}" required placeholder="your.email@example.com" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="fb_phone" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Phone / WhatsApp</label>
                                    <input type="text" id="fb_phone" name="phone" value="{{ old('phone') }}" placeholder="e.g. +234..." class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                                <div>
                                    <label for="fb_page" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Affected Page / URL</label>
                                    <input type="text" id="fb_page" name="affected_page_or_feature" value="{{ old('affected_page_or_feature') }}" placeholder="e.g. /booking or /guest/dashboard" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="fb_assistive" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Assistive Technology Used</label>
                                    <input type="text" id="fb_assistive" name="assistive_technology_used" value="{{ old('assistive_technology_used') }}" placeholder="e.g. Screen reader, Switch navigation" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                                <div>
                                    <label for="fb_device" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Device / Browser Details</label>
                                    <input type="text" id="fb_device" name="device_browser" value="{{ old('device_browser') }}" placeholder="e.g. Safari on iOS, Chrome on Windows 11" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]">
                                </div>
                            </div>

                            <div>
                                <label for="fb_description" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Detailed Description of Barrier *</label>
                                <textarea id="fb_description" name="issue_description" rows="4" required minlength="15" placeholder="Please describe exactly what happened and how we can reproduce or fix this digital barrier." class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-[#F4F8FF]"></textarea>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="fb_urgency" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Urgency Level</label>
                                    <select id="fb_urgency" name="urgency" class="w-full px-3 py-2 border border-[#DDE6F3] acc-body rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                        <option value="medium">Medium</option>
                                        <option value="low">Low</option>
                                        <option value="high">High - Barrier to reservation</option>
                                        <option value="critical">Critical blocker</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="fb_screenshot" class="acc-meta uppercase font-bold text-slate-500 block mb-1">Upload Screenshot / PDF (Max 5MB)</label>
                                    <input type="file" id="fb_screenshot" name="screenshot" class="w-full px-3 py-1.5 border border-[#DDE6F3] acc-meta rounded-sm focus:outline-none focus:border-[#2B3192] bg-white">
                                </div>
                            </div>

                            <div class="flex items-start gap-2 pt-2">
                                <input type="checkbox" id="fb_consent" name="consent_acceptance" value="1" required class="mt-1 h-4 w-4 border-[#DDE6F3] text-[#2B3192] focus:ring-[#2B3192] rounded-sm">
                                <label for="fb_consent" class="acc-meta text-slate-500 leading-normal">
                                    I agree that my feedback is subject to processing and identity verification under the official Privacy Policy. *
                                </label>
                            </div>

                            <div class="pt-3">
                                <button type="submit" class="luxury-btn bg-[#2B3192] text-white hover:bg-[#080D2B] px-8 py-3 w-full md:w-auto shadow-md">
                                    Submit Feedback
                                </button>
                            </div>
                        </form>
                    </section>

                    <!-- Dynamic Accessibility FAQs Section -->
                    <section id="accessibility_faqs" class="p-6 bg-[#F4F8FF] luxury-card" x-ref="sec_accessibility_faqs">
                        <div class="flex items-center justify-between mb-6 border-b border-[#DDE6F3]/50 pb-3">
                            <h2 class="acc-h2 font-serif text-[#2B3192]">
                                Accessibility & Support FAQs
                            </h2>
                            <button @click="copyLink('accessibility_faqs')" class="no-print text-slate-400 hover:text-[#1FADEA] transition-colors" title="Copy Section Link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 10.742l-3.413 3.412a3.83 3.83 0 005.414 5.415l3.413-3.413m-2.45-2.22l3.414-3.414a3.83 3.83 0 00-5.414-5.415l-3.414 3.414m5 5L10 14"/></svg>
                            </button>
                        </div>

                        <div class="space-y-3" x-data="{ activeFaq: null }">
                            @foreach($faqs as $faqIndex => $faq)
                            <div class="border border-[#DDE6F3] rounded-sm transition-colors duration-200">
                                <button @click="activeFaq = (activeFaq === {{ $faqIndex }} ? null : {{ $faqIndex }})" 
                                        class="w-full flex items-center justify-between p-4 text-left acc-body font-bold text-[#080D2B] bg-white hover:bg-[#DDE6F3]/40 focus:outline-none">
                                    <span>{{ $faq->question }}</span>
                                    <svg class="w-4 h-4 transition-transform duration-200" :class="activeFaq === {{ $faqIndex }} ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </button>
                                <div x-show="activeFaq === {{ $faqIndex }}" x-collapse class="border-t border-[#DDE6F3]">
                                    <div class="p-4 acc-body leading-relaxed text-slate-600 bg-white">
                                        {{ $faq->answer }}
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </section>

                </div>
            </main>
        </div>
    </div>

    <!-- Crawlable structured entities for GEO/AI search compliance -->
    <div class="hidden" aria-hidden="true">
        <p>{{ $entityStatement }}</p>
    </div>

    <!-- Final Call To Action Banner -->
    <section class="bg-[#080D2B] text-white py-16 border-t-4 border-[#D6A84F] no-print">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="font-serif text-[#D6A84F] text-2xl mb-4 font-bold">Need Accessibility Support Before or During Your Stay?</h2>
            <p class="acc-body text-slate-300 max-w-2xl mx-auto mb-8">
                Contact Kevron Suites and Apartments if you need help using the website, completing a booking, accessing guest information or confirming property accessibility details before your stay.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#support_request_section" @click.prevent="scrollTo('support_request_section')" class="luxury-btn bg-[#2B3192] text-white hover:bg-[#1FADEA] px-8 py-3 shadow-md">
                    Request Accessibility Support
                </a>
                <a href="{{ url('/contact') }}" class="luxury-btn bg-transparent border border-white text-white hover:bg-white/10 px-8 py-3">
                    Contact Support
                </a>
                <a href="{{ url('/apartments') }}" class="luxury-btn bg-[#D6A84F] text-[#080D2B] hover:bg-white px-8 py-3 shadow-md">
                    View Apartments
                </a>
            </div>
        </div>
    </section>

    <!-- Back to Top Button -->
    <button x-show="showBackToTop" 
            x-transition 
            @click="window.scrollTo({ top: 0, behavior: 'smooth' })" 
            class="no-print fixed bottom-6 right-6 bg-[#2B3192] hover:bg-[#080D2B] text-white p-3 rounded-full shadow-lg z-50 transition-all duration-300"
            style="display: none;">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
    </button>
</div>

<!-- Notification Toast for Copy Link Interaction -->
<div id="acc-toast" class="fixed bottom-6 left-6 bg-[#080D2B] text-white px-4 py-2 text-xs rounded-sm shadow-md transition-all duration-300 transform translate-y-20 opacity-0 z-50">
    Section link copied to clipboard.
</div>

<script>
    function accessibilityHandler() {
        return {
            sections: @json($page->sections->map(fn($s) => ['key' => $s->section_key, 'heading' => $s->heading])),
            searchQuery: '',
            activeSection: '',
            showBackToTop: false,

            init() {
                window.addEventListener('scroll', () => {
                    this.showBackToTop = window.scrollY > 300;
                    this.updateActiveSection();
                });
                
                // Set initial active section
                if (window.location.hash) {
                    this.activeSection = window.location.hash.substring(1);
                } else if (this.sections.length > 0) {
                    this.activeSection = this.sections[0].key;
                }
            },

            get filteredSections() {
                if (!this.searchQuery) return this.sections;
                const query = this.searchQuery.toLowerCase();
                return this.sections.filter(s => s.heading.toLowerCase().includes(query));
            },

            scrollTo(key) {
                this.activeSection = key;
                const el = document.getElementById(key);
                if (el) {
                    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    history.pushState(null, null, '#' + key);
                }
            },

            updateActiveSection() {
                const scrollPos = window.scrollY + 120;
                
                // Check Property Profile
                const profEl = document.getElementById('property_profile_section');
                if (profEl && scrollPos >= profEl.offsetTop && scrollPos < profEl.offsetTop + profEl.offsetHeight) {
                    this.activeSection = 'property_profile_section';
                    return;
                }

                // Check Support request Form
                const supportEl = document.getElementById('support_request_section');
                if (supportEl && scrollPos >= supportEl.offsetTop && scrollPos < supportEl.offsetTop + supportEl.offsetHeight) {
                    this.activeSection = 'support_request_section';
                    return;
                }

                // Check Feedback Form
                const fbEl = document.getElementById('feedback_form_section');
                if (fbEl && scrollPos >= fbEl.offsetTop && scrollPos < fbEl.offsetTop + fbEl.offsetHeight) {
                    this.activeSection = 'feedback_form_section';
                    return;
                }

                // Check FAQs
                const faqEl = document.getElementById('accessibility_faqs');
                if (faqEl && scrollPos >= faqEl.offsetTop && scrollPos < faqEl.offsetTop + faqEl.offsetHeight) {
                    this.activeSection = 'accessibility_faqs';
                    return;
                }

                for (let sec of this.sections) {
                    const el = document.getElementById(sec.key);
                    if (el) {
                        const top = el.offsetTop;
                        const height = el.offsetHeight;
                        if (scrollPos >= top && scrollPos < top + height) {
                            this.activeSection = sec.key;
                            break;
                        }
                    }
                }
            },

            copyLink(key) {
                const url = window.location.origin + window.location.pathname + '#' + key;
                navigator.clipboard.writeText(url).then(() => {
                    const toast = document.getElementById('acc-toast');
                    toast.classList.remove('translate-y-20', 'opacity-0');
                    toast.classList.add('translate-y-0', 'opacity-100');
                    setTimeout(() => {
                        toast.classList.remove('translate-y-0', 'opacity-100');
                        toast.classList.add('translate-y-20', 'opacity-0');
                    }, 2000);
                });
            }
        }
    }
</script>
@endsection