@extends('layouts.site')

@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description ?? '')

@section('content')
    <div class="mx-auto max-w-7xl px-4 py-14 lg:px-8 lg:py-20">
        @if(filled($page->intro))
            <p class="max-w-3xl text-lg text-neutral-700" data-aos="fade-up">{{ $page->intro }}</p>
        @endif

        @foreach($page->sections as $section)
            <section class="mt-12" data-aos="fade-up">
                @if(filled($section->heading))
                    <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">{{ $section->heading }}</h2>
                @endif
                @if(filled($section->body))
                    <div class="prose prose-neutral prose-lg mt-6 max-w-3xl">{!! $section->body !!}</div>
                @endif
            </section>
        @endforeach

        <section class="mt-16 grid gap-6 lg:grid-cols-2" data-aos="fade-up">
            @foreach($testimonials as $t)
                <figure class="rounded-xl border border-neutral-200 bg-[var(--color-surface-alt)] p-8">
                    <blockquote class="text-neutral-900">“{{ $t->quote }}”</blockquote>
                    <figcaption class="mt-4 text-sm font-semibold text-[var(--color-accent)]">
                        {{ $t->author_name ?? 'Anonymous' }}
                        · {{ ucfirst(str_replace('_', ' ', $t->source_type)) }}
                    </figcaption>
                </figure>
            @endforeach
        </section>

        <nav class="mt-14 text-sm text-neutral-600" aria-label="Breadcrumb">
            <ol class="flex flex-wrap gap-2">
                <li><a class="underline-offset-4 hover:underline" href="{{ route('home') }}">Home</a></li>
                <li aria-hidden="true">/</li>
                <li class="text-neutral-900">{{ $page->title }}</li>
            </ol>
        </nav>
    </div>
@endsection