@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : $offer->title . ' | Offers at Kevron Suites')
@section('meta_description', $seo ? $seo->meta_description : $offer->short_description)

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{
    submitting: false,
    toastMessage: '',
    toastType: 'success',
    showToast: false,

    couponCode: '',
    couponValidating: false,
    couponResult: '',
    couponSuccess: false,

    triggerToast(msg, type = 'success') {
        this.toastMessage = msg;
        this.toastType = type;
        this.showToast = true;
        setTimeout(() => { this.showToast = false; }, 4000);
    },

    validateCoupon() {
        if (!this.couponCode.trim()) return;
        this.couponValidating = true;
        this.couponResult = '';

        fetch('{{ route('offers.validate-promo') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                code: this.couponCode,
                email: '{{ auth()->user()->email ?? 'guest@test.com' }}',
                booking_reference: '{{ request('ref') }}'
            })
        })
        .then(res => res.json())
        .then(data => {
            this.couponValidating = false;
            if (data.valid) {
                this.couponSuccess = true;
                this.couponResult = data.message;
                this.triggerToast('Coupon applied!', 'success');
            } else {
                this.couponSuccess = false;
                this.couponResult = data.message;
                this.triggerToast('Invalid coupon', 'error');
            }
        })
        .catch(err => {
            this.couponValidating = false;
            this.couponSuccess = false;
            this.couponResult = 'Validation failed. Code might be invalid or expired.';
            this.triggerToast('Error validating code', 'error');
        });
    },

    submitEnquiryForm() {
        this.submitting = true;
        const form = document.getElementById('offer-enquiry-form');
        const formData = new FormData(form);

        fetch('{{ route('offers.enquire') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            this.submitting = false;
            if (data.success) {
                this.triggerToast(data.message, 'success');
                form.reset();
            } else {
                this.triggerToast(data.message || 'Validation failed. Please check blackout dates and file sizes.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('An error occurred during submission. Alternate dates might overlap blackout blocks.', 'error');
        });
    },

    logTelemetry(action, key) {
        fetch('{{ route('offers.log') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ event_type: action, event_key: key })
        });
    }
}">

    <!-- Telemetry Log Hook -->
    <div x-init="logTelemetry('page_view', 'offers_show_' + '{{ $offer->slug }}')"></div>

    <!-- 1. HEADER BREADCRUMBS & BACK LINK -->
    <nav class="bg-slate-50 dark:bg-slate-900/30 border-b border-slate-100 dark:border-slate-800 py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-slate-400">
            <div class="flex items-center space-x-2">
                <a href="{{ route('home') }}" class="hover:text-amber-500">Home</a>
                <span>/</span>
                <a href="{{ route('offers') }}" class="hover:text-amber-500">Offers</a>
                <span>/</span>
                <span class="text-slate-600 dark:text-slate-300">{{ $offer->title }}</span>
            </div>
            <a href="{{ route('offers') }}" class="text-blue-950 dark:text-blue-400 hover:text-amber-500 transition-colors">
                &larr; Back to Stays Offers
            </a>
        </div>
    </nav>

    <!-- 2. DETAILS PRESENTATION HERO -->
    <section class="py-12 bg-white dark:bg-slate-950 border-b border-slate-100 dark:border-slate-800">
        <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-8 lg:gap-12 items-start">
                
                <!-- Left Details Content -->
                <div class="lg:col-span-8 space-y-6">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-blue-300 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold uppercase tracking-wider">
                            {{ $offer->offerType->name }} Category
                        </span>
                        @if($offer->is_featured)
                        <span class="bg-amber-500 text-slate-950 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold uppercase tracking-wider">
                            ★ Featured Deal
                        </span>
                        @endif
                    </div>

                    <h1 class="text-slate-900 dark:text-white font-normal leading-tight tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.45rem, 4vw, 1.8rem);">
                        {{ $offer->title }}
                    </h1>

                    <p class="text-slate-800 dark:text-slate-200 text-xs font-semibold leading-relaxed">
                        {{ $offer->short_description }}
                    </p>

                    <!-- Large Banner Image -->
                    <div class="w-full h-80 bg-slate-100 dark:bg-slate-800 rounded-[0.1rem] overflow-hidden shadow-sm relative">
                        @if($offer->image_path)
                        <img src="{{ asset($offer->image_path) }}" alt="{{ $offer->title }}" class="w-full h-full object-cover">
                        @else
                        <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="{{ $offer->title }}" class="w-full h-full object-cover">
                        @endif
                    </div>

                    <!-- Full Description -->
                    <div class="space-y-4 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold">
                        <h3 class="text-slate-900 dark:text-white font-bold uppercase tracking-wider text-[11px] pb-2 border-b border-slate-100 dark:border-slate-800">
                            Package Overview & Description
                        </h3>
                        <p class="whitespace-pre-line">{{ $offer->description }}</p>
                    </div>

                    <!-- Special Blackout Alerts if exist -->
                    @if($offer->blackoutDates->count() > 0)
                    <div class="bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 p-4 rounded-[0.1rem]">
                        <h4 class="text-red-700 dark:text-red-400 text-xs font-bold uppercase tracking-wider mb-2">⚠️ Holiday Blackout Warning</h4>
                        <p class="text-red-600 dark:text-red-300 text-[10px] font-semibold leading-relaxed">
                            This promotional offer is strictly locked or subject to holiday peak markups during the following calendar blocks:
                        </p>
                        <ul class="list-disc list-inside text-[10px] text-red-500 font-bold mt-2">
                            @foreach($offer->blackoutDates as $block)
                            <li>{{ $block->start_date->format('d M') }} to {{ $block->end_date->format('d M, Y') }} ({{ $block->notes }})</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>

                <!-- Right Sidebar Details Panel -->
                <div class="lg:col-span-4 space-y-6">
                    
                    <!-- Offer Specification Card -->
                    <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider pb-2 border-b border-slate-200 dark:border-slate-800">
                            Offer Specifications
                        </h3>

                        <div class="space-y-3 text-[11px] font-semibold text-slate-600 dark:text-slate-400">
                            <div class="flex justify-between">
                                <span class="text-slate-400">Eligible Suites:</span>
                                <span class="text-slate-800 dark:text-white text-right">
                                    @foreach($offer->apartmentTypes as $apt)
                                        {{ $apt->name }}{{ !$loop->last ? ', ' : '' }}
                                    @endforeach
                                </span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-400">Minimum Stay:</span>
                                <span class="text-slate-800 dark:text-white font-bold">{{ $offer->minimum_stay_nights }} Night{{ $offer->minimum_stay_nights > 1 ? 's' : '' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-400">Discount Details:</span>
                                <span class="text-emerald-600 dark:text-emerald-400 font-bold">
                                    @if($offer->is_rate_on_request)
                                        Rate On Request
                                    @elseif($offer->discount_type === 'percentage')
                                        {{ (float)$offer->discount_value }}% Direct Off
                                    @elseif($offer->discount_type === 'fixed_amount')
                                        ₦{{ number_format($offer->discount_value) }} Off
                                    @else
                                        Promo Value Applied
                                    @endif
                                </span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-slate-400">Availability:</span>
                                <span class="text-slate-800 dark:text-white text-right">
                                    @if($offer->valid_until)
                                        Until {{ $offer->valid_until->format('d M, Y') }}
                                    @else
                                        Year-Round Deal
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- Dynamic Coupon Validator Widget -->
                        @if($offer->promoCode)
                        <div class="pt-4 border-t border-slate-200 dark:border-slate-800 space-y-3">
                            <span class="text-[10px] font-bold text-amber-500 uppercase tracking-wider block">🎁 Coupon Code Voucher: <span class="text-slate-900 dark:text-white font-bold bg-amber-500/10 px-2 py-0.5 rounded-[0.1rem] select-all">{{ $offer->promoCode->code }}</span></span>
                            
                            <!-- Inline Validator form -->
                            <div class="flex gap-2">
                                <input class="w-full text-xs p-2 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white"
                                       type="text" x-model="couponCode" placeholder="Enter coupon code...">
                                <button class="btn-pill btn-primary text-[10px] py-2 px-3 shrink-0" :disabled="couponValidating" @click="validateCoupon(); logTelemetry('validate_coupon_click', couponCode);">
                                    <span x-show="!couponValidating">Verify</span>
                                    <span x-show="couponValidating">...</span>
                                </button>
                            </div>
                            <span x-show="couponResult" class="block text-[10px] font-bold leading-normal" 
                                  :class="couponSuccess ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'"
                                  x-text="couponResult"></span>
                        </div>
                        @endif

                        <div class="pt-4 border-t border-slate-200 dark:border-slate-800 flex flex-col gap-2">
                            <a href="#enquiry-form" class="btn-pill btn-primary py-3 justify-center w-full text-center" @click="logTelemetry('cta_detail_click', 'scroll_enquiry')">
                                {{ $offer->is_rate_on_request ? 'Request Quote' : 'Claim Offer / Enquire' }}
                            </a>
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20am%20interested%20in%20claiming%20your%20{{ urlencode($offer->title) }}%20at%20Adeniyi%20Jones%20Ikeja." 
                               target="_blank" 
                               class="btn-pill btn-outline-gold py-3 justify-center w-full text-center hover:!bg-amber-500 hover:!text-slate-950 border-amber-500 text-amber-500" 
                               @click="logTelemetry('cta_detail_click', 'whatsapp')">
                                WhatsApp Stays Support
                            </a>
                        </div>
                    </div>

                    <!-- Terms Summary Card -->
                    @if($offer->terms_summary)
                    <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-3">
                        <h4 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase tracking-wider pb-1 border-b border-slate-200 dark:border-slate-800">
                            Terms & Conditions
                        </h4>
                        <p class="text-[10px] text-slate-500 dark:text-slate-400 font-semibold leading-relaxed">
                            {{ $offer->terms_summary }}
                        </p>
                    </div>
                    @endif
                </div>

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

    <!-- 3. INTERACTIVE AJAX ENQUIRY FORM SECTION -->
    <section id="enquiry-form" class="py-20 bg-slate-50 dark:bg-slate-900/50 scroll-mt-24">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-lg p-6 sm:p-8">
                
                <div class="flex border-b border-slate-100 dark:border-slate-800 pb-4 mb-6 justify-between items-center">
                    <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: 1.25rem;">
                        Claim Offer / Enquire
                    </h2>
                    <span class="text-[10px] uppercase tracking-wider font-bold text-amber-500">
                        ● Direct Dynamic Roster
                    </span>
                </div>

                <form id="offer-enquiry-form" @submit.prevent="submitEnquiryForm()">
                    @csrf
                    <input type="hidden" name="offer_id" value="{{ $offer->id }}">
                    
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="full_name">Full Name</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="full_name" name="full_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="email">Email Address</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="email" id="email" name="email" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="phone">Phone / WhatsApp</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="tel" id="phone" name="phone" required placeholder="e.g. +234...">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="purpose_of_stay">Stay Category / Purpose</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="purpose_of_stay" name="purpose_of_stay">
                                    <option value="weekend">Weekend Staycation / Couple</option>
                                    <option value="family">Family Serviced Holiday</option>
                                    <option value="corporate">Corporate Exec / B2B Staff</option>
                                    <option value="group">Large collaborative Group Stays</option>
                                    <option value="long-stay">Weekly or Monthly extended stay</option>
                                    <option value="festive">Holiday Festive seasons</option>
                                    <option value="repeat-guest">Returning VIP Guest loyalty</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="preferred_apartment_type">Suite Preference</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="preferred_apartment_type" name="preferred_apartment_type">
                                    @foreach($offer->apartmentTypes as $apt)
                                        <option value="{{ $apt->name }}">{{ $apt->name }}</option>
                                    @endforeach
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="number_of_guests">Number of Guests</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="number_of_guests" name="number_of_guests" min="1" max="50" value="1" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="airport_pickup_required">Airport Pickup needed?</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="airport_pickup_required" name="airport_pickup_required">
                                    <option value="no">No, thank you</option>
                                    <option value="yes">Yes, coordinate terminal pickup</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="check_in">Check-in Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="check_in" name="check_in" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="check_out">Check-out Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="check_out" name="check_out" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="previous_booking_reference">Loyalty Ref (For Repeat deals)</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="previous_booking_reference" name="previous_booking_reference" placeholder="e.g. KEV-B-123456">
                            </div>
                        </div>

                        <!-- Secure file list spreadsheet upload -->
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guest_list_file">Group Guest List Upload (Optional)</label>
                            <input class="w-full text-xs p-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 text-slate-500" type="file" id="guest_list_file" name="guest_list_file">
                            <span class="block text-[9px] text-slate-400 font-semibold mt-1">Supported formats: CSV, Excel, Word, PDF. Max size: 5MB. Stored securely.</span>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_requirements">Special Stays / Package Requests</label>
                            <textarea class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white h-24 resize-none" id="special_requirements" name="special_requirements" placeholder="Add custom requirements such as airport pickups times, flight numbers, snooker or PS5 game requests, balcony requirements..."></textarea>
                        </div>

                        <div class="flex items-start">
                            <input class="mt-1 mr-2 rounded-[0.1rem] border-slate-200 text-amber-500 focus:ring-amber-500" type="checkbox" id="offers_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-semibold" for="offers_consent">
                                We agree to terms. We understand offers and promotional stays are subject to active room availability, coordinate booking audits, and explicit management approval.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'offers_enquiry_submit')">
                            <span x-show="!submitting">Submit Offers Request</span>
                            <span x-show="submitting" class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4 text-slate-900" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                <span>Verifying Promotional Eligibility...</span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 4. LOCATION ADVANTAGE BLOCK -->
    <section class="py-16 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Ikeja Core</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Adeniyi Jones Location Advantages
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center text-xs font-semibold text-slate-600 dark:text-slate-400">
                <div class="space-y-2 bg-slate-50 dark:bg-slate-900 p-6 rounded-[0.1rem] border border-slate-100 dark:border-slate-800">
                    <span class="text-2xl block mb-2">✈</span>
                    <h3 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase">Airport Proximity</h3>
                    <p class="text-[10px] leading-relaxed text-slate-400">
                        Approximately 8 minutes to local terminals (MM1/MM2) and 15 minutes to Murtala Muhammed International Airport (MMIA), subject to traffic.
                    </p>
                </div>
                <div class="space-y-2 bg-slate-50 dark:bg-slate-900 p-6 rounded-[0.1rem] border border-slate-100 dark:border-slate-800">
                    <span class="text-2xl block mb-2">🛡</span>
                    <h3 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase">smart secure estate</h3>
                    <p class="text-[10px] leading-relaxed text-slate-400">
                        Secured gated perimeter controls and situated just 3 minutes from Memabod Police Station, assuring absolute safety.
                    </p>
                </div>
                <div class="space-y-2 bg-slate-50 dark:bg-slate-900 p-6 rounded-[0.1rem] border border-slate-100 dark:border-slate-800">
                    <span class="text-2xl block mb-2">🛍</span>
                    <h3 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase">Eateries & Malls</h3>
                    <p class="text-[10px] leading-relaxed text-slate-400">
                        Only 8 minutes from Ikeja City Mall / Shoprite, and situated next to continental cafes and fine executive dining restaurants on Adeniyi Jones.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. DYNAMIC FAQS ACCORDION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Stay Questions</span>
                <h3 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Frequently Asked Questions
                </h3>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="space-y-4">
                @foreach($faqs as $faq)
                <div class="border border-slate-200 dark:border-slate-800 rounded-[0.1rem] overflow-hidden bg-white dark:bg-slate-950/40">
                    <button class="w-full text-left p-4 focus:outline-none flex justify-between items-center transition-colors text-slate-800 dark:text-slate-200 hover:bg-slate-100/50 dark:hover:bg-slate-800/40"
                            @click="logTelemetry('faq_expand', 'faq_' + '{{ $faq->id }}')">
                        <span class="text-xs font-bold uppercase tracking-wide">{{ $faq->question }}</span>
                    </button>
                    <div class="p-4 bg-white dark:bg-slate-900 text-xs font-medium leading-relaxed text-slate-500 dark:text-slate-400 border-t border-slate-200 dark:border-slate-800">
                        {{ $faq->answer }}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Global Floating Toast Notification -->
    <div x-show="showToast" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
         x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed bottom-5 right-5 z-50 p-4 rounded-[0.1rem] text-xs font-bold text-white shadow-lg flex items-center space-x-2"
         :class="toastType === 'success' ? 'bg-emerald-600' : 'bg-red-600'">
        <span x-text="toastType === 'success' ? '✓' : '⚠️'"></span>
        <span x-text="toastMessage"></span>
    </div>

</div>

<!-- JSON-LD Structured Data Schema for OffersDetailPage -->
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@type": "Offer",
    "name": "{{ $offer->title }}",
    "description": "{{ $offer->short_description }}",
    "priceCurrency": "NGN",
    "price": "{{ $offer->is_rate_on_request ? '0.00' : $offer->discount_value }}",
    "availability": "https://schema.org/InStock",
    "validFrom": "{{ $offer->valid_from ? $offer->valid_from->toIso8601String() : '' }}",
    "validThrough": "{{ $offer->valid_until ? $offer->valid_until->toIso8601String() : '' }}",
    "offeredBy": {
        "@@type": "LodgingBusiness",
        "name": "Kevron Suites and Apartments",
        "address": {
            "@@type": "PostalAddress",
            "streetAddress": "7B Regina Coker Street, Adeniyi Jones, Ikeja",
            "addressLocality": "Ikeja",
            "addressRegion": "Lagos",
            "postalCode": "100271",
            "addressCountry": "NG"
        }
    }
}
</script>
@endsection