{{-- 
    Article hero partial. Expects $post array with keys:
    - frontmatter: array (title, excerpt, category, featured_image, published_at, updated_at)
    - author: array|null (display_name, title, avatar)
    - reading_time: int
    
    Renders full-bleed hero with soft orange gradient mesh background,
    category chip, display serif title, subtitle, author meta, scroll indicator.
--}}
@php
    $fm = $post['frontmatter'] ?? [];
    $title = $fm['title'] ?? '';
    $excerpt = $fm['excerpt'] ?? '';
    $category = $fm['category'] ?? null;
    $publishedAt = !empty($fm['published_at']) ? \Carbon\Carbon::parse($fm['published_at']) : null;
    $updatedAt = !empty($fm['updated_at']) ? \Carbon\Carbon::parse($fm['updated_at']) : null;
    $author = $post['author'] ?? null;
    $readingTime = $post['reading_time'] ?? 5;
    $heroImage = $fm['featured_image'] ?? null;
@endphp

<header style="position: relative; min-height: clamp(420px, 55vh, 560px); padding: 5rem 1.5rem 4rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fff7ed 65%, #ffedd5 100%);">
    {{-- Soft radial glow bottom-right --}}
    <div aria-hidden="true" style="position: absolute; bottom: -30%; right: -15%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 60%); pointer-events: none;"></div>
    <div aria-hidden="true" style="position: absolute; top: -20%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(254, 215, 170, 0.4) 0%, transparent 60%); pointer-events: none;"></div>

    {{-- Category blueprint as subtle bg pattern --}}
    @if(!empty($category))
        <div aria-hidden="true" style="position: absolute; inset: 0; opacity: 0.08; filter: blur(1.5px); mix-blend-mode: multiply; pointer-events: none; z-index: 0;">
            @include('blog.partials.blueprint', ['category' => $category])
        </div>
    @endif

    <div style="position: relative; z-index: 1; max-width: 800px; width: 100%; text-align: center;">
        @if($category)
            <div style="display: inline-block; padding: 0.375rem 0.875rem; margin-bottom: 1.5rem; background: #f97316; color: #ffffff; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px;">
                {{ str_replace('-', ' ', $category) }}
            </div>
        @endif

        <h1 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 1.25rem;">
            {{ $title }}
        </h1>

        @if($excerpt)
            <p style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.0625rem, 1.75vw, 1.25rem); line-height: 1.55; color: #475569; margin: 0 auto 2rem; max-width: 640px;">
                {{ $excerpt }}
            </p>
        @endif

        <div style="display: flex; gap: 1.25rem; align-items: center; justify-content: center; flex-wrap: wrap; font-family: 'DM Sans', sans-serif; font-size: 0.875rem; color: #475569;">
            @if($author)
                <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
                    @if(!empty($author['avatar']))
                        <img src="{{ asset($author['avatar']) }}" alt="{{ $author['display_name'] ?? '' }}" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                    @else
                        <span style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 0.9375rem;">
                            {{ strtoupper(substr($author['display_name'] ?? 'A', 0, 1)) }}
                        </span>
                    @endif
                    <span style="color: #0f172a; font-weight: 500;">{{ $author['display_name'] ?? '' }}</span>
                </div>
                <span aria-hidden="true" style="color: #cbd5e1;">·</span>
            @endif
            @if($publishedAt)
                <span>{{ $publishedAt->format('M j, Y') }}</span>
                <span aria-hidden="true" style="color: #cbd5e1;">·</span>
            @endif
            <span>{{ $readingTime }} min read</span>
        </div>

        @if($updatedAt && $publishedAt && $updatedAt->gt($publishedAt))
            <div style="margin-top: 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #94a3b8;">
                Updated {{ $updatedAt->format('M j, Y') }}
            </div>
        @endif
    </div>

    {{-- Scroll indicator --}}
    <div aria-hidden="true" style="position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; animation: geasHeroBob 2s ease-in-out infinite;">
        ↓
    </div>
    <style>
        @keyframes geasHeroBob { 0%, 100% { transform: translate(-50%, 0); opacity: 0.6; } 50% { transform: translate(-50%, 6px); opacity: 1; } }
    </style>
</header>