@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $item['title'],
        'eyebrow' => $page['eyebrow'],
        'summary' => $item['description'] ?? $page['summary'],
        'image' => $item['image'],
        'breadcrumbs' => [$page['title'] => $page['indexUrl'], $item['title'] => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl">
            <div class="lg:col-span-5">
                <img class="w-full h-[450px] object-cover rounded-xl shadow-lg" src="{{ $item['image'] }}" alt="{{ $item['title'] }}">
            </div>
            <article class="lg:col-span-7">
                @if (!empty($item['meta']))
                    <span class="font-label-md text-label-md text-primary uppercase">{{ $item['meta'] }}</span>
                @endif
                <h2 class="font-headline-xl text-headline-xl text-on-surface font-bold">{{ $item['title'] }}</h2>
                @if (!empty($item['author']))
                    <p class="font-title-md text-title-md text-primary font-semibold">{{ $item['author'] }}</p>
                @endif
                <p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">{{ $item['full'] ?? $item['description'] }}</p>
                @if (!empty($item['pdf']))
                    <div class="p-space-md rounded-xl bg-surface-container-low border border-surface-container d-flex flex-wrap gap-2 align-items-center justify-content-between">
                        <span class="font-title-md text-title-md text-on-surface font-semibold">E-book / PDF Available</span>
                        <a class="inline-flex items-center gap-1 px-space-lg py-2 bg-primary-container text-on-primary rounded hover:bg-primary"
                            href="{{ $item['pdf'] }}">
                            <span class="material-symbols-outlined text-sm">download</span>
                            <span>View / Download PDF</span>
                        </a>
                    </div>
                @endif
            </article>
        </div>
    </section>

    @if (!empty($related))
        <section class="w-full my-space-xl py-space-xl px-gutter">
            <div class="max-w-7xl mx-auto">
                @include('frontend.partials.section-heading', ['eyebrow' => 'More to Explore', 'title' => 'Related Items'])
                <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg">
                    @foreach ($related as $relatedItem)
                        @include('frontend.partials.cards', ['item' => $relatedItem])
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection