@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Blog and Ikeja City Guide | Kevron Suites and Apartments')
@section('meta_description', $seo->meta_description ?? 'Read helpful guides from Kevron Suites and Apartments on where to stay in Ikeja, airport-access accommodation, business travel, family stays, corporate accommodation, luxury staycation ideas and local attractions near Adeniyi Jones.')

@section('content')
<!-- Custom Styles to strictly obey typography caps and branding colors -->
<style>
    /* Styling Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #F4F8FF;
    }
    ::-webkit-scrollbar-thumb {
        background: #2B3192;
        border-radius: 3px;
    }
    /* Typography Caps */
    .blog-luxury-h1 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        line-height: 1.2;
        color: #080D2B;
    }
    .blog-luxury-h2 {
        font-family: 'Marcellus', serif;
        font-size: clamp(1.1rem, 3vw, 1.5rem);
        line-height: 1.3;
        color: #080D2B;
    }
    .blog-body-text {
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem !important;
        color: #4b5563;
    }
    .blog-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);
    }
    .blog-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);
    }
    .blog-flat-card {
        border-radius: 0.1rem;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
        transition: all 0.3s ease;
    }
    .blog-flat-card:hover {
        background-color: #F4F8FF;
        box-shadow: rgba(43, 49, 146, 0.1) 0px 4px 12px 1px;
    }
</style>

