@extends('layouts.marketing')

@section('title', 'Blog — Inventory & Business Tips for Nigerian SMEs | Inventino')
@section('description', 'Expert inventory management tips, POS guides, product updates, and business growth insights for Nigerian entrepreneurs. Stay informed with the Inventino blog.')
@section('keywords', 'inventory management tips Nigeria, business management blog, SME tips Nigeria, POS system guide, stock management advice')
@section('canonical', route('blog'))
@section('og_title', 'Inventino Blog — Inventory & Business Tips for Nigerian SMEs')
@section('og_description', 'Practical tips, guides, and insights on inventory management, sales, and growing your business in Nigeria.')
@section('og_type', 'website')
@section('og_title', 'Inventino Blog — Insights for Growing Businesses')
@section('og_description', 'Expert inventory management tips, POS guides, product updates, and business growth insights for Nigerian entrepreneurs.')

@section('content')

<!-- ─── HERO ────────────────────────────────────────────────────────────── -->
<section class="pt-32 pb-16 hero-bg relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
        <div class="absolute top-20 left-1/3 w-80 h-80 rounded-full opacity-10 blur-3xl" style="background: radial-gradient(circle, #3b82f6, transparent)"></div>
    </div>
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="inline-flex items-center gap-2 badge-blue text-xs font-semibold px-3 py-1.5 rounded-full mb-5">Blog</div>
        <h1 class="text-5xl md:text-6xl font-black tracking-tight mb-5">
            Insights for<br><span class="gradient-text">Growing Businesses</span>
        </h1>
        <p class="text-slate-400 text-xl max-w-2xl mx-auto">
            Inventory tips, product updates, and practical guides for Nigerian entrepreneurs.
        </p>
    </div>
</section>

<!-- ─── CATEGORIES ────────────────────────────────────────────────────── -->
<section class="py-8 bg-navy-900 border-b border-slate-800/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('blog') }}"
               class="blog-cat-btn {{ !$category ? 'active' : '' }} px-4 py-1.5 rounded-full text-xs font-semibold transition-all">All Posts</a>
            @foreach(['inventory' => 'Inventory', 'pos' => 'POS & Sales', 'business' => 'Business Tips', 'updates' => 'Product Updates'] as $catSlug => $catLabel)
            <a href="{{ route('blog', ['category' => $catSlug]) }}"
               class="blog-cat-btn {{ $category === $catSlug ? 'active' : '' }} px-4 py-1.5 rounded-full text-xs font-semibold transition-all">{{ $catLabel }}</a>
            @endforeach
        </div>
    </div>
</section>

@if($featured)
<!-- ─── FEATURED POST ──────────────────────────────────────────────────── -->
<section class="py-14 bg-navy-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="scroll-reveal">
            <a href="{{ route('blog.show', $featured->slug) }}"
               class="block rounded-2xl overflow-hidden group"
               style="background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%); border: 1px solid rgba(59,130,246,0.2);">
                <div class="grid lg:grid-cols-2 gap-0">
                    <!-- Cover image / placeholder -->
                    <div class="h-64 lg:h-auto relative overflow-hidden" style="background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(99,102,241,0.2));">
                        @if($featured->cover_image_url)
                            <img src="{{ $featured->cover_image_url }}"
                                 alt="{{ e($featured->title) }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 loading="eager"
                                 fetchpriority="high"
                                 decoding="async"
                                 width="800" height="450">
                        @else
                            <div class="absolute inset-0 flex items-center justify-center">
                                <svg class="w-24 h-24 text-blue-500/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                                </svg>
                            </div>
                        @endif
                        <div class="absolute top-4 left-4">
                            <span class="badge-blue text-xs font-bold px-3 py-1 rounded-full">Featured</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="p-8 lg:p-12 flex flex-col justify-center">
                        <div class="flex items-center gap-3 mb-4">
                            @if($featured->category)
                            <span class="text-xs font-semibold text-blue-400 uppercase tracking-wide">{{ $featured->category }}</span>
                            <span class="text-slate-600 text-xs">•</span>
                            @endif
                            <span class="text-xs text-slate-500">{{ $featured->published_at->format('F j, Y') }}</span>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-black text-white mb-4 group-hover:text-blue-400 transition-colors leading-tight">
                            {{ $featured->title }}
                        </h2>
                        @if($featured->excerpt)
                        <p class="text-slate-400 text-sm leading-relaxed mb-6">{{ $featured->excerpt }}</p>
                        @endif
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
                                 style="background: linear-gradient(135deg, #3b82f6, #6366f1);">
                                {{ strtoupper(substr($featured->author->name ?? 'I', 0, 2)) }}
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-white">{{ $featured->author->name ?? 'The Inventino Team' }}</p>
                                <p class="text-xs text-slate-500">{{ $featured->reading_time }} min read</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</section>
