@extends('layouts.app')

@section('title', ($blog->meta_title ?? $blog->title) . ' - ' . config('app.name'))

@section('meta_description', $blog->meta_description ?? $blog->excerpt ?? '')

@push('head')
    @if($blog->meta_keywords)
        <meta name="keywords" content="{{ $blog->meta_keywords }}">
    @endif

    @if(!($blog->allow_indexing ?? true))
        <meta name="robots" content="noindex, nofollow">
    @else
        <meta name="robots" content="index, follow">
    @endif

    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ $blog->og_title ?? $blog->meta_title ?? $blog->title }}">
    <meta property="og:description" content="{{ $blog->og_description ?? $blog->meta_description ?? $blog->excerpt ?? '' }}">
    <meta property="og:url" content="{{ url('/blog/' . $blog->slug) }}">
    @if($blog->og_image)
        <meta property="og:image" content="{{ url(asset($blog->og_image)) }}">
    @elseif($blog->featured_image)
        <meta property="og:image" content="{{ url(asset($blog->featured_image)) }}">
    @endif
    <meta property="og:site_name" content="{{ config('app.name') }}">
    <meta property="article:published_time" content="{{ $blog->created_at->toIso8601String() }}">
    <meta property="article:modified_time" content="{{ $blog->updated_at->toIso8601String() }}">
    <meta property="article:author" content="{{ $blog->author->name ?? '' }}">
    @foreach($blog->categories as $category)
        <meta property="article:section" content="{{ $category->name }}">
    @endforeach
    @foreach($blog->tags as $tag)
        <meta property="article:tag" content="{{ $tag->name }}">
    @endforeach

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $blog->twitter_title ?? $blog->og_title ?? $blog->meta_title ?? $blog->title }}">
    <meta name="twitter:description" content="{{ $blog->twitter_description ?? $blog->og_description ?? $blog->meta_description ?? $blog->excerpt ?? '' }}">
    @if($blog->twitter_image)
        <meta name="twitter:image" content="{{ url(asset($blog->twitter_image)) }}">
    @elseif($blog->og_image)
        <meta name="twitter:image" content="{{ url(asset($blog->og_image)) }}">
    @elseif($blog->featured_image)
        <meta name="twitter:image" content="{{ url(asset($blog->featured_image)) }}">
    @endif
@endpush

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

    <div class="bg-sn-soft">
        @include($templateView)

        @if($relatedBlogs->count() > 0)
        <div class="container mx-auto px-4 py-8 max-w-6xl">
            <div class="mt-12 mb-10">
                <h3 class="text-2xl font-bold text-sn-heading mb-8">Related posts</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    @foreach($relatedBlogs as $relatedBlog)
                    <div class="bg-white rounded-xl overflow-hidden border border-sn-divider shadow-sm hover:shadow-md hover:border-sn-plum transition-all duration-300">
                        <a href="{{ route('blog.show', $relatedBlog->slug) }}" class="block">
                            <div class="h-64 overflow-hidden relative">
                                @if($relatedBlog->featured_image)
                                    <img src="{{ asset($relatedBlog->featured_image) }}" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" alt="{{ $relatedBlog->title }}">
                                @else
                                    <div class="w-full h-full bg-sn-lavender flex items-center justify-center">
                                        <i class="ri-article-line text-6xl text-sn-muted"></i>
                                    </div>
                                @endif
                            </div>
                        </a>
                        <div class="p-6">
                            <h4 class="text-xl font-bold text-sn-heading mb-3">
                                <a href="{{ route('blog.show', $relatedBlog->slug) }}" class="sn-link text-sn-plum hover:text-sn-gold transition-colors">{{ $relatedBlog->title }}</a>
                            </h4>
                            @if($relatedBlog->excerpt)
                            <p class="text-sn-muted text-sm mb-6 line-clamp-3">
                                {{ Str::limit($relatedBlog->excerpt, 120) }}
                            </p>
                            @endif
                            <div class="flex items-center gap-3">
                                @if($relatedBlog->author && $relatedBlog->author->profile && $relatedBlog->author->profile->profile_picture)
                                    <img src="{{ asset($relatedBlog->author->profile->profile_picture) }}" class="w-8 h-8 rounded-full" alt="{{ $relatedBlog->author->name }}">
                                @else
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($relatedBlog->author->name ?? 'Author') }}&background=random" class="w-8 h-8 rounded-full" alt="{{ $relatedBlog->author->name ?? 'Author' }}">
                                @endif
                                <span class="text-xs text-sn-muted">{{ $relatedBlog->author->name ?? 'Unknown' }} • {{ $relatedBlog->created_at->format('d/m/Y') }}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>

    <div class="relative w-full h-[600px] overflow-hidden mt-16">
        <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-2 mb-4">
                        <i class="ri-heart-fill text-sn-gold text-3xl"></i>
                        <span class="text-white font-bold text-2xl tracking-wide">Swingers Nest</span>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">Global Online Dating</h2>
                    <p class="text-gray-200 mb-8 text-lg">
                        Enjoy virtual connections with like-minded users all over the world
                    </p>
                    <div class="w-full flex flex-col items-center gap-4">
                        <a href="{{ route('register') }}" class="btn btn-primary w-full max-w-sm text-center text-lg py-4 px-8">
                            Join Now
                        </a>
                        <p class="text-xs text-gray-300 mt-4 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