@php
    $catalog = app(\App\Support\IndustryNavCatalog::class);
    $meta = $catalog->itemMeta();
    $categoryDefs = $catalog->categories();

    $industryIcons = [
        'small-business' => '🏪',
        'medium-business' => '🏢',
        'agencies' => '🎯',
        'startups' => '🚀',
        'professional-services' => '💼',
        'real-estate' => '🏠',
        'healthcare' => '🏥',
        'finance' => '📊',
        'legal' => '⚖️',
        'ecommerce' => '🛒',
    ];

    $slugToCategory = [];
    foreach ($categoryDefs as $cat) {
        foreach ($cat['slugs'] as $slug) {
            $slugToCategory[$slug] = $cat['key'];
        }
    }

    $industryItems = collect($industries ?? [])->values()->map(function ($industry) use ($meta, $slugToCategory, $categoryDefs, $industryIcons) {
        $itemMeta = $meta[$industry->slug] ?? [
            'line1' => \Illuminate\Support\Str::limit(strip_tags($industry->description ?? ''), 100),
            'line2' => '',
            'accent' => 'emerald',
        ];
        $categoryKey = $slugToCategory[$industry->slug] ?? 'business-size';
        $categoryLabel = collect($categoryDefs)->firstWhere('key', $categoryKey)['label'] ?? 'Industries';

        return [
            'slug' => $industry->slug,
            'name' => $industry->name,
            'url' => route('industries.show', $industry->slug),
            'line1' => $itemMeta['line1'],
            'line2' => $itemMeta['line2'] ?? '',
            'accent' => $itemMeta['accent'] ?? 'emerald',
            'icon' => $industryIcons[$industry->slug] ?? '🏢',
            'category_key' => $categoryKey,
            'category_label' => $categoryLabel,
        ];
    });

    if ($industryItems->isEmpty()) {
        $industryItems = collect($meta)->take(8)->map(function ($itemMeta, $slug) use ($slugToCategory, $categoryDefs, $industryIcons) {
            $categoryKey = $slugToCategory[$slug] ?? 'business-size';
            $categoryLabel = collect($categoryDefs)->firstWhere('key', $categoryKey)['label'] ?? 'Industries';

            return [
                'slug' => $slug,
                'name' => str($slug)->title()->replace('-', ' ')->toString(),
                'url' => route('industries.show', $slug),
                'line1' => $itemMeta['line1'],
                'line2' => $itemMeta['line2'] ?? '',
                'accent' => $itemMeta['accent'] ?? 'emerald',
                'icon' => $industryIcons[$slug] ?? '🏢',
                'category_key' => $categoryKey,
                'category_label' => $categoryLabel,
            ];
        })->values();
    }

    $filterCategories = collect($categoryDefs)->map(fn ($cat) => [
        'key' => $cat['key'],
        'label' => $cat['label'],
        'accent' => $cat['accent'],
    ])->values()->all();
@endphp

<section class="home-industries-atlas">
    <div class="home-industries-atlas__mesh" aria-hidden="true"></div>

    <div class="container-page relative z-[1]">
        <div
            class="home-industries-atlas__layout"
            x-data="industryAtlas(@js($industryItems->values()->all()), @js($filterCategories))"
        >
            @php $industriesCopy = $home['industries'] ?? []; @endphp
            <aside class="home-industries-atlas__sidebar">
                <p class="home-kicker">{{ $industriesCopy['kicker'] ?? 'Industries' }}</p>
                <h2 class="home-industries-atlas__title">{{ $industriesCopy['title'] ?? '' }}</h2>
                <p class="home-industries-atlas__lead">
                    {{ $industriesCopy['lead'] ?? '' }}
                </p>
                <a href="{{ route('industries.index') }}" class="home-industries-atlas__cta">
                    {{ $industriesCopy['link_text'] ?? 'Browse all industries' }}
                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/></svg>
                </a>

                <nav class="home-industries-atlas__filters" aria-label="Filter industries by category">
                    <button
                        type="button"
                        class="home-industries-atlas__filter"
                        :class="{ 'is-active': active === 'all' }"
                        @click="setFilter('all')"
                    >
                        <span class="home-industries-atlas__filter-dot home-industries-atlas__filter-dot--all"></span>
                        All sectors
                        <span class="home-industries-atlas__filter-count" x-text="items.length"></span>
                    </button>
                    <template x-for="cat in categories" :key="cat.key">
                        <button
                            type="button"
                            class="home-industries-atlas__filter"
                            :class="{ 'is-active': active === cat.key }"
                            :data-accent="cat.accent"
                            @click="setFilter(cat.key)"
                        >
                            <span class="home-industries-atlas__filter-dot" :data-accent="cat.accent"></span>
                            <span x-text="cat.label"></span>
                            <span class="home-industries-atlas__filter-count" x-text="countFor(cat.key)"></span>
                        </button>
                    </template>
                </nav>
            </aside>

            <div class="home-industries-atlas__main">
                <template x-if="active === 'all' && filtered.length > 0">
                    <a
                        :href="filtered[0].url"
                        class="home-industries-atlas__hero"
                        :data-accent="filtered[0].accent"
                    >
                        @php
                            $industriesImage = $industriesCopy['image'] ?? '/images/home/modern-office.jpg';
                            $industriesImageSrc = str_starts_with($industriesImage, 'http') ? $industriesImage : asset(ltrim($industriesImage, '/'));
                        @endphp
                        <img
                            src="{{ $industriesImageSrc }}"
                            alt=""
                            width="960"
                            height="420"
                            loading="lazy"
                            decoding="async"
                            aria-hidden="true"
                        >
                        <div class="home-industries-atlas__hero-shade" aria-hidden="true"></div>
                        <div class="home-industries-atlas__hero-content">
                            <span class="home-industries-atlas__hero-badge">Featured sector</span>
                            <span class="home-industries-atlas__hero-icon" x-text="filtered[0].icon"></span>
                            <h3 class="home-industries-atlas__hero-title" x-text="filtered[0].name"></h3>
                            <p class="home-industries-atlas__hero-text" x-text="filtered[0].line1"></p>
                            <span class="home-industries-atlas__hero-link">Explore guide →</span>
                        </div>
                    </a>
                </template>

                <div class="home-industries-atlas__bento">
                    <template x-for="(item, index) in gridItems" :key="item.slug">
                        <a
                            :href="item.url"
                            class="home-industries-atlas__tile"
                            :data-accent="item.accent"
                        >
                            <span class="home-industries-atlas__tile-icon" x-text="item.icon"></span>
                            <div class="home-industries-atlas__tile-body">
                                <p class="home-industries-atlas__tile-category" x-text="item.category_label"></p>
                                <h3 class="home-industries-atlas__tile-title" x-text="item.name"></h3>
                                <p class="home-industries-atlas__tile-text" x-text="item.line1"></p>
                            </div>
                            <span class="home-industries-atlas__tile-arrow" aria-hidden="true">→</span>
                        </a>
                    </template>
                </div>
            </div>
        </div>

        @if($industryItems->isNotEmpty())
            <div class="home-industries-atlas__marquee" aria-hidden="true">
                <div class="home-industries-atlas__marquee-track">
                    @foreach([1, 2] as $pass)
                        @foreach($industryItems as $item)
                            <span class="home-industries-atlas__marquee-item">{{ $item['name'] }}</span>
                        @endforeach
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>