@php
    $title = $page->page_heading ?: $page->menu_title;
@endphp

<x-public.layout :title="$title.' — '.$currentEvent->name()"
    :description="$page->page_subtitle ? \Illuminate\Support\Str::limit(strip_tags($page->page_subtitle), 160) : 'Skydive For Life — Youth Suicide Prevention Ireland.'">

    <div class="sfl-static">

        {{-- ===================== PAGE HEADER BAND ===================== --}}
        <header class="page-head">
            <div class="page-head-bg" style="background-image:url('/images/sfl_hero03.webp');"></div>
            <div class="page-head-scrim"></div>
            <div class="inner">
                <div style="max-width:1180px; margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,1.5rem);">
                    <div class="page-head-col">
                        @if (trim((string) $page->page_eyebrow) !== '')
                            <div class="page-eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="fa-light {{ $page->menu_icon ?: 'fa-file-lines' }}"></i></span> {{ $page->page_eyebrow }}</div>
                        @endif
                        <h1 class="page-title" style="margin-bottom:1rem;">{{ $title }}</h1>
                        @if (trim((string) $page->page_subtitle) !== '')
                            <p class="page-sub">{{ strip_tags($page->page_subtitle) }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </header>

        {{-- ===================== BODY ===================== --}}
        <main class="page-body mx-auto w-full max-w-[1180px] px-4 sm:px-6">
            <div class="panel panel-pad rise d3">
                @if ($page->image_url)
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 items-start">
                        <div class="lg:col-span-5">
                            <img src="{{ $page->image_url }}" alt="{{ $title }}" class="body-img" loading="lazy">
                        </div>
                        <div class="lg:col-span-7">
                            <div class="body-prose">{!! $page->renderedBody() !!}</div>
                            @include('pages._cta')
                        </div>
                    </div>
                @else
                    <div class="mx-auto" style="max-width:48rem;">
                        <div class="body-prose">{!! $page->renderedBody() !!}</div>
                        @include('pages._cta')
                    </div>
                @endif
            </div>

            <div style="height:3rem;"></div>
        </main>
    </div>
</x-public.layout>