@extends('frontend.layouts.main')
@section('title', 'Blog & Artikel — ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')

{{-- PAGE HERO --}}
<div class="page-hero">
    <div class="container page-hero-inner">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}">Beranda</a></li>
                <li class="breadcrumb-item active">Blog & Artikel</li>
            </ol>
        </nav>
        <h1>Blog &amp; Artikel</h1>
        <p>Wawasan, tips karir, dan berita terkini seputar dunia pelatihan kerja</p>
    </div>
</div>

{{-- ARTICLES --}}
<section style="padding:64px 0;">
    <div class="container">
        <div class="row g-4">
            @forelse($articles as $idx => $article)
            @php
                $imgPath   = $article->image ? 'storage/blog/'.$article->image : null;
                $imgExists = $imgPath && file_exists(public_path($imgPath));
                $readTime  = max(1, ceil(str_word_count(strip_tags($article->content)) / 200));
            @endphp
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ ($idx%3)*80 }}">
                <div class="blog-card h-100">
                    <div class="blog-card-img" style="height:205px;position:relative;">
                        <img src="{{ $imgExists ? asset($imgPath) : 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&h=400&fit=crop' }}"
                             alt="{{ $article->title }}" style="width:100%;height:100%;object-fit:cover;">
                        @if($article->is_featured ?? false)
                        <div style="position:absolute;top:10px;left:10px;">
                            <span class="tag tag-amber"><i class="fas fa-star"></i> Featured</span>
                        </div>
                        @endif
                    </div>
                    <div class="blog-card-body">
                        <div class="blog-card-meta">
                            <i class="fas fa-calendar me-1"></i>{{ $article->created_at->format('d M Y') }}
                            &nbsp;&middot;&nbsp;
                            <i class="fas fa-clock me-1"></i>{{ $readTime }} mnt baca
                        </div>
                        <a href="{{ route('frontend.blog-detail', $article->slug) }}" class="blog-card-title">
                            {{ Str::limit($article->title, 68) }}
                        </a>
                        <p class="blog-card-excerpt">{{ Str::limit(strip_tags($article->content), 115) }}</p>
                        <div style="display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--c-100);">
                            <div style="display:flex;align-items:center;gap:7px;">
                                <div style="width:26px;height:26px;background:var(--c-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;">
                                    <i class="fas fa-user" style="color:#fff;font-size:10px;"></i>
                                </div>
                                <span style="font-size:12px;color:var(--c-500);">{{ $article->author ?? 'Admin' }}</span>
                            </div>
                            <a href="{{ route('frontend.blog-detail', $article->slug) }}" class="blog-read-more">
                                Baca <i class="fas fa-arrow-right" style="font-size:10px;"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center py-5">
                <div style="width:76px;height:76px;background:var(--c-blue-xs);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;">
                    <i class="fas fa-newspaper" style="color:var(--c-blue);font-size:1.8rem;"></i>
                </div>
                <h4 style="color:var(--c-700);margin-bottom:7px;">Belum Ada Artikel</h4>
                <p style="color:var(--c-400);font-size:13.5px;">Artikel akan segera hadir. Pantau terus!</p>
            </div>
            @endforelse
        </div>

        @if($articles->hasPages())
        <div class="d-flex justify-content-center mt-5" data-aos="fade-up">
            {{ $articles->links() }}
        </div>
        @endif
    </div>
</section>

{{-- CTA --}}
<section style="padding:60px 0;background:var(--c-navy);" data-aos="fade-up">
    <div class="container">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <h2 style="font-size:clamp(1.35rem,3vw,1.85rem);font-weight:800;color:#fff;margin-bottom:9px;">
                    Ingin Tahu Lebih Tentang Program?
                </h2>
                <p style="color:rgba(255,255,255,.6);font-size:15px;margin:0;">Lihat program pelatihan lengkap kami dan mulai perjalanan karir Anda.</p>
            </div>
            <div class="col-lg-4 d-flex gap-3 justify-content-lg-end flex-wrap">
                <a href="{{ route('frontend.programs') }}" class="btn-corp btn-corp-lg btn-white">
                    <i class="fas fa-book-open"></i> Lihat Program
                </a>
            </div>
        </div>
    </div>
</section>

@endsection