@extends('frontend.layouts.master')

@section('title', __('front.blog.page_title') . ' - Novalynk')

@section('content')
<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
                <h1 class="section-title">{{ __('front.blog.page_title') }}</h1>
                <p class="section-subtitle mx-auto">{{ __('front.blog.page_subtitle') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Blog Section -->
<section class="section-padding">
    <div class="container">
        <div class="row g-4">
            @foreach($blogs as $index => $blog)
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                <div class="blog-card">
                    <div class="blog-image">
                        <img src="{{ $blog->thumbnail ? Storage::url($blog->thumbnail) : 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop' }}" alt="{{ $blog->title }}">
                    </div>
                    <div class="blog-content">
                        <span class="blog-category">{{ $blog->category->name ?? __('front.common.uncategorized') }}</span>
                        <h3 class="blog-title">
                            <a href="{{ route('blog.detail', $blog->slug) }}">{{ $blog->title }}</a>
                        </h3>
                        <p style="color: var(--gray-500); font-size: 0.9rem; margin-bottom: 1rem;">
                            {{ $blog->short_description ?? Str::limit(strip_tags($blog->content), 100) }}
                        </p>
                        <div class="blog-meta">
                            <span><i class="fa-regular fa-calendar"></i> {{ optional($blog->published_at ?? $blog->created_at)->format('d M Y') }}</span>
                            <span><i class="fa-regular fa-eye"></i> {{ $blog->views }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        @if($blogs->hasPages())
        <div class="mt-5">
            {{ $blogs->links() }}
        </div>
        @endif
        
        @if(count($blogs) == 0)
        <div class="text-center py-5">
            <i class="fa-regular fa-newspaper" style="font-size: 3rem; color: var(--gray-300);"></i>
            <p class="mt-3" style="color: var(--gray-500);">{{ __('front.blog.empty') }}</p>
        </div>
        @endif
    </div>
</section>

<!-- CTA -->
<section class="cta-section section-padding">
    <div class="container">
        <div class="cta-content text-center">
            <h2 class="cta-title">{{ __('front.blog.cta_title') }}</h2>
            <p class="cta-desc mx-auto">{{ __('front.blog.cta_desc') }}</p>
            <a href="{{ route('contact') }}" class="btn btn-light btn-lg">{{ __('front.common.contact_team') }}</a>
        </div>
    </div>
</section>
@endsection