@endif

<!-- ─── POST GRID ─────────────────────────────────────────────────────── -->
<div class="section-divider"></div>
<section class="py-14 bg-navy-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        @if($posts->isNotEmpty())
        <h2 class="text-xl font-bold text-white mb-8 scroll-reveal">
            {{ $featured ? 'Latest Articles' : ($category ? \Illuminate\Support\Str::title($category) . ' Articles' : 'All Articles') }}
        </h2>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6" id="blog-grid">
            @foreach($posts as $i => $post)
            @php
                $catKey = strtolower($post->category ?? '');
                $colorMap = [
                    'inventory' => ['bg' => 'rgba(34,197,94,0.2), rgba(16,185,129,0.1)', 'icon' => 'text-green-500/30',  'badge' => 'badge-green',  'link' => 'text-green-400 hover:text-green-300'],
                    'pos'       => ['bg' => 'rgba(139,92,246,0.2), rgba(59,130,246,0.1)', 'icon' => 'text-violet-500/30', 'badge' => 'badge-purple', 'link' => 'text-violet-400 hover:text-violet-300'],
                    'updates'   => ['bg' => 'rgba(245,158,11,0.2), rgba(251,191,36,0.1)',  'icon' => 'text-amber-500/30',  'badge' => 'badge-orange', 'link' => 'text-amber-400 hover:text-amber-300'],
                    'business'  => ['bg' => 'rgba(236,72,153,0.2), rgba(168,85,247,0.1)',  'icon' => 'text-pink-500/30',   'badge' => 'bg-pink-500/20 text-pink-400 border border-pink-500/30', 'link' => 'text-pink-400 hover:text-pink-300'],
                ];
                $c = $colorMap[$catKey] ?? ['bg' => 'rgba(59,130,246,0.2), rgba(14,165,233,0.1)', 'icon' => 'text-blue-500/30', 'badge' => 'badge-blue', 'link' => 'text-blue-400 hover:text-blue-300'];
                $delays = ['', 'scroll-reveal-delay-1', 'scroll-reveal-delay-2'];
                $delay = $delays[$loop->index % 3];
            @endphp
            <article class="feature-card rounded-2xl overflow-hidden flex flex-col scroll-reveal {{ $delay }} group">
                <a href="{{ route('blog.show', $post->slug) }}" class="block">
                    <div class="h-44 relative overflow-hidden flex items-center justify-center"
                         style="background: linear-gradient(135deg, {{ $c['bg'] }});">
                        @if($post->cover_image_url)
                            <img src="{{ $post->cover_image_url }}"
                                 alt="{{ e($post->title) }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 loading="lazy"
                                 decoding="async"
                                 width="400" height="176">
                        @else
                            <svg class="w-16 h-16 {{ $c['icon'] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                        @endif
                        @if($post->category)
                        <div class="absolute top-3 left-3">
                            <span class="text-xs font-bold px-2.5 py-1 rounded-full {{ $c['badge'] }}">
                                {{ \Illuminate\Support\Str::title($post->category) }}
                            </span>
                        </div>
                        @endif
                    </div>
                </a>
                <div class="p-5 flex flex-col flex-1">
                    <p class="text-xs text-slate-500 mb-2">
                        {{ $post->published_at->format('M j, Y') }} · {{ $post->reading_time }} min read
                    </p>
                    <h3 class="font-bold text-white mb-2 flex-1 leading-snug">
                        <a href="{{ route('blog.show', $post->slug) }}"
                           class="{{ $c['link'] }} transition-colors">{{ $post->title }}</a>
                    </h3>
                    @if($post->excerpt)
                    <p class="text-xs text-slate-400 leading-relaxed mb-4 line-clamp-2">{{ $post->excerpt }}</p>
                    @endif
                    <a href="{{ route('blog.show', $post->slug) }}"
                       class="text-xs font-semibold {{ $c['link'] }} transition-colors">Read more →</a>
                </div>
            </article>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($posts->hasPages())
        <div class="mt-12 flex justify-center gap-2 flex-wrap scroll-reveal">
            @if($posts->onFirstPage())
                <span class="px-4 py-2 rounded-xl border border-slate-800 text-slate-600 text-sm cursor-not-allowed">← Prev</span>
            @else
                <a href="{{ $posts->previousPageUrl() }}"
                   class="px-4 py-2 rounded-xl border border-slate-700 text-slate-400 hover:border-slate-500 hover:text-white text-sm font-medium transition-all">← Prev</a>
            @endif

            @foreach($posts->getUrlRange(1, $posts->lastPage()) as $page => $url)
                @if($page == $posts->currentPage())
                    <span class="px-4 py-2 rounded-xl text-white text-sm font-semibold"
                          style="background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.4);">{{ $page }}</span>
                @else
                    <a href="{{ $url }}"
                       class="px-4 py-2 rounded-xl border border-slate-700 text-slate-400 hover:border-slate-500 hover:text-white text-sm font-medium transition-all">{{ $page }}</a>
                @endif
            @endforeach

            @if($posts->hasMorePages())
                <a href="{{ $posts->nextPageUrl() }}"
                   class="px-4 py-2 rounded-xl border border-slate-700 text-slate-400 hover:border-slate-500 hover:text-white text-sm font-medium transition-all">Next →</a>
            @else
                <span class="px-4 py-2 rounded-xl border border-slate-800 text-slate-600 text-sm cursor-not-allowed">Next →</span>
            @endif
        </div>
        @endif

        @else
        <!-- Empty state -->
        <div class="text-center py-20 scroll-reveal">
            <p class="text-slate-500 text-lg mb-4">No articles found{{ $category ? ' in this category' : '' }}.</p>
            @if($category)
            <a href="{{ route('blog') }}" class="text-blue-400 hover:text-blue-300 text-sm font-semibold transition-colors">← View all articles</a>
            @endif
        </div>
        @endif
    </div>
