@extends('layouts.app')
@section('title', 'Blog — Japan Life, JLPT Tips, Visa Guide | Soyogi')

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-newspaper"></i> Blog</div>
    <span class="jp-sub">日本情報センター</span>
    <h1>Japan Resource Center</h1>
    <p>JLPT tips, Japan life guide, visa process, career advice — everything in one place.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Blog</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">
        <!-- Categories -->
        <div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:48px;" data-aos="fade-up">
            @foreach(['All','JLPT Tips','Visa Guide','Japan Life','Career in Japan','Language Learning','Student Stories','Cultural Insights'] as $cat)
            <a href="#" style="padding:8px 20px;border-radius:100px;border:2px solid {{ $cat=='All'?'var(--red)':'var(--gray-200)' }};background:{{ $cat=='All'?'var(--red)':'white' }};color:{{ $cat=='All'?'white':'var(--gray-600)' }};font-size:13px;font-weight:600;text-decoration:none;transition:all 0.2s;" onmouseover="if(this.style.background!='var(--red)'){this.style.background='var(--red)';this.style.color='white';this.style.borderColor='var(--red)'}" onmouseout="if(this.dataset.active!='1'){this.style.background='white';this.style.color='var(--gray-600)';this.style.borderColor='var(--gray-200)'}">
                {{ $cat }}
            </a>
            @endforeach
        </div>

        @php $featured = $posts->first(); $rest = $posts->skip(1); @endphp

        <!-- Featured Post -->
        @if($featured)
        <div style="background:linear-gradient(135deg,var(--navy),#1e3a5f);border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px;" data-aos="fade-up">
            <div>
                <span style="background:var(--red);color:white;font-size:11px;font-weight:700;padding:5px 14px;border-radius:100px;margin-bottom:16px;display:inline-block;">FEATURED</span>
                <h2 style="font-size:28px;font-weight:800;color:white;margin-bottom:12px;line-height:1.3;">{{ $featured->title }}</h2>
                <p style="color:rgba(255,255,255,0.65);font-size:14px;line-height:1.7;margin-bottom:20px;">{{ $featured->excerpt ?: Str::limit(strip_tags($featured->content), 160) }}</p>
                <div style="display:flex;gap:16px;font-size:13px;color:rgba(255,255,255,0.4);margin-bottom:24px;">
                    <span><i class="fas fa-calendar" style="margin-right:4px;"></i>{{ ($featured->published_at ?? $featured->created_at)->format('M Y') }}</span>
                    <span><i class="fas fa-clock" style="margin-right:4px;"></i>{{ $featured->readTime() }} min read</span>
                    <span><i class="fas fa-user" style="margin-right:4px;"></i>{{ $featured->author ?: 'Soyogi' }}</span>
                </div>
                <a href="{{ route('blog.post', $featured->slug) }}" class="btn-primary">Read Article <i class="fas fa-arrow-right"></i></a>
            </div>
            <div style="aspect-ratio:16/9;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                @if($featured->image)
                <img src="{{ asset('uploads/blog/'.$featured->image) }}" style="width:100%;height:100%;object-fit:cover;">
                @else
                <i class="fas fa-newspaper" style="font-size:60px;color:rgba(255,255,255,0.15);"></i>
                @endif
            </div>
        </div>
        @endif

        <!-- Blog Grid -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:28px;">
            @forelse($rest as $blog)
            <a href="{{ route('blog.post', $blog->slug) }}" style="background:white;border-radius:16px;overflow:hidden;border:1px solid var(--gray-200);transition:all 0.3s;text-decoration:none;color:inherit;display:block;" data-aos="fade-up" data-aos-delay="{{ $loop->index * 60 }}" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 16px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                @if($blog->image)
                <div style="height:180px;overflow:hidden;"><img src="{{ asset('uploads/blog/'.$blog->image) }}" style="width:100%;height:100%;object-fit:cover;"></div>
                @else
                <div style="height:180px;background:linear-gradient(135deg,var(--navy),#1e3a5f);display:flex;align-items:center;justify-content:center;">
                    <i class="fas fa-newspaper" style="font-size:48px;color:rgba(255,255,255,0.15);"></i>
                </div>
                @endif
                <div style="padding:24px;">
                    <span style="background:rgba(220,38,38,0.1);color:var(--red);font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.5px;">{{ $blog->category ?: 'Blog' }}</span>
                    <h3 style="font-size:16px;font-weight:700;color:var(--navy);margin:10px 0 8px;line-height:1.4;">{{ $blog->title }}</h3>
                    <p style="font-size:13px;color:var(--gray-600);line-height:1.6;margin-bottom:16px;">{{ $blog->excerpt ?: Str::limit(strip_tags($blog->content),120) }}</p>
                    <div style="display:flex;gap:14px;font-size:12px;color:var(--gray-600);">
                        <span><i class="fas fa-calendar" style="color:var(--red);margin-right:4px;"></i>{{ ($blog->published_at ?? $blog->created_at)->format('M Y') }}</span>
                        <span><i class="fas fa-clock" style="color:var(--red);margin-right:4px;"></i>{{ $blog->readTime() }} min</span>
                    </div>
                </div>
            </a>
            @empty
            {{-- No blog posts yet --}}
            <div style="grid-column:1/-1;text-align:center;padding:60px;background:white;border-radius:16px;border:1px solid var(--gray-200);">
                <i class="fas fa-newspaper" style="font-size:48px;color:#cbd5e1;margin-bottom:16px;display:block;"></i>
                <p style="color:var(--gray-600);">Blog posts will appear here. Add them from the admin panel.</p>
                <a href="{{ route('admin.blog.create') }}" class="btn-primary" style="margin-top:16px;display:inline-block;">+ Add First Post</a>
            </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($posts->hasPages())
        <div style="margin-top:48px;display:flex;justify-content:center;">
            {{ $posts->links() }}
        </div>
        @endif
    </div>
</section>
@endsection