@extends('layouts.app')

@section('title', 'Dating Tips & Advice - ' . config('app.name'))

@section('full-width')
<div class="min-h-screen bg-sn-soft">
    @include('components.blog-header')

    <!-- Breadcrumb -->
    <div class="container mx-auto px-4 pb-2 pt-4">
        <nav class="text-xs text-sn-muted">
            <a href="{{ route('home') }}" class="sn-link text-sn-plum">Home</a>
            <span class="mx-2">/</span>
            <span class="text-sn-heading font-medium">Blog</span>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-4 pt-0">
        <h2 class="text-xl md:text-2xl font-bold text-sn-heading mb-1.5">Dating Tips & Advice</h2>
        <p class="text-xs text-sn-muted mb-3 max-w-3xl">
            Practical tips from our experts for confident and meaningful connections. Whether you're starting over or exploring new relationships, our dating guides help you navigate love with clarity, ease, and zero pressure.
        </p>

        @if($categories->count() > 0 || $tags->count() > 0)
        <div class="mb-5 space-y-2">
            @if($categories->count() > 0)
                <div class="flex flex-wrap gap-1.5 items-center">
                    <span class="text-[10px] font-semibold text-sn-main">Categories:</span>
                    <a href="{{ route('blog.index') }}" class="px-2.5 py-0.5 rounded-full text-[10px] font-medium transition-colors {{ request()->routeIs('blog.index') && !request()->has('category') ? 'bg-sn-plum text-white' : 'bg-sn-lavender text-sn-main hover:bg-sn-plum hover:text-white' }}">
                        All
                    </a>
                    @foreach($categories->take(5) as $category)
                        <a href="{{ route('blog.category', $category->slug) }}" class="px-2.5 py-0.5 rounded-full text-[10px] font-medium transition-colors {{ request()->routeIs('blog.category') && request()->route('slug') == $category->slug ? 'bg-sn-plum text-white' : 'bg-sn-lavender text-sn-main hover:bg-sn-plum hover:text-white' }}">
                            {{ $category->name }}
                        </a>
                    @endforeach
                </div>
            @endif
            @if($tags->count() > 0)
                <div class="flex flex-wrap gap-1.5 items-center">
                    <span class="text-[10px] font-semibold text-sn-main">Popular Tags:</span>
                    @foreach($tags->take(8) as $tag)
                        <a href="{{ route('blog.tag', $tag->slug) }}" class="px-2.5 py-0.5 rounded-full text-[10px] font-medium transition-colors {{ request()->routeIs('blog.tag') && request()->route('slug') == $tag->slug ? 'bg-sn-plum text-white' : 'bg-sn-lavender text-sn-main hover:bg-sn-plum hover:text-white' }}">
                            {{ $tag->name }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
        @endif

        @if($blogs->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            @foreach($blogs as $blog)
            <div class="bg-white rounded-lg overflow-hidden group border border-sn-divider shadow-sm hover:shadow-md hover:border-sn-plum transition-all duration-300">
                <a href="{{ route('blog.show', $blog->slug) }}" class="block">
                    <div class="relative h-48 overflow-hidden rounded-t-lg">
                        @if($blog->featured_image)
                            <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="w-full h-full bg-sn-lavender flex items-center justify-center">
                                <i class="ri-article-line text-3xl text-sn-muted"></i>
                            </div>
                        @endif
                        @if($blog->categories->count() > 0)
                        <div class="absolute bottom-2 left-0 right-0 text-center">
                            <span class="inline-block bg-sn-plum text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">
                                {{ $blog->categories->first()->name }}
                            </span>
                        </div>
                        @endif
                    </div>
                </a>
                <div class="p-4">
                    <a href="{{ route('blog.show', $blog->slug) }}">
                        <h3 class="text-sm font-bold text-sn-heading mb-1 group-hover:text-sn-plum transition-colors">{{ $blog->title }}</h3>
                    </a>
                    @if($blog->excerpt)
                    <p class="text-[10px] text-sn-muted mb-2 line-clamp-2">
                        {{ Str::limit($blog->excerpt, 100) }}
                    </p>
                    @endif
                    <span class="text-[9px] text-sn-muted">{{ $blog->created_at->format('d/m/Y') }}</span>
                </div>
            </div>
            @endforeach
        </div>

        @if($blogs->hasPages())
        <div class="flex justify-center items-center gap-2 mb-8 text-xs font-medium text-sn-muted">
            {{ $blogs->links('pagination.tailwind-simple') }}
        </div>
        @endif
        @else
        <div class="bg-white rounded-xl border border-sn-divider shadow-sm p-12 text-center mb-16">
            <i class="ri-article-line text-6xl text-sn-muted mb-4"></i>
            <h3 class="text-xl font-semibold text-sn-heading mb-2">No blog posts found</h3>
            <p class="text-sm text-sn-muted">
                @if(request()->routeIs('blog.category') || request()->routeIs('blog.tag'))
                    There are no blog posts in this category/tag yet. Check back later!
                @else
                    There are no blog posts published yet. Check back later!
                @endif
            </p>
        </div>
        @endif

        @if($blogs->count() >= 8)
        <h2 class="text-base font-bold text-sn-heading mb-4">More posts</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
            @foreach($blogs->skip(8)->take(2) as $blog)
            <div class="bg-white rounded-lg overflow-hidden group border border-sn-divider shadow-sm hover:shadow-md hover:border-sn-plum transition-all duration-300">
                <a href="{{ route('blog.show', $blog->slug) }}" class="block">
                    <div class="relative h-48 overflow-hidden rounded-t-lg">
                        @if($blog->featured_image)
                            <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="w-full h-full bg-sn-lavender flex items-center justify-center">
                                <i class="ri-article-line text-3xl text-sn-muted"></i>
                            </div>
                        @endif
                    </div>
                </a>
                <div class="p-4">
                    <a href="{{ route('blog.show', $blog->slug) }}">
                        <h3 class="text-sm font-bold text-sn-heading mb-1 group-hover:text-sn-plum transition-colors">{{ $blog->title }}</h3>
                    </a>
                    @if($blog->excerpt)
                    <p class="text-[10px] text-sn-muted mb-2 line-clamp-2">
                        {{ Str::limit($blog->excerpt, 100) }}
                    </p>
                    @endif
                    <div class="flex items-center gap-1.5">
                        @if($blog->author && $blog->author->profile && $blog->author->profile->profile_picture)
                            <img src="{{ asset($blog->author->profile->profile_picture) }}" class="w-6 h-6 rounded-full" alt="{{ $blog->author->name }}">
                        @else
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($blog->author->name ?? 'Author') }}&background=random" class="w-6 h-6 rounded-full" alt="{{ $blog->author->name ?? 'Author' }}">
                        @endif
                        <span class="text-[10px] text-sn-muted">{{ $blog->author->name ?? 'Unknown' }} • {{ $blog->created_at->format('d/m/Y') }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <!-- Bottom Banner -->
    <div class="relative w-full h-[380px] overflow-hidden mt-4">
        <img src="{{ asset('assets/desktop-aa839c9ab2-3.jpg') }}" alt="Swingers Nest" class="absolute inset-0 w-full h-full object-cover object-center">
        <div class="absolute inset-0 bg-sn-dark/50 z-10"></div>
        <div class="absolute inset-0 container mx-auto px-4 sm:px-8 flex flex-col justify-center items-center text-center z-20">
            <div class="max-w-2xl">
                <div class="flex flex-col items-center">
                    <div class="flex items-center gap-1.5 mb-2">
                        <i class="ri-heart-fill text-sn-gold text-xl"></i>
                        <span class="text-white font-bold text-base tracking-wide">Swingers Nest</span>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-2 leading-tight">Global Online Dating</h2>
                    <p class="text-gray-200 mb-3 text-xs">
                        Enjoy virtual connections with like-minded users all over the world
                    </p>
                    <div class="w-full flex flex-col items-center gap-2">
                        <a href="{{ route('register') }}" class="btn btn-primary w-full max-w-sm text-center text-sm py-2.5 px-6">
                            Join Now
                        </a>
                        <p class="text-[9px] text-gray-300 mt-1.5 leading-tight max-w-sm text-center">
                            By clicking "Join Now" or "Sign in with Google", you agree with the <a href="{{ route('terms') }}" class="underline hover:text-sn-gold transition-colors">Terms & Conditions</a>, <a href="{{ route('privacy') }}" class="underline hover:text-sn-gold transition-colors">Privacy Policy</a>, <a href="#" class="underline hover:text-sn-gold transition-colors">Refund and Cancellation Policy</a> and <a href="#" class="underline hover:text-sn-gold transition-colors">Content Policy</a>. You can terminate your account or opt out of any or part of the services (including linked-one) any time.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection