{{-- resources/views/pages/blog/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Blog — KiruDev Technologies')

@section('content')

<section style="padding:6rem 0 3rem; background:#fff;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <p class="eyebrow mb-3">Insights & Updates</p>
        <h1 style="font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#0f0f14;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;">The KiruDev Blog</h1>
        <p style="font-size:1rem;color:#6b6b7a;max-width:36rem;line-height:1.75;">Engineering insights, product updates, and tech deep-dives from our team.</p>
    </div>
</section>

<section style="padding:3rem 0 5rem; background:#f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        {{-- Category filters --}}
        @if($categories->count())
        <div class="flex flex-wrap gap-2 mb-8">
            <a href="{{ route('blog.index') }}" class="tag {{ !request('category') ? 'tag-accent' : '' }}">All</a>
            @foreach($categories as $cat)
            <a href="{{ route('blog.index', ['category'=>$cat]) }}" class="tag {{ request('category')===$cat ? 'tag-accent' : '' }}">{{ $cat }}</a>
            @endforeach
        </div>
        @endif

        @if($posts->count())
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($posts as $post)
            <article class="card reveal" style="display:flex;flex-direction:column;">
                @if($post->cover_image)
                <div style="aspect-ratio:16/9;overflow:hidden;">
                    <img src="{{ $post->cover_image }}" alt="{{ $post->title }}" style="width:100%;height:100%;object-fit:cover;transition:transform 0.4s;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
                </div>
                @else
                <div style="aspect-ratio:16/9;background:linear-gradient(135deg,#eef0ff,#e6f5f0);display:flex;align-items:center;justify-content:center;">
                    <span style="font-family:'Fraunces',serif;font-size:2.5rem;color:#2d3aff;opacity:0.2;">{{ substr($post->title,0,1) }}</span>
                </div>
                @endif
                <div style="padding:1.5rem;display:flex;flex-direction:column;flex:1;">
                    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
                        @if($post->category)<span class="tag tag-accent">{{ $post->category }}</span>@endif
                        <span style="font-size:0.7rem;color:#9ca3af;">{{ $post->read_time }} min read</span>
                    </div>
                    <h2 style="font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:#0f0f14;margin-bottom:0.5rem;line-height:1.35;">
                        <a href="{{ route('blog.show', $post) }}" style="text-decoration:none;color:inherit;transition:color 0.2s;" onmouseover="this.style.color='#2d3aff'" onmouseout="this.style.color='inherit'">{{ $post->title }}</a>
                    </h2>
                    <p style="font-size:0.82rem;color:#6b6b7a;line-height:1.6;flex:1;margin-bottom:1.25rem;">{{ Str::limit($post->excerpt, 110) }}</p>
                    <div style="display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid #f3f4f6;margin-top:auto;">
                        <div style="display:flex;align-items:center;gap:0.5rem;">
                            @if($post->author)
                            <div style="width:1.75rem;height:1.75rem;border-radius:6px;background:#eef0ff;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#2d3aff;">{{ substr($post->author->name,0,2) }}</div>
                            <span style="font-size:0.75rem;color:#6b7280;">{{ $post->author->name }}</span>
                            @endif
                        </div>
                        <span style="font-size:0.72rem;color:#9ca3af;">{{ $post->published_at->format('d M Y') }}</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
        <div class="mt-8">{{ $posts->links() }}</div>
        @else
        <div style="text-align:center;padding:5rem 1rem;">
            <p style="font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#0f0f14;margin-bottom:0.5rem;">No posts yet</p>
            <p style="color:#9ca3af;">Check back soon for insights from the KiruDev team.</p>
        </div>
        @endif
    </div>
</section>

@endsection