@extends('layouts.app')

@section('title', 'بلاگ گلد آرا | مقالات فروشگاه ساز طلا و جواهر')
@section('meta_description', 'مقالات گلد آرا درباره فروش آنلاین طلا و جواهر، سئو، اعتمادسازی، طراحی ویترین و بهینه سازی مسیر مشاوره و فروش.')
@section('canonical', route('blog.index'))
@section('og_type', 'website')
@section('og_image', asset('theme/image/dummy-img-1920x1280.jpg'))

@push('structured-data')
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => [
                [
                    '@type' => 'ListItem',
                    'position' => 1,
                    'name' => 'خانه',
                    'item' => route('home'),
                ],
                [
                    '@type' => 'ListItem',
                    'position' => 2,
                    'name' => 'بلاگ',
                    'item' => route('blog.index'),
                ],
            ],
        ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
    </script>
@endpush

@push('styles')
    <style>
        .page-hero.blog-hero {
            background-image: url('{{ asset('theme/image/bg-hero.png') }}');
            background-position: bottom;
            min-height: 72vh;
        }
        .blog-index-shell {
            background: linear-gradient(180deg, rgba(245,249,255,.88) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
        }
        .blog-filter-copy {
            max-width: 620px;
        }
        .blog-card {
            height: 100%;
            border-radius: 28px;
            overflow: hidden;
            background: rgba(255,255,255,.96);
            border: 1px solid rgba(38,125,255,.12);
            box-shadow: 0 24px 60px -42px rgba(38,125,255,.2);
        }
        .blog-card img {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }
        .blog-card-body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1.5rem;
            height: 100%;
        }
        .blog-meta-chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            width: max-content;
            padding: .5rem .85rem;
            border-radius: 999px;
            background: rgba(38,125,255,.08);
            color: var(--accent-color-8);
            font-size: .9rem;
            font-weight: 700;
        }
        .blog-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: .9rem 1.25rem;
            color: var(--text-color-2);
        }
        .blog-card-meta span {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
        }
        .blog-pagination {
            display: flex;
            justify-content: center;
            gap: .85rem;
            margin-top: 1rem;
        }
        .blog-pagination .btn {
            min-width: 180px;
            justify-content: center;
        }
    </style>
@endpush

@section('content')
    <section class="section page-hero blog-hero bg-attach-cover">
        <div class="r-container d-flex flex-column gap-3 align-items-center justify-content-center h-100">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb scrollanimation animated fadeInUp adr-5">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">خانه</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">بلاگ</li>
                </ol>
            </nav>
            <span class="sub-heading">بلاگ گلد آرا</span>
            <h1 class="text-center">مقالات تخصصی برای <br><span class="accent-color-5">فروش حرفه ای طلا و جواهر</span></h1>
            <p class="text-center blog-filter-copy">در این بخش درباره ویترین آنلاین، سئو، اعتمادسازی، مسیر مشاوره و طراحی تجربه فروش برای برندهای طلا و جواهر می خوانید.</p>
        </div>
    </section>

    <section class="section blog-index-shell">
        <div class="r-container d-flex flex-column gap-4">
            <div class="d-flex flex-column gap-3 align-items-start">
                <span class="sub-heading">آخرین مقالات</span>
                <h2>بینش هایی که به فروشگاه های طلا و جواهر کمک می کنند دقیق تر تصمیم بگیرند</h2>
            </div>

            <div class="row row-cols-xl-3 row-cols-md-2 row-cols-1 g-4">
                @foreach ($blogPosts as $blogPost)
                    <div class="col">
                        <article class="blog-card">
                            <a href="{{ route('blog.show', $blogPost->slug) }}">
                                <img src="{{ asset($blogPost->cover_image ?? 'theme/image/dummy-img-1920x1280.jpg') }}" alt="{{ $blogPost->title }}">
                            </a>
                            <div class="blog-card-body">
                                <span class="blog-meta-chip">{{ $blogPost->category }}</span>
                                <div class="blog-card-meta">
                                    <span><i class="rtmicon rtmicon-calendar"></i>{{ $blogPost->formatted_published_date }}</span>
                                    <span><i class="rtmicon rtmicon-clock"></i>{{ $blogPost->reading_time }} دقیقه مطالعه</span>
                                </div>
                                <h3 class="h5 m-0">
                                    <a href="{{ route('blog.show', $blogPost->slug) }}" class="text-decoration-none text-color">{{ $blogPost->title }}</a>
                                </h3>
                                <p class="m-0">{{ $blogPost->excerpt }}</p>
                                <div class="mt-auto">
                                    <a href="{{ route('blog.show', $blogPost->slug) }}" class="btn btn-accent line d-flex flex-row gap-2 w-max-content">
                                        <span>مطالعه مقاله</span>
                                        <i class="rtmicon rtmicon-arrow-up-right"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>

            @if ($blogPosts->hasPages())
                <div class="blog-pagination">
                    @if ($blogPosts->onFirstPage())
                        <span class="btn btn-accent line disabled"><span>صفحه قبل</span></span>
                    @else
                        <a href="{{ $blogPosts->previousPageUrl() }}" class="btn btn-accent line"><span>صفحه قبل</span></a>
                    @endif

                    @if ($blogPosts->hasMorePages())
                        <a href="{{ $blogPosts->nextPageUrl() }}" class="btn btn-accent"><span>صفحه بعد</span></a>
                    @else
                        <span class="btn btn-accent disabled"><span>صفحه بعد</span></span>
                    @endif
                </div>
            @endif
        </div>
    </section>
@endsection