@extends('layouts.app')

@section('title', 'Journal')

@php
    $posts = collect(config('shop.posts'));
    $featured = $posts->first();
    $rest = $posts->slice(1);
@endphp

@section('content')

    <x-breadcrumb :items="[['label' => 'Journal']]" />

    {{-- Page hero --}}
    <section class="bg-cream-100 py-14 text-center lg:py-20">
        <div class="container-shop max-w-2xl">
            <p class="eyebrow mb-3">The Divne journal</p>
            <h1 class="font-serif text-4xl font-medium sm:text-5xl">Skincare, Simplified</h1>
            <p class="mt-4 leading-relaxed text-ink-700">Ingredient deep-dives, honest routines and seasonal care — written by our formulators, not marketers.</p>
        </div>
    </section>

    <section class="py-14 lg:py-20">
        <div class="container-shop">

            {{-- Featured post --}}
            <article class="group grid items-center gap-8 border border-cream-200 bg-cream-50 lg:grid-cols-2">
                <a href="{{ route('blog.show', $featured['slug']) }}" class="block overflow-hidden">
                    <img src="{{ asset($featured['image']) }}" alt="{{ $featured['title'] }}" width="1200" height="800"
                        class="aspect-[3/2] w-full object-cover transition-transform duration-500 group-hover:scale-105">
                </a>
                <div class="px-8 pb-10 lg:py-10 lg:pr-12">
                    <p class="text-[11px] font-semibold tracking-[0.2em] text-terra-500 uppercase">Featured &middot; {{ $featured['category'] }} &middot; {{ $featured['read'] }}</p>
                    <h2 class="mt-3 font-serif text-2xl font-medium sm:text-3xl">
                        <a href="{{ route('blog.show', $featured['slug']) }}" class="transition-colors hover:text-moss-600">{{ $featured['title'] }}</a>
                    </h2>
                    <p class="mt-3 leading-relaxed text-ink-700">{{ $featured['excerpt'] }}</p>
                    <p class="mt-4 text-xs text-ink-400">{{ \Carbon\Carbon::parse($featured['date'])->format('F j, Y') }}</p>
                    <a href="{{ route('blog.show', $featured['slug']) }}" class="btn-outline mt-6 !px-6 !py-3">Read Article</a>
                </div>
            </article>

            {{-- Post grid — repeat demo posts to fill the grid --}}
            <div class="mt-14 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($rest->concat($posts)->take(6) as $post)
                    <article class="group">
                        <a href="{{ route('blog.show', $post['slug']) }}" class="block overflow-hidden">
                            <img src="{{ asset($post['image']) }}" alt="{{ $post['title'] }}" width="1200" height="800"
                                class="aspect-[3/2] w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
                        </a>
                        <p class="mt-4 text-[11px] font-semibold tracking-[0.2em] text-terra-500 uppercase">{{ $post['category'] }} &middot; {{ $post['read'] }}</p>
                        <h3 class="mt-2 font-serif text-xl font-medium">
                            <a href="{{ route('blog.show', $post['slug']) }}" class="transition-colors hover:text-moss-600">{{ $post['title'] }}</a>
                        </h3>
                        <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ink-500">{{ $post['excerpt'] }}</p>
                        <p class="mt-3 text-xs text-ink-400">{{ \Carbon\Carbon::parse($post['date'])->format('F j, Y') }}</p>
                    </article>
                @endforeach
            </div>

            {{-- Pagination (static) --}}
            <nav class="mt-16 flex items-center justify-center gap-2" aria-label="Pagination">
                <span class="flex h-10 w-10 items-center justify-center bg-ink-900 text-sm font-semibold text-white" aria-current="page">1</span>
                <a href="{{ route('blog') }}" class="flex h-10 w-10 items-center justify-center border border-sand-300 text-sm text-ink-700 transition-colors hover:bg-cream-100">2</a>
                <a href="{{ route('blog') }}" class="flex h-10 w-10 items-center justify-center border border-sand-300 text-ink-700 transition-colors hover:bg-cream-100" aria-label="Next page"><x-icon name="chevron-right" class="h-4 w-4" /></a>
            </nav>
        </div>
    </section>

@endsection