@use('Illuminate\Support\Str')
<x-layout :title="$article->title" :description="$article->excerpt">

    @push('schema')
    <script type="application/ld+json">
    {!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'Article',
        'headline' => $article->title,
        'description' => $article->excerpt,
        'datePublished' => optional($article->published_at)->toDateString(),
        'author' => ['@type' => 'Organization', 'name' => $article->author ?? 'Brokam International Ltd'],
        'publisher' => ['@type' => 'Organization', 'name' => 'Brokam International Ltd', 'logo' => ['@type' => 'ImageObject', 'url' => asset('brand/v2_favicon_512.png')]],
    ], JSON_UNESCAPED_SLASHES) !!}
    </script>
    @endpush

    <x-page-hero :kicker="$article->category"
                 :title="$article->title"
                 :crumbs="['Home' => route('home'), 'News' => route('news.index'), Str::limit($article->title, 40) => null]">
        <p class="mt-6 text-sm text-slate-500">
            {{ optional($article->published_at)->format('d F Y') }} · {{ $article->reading_time }} min read · {{ $article->author }}
        </p>
    </x-page-hero>

    <article class="section">
        <div class="shell max-w-3xl">
            <p class="text-xl text-slate-700 leading-relaxed font-medium border-l-2 border-brand-500 pl-5">{{ $article->excerpt }}</p>

            <div class="prose-brokam mt-10">
                @foreach (preg_split('/\n\n+/', $article->body) as $block)
                    @php $block = trim($block); @endphp
                    @if (Str::startsWith($block, '## '))
                        <h2>{{ Str::after($block, '## ') }}</h2>
                    @else
                        <p>{{ $block }}</p>
                    @endif
                @endforeach
            </div>

            <div class="mt-12 pt-8 border-t border-slate-100 flex items-center justify-between">
                <a href="{{ route('news.index') }}" class="link-underline inline-flex items-center gap-2 font-semibold text-brand-600">
                    <x-icon name="arrow" class="w-4 h-4 rotate-180"/> All articles
                </a>
                <a href="{{ route('quote') }}" class="btn btn-primary text-sm !py-2.5">Request a Quote</a>
            </div>
        </div>
    </article>

    @if ($more->isNotEmpty())
        <section class="section bg-paper-200">
            <div class="shell">
                <h2 class="text-2xl font-semibold tracking-tight mb-8">More reading</h2>
                <div class="grid md:grid-cols-3 gap-6">
                    @foreach ($more as $a)
                        <x-article-card :article="$a"/>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</x-layout>