@php
    use App\Support\PageImages;

    $ps = $publicSettings ?? $themeSettings ?? [];
    $bookUrl = $ps['cta.primary_url'] ?? '/book';
    $bookText = $ps['cta.primary_text'] ?? 'Book Consultation';
    $totalLocations = $states->sum(fn ($s) => 1 + $s->children->count() + $s->children->sum(fn ($c) => $c->children->count()));
    $stateAccents = ['nsw' => 'sky', 'vic' => 'emerald', 'qld' => 'amber', 'sa' => 'violet', 'wa' => 'rose', 'tas' => 'teal', 'nt' => 'orange', 'act' => 'indigo'];
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    <x-public.page-hero
        eyebrow="Locations"
        title="Remote staffing across Australia"
        subtitle="Every state, city, and town — hire vetted virtual assistants and specialists aligned to AEST business hours."
        :breadcrumbs="[
            ['label' => 'Home', 'url' => url('/')],
            ['label' => 'Locations'],
        ]"
    >
        <x-ui.button :href="$bookUrl" size="lg" class="home-btn" data-track-cta="locations-hub-primary">{{ $bookText }}</x-ui.button>
        <x-ui.button href="{{ route('services.index') }}" variant="secondary" size="lg">Our services</x-ui.button>
    </x-public.page-hero>

    <x-public.stats-strip :stats="[
        ['value' => '8', 'label' => 'States & territories'],
        ['value' => $states->count() > 0 ? '200+' : '200+', 'label' => 'Cities & towns'],
        ['value' => 'AEST', 'label' => 'Business hours aligned'],
    ]" />

    {{-- State grid --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <x-public.section-head
                kicker="Browse by state"
                title="Australian states & territories"
                lead="Select your state to explore cities and towns where Apex Admins supports remote hiring."
                centered
            />

            <div class="location-state-grid mt-12">
                @foreach($states as $state)
                    <a href="{{ $state->publicUrl() }}"
                       class="location-state-tile"
                       data-accent="{{ $stateAccents[$state->slug] ?? 'sky' }}">
                        <span class="location-state-tile__abbr">{{ $state->state ?: strtoupper(substr($state->name, 0, 3)) }}</span>
                        <span class="location-state-tile__name">{{ $state->name }}</span>
                        <span class="location-state-tile__count">{{ $state->children->count() }} cities</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Cities by state --}}
    <section class="home-section home-section--muted" id="cities">
        <div class="container-page">
            <x-public.section-head
                kicker="Browse by city"
                title="Major cities we serve"
                lead="Jump directly to your city — each page covers local hiring, roles, and FAQs for that area."
                centered
            />

            <div class="location-city-directory mt-12">
                @foreach($states as $state)
                    @if($state->children->isNotEmpty())
                        <div class="location-city-group">
                            <div class="location-city-group__head">
                                <h3 class="location-city-group__title">
                                    <a href="{{ $state->publicUrl() }}">{{ $state->name }}</a>
                                </h3>
                                <a href="{{ $state->publicUrl() }}" class="location-city-group__all">All {{ $state->name }} →</a>
                            </div>
                            <div class="location-city-grid">
                                @foreach($state->children as $city)
                                    <a href="{{ $city->publicUrl() }}" class="location-city-card group">
                                        <span class="location-city-card__name">{{ $city->name }}</span>
                                        @if($city->children->isNotEmpty())
                                            <span class="location-city-card__meta">{{ $city->children->count() }} towns</span>
                                        @endif
                                        <span class="location-city-card__action">View city →</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    {{-- Hierarchy explorer --}}
    <section class="home-section home-section--muted" id="explorer">
        <div class="container-page">
            <div class="location-explorer-layout">
                <div class="location-explorer-layout__intro">
                    <x-public.section-head
                        kicker="Location explorer"
                        title="State → City → Town"
                        lead="Navigate the full hierarchy. Every location has a dedicated page optimised for local search — so your business can be found wherever you operate."
                    />

                    <ul class="home-checklist mt-8">
                        @foreach([
                            'Dedicated SEO landing pages for every location',
                            'LocalBusiness schema for city and town pages',
                            'FAQ and breadcrumb structured data',
                        ] as $point)
                            <li>{{ $point }}</li>
                        @endforeach
                    </ul>
                </div>

                <div class="location-explorer" x-data="{ query: '' }">
                    <label class="location-explorer__search">
                        <span class="sr-only">Search locations</span>
                        <input type="search"
                               x-model="query"
                               placeholder="Search states, cities, or towns…"
                               class="location-explorer__search-input"
                               autocomplete="off">
                    </label>

                    <div class="location-explorer__tree">
                        @foreach($explorer as $stateNode)
                            @php
                                $searchTerms = collect([$stateNode['name']])
                                    ->merge(collect($stateNode['cities'])->pluck('name'))
                                    ->merge(collect($stateNode['cities'])->flatMap(fn ($c) => collect($c['towns'])->pluck('name')))
                                    ->implode(' ');
                            @endphp
                            <div data-search="{{ strtolower($searchTerms) }}"
                                 x-show="!query.trim() || $el.dataset.search.includes(query.toLowerCase())">
                                @include('pages.locations._explorer-state', ['state' => $stateNode])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Why local pages --}}
    <section class="home-section bg-white">
        <div class="container-page">
            <div class="home-split home-split--equal home-split--center">
                <div>
                    <x-public.section-head
                        kicker="Why location pages"
                        title="Local SEO that actually converts"
                        lead="Generic national pages miss local intent. Our location hub helps Australian businesses find staffing support in their exact area."
                    />
                </div>
                <ul class="home-benefit-grid">
                    @foreach([
                        ['title' => 'Local search intent', 'text' => 'Rank for “virtual assistant Sydney” and similar high-intent queries.'],
                        ['title' => 'Structured data', 'text' => 'CollectionPage, LocalBusiness, FAQPage, and BreadcrumbList schema on every page.'],
                        ['title' => 'Internal linking', 'text' => 'State → city → town hierarchy strengthens topical authority sitewide.'],
                    ] as $item)
                        <li class="home-benefit-card">
                            <p class="home-benefit-card__title">{{ $item['title'] }}</p>
                            <p class="home-benefit-card__text">{{ $item['text'] }}</p>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

    <x-public.cta-band
        title="Ready to hire in your area?"
        subtitle="Book a free consultation — we'll match you with AEST-aligned talent in days."
        :ctaText="$bookText"
        :ctaUrl="$bookUrl"
    />
</x-layouts.app>