@extends('layouts.public')
@section('title', 'Home')
@section('content')

<section class="hero">
    <div class="container text-center">
        <h1>Where ideas <span class="accent">become legacy</span></h1>
        <p class="lead">A premium blog network curated by passionate authors, read by thoughtful minds.</p>
        <form action="{{ route('blogs.index') }}" method="GET" class="hero-search mx-auto">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search blogs, topics, authors…">
                <button class="btn">Search</button>
            </div>
        </form>
    </div>
</section>

<section class="container py-5">
    <div class="section-title">
        <div class="ornament">⊹ ⊹ ⊹</div>
        <h2>Featured Stories</h2>
        <span class="divider-gold"></span>
    </div>

    <div class="row g-4">
        @forelse($featured as $blog)
        <div class="col-md-4">
            <article class="blog-card">
                <a href="{{ route('blogs.show', $blog->slug) }}"><img src="{{ $blog->featuredImageUrl() }}" class="blog-card-img" alt=""></a>
                <div class="blog-card-body">
                    @if($blog->category)<span class="blog-card-category">{{ $blog->category->name }}</span>@endif
                    <h3><a href="{{ route('blogs.show', $blog->slug) }}">{{ $blog->title }}</a></h3>
                    <p class="text-muted">{{ \Illuminate\Support\Str::limit($blog->excerpt ?? strip_tags($blog->content), 110) }}</p>
                    <div class="blog-card-meta">
                        <span>By <a href="{{ route('blogs.author', $blog->author->username) }}">{{ $blog->author->name }}</a></span>
                        <span>{{ $blog->readingTime() }} min read</span>
                    </div>
                </div>
            </article>
        </div>
        @empty
        <div class="col-12 text-center text-muted py-5">No blogs published yet. Check back soon.</div>
        @endforelse
    </div>
</section>

@if($latest->isNotEmpty())
<section class="py-5" style="background: white;">
    <div class="container">
        <div class="section-title">
            <h2>Latest from the Press</h2>
            <span class="divider-gold"></span>
        </div>
        <div class="row g-4">
            @foreach($latest as $blog)
            <div class="col-md-6 col-lg-4">
                <article class="blog-card">
                    <a href="{{ route('blogs.show', $blog->slug) }}"><img src="{{ $blog->featuredImageUrl() }}" class="blog-card-img" alt=""></a>
                    <div class="blog-card-body">
                        @if($blog->category)<span class="blog-card-category">{{ $blog->category->name }}</span>@endif
                        <h3><a href="{{ route('blogs.show', $blog->slug) }}">{{ \Illuminate\Support\Str::limit($blog->title, 70) }}</a></h3>
                        <div class="blog-card-meta">
                            <span>{{ $blog->author->name }}</span>
                            <span>{{ $blog->published_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                </article>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-5"><a href="{{ route('blogs.index') }}" class="btn btn-primary">Browse All Blogs</a></div>
    </div>
</section>
@endif

@if($categories->isNotEmpty())
<section class="container py-5">
    <div class="section-title"><h2>Explore Topics</h2><span class="divider-gold"></span></div>
    <div class="row g-3">
        @foreach($categories as $cat)
        <div class="col-md-3 col-6">
            <a href="{{ route('blogs.category', $cat->slug) }}" class="d-block text-center p-4" style="background: white; border:1px solid var(--border); border-radius:6px; transition: all .2s;">
                <h4 class="mb-1">{{ $cat->name }}</h4>
                <small class="text-muted">{{ $cat->blogs_count }} posts</small>
            </a>
        </div>
        @endforeach
    </div>
</section>
@endif

@if($packages->isNotEmpty())
<section class="container py-5">
    <div class="section-title"><h2>Publish With Us</h2><p class="text-muted">Lifetime hosting. One-time fee. Your story online forever.</p><span class="divider-gold"></span></div>
    <div class="row g-4 justify-content-center">
        @foreach($packages as $package)
            <div class="col-md-4">
                <div class="package-card {{ $package->is_featured ? 'featured' : '' }}">
                    <div class="package-name">{{ $package->name }}</div>
                    <div class="package-blogs">{{ $package->blogs_count }} {{ $package->blogs_count === 1 ? 'blog' : 'blogs' }}</div>
                    <div class="package-price">${{ number_format($package->price, 0) }}<small>/once</small></div>
                    <a href="{{ route('packages.public') }}" class="btn btn-{{ $package->is_featured ? 'accent' : 'outline-primary' }} w-100">Choose Plan</a>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

@endsection