@props([
    'post' => null,
    'href' => null,
    'category' => 'Guía',
])

@php
    /*
     | Blog tile for an OLDER audience: cover photo on top, copy below on the
     | light card, and an EXPLICIT "Leer más →" TEXT LINK — the arrow is
     | decoration, never the sole affordance. The whole card is still tappable
     | (cover + title are links) but the action is clearly labelled as an
     | accent-coloured link with an underline offset, matching the section-level
     | "Ver todo el blog" link, so it never competes with the page's CTA.
     */
    $title = data_get($post, 'title', 'Artículo');
    $slug = data_get($post, 'slug');
    $excerpt = data_get($post, 'excerpt');
    $photo = data_get($post, 'image');
    $webp = data_get($post, 'image_webp');
    $readingTime = data_get($post, 'reading_time');

    $publishedAt = data_get($post, 'published_at');
    $date = $publishedAt instanceof \Carbon\CarbonInterface ? $publishedAt->format('d/m/Y') : null;

    $meta = collect([
        filled($readingTime) ? $readingTime.' min de lectura' : null,
        $date,
    ])->filter()->implode(' · ');

    $link = $href ?? ($slug ? route('posts.show', ['post' => $slug]) : '#');

    $categoryLabel = filled(data_get($post, 'category')) ? data_get($post, 'category') : $category;
@endphp

<article data-post-tile
         {{ $attributes->merge(['class' => 'group flex h-full flex-col overflow-hidden border border-line bg-surface-raised shadow-soft']) }}>

    {{-- Cover photo, 16:9, full card width, image-first but never carrying text. --}}
    <a href="{{ $link }}"
       aria-label="{{ $title }}"
       class="relative block aspect-[16/9] overflow-hidden bg-surface-raised">
        <x-image
            :src="$photo"
            :webp="$webp"
            :alt="$title"
            :width="1200"
            :height="675"
            wrapper-class="h-full w-full"
            img-class="h-full w-full object-cover transition-transform duration-slower ease-out-soft group-hover:scale-[1.03]"
            data-image-reveal
        />
    </a>

    <div class="flex flex-1 flex-col gap-3 p-6 sm:p-7">
        {{-- Category label: primary-accent text only, no background. --}}
        <span class="self-start font-sans text-sm font-bold uppercase tracking-[0.14em] text-accent-text">
            {{ $categoryLabel }}
        </span>

        <h2 class="font-serif text-lg font-bold leading-snug text-on-surface sm:text-xl">
            <a href="{{ $link }}"
               class="transition-colors duration-fast ease-out-soft hover:text-accent-text focus:outline-none focus-visible:text-accent-text">
                {{ $title }}
            </a>
        </h2>

        @if (filled($excerpt))
            <p class="line-clamp-2 font-sans text-base leading-relaxed text-on-surface-muted">{{ $excerpt }}</p>
        @endif

        @if (filled($meta))
            <p class="font-sans text-base text-on-surface-muted">{{ $meta }}</p>
        @endif

        {{-- Explicit action: a labelled text link (≥44px, accent text with an
             underline offset) so the older audience always sees a clear
             affordance without a competing button box. --}}
        <a href="{{ $link }}"
           class="group/link mt-auto inline-flex min-h-11 w-fit items-center gap-2 py-2.5 font-sans text-body font-medium text-accent-text underline decoration-accent-500 underline-offset-4 transition-colors duration-fast ease-out-soft hover:text-on-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
            Leer más
            <x-icon name="arrow-right" :size="16" aria-hidden="true"
                    class="transition-transform duration-base ease-out-soft group-hover/link:translate-x-0.5" />
        </a>
    </div>
</article>