@extends('frontend.main_master')

@section('title', 'Blog Astrológico | ' . t('site-title'))
@section('meta_description', 'Descubre los artículos de Astro Wise. Artículos actualizados sobre astrología, natal chart, signos zodiacales y transits planetarios.')
@section('meta_keywords', 'blog astrologia, articulos natal chart, zodiac signs, astrologia moderna, astro sabio blog')

@push('schema')
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('index')], ['name' => 'Blog', 'url' => route('blog.index')]]" />
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/blog-page.css') }}">
@endpush

@section('content')
<div class="blog-page py-5">
    <div class="container">
        <div class="blog-hero text-center mb-5">
            <h1 class="blog-title">Blog de Astro Wise</h1>
            <p class="blog-subtitle mb-0">Artículos, análisis y guías profundas sobre astrología contemporánea.</p>
        </div>

        @if ($blogs->count() > 0)
            <div class="row g-4">
                @foreach ($blogs as $blog)
                    <div class="col-12 col-md-6 col-xl-4">
                        <article class="blog-card h-100">
                            <a href="{{ route('blog.show', $blog) }}" class="blog-card-image-link" aria-label="{{ $blog->title }}">
                                @if (!empty($blog->image))
                                    <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="blog-card-image">
                                @else
                                    <div class="blog-card-image blog-card-image-placeholder">Astro Wise</div>
                                @endif
                            </a>

                            <div class="blog-card-body">
                                <div class="blog-meta d-flex flex-wrap align-items-center gap-2 mb-2">
                                    <span class="blog-date">{{ optional($blog->created_at)->translatedFormat('d M Y') }}</span>
                                    @if ($blog->category)
                                        <span class="blog-category">{{ $blog->category->name }}</span>
                                    @endif
                                </div>

                                <h2 class="blog-card-title">
                                    <a href="{{ route('blog.show', $blog) }}">{{ $blog->title }}</a>
                                </h2>

                                <p class="blog-card-excerpt">
                                    {{ \Illuminate\Support\Str::limit(strip_tags((string) $blog->content), 170) }}
                                </p>

                                <a href="{{ route('blog.show', $blog) }}" class="blog-read-more">Leer Más</a>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>

            <div class="d-flex justify-content-center mt-5">
                {{ $blogs->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <p class="text-muted mb-0">Aún no hay publicaciones disponibles.</p>
            </div>
        @endif
    </div>
</div>
@endsection