@php
    use App\Support\PageImages;

    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
    $bookText = $ps['cta.primary_text'] ?? 'Book Consultation';

    $stateSlug = $location->stateAncestor()?->slug ?? 'nsw';
    $fallbackImage = PageImages::forLocation($stateSlug);
    $overviewImage = PageImages::preferUrl(
        $location->seoMeta?->og_image,
        $fallbackImage,
        $page['name'] ?? null
    );
    $processImage = PageImages::process();
    $collabImage = PageImages::collaboration();
    $ctaImage = PageImages::preferUrl(
        $location->seoMeta?->og_image,
        $fallbackImage,
        $page['name'] ?? null
    );

    $typeLabel = match ($location->type) {
        'state' => 'State',
        'city' => 'City',
        'town' => 'Town',
        default => 'Location',
    };

    $statItems = collect($page['stats'])->map(fn ($s) => [
        'value' => $s['value'].($s['suffix'] ?? ''),
        'label' => $s['label'],
    ])->all();

    $areasTitle = match ($location->type) {
        'state' => 'Cities we serve in '.$location->name,
        'city' => 'Towns & suburbs near '.$location->name,
        default => 'Nearby areas',
    };
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    <x-public.detail-hero
        :title="$page['headline']"
        :subtitle="$page['summary']"
        :breadcrumbs="$location->breadcrumbTrail()"
    >
        <x-slot:eyebrow>
            <p class="home-kicker">{{ $typeLabel }} · {{ $page['label'] }}</p>
        </x-slot:eyebrow>
        <x-slot:actions>
            <x-ui.button :href="$bookUrl" size="lg" class="home-btn" data-track-cta="location-detail-primary">{{ $bookText }}</x-ui.button>
        </x-slot:actions>
    </x-public.detail-hero>

    <x-public.stats-strip :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="home-figure">
                    <img
                        src="{{ $overviewImage['path'] }}"
                        alt="{{ $overviewImage['alt'] }}"
                        width="720"
                        height="480"
                        class="home-editorial-photo"
                        loading="lazy"
                        decoding="async"
                    >
                    @if($overviewImage['caption'])
                        <figcaption class="home-figure-caption">{{ $overviewImage['caption'] }}</figcaption>
                    @endif
                </figure>

                <div class="min-w-0">
                    <div class="prose-premium max-w-none">{!! $page['intro'] !!}</div>

                    <h2 class="home-section-title mt-10 !text-lg">What {{ $page['name'] }} businesses achieve</h2>
                    <ul class="home-checklist mt-5">
                        @foreach($page['outcomes'] as $outcome)
                            <li>{{ $outcome }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- Challenges --}}
    <section class="home-section home-section--muted">
        <div class="container-page">
            @include('pages.home._section-head', [
                'kicker' => 'Challenges',
                'title' => 'Sound familiar?',
                'lead' => 'Common hiring pain points for businesses in '.$page['name'].'.',
                'centered' => true,
            ])

            <ul class="home-benefit-grid mt-12">
                @foreach($page['challenges'] as $challenge)
                    <li class="home-benefit-card">
                        <p class="home-benefit-card__text">{{ $challenge }}</p>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- Solutions --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <div class="home-split home-split--equal home-split--center">
                <div>
                    @include('pages.home._section-head', [
                        'kicker' => 'Solutions',
                        'title' => 'How Apex Admins helps '.$page['name'],
                        'lead' => 'Practical remote staffing support tailored to your local market.',
                    ])

                    <ul class="home-benefit-grid mt-10">
                        @foreach($page['solutions'] as $solution)
                            <li class="home-benefit-card">
                                <h3 class="home-benefit-card__title">{{ $solution['title'] }}</h3>
                                <p class="home-benefit-card__text">{{ $solution['description'] }}</p>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <figure class="home-figure">
                    <img
                        src="{{ $collabImage['path'] }}"
                        alt="{{ $collabImage['alt'] }}"
                        width="720"
                        height="480"
                        class="home-editorial-photo"
                        loading="lazy"
                        decoding="async"
                    >
                    @if($collabImage['caption'])
                        <figcaption class="home-figure-caption">{{ $collabImage['caption'] }}</figcaption>
                    @endif
                </figure>
            </div>
        </div>
    </section>

    {{-- Roles --}}
    <section class="home-section home-section--muted">
        <div class="container-page">
            @include('pages.home._section-head', [
                'kicker' => 'Popular roles',
                'title' => 'Roles our '.$page['name'].' clients hire',
                'lead' => 'Vetted specialists aligned to Australian business hours.',
                'href' => route('hire.index'),
                'linkText' => 'All roles',
            ])

            <div class="home-card-grid home-card-grid--services !mt-0">
                @foreach($page['roles'] as $role)
                    <a href="{{ route('hire.show', $role['slug']) }}" class="home-card group">
                        <h3 class="home-card__title">{{ $role['title'] }}</h3>
                        <p class="home-card__text">{{ $role['text'] }}</p>
                        <span class="home-card__action">View role →</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Service areas --}}
    @if(! empty($page['service_areas']))
        <section class="home-section bg-white">
            <div class="container-page">
                @include('pages.home._section-head', [
                    'kicker' => 'Service areas',
                    'title' => $areasTitle,
                    'lead' => 'Explore dedicated pages for each area in our location network.',
                    'href' => route('locations.index').'#explorer',
                    'linkText' => 'Full explorer',
                ])

                <div class="location-area-grid mt-10">
                    @foreach($page['service_areas'] as $area)
                        <a href="{{ $area['url'] }}" class="location-area-chip">
                            <span class="location-area-chip__type">{{ ucfirst($area['type']) }}</span>
                            {{ $area['name'] }}
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Process --}}
    <section class="home-section home-section--muted">
        <div class="container-page">
            @include('pages.home._section-head', [
                'kicker' => 'How it works',
                'title' => 'From consultation to working in your business',
                'lead' => 'A clear process for '.$page['name'].' teams.',
                'centered' => true,
            ])

            <ol class="home-steps home-steps--row">
                @foreach([
                    ['num' => 1, 'title' => 'Discovery call', 'text' => 'We learn your roles, tools, and hours — scoped to '.$page['name'].'.'],
                    ['num' => 2, 'title' => 'Curated shortlist', 'text' => 'Vetted candidates matched to AEST and your communication standards.'],
                    ['num' => 3, 'title' => 'Interview & trial', 'text' => 'Meet your top picks before any long-term commitment.'],
                    ['num' => 4, 'title' => 'Onboard & scale', 'text' => 'We support onboarding and help you grow capacity as needed.'],
                ] as $step)
                    <li class="home-step-card">
                        <span class="home-step-card__num">{{ $step['num'] }}</span>
                        <h3 class="home-step-card__title">{{ $step['title'] }}</h3>
                        <p class="home-step-card__text">{{ $step['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"
                >
            </figure>
        </div>
    </section>

    {{-- FAQ --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <div class="mx-auto max-w-2xl">
                @include('pages.home._section-head', [
                    'kicker' => 'Questions',
                    'title' => $page['name'].' — common questions',
                    '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>

    <x-public.cta-band
        :title="'Ready to hire in '.$page['name'].'?'"
        subtitle="Book a free consultation and get matched with AEST-aligned talent in days."
        :ctaText="$bookText"
        :ctaUrl="$bookUrl"
        :image="$ctaImage['path']"
        :imageAlt="$ctaImage['alt']"
    />
</x-layouts.app>