@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="mb-12 max-w-3xl text-lg text-neutral-700" data-aos="fade-up">{{ $page->intro }}</p>
        @endif

        @foreach($page->sections as $section)
            <section class="@if(!$loop->first) mt-16 @endif" data-aos="fade-up">
                @if($loop->first && filled($section->heading))
                    <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">{{ $section->heading }}</h1>
                @elseif($loop->first && ! filled($section->heading))
                    <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">{{ $page->title }}</h1>
                @elseif(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->subheading))
                    <p class="mt-4 max-w-3xl text-lg text-neutral-700">{{ $section->subheading }}</p>
                @endif
                @if(filled($section->body))
                    <div class="prose prose-neutral prose-lg mt-8 max-w-3xl">
                        {!! $section->body !!}
                    </div>
                @endif
                @if(filled($section->cta_primary_label) && filled($section->cta_primary_url))
                    <div class="mt-8 flex flex-wrap gap-3">
                        <a class="inline-flex min-h-[44px] items-center rounded-md bg-[var(--color-accent)] px-5 py-3 text-sm font-semibold text-white hover:opacity-90" href="{{ $section->cta_primary_url }}">{{ $section->cta_primary_label }}</a>
                        @if(filled($section->cta_secondary_label) && filled($section->cta_secondary_url))
                            <a class="inline-flex min-h-[44px] items-center rounded-md border border-[var(--color-primary)] px-5 py-3 text-sm font-semibold text-[var(--color-primary)] hover:bg-neutral-50" href="{{ $section->cta_secondary_url }}">{{ $section->cta_secondary_label }}</a>
                        @endif
                    </div>
                @endif
            </section>
        @endforeach

        @if($page->sections->isEmpty())
            <header data-aos="fade-up">
                <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">{{ $page->title }}</h1>
            </header>
        @endif

        <nav class="mt-12 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