</section>

<!-- ─── NEWSLETTER ────────────────────────────────────────────────────── -->
<div class="section-divider"></div>
<section class="py-16 cta-bg relative overflow-hidden">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center scroll-reveal">
        <h2 class="text-3xl font-black text-white mb-3">Get Updates in Your Inbox</h2>
        <p class="text-slate-400 mb-8 text-sm">New articles, product updates, and business tips delivered weekly. No spam.</p>
        <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto" onsubmit="return false;">
            <input type="email" placeholder="your@email.com"
                class="flex-1 px-4 py-3 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all"
                style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);">
            <button type="submit" class="btn-primary px-6 py-3 rounded-xl text-white font-semibold text-sm whitespace-nowrap">
                Subscribe
            </button>
        </form>
        <p class="text-xs text-slate-600 mt-3">By subscribing you agree to our <a href="/legal/privacy" class="hover:text-slate-400 transition-colors underline">privacy policy</a>.</p>
    </div>
</section>

@endsection

@push('styles')
<style>
    .blog-cat-btn {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: #94a3b8;
    }
    .blog-cat-btn:hover,
    .blog-cat-btn.active {
        background: rgba(59,130,246,0.15);
        border-color: rgba(59,130,246,0.4);
        color: #93c5fd;
    }
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endpush