@extends('layouts.app')

@section('title', $seo->meta_title ?? 'About Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo->meta_description ?? 'Learn about Kevron Suites and Apartments serviced brand in Adeniyi Jones, Ikeja.')

@section('content')
<!-- Custom Styles for About 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 */
    .about-luxury-h1 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        line-height: 1.2;
        color: #080D2B;
    }
    .about-luxury-h2 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.1rem, 3vw, 1.4rem);
        line-height: 1.3;
        color: #080D2B;
    }
    .about-luxury-h3 {
        font-family: 'Marcellus', serif;
        font-size: clamp(0.95rem, 2.5vw, 1.2rem);
        line-height: 1.3;
        color: #080D2B;
    }
    .about-body-text {
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem !important;
        color: #4b5563;
        line-height: 1.7;
    }
    .about-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);
    }
    .about-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);
    }
    .about-flat-card {
        border-radius: 0.1rem;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    }
    .about-flat-card:hover {
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    }
</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">About 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]">Luxury Serviced Apartments</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]">Adeniyi Jones, Ikeja</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 Access</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]">Smart Living</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]">Future Locations</span>
                </div>
                <h1 class="about-luxury-h1 font-bold text-slate-900 leading-tight">
                    {{ $sections['hero']->title ?? 'About Kevron Suites and Apartments' }}
                </h1>
                <p class="about-body-text text-slate-600">
                    {{ $sections['hero']->subtitle ?? 'Discover Kevron Suites and Apartments, a premium serviced-apartment brand offering luxury 1, 2, 3 and 4 bedroom accommodation in Adeniyi Jones, Ikeja, Lagos — designed for comfort, convenience, smart living and memorable guest experiences.' }}
                </p>
                <div class="pt-4 flex flex-col sm:flex-row flex-wrap gap-4">
                    <a href="{{ url('/apartments') }}" class="about-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-3.5 px-8 text-center telemetry-trigger" data-event="explore_apartments_clicked">
                        Explore Apartments
                    </a>
                    <a href="{{ url('/booking') }}" class="about-pill-btn bg-[#D6A84F] hover:bg-[#c49842] text-white py-3.5 px-8 text-center telemetry-trigger" data-event="book_now_clicked">
                        Book Your Stay
                    </a>
                    <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}" target="_blank" class="about-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 Enquiry</span>
                    </a>
                </div>
            </div>
            <div class="lg:col-span-6">
                <!-- Explicit Layout Stable Heights to prevent CLS -->
                <div class="about-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/master-bedroom-2.jpg') }}" alt="Kevron Suites and Apartments exterior lounge" 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 Master Bedroom Suite.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 2. Brand Story Section (diff background) -->
<section class="bg-gradient-to-b from-[#F4F8FF] to-white py-16 border-t border-b border-slate-100 relative overflow-hidden">
    <div class="absolute -bottom-20 -left-20 w-72 h-72 bg-[#2B3192]/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 order-last lg:order-first">
                <!-- Explicit Layout Stable Heights matching Hero Section to establish visual symmetry -->
                <div class="about-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/dining-set.jpg') }}" alt="Kevron Apartments dining set interior" 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">
                        Spacious, beautifully designed en-suite dining set zone.
                    </div>
                </div>
            </div>
            <div class="lg:col-span-6 space-y-6">
                <span class="text-[9px] uppercase tracking-wider font-bold text-[#D6A84F] block">Our Origins & Vision</span>
                <h2 class="about-luxury-h2 font-bold text-slate-900">
                    {{ $sections['brand_story']->title ?? 'The Kevron Story & Vision' }}
                </h2>
                <div class="about-body-text text-slate-600 whitespace-pre-line leading-relaxed">
                    {!! $sections['brand_story']->body ?? 'Kevron Suites and Apartments was created to provide guests with a premium serviced-apartment experience in Ikeja, Lagos. Starting from Adeniyi Jones, the brand brings together luxury apartment living, modern comfort, smart access, guest support and convenient airport access for travellers who want more space, privacy and flexibility than a standard hotel room.' !!}
                </div>
                <div class="pt-2">
                    <a href="{{ url('/location-neighbourhood-guide-ikeja') }}" class="about-pill-btn border border-[#2B3192] text-[#2B3192] hover:bg-[#2B3192] hover:text-white py-2.5 px-6 block sm:inline-block text-center telemetry-trigger" data-event="location_clicked">
                        {{ $sections['brand_story']->cta_label ?? 'View Location Guide' }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3. Hospitality Promise Section -->
<section class="bg-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4">
        <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block">Our Promise</span>
        <h2 class="about-luxury-h2 font-bold text-slate-900 max-w-2xl mx-auto">Hospitality Promise</h2>
        <p class="about-body-text text-slate-500 max-w-3xl mx-auto italic font-medium leading-relaxed">
            "{{ $brandProfile->mission_statement ?? 'Our hospitality promise is to provide guests with a clean, comfortable, security-conscious and well-managed serviced-apartment experience, supported by practical amenities, responsive guest communication and thoughtful spaces for short stays, long stays, family visits, business travel and corporate accommodation.' }}"
        </p>

        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 pt-10">
            @foreach($promises as $promise)
            <div class="about-flat-card bg-slate-50 p-6 flex flex-col justify-between items-center text-center transition-colors duration-300 hover:bg-[#F4F8FF] group">
                <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#2B3192] group-hover:bg-[#2B3192] group-hover:text-white shadow-[rgba(0,0,0,0.03)_0px_2px_4px_0px] transition-colors duration-300 mb-4">
                    <!-- Icon Placeholder matching the database strings -->
                    @if($promise->icon == 'home')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                    @elseif($promise->icon == 'clock')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    @elseif($promise->icon == 'cpu-chip')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
                    @elseif($promise->icon == 'shield-check')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    @else
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                    @endif
                </div>
                <h3 class="text-xs font-bold text-slate-800 mb-2">{{ $promise->title }}</h3>
                <p class="text-[10px] text-slate-500 leading-relaxed font-semibold">{{ $promise->description }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- 4. Why Kevron & Who We Serve Sections (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">
        <h2 class="about-luxury-h2 font-bold text-center mb-10">Why Choose Kevron Apartments</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 8 Why Kevron Cards -->
            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Luxury Configurations</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Choose from premium 1, 2, 3 and 4 bedroom en-suite layouts built for space and style.</p>
                <a href="{{ url('/apartments') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">View Suites & Rates →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Airport Access</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Located only 8 minutes from MM1/MM2 domestic terminals and 15 minutes from MMIA.</p>
                <a href="{{ url('/airport-pickup-car-rental') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Airport Transfers →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Smart Access Features</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Operate digital keyless smart deadbolts with unique entry codes sent directly to you.</p>
                <a href="{{ url('/security-smart-living') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Smart Living Tech →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Leisure Entertainment</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Enjoy private PlayStation 5 consoles and professional slate-bed snooker tables inside your suite.</p>
                <a href="{{ url('/amenities') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Suite Amenities →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Long-Stay Discounts</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Take advantage of discounted weekly and monthly rates for relocating families or expats.</p>
                <a href="{{ url('/long-stay-serviced-apartments-ikeja') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Extended Long Stays →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Corporate Solutions</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">HR and procurement portals supporting VAT invoices, corporate billing, and B2B accounts.</p>
                <a href="{{ url('/corporate-stays') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Corporate Bookings →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">Ikeja Location</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Prime base in Adeniyi Jones, Ikeja, positioned close to police support, mall shopping, and dining.</p>
                <a href="{{ url('/location-neighbourhood-guide-ikeja') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Neighbourhood Map →</a>
            </div>

            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors">
                <h4 class="text-xs font-bold text-[#2B3192]">24/7 Guest Support</h4>
                <p class="text-[11px] text-slate-500 font-semibold leading-relaxed">Direct digital communication via WhatsApp, emergency manuals, and quick maintenance dispatch.</p>
                <a href="{{ url('/contact') }}" class="text-[10px] font-bold text-[#D6A84F] hover:underline block pt-2">Contact Concierge →</a>
            </div>
        </div>
    </div>
</section>

<!-- 5. First Location Section -->
<section class="bg-white py-16 relative overflow-hidden">
    <div class="absolute -top-32 right-0 w-80 h-80 bg-[#2B3192]/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">
                <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block">Our Flagship Location</span>
                <h2 class="about-luxury-h2 font-bold text-slate-900">Kevron Suites — Adeniyi Jones, Ikeja</h2>
                <div class="space-y-4 text-xs font-semibold text-slate-600">
                    <div class="flex items-start space-x-3.5">
                        <div class="flex-shrink-0 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>
                        <span class="pt-1.5 leading-relaxed">7B Regina Coker Street, Adeniyi Jones, Ikeja / No. 8 Ogunlowo Street, Adeniyi Jones, Ikeja, Lagos 100271, Nigeria.</span>
                    </div>
                    
                    <div class="flex items-start space-x-3.5">
                        <div class="flex-shrink-0 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                        </div>
                        <span class="pt-1.5 leading-relaxed">Luxury 1, 2, 3 and 4 bedroom serviced en-suite suites available.</span>
                    </div>
                    
                    <div class="flex items-start space-x-3.5">
                        <div class="flex-shrink-0 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <span class="pt-1.5 leading-relaxed">Starting rates from ₦150,000 / night.</span>
                    </div>
                    
                    <div class="flex items-start space-x-3.5">
                        <div class="flex-shrink-0 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <span class="pt-1.5 leading-relaxed">Positioned approximately 3 minutes from Memabod Police Station.</span>
                    </div>
                    
                    <div class="flex items-start space-x-3.5">
                        <div class="flex-shrink-0 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                        </div>
                        <span class="pt-1.5 leading-relaxed">Approximately 8 to 15 minutes transit to MM1/MM2 domestic and international terminals (subject to traffic).</span>
                    </div>
                </div>
                <div class="pt-2 flex flex-wrap gap-4">
                    <a href="{{ url('/locations/ikeja-adeniyi-jones-lagos') }}" class="about-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-2.5 px-6 text-center telemetry-trigger" data-event="location_clicked">
                        View Ikeja Location
                    </a>
                    <a href="{{ url('/booking') }}" class="about-pill-btn bg-[#D6A84F] hover:bg-[#c49842] text-white py-2.5 px-6 text-center telemetry-trigger" data-event="book_now_clicked">
                        Book Stay
                    </a>
                </div>
            </div>
            <div class="lg:col-span-6">
                <!-- Double-Bordered Dashboard Frame with Interactive Shadow & Gold Accent -->
                <div class="about-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="about-flat-card overflow-hidden bg-slate-100 h-80 relative border border-[#D6A84F]/30">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.364426543202!2d3.3486445749936853!3d6.601552393392473!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b922fa6a9c7b3%3A0xe2128e4695e54d81!2sAdeniyi%20Jones%20Ave%2C%20Ikeja%20100271%2C%20Lagos!5e0!3m2!1sen!2sng!4v1717135000000!5m2!1sen!2sng" class="w-full h-full border-0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 6. Quality Standard Section (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 text-center space-y-4">
        <span class="text-[9px] uppercase tracking-wider font-bold text-[#D6A84F] block">Our Standards</span>
        <h2 class="about-luxury-h2 font-bold text-slate-900 max-w-2xl mx-auto">Uncompromising Quality Commitments</h2>
        <p class="about-body-text text-slate-500 max-w-3xl mx-auto italic font-medium leading-relaxed">
            "Kevron Suites and Apartments is committed to maintaining clean, comfortable and well-managed accommodation. Our approach to quality focuses on clear booking information, responsive guest support, practical house rules, maintenance reporting, guest feedback and continuous improvement as the brand grows."
        </p>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 pt-10 text-left">
            @foreach($standards as $standard)
            <div class="about-flat-card bg-white p-6 space-y-2 hover:bg-slate-50 transition-colors telemetry-trigger" data-event="quality_section_viewed" data-key="{{ $standard->title }}">
                <div class="text-[#2B3192] w-6 h-6 mb-2">
                    @if($standard->icon == 'sparkles')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                    @elseif($standard->icon == 'wrench-screwdriver')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    @elseif($standard->icon == 'chat-bubble-left-right')
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
                    @else
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                    @endif
                </div>
                <h4 class="text-xs font-bold text-slate-800">{{ $standard->title }}</h4>
                <p class="text-[11px] text-slate-500 font-medium leading-relaxed">{{ $standard->description }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- 7. Future Expansion & Brand Values Section -->
<section class="bg-white py-16 relative overflow-hidden">
    <div class="absolute top-1/3 left-0 w-80 h-80 bg-[#2B3192]/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 right-0 w-72 h-72 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">
                <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block">Our Roadmap</span>
                <h2 class="about-luxury-h2 font-bold text-slate-900">
                    {{ $sections['future_expansion']->title ?? 'Scalable Design & Future Expansion' }}
                </h2>
                <div class="about-body-text text-slate-600 whitespace-pre-line leading-relaxed mb-6">
                    {!! $sections['future_expansion']->body ?? 'Kevron Suites and Apartments is being developed as a scalable serviced-apartment brand. The Adeniyi Jones, Ikeja location is the first branch, with the website and booking system structured to support additional locations, apartment types, amenities, pricing rules, galleries, virtual tours and guest services as the business expands.' !!}
                </div>
                
                <!-- Premium Vertical Timeline with Hover-Glow Halos & Dashed Track Line -->
                <div class="relative pl-8 border-l border-dashed border-slate-200 space-y-8 py-2 text-xs font-semibold text-slate-600">
                    @foreach($expansions as $exp)
                    <div class="relative group">
                        <!-- Custom Timeline Glowing Halo Number Badge -->
                        <span class="absolute -left-[45px] top-0 bg-[#F4F8FF] text-[#2B3192] w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold border border-[#2B3192]/20 transition-all duration-300 group-hover:scale-110 group-hover:bg-[#2B3192] group-hover:text-white group-hover:shadow-md group-hover:shadow-blue-500/20 z-10">
                            {{ $exp->sort_order }}
                        </span>
                        <h4 class="text-xs font-bold text-slate-800 mb-1 transition-colors duration-300 group-hover:text-[#2B3192]">{{ $exp->title }}</h4>
                        <p class="text-[11px] text-slate-500 font-medium leading-relaxed">{{ $exp->body }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="lg:col-span-6">
                <!-- Floating Values Pillar Dashboard Card -->
                <div class="about-flat-card bg-gradient-to-br from-[#F4F8FF] to-white p-8 space-y-6 shadow-[0_4px_20px_rgba(43,49,146,0.03)] border border-slate-100 relative overflow-hidden">
                    <div class="absolute -right-20 -bottom-20 w-48 h-48 bg-[#D6A84F]/5 rounded-full blur-2xl pointer-events-none"></div>
                    <span class="text-[9px] uppercase tracking-wider font-bold text-[#D6A84F] block">Our Core Values</span>
                    
                    <!-- Floating Cards Grid to replace plain list -->
                    <div class="space-y-4">
                        @foreach($values as $value)
                        <div class="about-flat-card bg-white p-4 border border-slate-100/80 shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_6px_15px_rgba(43,49,146,0.04)] flex items-start space-x-3.5">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-50 text-[#D6A84F] flex items-center justify-center shadow-[rgba(214,168,79,0.05)_0px_2px_4px_0px]">
                                <!-- Premium Gold Star SVG -->
                                <svg class="w-4 h-4 text-[#D6A84F]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                            <div>
                                <h4 class="text-xs font-bold text-slate-800 mb-0.5">{{ $value->title }}</h4>
                                <p class="text-[11px] text-slate-500 font-medium leading-relaxed">{{ $value->description }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 8. Interactive Preview Grid -->
<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 text-center space-y-4">
        <span class="text-[9px] uppercase tracking-wider font-bold text-[#2B3192] block">Interactive Media</span>
        <h2 class="about-luxury-h2 font-bold text-slate-900 max-w-2xl mx-auto">Explore Our Visual Experience</h2>
        <p class="about-body-text text-slate-500 max-w-2xl mx-auto">
            Take a 3D tour, preview our galleries, and inspect executive amenities dynamically before reserving.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 pt-10">
            <div class="about-flat-card bg-white overflow-hidden flex flex-col justify-between group h-full">
                <div class="h-40 bg-slate-950 overflow-hidden relative">
                    <img src="{{ asset('pictures/bedroom.jpg') }}" alt="Apartment Interiors Preview" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-5 flex-grow flex flex-col justify-between items-center text-center">
                    <h3 class="text-xs font-bold text-slate-800 mb-2">Apartment Interiors</h3>
                    <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">Meticulously maintained, fully equipped master en-suite residences.</p>
                    <a href="{{ url('/gallery') }}" class="text-[10px] font-bold text-[#2B3192] uppercase tracking-wider hover:underline telemetry-trigger" data-event="gallery_clicked">Explore Gallery →</a>
                </div>
            </div>

            <div class="about-flat-card bg-white overflow-hidden flex flex-col justify-between group h-full">
                <div class="h-40 bg-slate-950 overflow-hidden relative">
                    <img src="{{ asset('pictures/living-room.jpg') }}" alt="3D Tour Preview" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-5 flex-grow flex flex-col justify-between items-center text-center">
                    <h3 class="text-xs font-bold text-slate-800 mb-2">3D Virtual Experience</h3>
                    <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">Take a virtual 360 walk through our lounge, bedrooms, and setups.</p>
                    <a href="{{ url('/virtual-tour') }}" class="text-[10px] font-bold text-[#2B3192] uppercase tracking-wider hover:underline telemetry-trigger" data-event="virtual_tour_clicked">Start 3D Walk →</a>
                </div>
            </div>

            <div class="about-flat-card bg-white overflow-hidden flex flex-col justify-between group h-full">
                <div class="h-40 bg-slate-950 overflow-hidden relative">
                    <img src="{{ asset('pictures/kitchen.jpg') }}" alt="Amenities Preview" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-5 flex-grow flex flex-col justify-between items-center text-center">
                    <h3 class="text-xs font-bold text-slate-800 mb-2">Facilities & Amenities</h3>
                    <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">Fully fitted gourmet kitchens, backup gens, smart locks, and snooker.</p>
                    <a href="{{ url('/amenities') }}" class="text-[10px] font-bold text-[#2B3192] uppercase tracking-wider hover:underline telemetry-trigger" data-event="gallery_clicked">See Facilities →</a>
                </div>
            </div>

            <div class="about-flat-card bg-white overflow-hidden flex flex-col justify-between group h-full">
                <div class="h-40 bg-slate-950 overflow-hidden relative">
                    <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="Security Smart Living Preview" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-5 flex-grow flex flex-col justify-between items-center text-center">
                    <h3 class="text-xs font-bold text-slate-800 mb-2">Smart Living tech</h3>
                    <p class="text-[10px] text-slate-500 font-semibold mb-4 leading-relaxed">Secure digital locks, video doorbells, 24/7 CCTV, and broadband.</p>
                    <a href="{{ url('/security-smart-living') }}" class="text-[10px] font-bold text-[#2B3192] uppercase tracking-wider hover:underline telemetry-trigger" data-event="gallery_clicked">Verify Tech →</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 9. About Page FAQs (dynamic 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="about-luxury-h2 font-bold text-center mb-8">Frequently Asked Questions</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="faq-accordion-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">
                    {{ $faq->answer }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- 10. SEO/GEO Crawlable Facts Summary 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 Engine Search Index Reference</h4>
        <p class="text-[10px] text-slate-400 font-semibold leading-relaxed max-w-2xl mx-auto">
            Kevron Suites and Apartments is a premium serviced-apartment brand starting from Adeniyi Jones, Ikeja, Lagos, offering luxury 1, 2, 3 and 4 bedroom accommodation for families, executives, business travellers, corporate guests, project teams, relocation guests and long-stay visitors. The brand combines apartment-style comfort, smart living, guest support, airport access, modern amenities and a scalable multi-location structure for future serviced-apartment expansion.
        </p>
    </div>
</section>

<!-- 11. Final CTA Section (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="about-luxury-h2 font-bold text-white leading-tight">
            {{ $sections['final_cta']->title ?? 'Experience Kevron Suites and Apartments in Ikeja' }}
        </h2>
        <p class="text-xs text-slate-300 max-w-xl mx-auto leading-relaxed font-semibold">
            {{ $sections['final_cta']->subtitle ?? 'Explore our luxury 1, 2, 3 and 4 bedroom serviced apartments and book a stay designed around comfort, convenience, smart living and premium guest support.' }}
        </p>

        <div class="pt-4 flex flex-col sm:flex-row justify-center items-center gap-4">
            <a href="{{ url('/apartments') }}" class="about-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="explore_apartments_clicked">
                Explore Apartments
            </a>
            <a href="{{ url('/booking') }}" class="about-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="book_now_clicked">
                Book Your Stay
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}" target="_blank" class="about-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>

<!-- Telemetry and Accordion Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. FAQ Accordion Handler
    document.querySelectorAll('.faq-accordion-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');
            
            // Toggleexpanded state
            this.setAttribute('aria-expanded', !isExpanded);
            
            // Toggle panel visibility
            if (panel) {
                panel.classList.toggle('hidden');
            }
            
            // Toggle icons
            if (icon) {
                icon.textContent = isExpanded ? '➕' : '➖';
            }

            // Log FAQ expanded telemetry
            if (!isExpanded) {
                fetch("{{ route('about.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. Interactive Click Telemetry Hooks
    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('about.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>

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