@extends('layouts.app')

@section('title', 'Blogs | Angel Care Institute')

@section('content')
<main class="bg-gray-50">
    <section class="relative pt-32 pb-20 overflow-hidden">
        <div class="absolute inset-0" style="background:#027fc5;"></div>
        <div class="relative z-10 container mx-auto px-4 lg:px-8 text-white">
            <div class="max-w-3xl">
                <nav class="flex items-center gap-2 text-sm text-white/70 mb-6">
                    <a href="{{ route('home') }}" class="hover:text-white">Home</a>
                    <i class="fas fa-chevron-right text-xs"></i>
                    <span class="text-white">Blogs</span>
                </nav>
                <span class="inline-flex items-center px-4 py-2 bg-white/15 border border-white/20 rounded-full text-sm font-semibold mb-5">
                    <i class="fas fa-newspaper mr-2"></i>Insights and updates
                </span>
                <h1 class="text-4xl lg:text-6xl font-extrabold leading-tight mb-5">Caregiving Career Blogs</h1>
                <p class="text-lg lg:text-xl text-blue-100 leading-relaxed">Read practical guidance on training, visas, destinations, language preparation, and international caregiving careers.</p>
            </div>
        </div>
    </section>

    <section class="py-20">
        <div class="container mx-auto px-4 lg:px-8">
            @if($blogs->isEmpty())
            <div class="bg-white rounded-2xl border border-gray-100 p-12 text-center shadow-sm">
                <i class="fas fa-newspaper text-5xl text-primary-500 mb-4"></i>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">Blogs coming soon</h2>
                <p class="text-gray-600">Helpful articles and career updates will be published here shortly.</p>
            </div>
            @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($blogs as $i => $post)
                @php
                    $wordCount = str_word_count(strip_tags($post->content ?? ''));
                    $readTime = max(1, (int) ceil($wordCount / 200));
                @endphp
                <article class="group bg-white rounded-3xl shadow-md hover:shadow-2xl overflow-hidden transition-all duration-300 hover:-translate-y-2 flex flex-col" data-aos="fade-up" data-aos-delay="{{ ($i % 3) * 100 }}">
                    <div class="relative h-52 overflow-hidden">
                        <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy">
                        <div class="absolute top-4 left-4">
                            <span class="px-3 py-1 bg-primary-100 text-primary-600 text-xs font-bold rounded-full">Blog</span>
                        </div>
                    </div>
                    <div class="p-6 flex flex-col flex-1">
                        <div class="flex items-center gap-3 text-xs text-gray-400 mb-3">
                            <span><i class="fas fa-calendar-alt mr-1"></i>{{ optional($post->published_at)->format('M j, Y') }}</span>
                            <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
                            <span><i class="fas fa-clock mr-1"></i>{{ $readTime }} min read</span>
                        </div>
                        <h2 class="text-lg font-extrabold text-gray-900 mb-3 leading-snug group-hover:text-primary-600 transition-colors">
                            <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                        </h2>
                        <p class="text-sm text-gray-500 leading-relaxed mb-5">{{ Str::limit($post->excerpt, 125) }}</p>
                        <div class="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto gap-4">
                            <span class="text-xs font-semibold text-gray-600 truncate">{{ $post->author->name ?? 'Angel Care Team' }}</span>
                            <a href="{{ route('blog.show', $post->slug) }}" class="inline-flex items-center gap-1 text-sm font-semibold text-primary-600 hover:text-primary-700 whitespace-nowrap">
                                Read More <i class="fas fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $blogs->links() }}
            </div>
            @endif
        </div>
    </section>
</main>
@endsection