<!-- Hero Section -->
<section class="bg-[#F4F8FF] py-16 border-b border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- Trust Chips -->
        <div class="flex flex-wrap justify-center gap-2 mb-6">
            <span class="bg-white dark:bg-slate-900 border border-slate-200/80 px-3 py-1 text-[10px] uppercase tracking-wider font-bold text-slate-500 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">📍 Ikeja Guides</span>
            <span class="bg-white dark:bg-slate-900 border border-slate-200/80 px-3 py-1 text-[10px] uppercase tracking-wider font-bold text-slate-500 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">✈️ Airport Stay Tips</span>
            <span class="bg-white dark:bg-slate-900 border border-slate-200/80 px-3 py-1 text-[10px] uppercase tracking-wider font-bold text-slate-500 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">💼 Business Travel</span>
            <span class="bg-white dark:bg-slate-900 border border-slate-200/80 px-3 py-1 text-[10px] uppercase tracking-wider font-bold text-slate-500 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">👨‍👩‍👧‍👦 Family Stays</span>
            <span class="bg-white dark:bg-slate-900 border border-slate-200/80 px-3 py-1 text-[10px] uppercase tracking-wider font-bold text-slate-500 rounded-full shadow-[rgba(0,0,0,0.02)_0px_1px_3px_0px]">🏛️ Local Attractions</span>
        </div>

        <h1 class="blog-luxury-h1 font-bold text-slate-900 mb-4 max-w-3xl mx-auto">
            Kevron Suites and Apartments Blog and Ikeja City Guide
        </h1>
        <p class="blog-body-text max-w-2xl mx-auto mb-8 text-slate-600 dark:text-slate-400">
            Explore helpful guides on where to stay in Ikeja, airport-access accommodation, serviced apartments for business travellers, family stays, corporate accommodation, luxury staycations and things to do near Adeniyi Jones.
        </p>

        <!-- CTA Buttons with 50px pill radius -->
        <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
            <a href="{{ url('/apartments') }}" class="blog-pill-btn bg-[#2B3192] hover:bg-[#080D2B] text-white py-3.5 px-8 inline-block">
                View Apartments
            </a>
            <a href="{{ url('/booking') }}" class="blog-pill-btn bg-[#D6A84F] hover:bg-[#b88c3a] text-white py-3.5 px-8 inline-block">
                Book Your Stay
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}" target="_blank" class="blog-pill-btn bg-[#16A34A] hover:bg-[#12803a] text-white py-3.5 px-8 inline-block flex items-center space-x-2">
                <span>WhatsApp Us</span>
            </a>
        </div>
    </div>
</section>

<!-- Main Interactive Directory Section (diff background) -->
<section class="bg-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Search & Filter Controls Panel -->
        <div class="bg-white dark:bg-slate-900 border-t-4 border-[#D6A84F] border-x border-b border-slate-200/60 dark:border-slate-800 p-8 rounded-[0.1rem] mb-10 shadow-[rgba(0,0,0,0.05)_0px_8px_24px_-4px] space-y-6">
            
            <!-- Dashboard Title Header -->
            <div class="border-l-2 border-[#2B3192] pl-3">
                <h3 class="font-serif text-slate-900 dark:text-white font-bold uppercase tracking-wider text-[11px] sm:text-xs">
                    Guides Directory & Search Portal
                </h3>
                <span class="text-[9px] text-slate-400 font-semibold block uppercase tracking-wider">
                    Query articles on Ikeja transit, business housing, and airport access
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
                <!-- Search Input with premium SVG icon -->
                <div class="md:col-span-3 relative">
                    <span class="absolute left-3.5 pointer-events-none text-slate-400" style="top: 50%; transform: translateY(-50%);">
                        <svg class="w-4 h-4 text-slate-400 dark:text-slate-500" 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>
                    </span>
                    <input type="text" id="blog-search" placeholder="Search guides by title, category, tags or keywords..." class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 py-3.5 pl-10 pr-4 text-xs font-bold text-slate-700 dark:text-slate-300 placeholder-slate-400 focus:outline-none focus:border-[#2B3192] focus:bg-white dark:focus:bg-slate-900 rounded-[0.1rem] transition-all duration-300 shadow-inner">
                </div>

                <!-- Sort Selector -->
                <div class="md:col-span-1">
                    <select id="blog-sort" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 py-3.5 px-4 text-xs font-bold text-slate-700 dark:text-slate-300 rounded-[0.1rem] focus:outline-none focus:border-[#2B3192] transition-all duration-300">
                        <option value="latest">Sort: Latest Guides</option>
                        <option value="popular">Sort: Most Popular</option>
                        <option value="recommended">Sort: Recommended</option>
                    </select>
                </div>
            </div>

            <!-- Category quick-filter tabs -->
            <div class="border-t border-slate-100 dark:border-slate-800/60 pt-5">
                <span class="text-[9px] uppercase tracking-wider font-bold text-slate-400 block mb-3">Filter articles by category:</span>
                <div class="flex flex-wrap gap-2">
                    <button class="category-filter-pill bg-[#2B3192] text-white border border-[#2B3192] px-4 py-2 text-[9px] font-bold uppercase tracking-wider rounded-[0.1rem] shadow-sm hover:scale-[1.03] transition-all duration-300" data-category="">
                        All Guides & Insights
                    </button>
                    @foreach($categories as $category)
                        <button class="category-filter-pill bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-800 px-4 py-2 text-[9px] font-bold uppercase tracking-wider rounded-[0.1rem] shadow-sm hover:border-[#2B3192] hover:text-[#2B3192] hover:scale-[1.03] transition-all duration-300" data-category="{{ $category->slug }}">
                            {{ $category->name }} ({{ $category->posts_count }})
                        </button>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Featured Posts Section -->
        @if($posts->currentPage() == 1 && $featuredPosts->isNotEmpty())
        <div class="mb-12">
            <h2 class="blog-luxury-h2 font-bold mb-6 flex items-center space-x-2">
                <span>🔥 Featured Local Travel Guides</span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($featuredPosts as $fPost)
                <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 rounded-[0.1rem] overflow-hidden shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:shadow-[rgba(0,0,0,0.08)_0px_4px_12px_1px] transition-all duration-300 flex flex-col group h-full">
                    <div class="h-48 bg-slate-950 overflow-hidden relative">
                        <img src="{{ asset('pictures/' . ($fPost->thumbnail ?? 'dining.jpg')) }}" alt="{{ $fPost->title }}" class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-500">
                        <span class="absolute top-3 left-3 bg-[#D6A84F] text-white text-[9px] uppercase tracking-wider font-bold py-1 px-2.5 rounded-full shadow-sm">
                            {{ $fPost->category->name }}
                        </span>
                    </div>
                    <div class="p-6 flex-grow flex flex-col justify-between">
                        <div>
                            <div class="flex items-center space-x-2 text-[10px] text-slate-400 font-bold mb-2">
                                <span>{{ $fPost->published_at ? $fPost->published_at->format('M d, Y') : $fPost->created_at->format('M d, Y') }}</span>
                                <span>•</span>
                                <span>{{ $fPost->reading_time_minutes }} min read</span>
                            </div>
                            <h3 class="text-xs sm:text-sm font-bold text-slate-900 dark:text-white mb-2 line-clamp-2 leading-snug">
                                <a href="{{ url('/blog/' . $fPost->slug) }}" class="hover:text-blue-900 dark:hover:text-cyan-400 transition-colors">{{ $fPost->title }}</a>
                            </h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-3 mb-4 leading-relaxed font-medium">
                                {{ $fPost->summary }}
                            </p>
                        </div>
                        <div class="border-t border-slate-100 dark:border-slate-800/60 pt-4 flex items-center justify-between mt-auto">
                            <span class="text-[10px] text-slate-400 font-semibold truncate max-w-[120px]">By {{ $fPost->blogAuthor->name ?? 'Kevron Editorial' }}</span>
                            <a href="{{ url('/blog/' . $fPost->slug) }}" class="text-[#2B3192] dark:text-cyan-400 font-bold text-[10px] uppercase tracking-wider hover:underline flex items-center space-x-1">
                                <span>Read Featured</span>
                                <span>→</span>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Main Blog Posts Grid -->
        <h2 class="blog-luxury-h2 font-bold mb-6 flex items-center space-x-2">
            <span>📚 City Guides & Accommodation Insights</span>
        </h2>
        <div id="blog-posts-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @include('blog.partials.list_grid')
        </div>

    </div>
</section>

<!-- City Guide Highlight Section (soft alternate background) -->
<section class="bg-[#F4F8FF] py-16 border-t border-b border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <span class="text-[10px] uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2">GEO Travel Core</span>
            <h2 class="blog-luxury-h2 font-bold mb-2">Explore Adeniyi Jones and Ikeja</h2>
            <p class="blog-body-text max-w-md mx-auto text-slate-500 dark:text-slate-400">
                Explore local attractions and amenities within minutes from your luxury serviced residence.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="bg-white p-6 border border-slate-200/50 rounded-[0.1rem] shadow-[rgba(0,0,0,0.03)_0px_1px_3px_0px]">
                <div class="text-2xl mb-3">✈️</div>
                <h4 class="text-xs sm:text-sm font-bold text-slate-800 mb-1">Stay Near Lagos Airport</h4>
                <p class="text-[11px] text-slate-500 leading-relaxed font-medium mb-4">
                    Positioned approximately 8 minutes from domestic terminals MM1/MM2 and 15 minutes from the International Terminal.
                </p>
                <a href="{{ url('/blog?category=airport-stay-guide') }}" class="text-[#2B3192] font-bold text-[10px] uppercase tracking-wider hover:underline">Read Airport Guides →</a>
            </div>

            <!-- Card 2 -->
            <div class="bg-white p-6 border border-slate-200/50 rounded-[0.1rem] shadow-[rgba(0,0,0,0.03)_0px_1px_3px_0px]">
                <div class="text-2xl mb-3">🏢</div>
                <h4 class="text-xs sm:text-sm font-bold text-slate-800 mb-1">Corporate Stays in Ikeja</h4>
                <p class="text-[11px] text-slate-500 leading-relaxed font-medium mb-4">
                    Learn about corporate billing cycles, security protocols, and en-suite PlayStation/Snooker team amenities.
                </p>
                <a href="{{ url('/blog?category=corporate-accommodation') }}" class="text-[#2B3192] font-bold text-[10px] uppercase tracking-wider hover:underline">Read Corporate Guides →</a>
            </div>

            <!-- Card 3 -->
            <div class="bg-white p-6 border border-slate-200/50 rounded-[0.1rem] shadow-[rgba(0,0,0,0.03)_0px_1px_3px_0px]">
                <div class="text-2xl mb-3">🛍️</div>
                <h4 class="text-xs sm:text-sm font-bold text-slate-800 mb-1">Things to Do Around</h4>
                <p class="text-[11px] text-slate-500 leading-relaxed font-medium mb-4">
                    Discover premier restaurants, cinema houses, supermarket groceries, and entertainment clubs near Adeniyi Jones.
                </p>
                <a href="{{ url('/blog?category=local-attractions') }}" class="text-[#2B3192] font-bold text-[10px] uppercase tracking-wider hover:underline">Read Attraction Guides →</a>
            </div>
        </div>
    </div>
</section>

<!-- Bottom Booking CTA Band (Midnight Navy background) -->
<section class="bg-[#080D2B] text-white py-16 relative overflow-hidden">
    <!-- Subtle Gold progressive overlay -->
    <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">
        <h2 class="blog-luxury-h2 font-bold text-white mb-2">Need a Luxury Serviced Apartment in Ikeja?</h2>
        <p class="text-xs text-slate-300 max-w-xl mx-auto mb-6 leading-relaxed">
            Choose from premium 1, 2, 3 and 4 bedroom serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja. Fully fitted kitchens, 24h power, snooker and PS5 access await.
        </p>

        <!-- Pricing Guideline -->
        <div class="flex flex-wrap justify-center gap-6 mb-8 text-[11px] font-bold text-amber-400">
            <span>🛏️ 1 Bed Suite — ₦150,000/night</span>
            <span>🛏️ 2 Bed Apartment — ₦200,000/night</span>
            <span>🛏️ 3 Bed Apartment — ₦250,000/night</span>
            <span>🛏️ 4 Bed Apartment — ₦300,000/night</span>
        </div>

        <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
            <a href="{{ url('/apartments') }}" class="blog-pill-btn bg-[#2B3192] hover:bg-[#1f257d] text-white py-3.5 px-8 inline-block w-full sm:w-auto">
                View Apartments
            </a>
            <a href="{{ url('/booking') }}" class="blog-pill-btn bg-[#D6A84F] hover:bg-[#c49842] text-white py-3.5 px-8 inline-block w-full sm:w-auto">
                Check Availability
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}" target="_blank" class="blog-pill-btn bg-[#16A34A] hover:bg-[#118037] text-white py-3.5 px-8 inline-block w-full sm:w-auto">
                WhatsApp Us
            </a>
        </div>
    </div>
</section>

<!-- Schema Entity Statement block (invisible but crawlable for AI crawlers) -->
<div class="hidden" aria-hidden="true">
    <p>Kevron Suites and Apartments publishes city guides and accommodation articles for guests considering serviced apartments in Adeniyi Jones, Ikeja, Lagos, including airport stay guides, business travel advice, family stay guidance, corporate accommodation information, local attraction guides and safety-comfort tips.</p>
</div>

<!-- AJAX and Telemetry Tracking Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('blog-search');
    const sortSelect = document.getElementById('blog-sort');
    const postsGrid = document.getElementById('blog-posts-grid');
    const filterPills = document.querySelectorAll('.category-filter-pill');
    let currentCategory = '';

    function trackInteraction(type, queryData = '') {
        fetch("{{ route('blog.track') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                event_type: type,
                query: queryData
            })
        }).catch(err => console.log('Telemetry offline'));
    }

    function performSearch() {
        const query = searchInput.value;
        const sort = sortSelect.value;
        const url = new URL(window.location.href);
        
        url.searchParams.set('q', query);
        url.searchParams.set('sort', sort);
        if (currentCategory) {
            url.searchParams.set('category', currentCategory);
        } else {
            url.searchParams.delete('category');
        }

        // Fetch AJAX
        fetch(url.toString(), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(res => res.text())
        .then(html => {
            postsGrid.innerHTML = html;
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', debounce(function() {
            performSearch();
            trackInteraction('search_used', searchInput.value);
        }, 400));
    }
    
    if (sortSelect) {
        sortSelect.addEventListener('change', function() {
            performSearch();
            trackInteraction('sort_changed', sortSelect.value);
        });
    }

    filterPills.forEach(pill => {
        pill.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 1. Remove active classes from all and restore inactive classes
            filterPills.forEach(p => {
                p.classList.remove('bg-[#2B3192]', 'text-white', 'border-[#2B3192]');
                p.classList.add('bg-white', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300', 'border-slate-200', 'dark:border-slate-800');
            });
            
            // 2. Set active classes for clicked pill and remove inactive ones
            this.classList.remove('bg-white', 'dark:bg-slate-900', 'text-slate-700', 'dark:text-slate-300', 'border-slate-200', 'dark:border-slate-800');
            this.classList.add('bg-[#2B3192]', 'text-white', 'border-[#2B3192]');
            
            currentCategory = this.dataset.category || '';
            performSearch();
            trackInteraction('category_pill_clicked', currentCategory);
        });
    });

    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    // Attach CTA Tracking
    document.querySelectorAll('.blog-pill-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            trackInteraction('cta_clicked', this.textContent.trim());
        });
    });
});
</script>

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