Blog

@props([
    'eyebrow'      => 'The Journal',
    'heading'      => 'Stories from the studio',
    'subheading'   => 'Field notes on craft, material, and the considered details behind every collection.',
    'viewAllHref'  => '#',
    'viewAllLabel' => 'View all stories',
    'readMoreLabel' => 'Read more',
    'posts'        => null,
])

{{--
    blog-07 — "Editorial" / Monogram "Journal" featured-blog grid.
    A wide-tracked uppercase eyebrow + light font-heading section title, then a
    refined grid of article cards: each a token `bg-muted` aspect placeholder, an
    uppercase wide-tracked category tag, a font-heading title, a quiet date/read-time
    meta line, a short excerpt, and a "Read more" link (chevron flips under RTL).
    A family member of the blog-* set (shares the `blog-featured` root data-slot).
    Static Blade. Composes <x-ui.card>, <x-ui.badge>, <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
@php
    $posts ??= [
        [
            'category' => 'Atelier',
            'title' => 'The quiet craft behind a structured leather bag',
            'excerpt' => 'Inside the workshop where each panel is cut, burnished, and stitched by hand — and why slower production makes for a piece that ages well.',
            'href' => '#',
            'date' => 'June 12, 2026',
            'datetime' => '2026-06-12',
            'readTime' => '6 min read',
            'alt' => 'Hands finishing the edge of a leather bag at a workbench',
        ],
        [
            'category' => 'Materials',
            'title' => 'Vegetable-tanned leather and the patina of time',
            'excerpt' => 'A look at the traditional tanning process we choose over speed, and how it gives every surface its own evolving character.',
            'href' => '#',
            'date' => 'June 4, 2026',
            'datetime' => '2026-06-04',
            'readTime' => '5 min read',
            'alt' => 'Close-up of richly grained tanned leather swatches',
        ],
        [
            'category' => 'Edit',
            'title' => 'Building a wardrobe of fewer, better things',
            'excerpt' => 'Our case for the considered edit — choosing pieces designed to carry from one season into the next rather than chasing the new.',
            'href' => '#',
            'date' => 'May 27, 2026',
            'datetime' => '2026-05-27',
            'readTime' => '4 min read',
            'alt' => 'A neatly arranged capsule of accessories on linen',
        ],
    ];
@endphp

<x-ui.section data-slot="blog-featured" space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12">
        <header class="flex flex-col gap-6 border-b border-border pb-10 sm:flex-row sm:items-end sm:justify-between">
            <div class="max-w-2xl">
                @if ($eyebrow)
                    <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">{{ __($eyebrow) }}</p>
                @endif
                <h2 class="mt-4 font-heading text-3xl font-normal leading-tight tracking-tight text-balance sm:text-4xl lg:text-5xl">
                    {{ __($heading) }}
                </h2>
                @if ($subheading)
                    <p class="mt-4 max-w-md text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($subheading) }}</p>
                @endif
            </div>

            @if ($viewAllHref)
                <a
                    href="{{ $viewAllHref }}"
                    class="group inline-flex items-center gap-2 self-start rounded-sm font-body text-sm uppercase tracking-widest text-foreground outline-none transition-colors hover:text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:self-auto"
                >
                    {{ __($viewAllLabel) }}
                    <svg class="size-4 shrink-0 transition-transform group-hover:translate-x-0.5 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
                    </svg>
                </a>
            @endif
        </header>

        <div class="mt-12 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($posts as $post)
                <article class="relative h-full">
                    <x-ui.card class="group flex h-full flex-col gap-6 border-0 bg-transparent p-0 shadow-none transition-colors">
                        {{-- Media placeholder — no external image; token surface only --}}
                        <div class="aspect-[4/5] w-full overflow-hidden rounded-lg bg-muted" role="img" aria-label="{{ __($post['alt']) }}">
                            <div class="size-full bg-gradient-to-br from-muted via-accent/10 to-muted-foreground/10 transition-transform duration-300 group-hover:scale-[1.03]" aria-hidden="true"></div>
                        </div>

                        <div class="flex flex-1 flex-col">
                            <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                @if (! empty($post['category']))
                                    <x-ui.badge variant="outline" size="sm" class="font-body uppercase tracking-widest">{{ __($post['category']) }}</x-ui.badge>
                                @endif
                                <time datetime="{{ $post['datetime'] }}" class="font-body text-sm uppercase tracking-widest text-muted-foreground">{{ __($post['date']) }}</time>
                            </div>

                            <h3 class="mt-4 font-heading text-xl font-medium leading-snug tracking-tight text-balance">
                                <a
                                    href="{{ $post['href'] }}"
                                    class="rounded-sm outline-none transition-colors hover:text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                                >
                                    <span class="absolute inset-0" aria-hidden="true"></span>
                                    {{ __($post['title']) }}
                                </a>
                            </h3>

                            <p class="mt-4 flex-1 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($post['excerpt']) }}</p>

                            <div class="mt-6 flex items-center justify-between gap-4">
                                <x-ui.button
                                    :href="$post['href']"
                                    variant="link"
                                    size="sm"
                                    class="px-0 font-body text-sm uppercase tracking-widest"
                                    :withArrow="true"
                                >
                                    {{ __($readMoreLabel) }}
                                </x-ui.button>
                                @if (! empty($post['readTime']))
                                    <span class="font-body text-sm uppercase tracking-widest text-muted-foreground">{{ __($post['readTime']) }}</span>
                                @endif
                            </div>
                        </div>
                    </x-ui.card>
                </article>
            @endforeach
        </div>
    </div>
</x-ui.section>