@php
    use App\Support\PageImages;

    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
    $bookText = $ps['cta.primary_text'] ?? 'Book Consultation';
    $overviewImage = PageImages::preferMedia(
        $service?->featuredImage,
        PageImages::forService($page['slug']),
        $page['title'] ?? null
    );
    $processImage = PageImages::process();
    $ctaImage = PageImages::preferMedia(
        $service?->featuredImage,
        PageImages::cta($page['slug']),
        $page['title'] ?? null
    );
    $statItems = collect($page['stats'])->map(fn ($s) => [
        'value' => $s['value'].($s['suffix'] ?? ''),
        'label' => $s['label'],
    ])->all();
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    <x-public.detail-hero
        variant="immersive"
        :title="$page['title']"
        :subtitle="$page['summary']"
        :image="$overviewImage['path']"
        :image-alt="$overviewImage['alt']"
        :breadcrumbs="[
            ['label' => 'Home', 'url' => url('/')],
            ['label' => 'Services', 'url' => route('services.index')],
            ['label' => $page['title']],
        ]"
    >
        <x-slot:eyebrow>
            <p class="home-kicker">Service</p>
        </x-slot:eyebrow>
        <x-slot:actions>
            <x-ui.button :href="$bookUrl" size="lg" class="home-btn" data-track-cta="service-hero-primary">Hire {{ $page['title'] }}</x-ui.button>
            <a href="{{ route('hire.show', $page['slug']) }}" class="home-text-link">View hire page</a>
        </x-slot:actions>
    </x-public.detail-hero>

    <x-public.detail-stats :stats="$statItems" />

    {{-- Overview --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <div class="home-split home-split--equal home-split--center">
                <figure class="detail-frame">
                    <img
                        src="{{ $overviewImage['path'] }}"
                        alt="{{ $overviewImage['alt'] }}"
                        width="720"
                        height="480"
                        @class([
                            'home-editorial-photo',
                            'home-editorial-photo--portrait' => $overviewImage['portrait'],
                        ])
                        loading="lazy"
                        decoding="async"
                    >
                    @if($overviewImage['caption'])
                        <figcaption class="home-figure-caption mt-3">{{ $overviewImage['caption'] }}</figcaption>
                    @endif
                </figure>

                <div class="min-w-0">
                    <p class="home-kicker">The role</p>
                    <div class="prose-premium max-w-none mt-3">{!! $page['intro'] !!}</div>

                    <h2 class="home-section-title mt-10 !text-lg">What they handle</h2>
                    <ol class="detail-rail mt-5">
                        @foreach($page['capabilities'] as $i => $cap)
                            <li class="detail-rail__item">
                                <span class="detail-rail__num">{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>
                                <span class="detail-rail__text">{{ $cap }}</span>
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>
    </section>

    {{-- Deliverables mosaic --}}
    <section class="home-section home-section--muted">
        <div class="container-page">
            @include('pages.home._section-head', [
                'kicker' => 'What you get',
                'title' => 'Key deliverables from week one',
                'lead' => 'Concrete outputs your '.$page['title'].' will own once they are onboarded.',
                'centered' => true,
            ])

            <ul class="detail-mosaic mt-12">
                @foreach($page['deliverables'] as $i => $item)
                    <li class="detail-mosaic__item">
                        <div class="detail-mosaic__index">{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</div>
                        <h3 class="detail-mosaic__title">{{ $item['title'] }}</h3>
                        <p class="detail-mosaic__text">{{ $item['description'] }}</p>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- Use cases + industries --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <div class="home-split home-split--equal">
                <div>
                    @include('pages.home._section-head', [
                        'kicker' => 'Use cases',
                        'title' => 'Where this role fits best',
                    ])

                    <ul class="detail-statements mt-8">
                        @foreach($page['use_cases'] as $i => $case)
                            <li class="detail-statements__item">
                                <span class="detail-statements__mark" aria-hidden="true">{{ $i + 1 }}</span>
                                <span class="detail-statements__text">{{ $case }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div>
                    @include('pages.home._section-head', [
                        'kicker' => 'Industries',
                        'title' => 'Commonly hired by',
                    ])

                    <ul class="detail-tags mt-8">
                        @foreach($page['ideal_for'] as $industry)
                            <li class="detail-tags__item">{{ $industry }}</li>
                        @endforeach
                    </ul>

                    <div class="detail-callout mt-10">
                        <p class="detail-callout__eyebrow">Also available</p>
                        <h3 class="detail-callout__title">Hire {{ $page['title'] }}</h3>
                        <p class="detail-callout__body">Requirements, FAQs, and dedicated hiring information for this role.</p>
                        <a href="{{ route('hire.show', $page['slug']) }}" class="home-text-link mt-4 inline-block">
                            Open hire page →
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Why us spotlight --}}
    <section class="detail-spotlight">
        <div class="container-page relative">
            @include('pages.home._section-head', [
                'kicker' => 'Why Apex Admins',
                'title' => 'Why hire '.$page['title'].' through us',
                'lead' => 'You get people who have already been screened — not a pile of CVs to sort through.',
                'centered' => true,
            ])

            <ul class="detail-spotlight__grid">
                @foreach($page['why_items'] as $item)
                    <li class="detail-spotlight__card">
                        <h3 class="detail-spotlight__card-title">{{ $item['title'] }}</h3>
                        <p class="detail-spotlight__card-text">{{ $item['description'] }}</p>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- Process --}}
    <section class="home-section bg-white">
        <div class="container-page">
            @include('pages.home._section-head', [
                'kicker' => 'How it works',
                'title' => 'Four steps to your new '.$page['title'],
                'lead' => 'A clear process from first call to someone working in your business.',
                'centered' => true,
            ])

            <ol class="detail-timeline mt-12">
                @foreach([
                    ['title' => 'Tell us what you need', 'text' => 'A short call to understand the role, hours, tools, and team fit.'],
                    ['title' => 'Review your shortlist', 'text' => 'We send a small number of suitable candidates — not a long list to wade through.'],
                    ['title' => 'Interview and trial', 'text' => 'Meet the people you like. Run a trial before any longer commitment.'],
                    ['title' => 'Onboard and grow', 'text' => 'Once someone is working well, it is easy to add more roles as you scale.'],
                ] as $i => $item)
                    <li class="detail-timeline__item">
                        <span class="detail-timeline__num">{{ $i + 1 }}</span>
                        <h3 class="detail-timeline__title">{{ $item['title'] }}</h3>
                        <p class="detail-timeline__text">{{ $item['text'] }}</p>
                    </li>
                @endforeach
            </ol>

            <figure class="home-figure home-figure--center mt-12">
                <img
                    src="{{ $processImage['path'] }}"
                    alt="{{ $processImage['alt'] }}"
                    width="960"
                    height="400"
                    class="home-editorial-photo home-editorial-photo--wide"
                    loading="lazy"
                    decoding="async"
                >
                @if($processImage['caption'])
                    <figcaption class="home-figure-caption home-figure-caption--center">{{ $processImage['caption'] }}</figcaption>
                @endif
            </figure>
        </div>
    </section>

    {{-- FAQ --}}
    <section class="home-section home-section--muted">
        <div class="container-page">
            <div class="mx-auto max-w-2xl">
                @include('pages.home._section-head', [
                    'kicker' => 'Questions',
                    'title' => 'Common questions about '.$page['title'],
                    'lead' => 'Straight answers before you book a consultation.',
                    'centered' => true,
                ])

                <div class="home-faq home-faq--panel mt-10">
                    @foreach($page['faqs'] as $i => $item)
                        <div class="home-faq__item" x-data="{ open: {{ $i === 0 ? 'true' : 'false' }} }">
                            <button type="button"
                                    class="home-faq__trigger"
                                    @click="open = !open"
                                    :aria-expanded="open">
                                {{ $item['question'] }}
                                <span class="home-faq__icon" x-text="open ? '−' : '+'" aria-hidden="true"></span>
                            </button>
                            <div x-show="open" x-cloak class="home-faq__answer">
                                {{ $item['answer'] }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    @if($related->isNotEmpty())
        <section class="home-section bg-white">
            <div class="container-page">
                @include('pages.home._section-head', [
                    'kicker' => 'Related',
                    'title' => 'You may also need',
                    'href' => route('services.index'),
                    'linkText' => 'All services',
                ])

                <div class="detail-related mt-10">
                    @foreach($related as $rel)
                        <a href="{{ route('services.show', $rel->slug) }}" class="detail-related__item group">
                            <h3 class="detail-related__title">{{ $rel->title }}</h3>
                            <p class="detail-related__text">{{ $rel->summary }}</p>
                            <span class="detail-related__action">Learn more →</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-public.cta-band
        :title="'Ready to hire '.$page['title'].'?'"
        subtitle="Book a free consultation. Shortlist usually within a week. Pay nothing until you hire."
        :ctaText="$bookText"
        :ctaUrl="$bookUrl"
        :image="$ctaImage['path']"
        :imageAlt="$ctaImage['alt']"
    />
</x-layouts.app>