@extends('layouts.app')

@section('title', 'Blog & Panduan SEO')
@section('body-class', 'pt-24')
@section('nav-dropdown-active', 'bg-brand-soft/50')
@section('nav-blog-active', 'bg-brand-maroon text-white')

@section('content')
<div class="pt-8 pb-20 px-6 max-w-7xl mx-auto">
    
    <div class="mb-10 border-b border-brand-soft pb-6">
        <h1 class="text-4xl font-bold text-brand-maroon mb-2">Blog & Panduan SEO</h1>
        <p class="text-gray-500">Berita terbaru, tips strategi SEO, dan wawasan digital marketing.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
        
        <div class="lg:col-span-2 space-y-10">
            
            @php
                // Ambil artikel utama (Headline) dan hapus dari koleksi untuk loop di bawah
                $headline = $blogs->shift();
            @endphp

            @if($headline)
            <article class="bg-white rounded-2xl shadow-sm overflow-hidden border border-brand-soft hover:shadow-lg transition duration-300 group">
                <div class="relative h-80 overflow-hidden">
                    <img src="{{ Str::startsWith($headline->thumbnail, 'http') ? $headline->thumbnail : asset($headline->thumbnail) }}" alt="{{ $headline->title }}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
                    <span class="absolute top-4 left-4 bg-brand-maroon text-white text-xs font-bold px-3 py-1 rounded-full uppercase">Hot Topic</span>
                </div>
                <div class="p-8">
                    <div class="flex items-center gap-4 text-sm text-gray-400 mb-3">
                        <span><i class="fa-regular fa-calendar mr-1"></i> {{ $headline->created_at->format('d M Y') }}</span>
                        <span><i class="fa-regular fa-user mr-1"></i> Admin Fadbacklink</span>
                        <span><i class="fa-regular fa-eye mr-1"></i> {{ $headline->view_count }} Views</span>
                    </div>
                    <h2 class="text-3xl font-bold text-gray-800 mb-4 group-hover:text-brand-accent transition">
                        {{ $headline->title }}
                    </h2>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        {{ Str::limit(strip_tags($headline->content), 200) }}
                    </p>
                    <a href="{{ route('blog.show', $headline->slug) }}" class="inline-flex items-center text-brand-maroon font-bold hover:text-brand-accent transition">Baca Selengkapnya <i class="fa-solid fa-arrow-right ml-2"></i></a>
                </div>
            </article>
            @endif
            
            <h3 class="text-2xl font-bold text-brand-maroon border-l-4 border-brand-accent pl-4">Berita Terbaru</h3>
            
            <div class="grid md:grid-cols-2 gap-6">
                @foreach($blogs as $article)
                <article class="bg-white rounded-xl shadow-sm border border-brand-soft overflow-hidden hover:-translate-y-1 transition duration-300">
                    <img src="{{ Str::startsWith($article->thumbnail, 'http') ? $article->thumbnail : asset($article->thumbnail) }}" alt="{{ $article->title }}" class="h-48 w-full object-cover">
                    <div class="p-6">
                        <span class="text-brand-accent text-xs font-bold uppercase tracking-wider">{{ $article->is_published ? 'Published' : 'Draft' }}</span>
                        <h4 class="text-xl font-bold text-gray-800 mt-2 mb-3 hover:text-brand-maroon cursor-pointer line-clamp-2">
                            <a href="{{ route('blog.show', $article->slug) }}">{{ $article->title }}</a>
                        </h4>
                        <p class="text-sm text-gray-500 mb-4">{{ Str::limit(strip_tags($article->content), 80) }}</p>
                        <span class="text-xs text-gray-400">{{ ceil(strlen(strip_tags($article->content)) / 1000) }} Menit Baca</span>
                    </div>
                </article>
                @endforeach
            </div>
            
            <div class="flex justify-center gap-2 mt-8">
                {{ $blogs->links() }}
            </div>
            
        </div>

        <div class="lg:col-span-1 space-y-8">
            
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-brand-soft">
                <h3 class="font-bold text-gray-800 mb-4">Cari Artikel</h3>
                <div class="relative">
                    <input type="text" placeholder="Ketik kata kunci..." class="w-full bg-gray-50 border border-brand-soft rounded-lg py-3 px-4 focus:outline-none focus:border-brand-maroon">
                    <button class="absolute right-3 top-3 text-gray-400 hover:text-brand-maroon"><i class="fa-solid fa-magnifying-glass"></i></button>
                </div>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-brand-soft">
                <h3 class="font-bold text-gray-800 mb-4 border-b border-brand-soft pb-2">Kategori Populer</h3>
                <ul class="space-y-3">
                    <li><a href="#" class="flex justify-between text-gray-600 hover:text-brand-maroon transition"><span>SEO Basics</span> <span class="bg-gray-100 px-2 rounded-full text-xs py-1">12</span></a></li>
                    <li><a href="#" class="flex justify-between text-gray-600 hover:text-brand-maroon transition"><span>Link Building</span> <span class="bg-gray-100 px-2 rounded-full text-xs py-1">8</span></a></li>
                    <li><a href="#" class="flex justify-between text-gray-600 hover:text-brand-maroon transition"><span>Content Marketing</span> <span class="bg-gray-100 px-2 rounded-full text-xs py-1">5</span></a></li>
                </ul>
            </div>

            <div class="bg-gradient-to-br from-brand-maroon to-brand-accent p-6 rounded-2xl text-white text-center">
                <h3 class="font-bold text-xl mb-3">Butuh Backlink Berkualitas?</h3>
                <p class="text-sm opacity-90 mb-6">Tingkatkan ranking website Anda dengan ribuan media nasional.</p>
                <a href="{{ route('login') }}" class="inline-block bg-white text-brand-maroon px-6 py-2 rounded-full font-bold text-sm hover:bg-brand-soft transition">Cek Layanan</a>
            </div>

        </div>
    </div>

</div>
@endsection