@php
    use App\Support\PageImages;

    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
    $bookText = $ps['cta.primary_text'] ?? 'Book Consultation';
    $overviewImage = PageImages::preferMedia(
        $industry?->featuredImage,
        PageImages::forIndustry($page['slug']),
        $page['name'] ?? null
    );
    $processImage = PageImages::process();
    $collabImage = PageImages::collaboration();
    $ctaImage = PageImages::preferMedia(
        $industry?->featuredImage,
        PageImages::forIndustry($page['slug']),
        $page['name'] ?? 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['name']"
        :subtitle="$page['summary']"
        :image="$overviewImage['path']"
        :image-alt="$overviewImage['alt']"
        :breadcrumbs="[
            ['label' => 'Home', 'url' => url('/')],
            ['label' => 'Industries', 'url' => route('industries.index')],
            ['label' => $page['name']],
        ]"
    >
        <x-slot:eyebrow>
            <p class="home-kicker">Industry</p>
        </x-slot:eyebrow>
        <x-slot:actions>
            <x-ui.button :href="$bookUrl" size="lg" class="home-btn" data-track-cta="industry-detail-primary">{{ $bookText }}</x-ui.button>
            <a href="{{ route('hire.index') }}" class="home-text-link">Browse roles</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"
                        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">Sector focus</p>
                    <div class="prose-premium max-w-none mt-3">{!! $page['intro'] !!}</div>

                    <h2 class="home-section-title mt-10 !text-lg">What {{ $page['name'] }} clients achieve</h2>
                    <ol class="detail-rail mt-5">
                        @foreach($page['outcomes'] as $i => $outcome)
                            <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">{{ $outcome }}</span>
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>
    </section>

    {{-- Challenges as pull quotes --}}
    <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 we solve for '.$page['name'].' businesses.',
                'centered' => true,
            ])

            <ul class="detail-challenges mt-12">
                @foreach($page['challenges'] as $challenge)
                    <li class="detail-challenges__item">
                        <p class="detail-challenges__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 staffing support tailored to how your sector actually works.',
                    ])

                    <ul class="detail-mosaic detail-mosaic--stack mt-10">
                        @foreach($page['solutions'] as $i => $solution)
                            <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">{{ $solution['title'] }}</h3>
                                <p class="detail-mosaic__text">{{ $solution['description'] }}</p>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <figure class="detail-frame">
                    <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 mt-3">{{ $collabImage['caption'] }}</figcaption>
                    @endif
                </figure>
            </div>
        </div>
    </section>

    @if($recommendedRoles->isNotEmpty())
        <section class="detail-spotlight">
            <div class="container-page relative">
                @include('pages.home._section-head', [
                    'kicker' => 'Recommended roles',
                    'title' => 'Popular hires in '.$page['name'],
                    'lead' => 'Roles our '.$page['name'].' clients hire most frequently.',
                    'centered' => true,
                ])

                <div class="detail-spotlight__grid">
                    @foreach($recommendedRoles as $role)
                        <a href="{{ route('hire.show', $role->slug) }}" class="detail-spotlight__card block">
                            <h3 class="detail-spotlight__card-title">{{ $role->title }}</h3>
                            <p class="detail-spotlight__card-text">{{ Str::limit($role->description, 120) }}</p>
                            <span class="detail-spotlight__card-action">View role →</span>
                        </a>
                    @endforeach
                </div>

                <div class="mt-8 text-center">
                    <a href="{{ route('hire.index') }}" class="home-text-link !text-teal-200 hover:!text-white">Browse all roles →</a>
                </div>
            </div>
        </section>
    @endif

    {{-- Use cases + why us --}}
    <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' => 'Who we work with',
                    ])

                    <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' => 'Why Apex Admins',
                        'title' => 'Why '.$page['name'].' teams choose us',
                    ])

                    <ul class="detail-rail mt-8">
                        @foreach($page['why_items'] as $i => $item)
                            <li class="detail-rail__item">
                                <span class="detail-rail__num">{{ $item['title'] }}</span>
                                <span class="detail-rail__text">{{ $item['description'] }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

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

            <ol class="detail-timeline mt-12">
                @foreach($page['process_steps'] as $step)
                    <li class="detail-timeline__item">
                        <span class="detail-timeline__num">{{ (int) $step['num'] }}</span>
                        <h3 class="detail-timeline__title">{{ $step['title'] }}</h3>
                        <p class="detail-timeline__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"
                >
                @if($processImage['caption'])
                    <figcaption class="home-figure-caption home-figure-caption--center">{{ $processImage['caption'] }}</figcaption>
                @endif
            </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>

    @if($related->isNotEmpty())
        <section class="home-section home-section--muted">
            <div class="container-page">
                @include('pages.home._section-head', [
                    'kicker' => 'Related',
                    'title' => 'Explore similar sectors',
                    'href' => route('industries.index'),
                    'linkText' => 'All industries',
                ])

                <div class="detail-related mt-10">
                    @foreach($related as $rel)
                        <a href="{{ route('industries.show', $rel->slug) }}" class="detail-related__item group">
                            <h3 class="detail-related__title">{{ $rel->name }}</h3>
                            <p class="detail-related__text">{{ Str::limit($rel->description, 120) }}</p>
                            <span class="detail-related__action">Explore sector →</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

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