<x-layouts.site>
    <x-slot:title>{{ $post->metaTitle() }}</x-slot:title>
    <x-slot:description>{{ $post->metaDescription() }}</x-slot:description>
    <x-slot:ogImage>{{ $post->coverUrl() }}</x-slot:ogImage>
    <x-slot:ogType>article</x-slot:ogType>

    <article class="bg-white">
        <header class="relative overflow-hidden bg-navy-900">
            @if ($post->cover_path)
                <img src="{{ $post->coverUrl() }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-30" data-parallax="0.1">
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-navy-950 via-navy-900/70 to-navy-900/50"></div>
            <div class="container-site relative max-w-3xl py-20 md:py-28" data-hero>
                @if ($post->category)
                    <span class="chip bg-wise-400 text-navy-950" data-hero-item>{{ $post->category }}</span>
                @endif
                <h1 class="mt-4 font-display text-display-sm font-bold leading-tight text-white md:text-display" data-hero-item>{{ $post->title }}</h1>
                <p class="mt-4 flex items-center gap-2 text-sm font-semibold text-navy-200" data-hero-item>
                    <x-icon name="clock" class="h-4 w-4 text-wise-300" /> {{ $post->published_at->format('j F Y') }} · Money-Wise Team
                </p>
            </div>
        </header>

        <div class="container-site max-w-3xl py-12">
            @if ($post->excerpt)
                <p class="mb-8 border-l-4 border-wise-400 pl-5 font-display text-xl font-medium leading-relaxed text-navy-600" data-gsap="fade-up">{{ $post->excerpt }}</p>
            @endif

            @if ($post->bodyIsHtml())
                {{-- Rich-editor articles: render the HTML, styled via arbitrary child variants --}}
                <div data-gsap="fade-up"
                     class="article-body space-y-5 text-lg leading-relaxed text-navy-700
                        [&_h1]:font-display [&_h1]:text-3xl [&_h1]:font-extrabold [&_h1]:text-navy-900
                        [&_h2]:mt-12 [&_h2]:font-display [&_h2]:text-2xl [&_h2]:font-extrabold [&_h2]:text-navy-900
                        [&_h3]:mt-8 [&_h3]:font-display [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-navy-900
                        [&_a]:font-medium [&_a]:text-wise-600 [&_a]:underline [&_a]:underline-offset-2
                        [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-6
                        [&_ol]:list-decimal [&_ol]:space-y-1.5 [&_ol]:pl-6
                        [&_strong]:font-semibold [&_strong]:text-navy-900
                        [&_img]:my-6 [&_img]:rounded-2xl [&_img]:shadow-brand
                        [&_blockquote]:mt-8 [&_blockquote]:rounded-r-2xl [&_blockquote]:border-l-4 [&_blockquote]:border-wise-500 [&_blockquote]:bg-wise-50/60 [&_blockquote]:px-6 [&_blockquote]:py-5 [&_blockquote]:font-display [&_blockquote]:text-xl [&_blockquote]:italic [&_blockquote]:text-navy-800">
                    {!! $post->body !!}
                </div>
            @else
            <div class="space-y-5 text-lg leading-relaxed text-navy-700">
                @php
                    $blocks = preg_split('/\n\n+/', trim($post->body));
                    $inline = function (string $t) {
                        $h = e($t);
                        $h = preg_replace('/\*\*(.+?)\*\*/s', '<strong class="font-semibold text-navy-900">$1</strong>', $h);
                        $h = preg_replace('/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/s', '<em>$1</em>', $h);
                        return $h;
                    };
                    $first = true;
                @endphp
                @foreach ($blocks as $block)
                    @php $block = trim($block); @endphp
                    @if ($block === '')
                        @continue
                    @elseif (\Illuminate\Support\Str::startsWith($block, '### '))
                        <h3 class="!mt-8 font-display text-xl font-bold text-navy-900" data-gsap="fade-up">{!! $inline(substr($block, 4)) !!}</h3>
                    @elseif (\Illuminate\Support\Str::startsWith($block, '## '))
                        <h2 class="!mt-12 flex items-center gap-3 font-display text-2xl font-extrabold text-navy-900" data-gsap="fade-up">
                            <span class="h-6 w-1.5 rounded-full bg-wise-400"></span>{!! $inline(substr($block, 3)) !!}
                        </h2>
                    @elseif (\Illuminate\Support\Str::startsWith($block, '> '))
                        <blockquote class="!mt-8 rounded-r-2xl border-l-4 border-wise-500 bg-wise-50/60 px-6 py-5 font-display text-xl italic leading-relaxed text-navy-800" data-gsap="fade-up">{!! $inline(preg_replace('/^>\s?/m', '', $block)) !!}</blockquote>
                    @elseif (\Illuminate\Support\Str::startsWith($block, '- '))
                        <ul class="!mt-4 space-y-2.5" data-gsap="fade-up">
                            @foreach (preg_split('/\n/', $block) as $li)
                                @php $li = trim(preg_replace('/^-\s?/', '', trim($li))); @endphp
                                @if ($li !== '')
                                    <li class="flex items-start gap-3">
                                        <span class="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-wise-500"></span>
                                        <span>{!! $inline($li) !!}</span>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @else
                        <p @class(['first-letter:float-left first-letter:mr-3 first-letter:mt-1 first-letter:font-display first-letter:text-6xl first-letter:font-bold first-letter:leading-none first-letter:text-wise-500' => $first]) data-gsap="fade-up">{!! nl2br($inline($block)) !!}</p>
                        @php $first = false; @endphp
                    @endif
                @endforeach
            </div>
            @endif

            {{-- Gallery --}}
            @if (! empty($post->galleryUrls()))
                <div class="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-3" data-gsap="fade-up">
                    @foreach ($post->galleryUrls() as $img)
                        <a href="{{ $img }}" target="_blank" rel="noopener" class="group overflow-hidden rounded-2xl ring-1 ring-navy-100">
                            <img src="{{ $img }}" alt="" loading="lazy" class="aspect-square w-full object-cover transition duration-500 group-hover:scale-105">
                        </a>
                    @endforeach
                </div>
            @endif

            {{-- Embedded tool bridge --}}
            <div class="mt-12 rounded-brand bg-navy-900 bg-mesh-dark p-8 text-center" data-gsap="zoom">
                <span class="icon-tile-dark mx-auto"><x-icon name="sliders" class="h-5 w-5" /></span>
                <h2 class="mt-3 font-display text-lg font-bold text-white">Don't just read it, do it</h2>
                <p class="mx-auto mt-2 max-w-md text-sm text-navy-200">Our free interactive tools turn this article into your personal plan in minutes.</p>
                <div class="mt-5 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('tools.index') }}" class="btn-accent">Open the toolbox</a>
                    <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-white">Take the Financial Health Check</a>
                </div>
            </div>

            <div class="mt-10">
                <a href="{{ route('blog') }}" class="inline-flex items-center gap-1.5 font-semibold text-wise-600 transition hover:text-wise-700">
                    <x-icon name="arrow-left" class="h-4 w-4" />
                    All articles
                </a>
            </div>
        </div>
    </article>
</x-layouts.site>
