@push('styles')
    <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
@endpush

@php
    $order = $this->wizardOrder();
    $currentIndex = array_search($step, $order, true) ?: 0;
    $tabs = $this->wizardTabs();
    $tabIndex = $this->wizardTabIndex();
    $jsonMinProducts = \App\Services\Catalog\CatalogProductImportValidator::MIN_PRODUCTS;
@endphp

<div class="mb-page-flex"
     @if (in_array($step, ['analyzing', 'loading_subcategories', 'discovering'], true))
         wire:poll.2s="syncFromGeneration"
     @endif
>
    <div class="mb-wizard {{ in_array($step, ['products', 'json_edit'], true) ? 'is-wide' : '' }}" id="new-catalog-page">
        <div class="mb-wizard-head">
            <div class="mb-page-head">
                <div>
                    <a class="mb-back" href="{{ route('landing-pages.index', ['tab' => 'catalog']) }}" wire:navigate><i class="bi bi-arrow-left"></i>All landing pages</a>
                    <h1 class="mb-page-title">New Catalog Landing Page</h1>
                </div>
                @if ($brandName !== '' || $brandUrl !== '')
                    <div class="mb-page-head-actions">
                        <button type="button" class="mb-btn-ghost" wire:click="startOver">Start over</button>
                    </div>
                @endif
            </div>
            <div class="mb-steps">
                @foreach ($tabs as $label => $tabStep)
                    @php $stepIndex = array_search($tabStep, array_values($tabs), true); @endphp
                    <div class="mb-step {{ $stepIndex < $tabIndex ? 'is-done' : ($stepIndex === $tabIndex ? 'is-active' : '') }}">
                        <div class="mb-step-bar"><i></i></div>
                        <div class="mb-step-label">{{ $label }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="mb-wizard-scroll">
            <div>

                @if ($confirmedBrandName !== '' && $step !== 'brand')
                    <div class="mb-note is-info mb-3"><i class="bi bi-shop"></i><div>Brand: <strong>{{ $confirmedBrandName }}</strong></div></div>
                @endif

                @if ($step === 'brand')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Brand name</h2>
                        <p class="mb-step-sub">What's the brand name for this catalog? For example, Office Depot — not the website.</p>
                    </div>
                    <div class="mb-field-card">
                        <form wire:key="catalog-brand-form" wire:submit="submitBrand" class="mb-form-row">
                            <label class="mb-field">
                                <span class="mb-field-label">Brand</span>
                                <input type="text" wire:key="catalog-brand-name-input" wire:model="brandName" class="mb-input @error('brandName') is-invalid @enderror" placeholder="Office Depot" autocomplete="organization" autofocus>
                            </label>
                            @error('brandName')
                                <div class="mb-field-error">{{ $message }}</div>
                            @enderror
                        </form>
                    </div>

                @elseif ($step === 'products')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Add products</h2>
                        <p class="mb-step-sub">Scrape a product listing page, or upload JSON to skip scraping and go straight to keyword research.</p>
                    </div>

                    <div class="mb-options mb-catalog-source mb-4" role="group" aria-label="Product source">
                        <button type="button"
                                class="mb-option {{ $productSource === 'listing' ? 'is-selected' : '' }}"
                                wire:click="chooseProductSource('listing')">
                            <span class="mb-option-icon"><i class="bi bi-link-45deg"></i></span>
                            <span>
                                <div class="mb-option-title">Product listing URL</div>
                                <div class="mb-option-desc">Scrape a category or search results page from the store.</div>
                            </span>
                            <span class="mb-option-check"><i class="bi bi-check-lg"></i></span>
                        </button>
                        <button type="button"
                                class="mb-option {{ $productSource === 'json' ? 'is-selected' : '' }}"
                                wire:click="chooseProductSource('json')">
                            <span class="mb-option-icon"><i class="bi bi-filetype-json"></i></span>
                            <span>
                                <div class="mb-option-title">Upload JSON</div>
                                <div class="mb-option-desc">Paste or upload products directly — no scraping required.</div>
                            </span>
                            <span class="mb-option-check"><i class="bi bi-check-lg"></i></span>
                        </button>
                    </div>

                    @if ($productSource === 'listing')
                        <div class="mb-field-card mb-catalog-panel">
                            <div class="mb-catalog-switch mb-3">
                                <i class="bi bi-filetype-json"></i>
                                <div>
                                    Scraping blocked or no products found?
                                    <button type="button" class="mb-catalog-switch-btn" wire:click="chooseProductSource('json')">Switch to JSON upload</button>
                                </div>
                            </div>
                            <form wire:key="catalog-listing-form" wire:submit="submitProducts" class="mb-form-row">
                                <label class="mb-field">
                                    <span class="mb-label">Product listing URL</span>
                                    <div class="mb-catalog-url-field">
                                        <i class="bi bi-globe2 mb-catalog-url-icon" aria-hidden="true"></i>
                                        <input type="url"
                                               wire:key="catalog-listing-url-input"
                                               wire:model="listingUrl"
                                               class="mb-input mb-input-with-icon @error('listingUrl') is-invalid @enderror"
                                               placeholder="https://www.kohls.com/catalog/mens-teens.jsp or https://www.amazon.com/Best-Sellers-Appliances/zgbs/appliances"
                                               autocomplete="url"
                                               autofocus>
                                    </div>
                                </label>
                                @error('listingUrl')
                                    <div class="mb-error is-on">{{ $message }}</div>
                                @enderror

                                <div class="mb-catalog-tips">
                                    <div class="mb-catalog-tip is-good">
                                        <div class="mb-catalog-tip-label"><i class="bi bi-check-circle"></i> Good URLs</div>
                                        <ul>
                                            <li>Category pages with product grids</li>
                                            <li>Search results with multiple products</li>
                                            <li>Brand or collection listing pages (Kohl&rsquo;s, Amazon Best Sellers, Office Depot, Dermstore, Marshalls)</li>
                                        </ul>
                                    </div>
                                    <div class="mb-catalog-tip is-bad">
                                        <div class="mb-catalog-tip-label"><i class="bi bi-x-circle"></i> Avoid</div>
                                        <ul>
                                            <li>Store homepages (<code>https://store.com/</code>)</li>
                                            <li>Single product detail pages</li>
                                            <li>Login, cart, or account pages</li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                    @else
                        <div class="mb-catalog-import-grid">
                            <div class="mb-field-card mb-catalog-panel">
                                <form wire:key="catalog-json-form" wire:submit="submitProducts" class="mb-form-row">
                                    <label class="mb-file-drop" for="catalog-products-json-file">
                                        <input id="catalog-products-json-file"
                                               type="file"
                                               wire:model="productsJsonFile"
                                               accept=".json,.txt,application/json"
                                               class="visually-hidden">
                                        <span class="mb-file-drop-icon"><i class="bi bi-cloud-arrow-up"></i></span>
                                        <span class="mb-file-drop-title">Drop a JSON file here or click to browse</span>
                                        <span class="mb-file-drop-sub">Accepts <code>.json</code> files up to 5 MB</span>
                                    </label>
                                    <div wire:loading wire:target="productsJsonFile" class="mb-hint">
                                        <i class="bi bi-hourglass-split"></i> Reading file&hellip;
                                    </div>
                                    @error('productsJsonFile')
                                        <div class="mb-error is-on">{{ $message }}</div>
                                    @enderror

                                    <label class="mb-field mb-label-gap">
                                        <span class="mb-label">Or paste JSON</span>
                                        <textarea wire:model="productsJson"
                                                  rows="14"
                                                  class="mb-textarea mb-textarea-code mb-textarea-lg @error('productsJson') is-invalid @enderror"
                                                  placeholder='{"products":[{"name":"...","url":"...","price":"$19.99","image_url":"..."}]}'
                                                  autofocus></textarea>
                                    </label>
                                    @error('productsJson')
                                        <div class="mb-error is-on">{{ $message }}</div>
                                    @enderror
                                </form>
                            </div>

                            <aside class="mb-json-format-card" aria-label="JSON format reference">
                                <div class="mb-json-format-head">
                                    <div class="mb-json-format-intro">
                                        <i class="bi bi-braces"></i>
                                        <div>
                                            <div class="mb-json-format-title">Required JSON format</div>
                                            <div class="mb-json-format-sub">Minimum {{ $jsonMinProducts }} products</div>
                                        </div>
                                    </div>
                                    @include('catalog-landing-pages.partials.products-json-template-actions', [
                                        'sourceId' => 'catalog-products-json-source',
                                        'clipboardText' => $this->productsJsonExample,
                                    ])
                                </div>
                                <div class="mb-json-format-fields">
                                    <span class="mb-json-field is-required">name</span>
                                    <span class="mb-json-field is-required">url</span>
                                </div>
                                <div class="mb-json-format-group">
                                    <div class="mb-json-format-group-label">pricing</div>
                                    <div class="mb-json-format-fields">
                                        <span class="mb-json-field is-required">price</span>
                                        <span class="mb-json-field">list_price</span>
                                    </div>
                                </div>
                                <div class="mb-json-format-group">
                                    <div class="mb-json-format-group-label">ratings</div>
                                    <div class="mb-json-format-fields">
                                        <span class="mb-json-field">rating</span>
                                        <span class="mb-json-field">review_count</span>
                                    </div>
                                </div>
                                <div class="mb-json-format-group">
                                    <div class="mb-json-format-group-label">keywords</div>
                                    <div class="mb-json-format-fields">
                                        <span class="mb-json-field is-required">primary</span>
                                        <span class="mb-json-field">related</span>
                                    </div>
                                </div>
                                <div class="mb-json-format-group">
                                    <div class="mb-json-format-group-label">media</div>
                                    <div class="mb-json-format-fields">
                                        <span class="mb-json-field is-required">image_url</span>
                                    </div>
                                </div>
                                <div class="mb-json-format-fields">
                                    <span class="mb-json-field">popularity_note</span>
                                </div>
                                <p class="mb-hint mb-0">Every product needs a primary keyword (and optional related keywords) for Google Ads research and ranking. Grouped fields are preferred; flat fields still work.</p>
                                <pre id="catalog-products-json-example" class="mb-json-example"><code>{{ $this->productsJsonExample }}</code></pre>
                            </aside>
                        </div>
                    @endif

                @elseif ($step === 'json_edit')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Review product JSON</h2>
                        <p class="mb-step-sub">Edit your products below, then continue to keyword research and ranking.</p>
                    </div>

                    <div class="mb-catalog-editor">
                        <div class="mb-field-card mb-catalog-panel mb-catalog-editor-main">
                            <form wire:key="catalog-json-edit-form" wire:submit="submitProducts" class="mb-form-row">
                                <div class="mb-catalog-editor-head">
                                    <label class="mb-label mb-0" for="catalog-json-editor">Products JSON</label>
                                    <span class="mb-cell-meta">Monospace editor · edits save when you continue</span>
                                </div>
                                <textarea id="catalog-json-editor"
                                          wire:model="productsJson"
                                          class="mb-textarea mb-textarea-code mb-textarea-editor @error('productsJson') is-invalid @enderror"
                                          spellcheck="false"
                                          autofocus></textarea>
                                @error('productsJson')
                                    <div class="mb-error is-on">{{ $message }}</div>
                                @enderror
                            </form>
                        </div>

                        <aside class="mb-json-format-card mb-catalog-editor-aside" aria-label="JSON format reference">
                            <div class="mb-json-format-head">
                                <div class="mb-json-format-intro">
                                    <i class="bi bi-braces"></i>
                                    <div>
                                        <div class="mb-json-format-title">Format reference</div>
                                        <div class="mb-json-format-sub">Minimum {{ $jsonMinProducts }} valid products</div>
                                    </div>
                                </div>
                                @include('catalog-landing-pages.partials.products-json-template-actions', [
                                    'sourceId' => 'catalog-json-edit-source',
                                    'clipboardText' => $this->productsJsonExample,
                                ])
                            </div>
                            <div class="mb-json-format-fields">
                                <span class="mb-json-field is-required">name</span>
                                <span class="mb-json-field is-required">url</span>
                            </div>
                            <div class="mb-json-format-group">
                                <div class="mb-json-format-group-label">pricing · ratings · media</div>
                                <div class="mb-json-format-fields">
                                    <span class="mb-json-field is-required">pricing.price</span>
                                    <span class="mb-json-field">pricing.list_price</span>
                                    <span class="mb-json-field">ratings.rating</span>
                                    <span class="mb-json-field">ratings.review_count</span>
                                    <span class="mb-json-field is-required">keywords.primary</span>
                                    <span class="mb-json-field">keywords.related</span>
                                    <span class="mb-json-field is-required">media.image_url</span>
                                </div>
                            </div>
                            <details class="mb-json-example-toggle">
                                <summary>Show example JSON</summary>
                                <pre id="catalog-json-edit-example" class="mb-json-example"><code>{{ $this->productsJsonExample }}</code></pre>
                            </details>
                        </aside>
                    </div>

                @elseif ($step === 'website')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Where should we look?</h2>
                        <p class="mb-step-sub">
                            @if ($researchSource === 'listing')
                                Paste a product listing page URL. I'll pick the top-rated or most popular products from that page — no category or subcategory step.
                            @else
                                What's the website URL? I'll look for product categories and subcategories, then pick the top products.
                            @endif
                        </p>
                    </div>
                    <div class="mb-segment mb-3" role="group" aria-label="Research source">
                        <button type="button" class="mb-segment-btn {{ $researchSource === 'website' ? 'is-on' : '' }}" wire:click="chooseResearchSource('website')">Website domain</button>
                        <button type="button" class="mb-segment-btn {{ $researchSource === 'listing' ? 'is-on' : '' }}" wire:click="chooseResearchSource('listing')">Product listing page</button>
                    </div>
                    <div class="mb-field-card">
                        <form wire:key="catalog-website-form" wire:submit="submitWebsite" class="mb-form-row">
                            <label class="mb-field">
                                <span class="mb-field-label">{{ $researchSource === 'listing' ? 'Listing URL' : 'Website URL' }}</span>
                                <input type="url" wire:key="catalog-brand-url-input" wire:model="brandUrl" class="mb-input @error('brandUrl') is-invalid @enderror" placeholder="{{ $researchSource === 'listing' ? 'https://example.com/collections/fresh-seedlings' : 'https://example.com' }}" autocomplete="url" autofocus>
                            </label>
                            @error('brandUrl')
                                <div class="mb-field-error">{{ $message }}</div>
                            @enderror
                        </form>
                    </div>

                @elseif ($step === 'analyzing')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Analyzing website</h2>
                        <p class="mb-step-sub">Analyzing the website for product categories&hellip;</p>
                    </div>
                    <div class="mb-note is-info"><i class="bi bi-hourglass-split"></i><div>Working&hellip; this usually takes a few seconds.</div></div>

                @elseif ($step === 'category')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Pick a category</h2>
                        <p class="mb-step-sub">I found these categories. Which one should we use?</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach ($categories as $item)
                            @if (filled($item['name'] ?? null))
                                <button type="button" class="mb-btn-ghost" wire:key="category-{{ $item['name'] }}" wire:click="selectCategory({{ \Illuminate\Support\Js::from($item['name']) }})">
                                    {{ $item['name'] }}
                                </button>
                            @endif
                        @endforeach
                    </div>

                @elseif ($step === 'loading_subcategories')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Loading subcategories</h2>
                        <p class="mb-step-sub">Looking up subcategories in {{ $category }}&hellip;</p>
                    </div>
                    <div class="mb-note is-info"><i class="bi bi-hourglass-split"></i><div>Working&hellip;</div></div>

                @elseif ($step === 'subcategory')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Pick subcategories</h2>
                        <p class="mb-step-sub">Which subcategory should we catalog?</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @foreach ($subcategories as $item)
                            @if (filled($item['name'] ?? null))
                                <button type="button"
                                        class="mb-btn-ghost {{ in_array($item['name'], $selectedSubcategories, true) ? 'is-on' : '' }}"
                                        wire:key="subcategory-{{ $item['name'] }}"
                                        wire:click="toggleSubcategory({{ \Illuminate\Support\Js::from($item['name']) }})">
                                    {{ $item['name'] }}
                                </button>
                            @endif
                        @endforeach
                    </div>

                @elseif ($step === 'discovering')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Finding products</h2>
                        <p class="mb-step-sub">
                            @if ($researchSource === 'json')
                                Running keyword research and ranking on your uploaded products&hellip;
                            @elseif ($researchSource === 'listing')
                                Picking the top-rated or most popular products from this listing&hellip;
                            @elseif ($subcategory)
                                Picking the top-rated or most popular products in {{ $subcategory }}&hellip;
                            @elseif ($category)
                                Picking the top-rated or most popular products in {{ $category }}&hellip;
                            @else
                                Picking the top-rated or most popular products on this site&hellip;
                            @endif
                        </p>
                    </div>
                    <div class="mb-note is-info"><i class="bi bi-hourglass-split"></i><div>Working&hellip;</div></div>
                    @if ($researchSource === 'listing')
                        <div class="mb-note is-info mt-3">
                            <i class="bi bi-filetype-json"></i>
                            <div>
                                Taking too long or scraping failed?
                                <button type="button" class="mb-catalog-switch-btn" wire:click="useJsonImportInstead">Add products via JSON instead</button>
                            </div>
                        </div>
                    @endif

                @elseif ($step === 'template')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Choose a layout</h2>
                        <p class="mb-step-sub">
                            I found {{ count($products) }} products. Which layout should we use for every page?
                        </p>
                        @if ($products !== [])
                            <ul class="mb-step-sub mb-0 ps-3">
                                @foreach (array_slice($products, 0, 5) as $product)
                                    <li>{{ $product['name'] ?? $product['url'] }}</li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                    <div x-data="{ open: false, previewUrl: '', previewLabel: '', previewName: '' }"
                         x-effect="document.body.classList.toggle('overflow-hidden', open)">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                            <div class="mb-cell-meta">{{ count($products) }} products ranked and ready for layout selection.</div>
                            @include('catalog-landing-pages.partials.research-details-modal', [
                                'research' => $this->rankingResearch,
                                'modalId' => 'catalog-wizard-research-modal',
                                'buttonClass' => 'mb-btn-ghost',
                            ])
                        </div>
                        <div class="mb-style-grid">
                            @foreach ($templateChoices as $name)
                                <div class="mb-field-card" wire:key="template-{{ $name }}">
                                    <div class="fw-semibold mb-2">{{ $this->templateLabel($name) }}</div>
                                    <div class="position-relative">
                                        <iframe src="{{ route('catalog-landing-pages.template-preview', $name) }}"
                                                title="{{ $this->templateLabel($name) }} preview"
                                                class="w-100 border rounded bg-white"
                                                style="height: 280px; overflow: auto;"
                                                tabindex="0"
                                                scrolling="yes"
                                                sandbox="allow-same-origin"></iframe>
                                        <button type="button"
                                                class="mb-icon-btn position-absolute top-0 end-0 m-2"
                                                data-url="{{ route('catalog-landing-pages.template-preview', $name) }}"
                                                data-label="{{ $this->templateLabel($name) }}"
                                                data-name="{{ $name }}"
                                                @click.stop="previewUrl = $el.dataset.url; previewLabel = $el.dataset.label; previewName = $el.dataset.name; open = true"
                                                aria-label="Preview {{ $this->templateLabel($name) }} full page">
                                            <i class="bi bi-arrows-angle-expand"></i>
                                        </button>
                                    </div>
                                    <button type="button"
                                            class="mb-btn-primary w-100 mt-2"
                                            wire:click="selectTemplate({{ \Illuminate\Support\Js::from($name) }})"
                                            wire:loading.attr="disabled"
                                            wire:target="selectTemplate">
                                        <span wire:loading.remove wire:target="selectTemplate">Use {{ $this->templateLabel($name) }}</span>
                                        <span wire:loading wire:target="selectTemplate"><i class="bi bi-hourglass-split"></i> Starting&hellip;</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>

                        <div id="catalog-template-preview-modal"
                             hidden
                             x-bind:hidden="! open"
                             class="mb-style-preview"
                             x-bind:style="open ? 'display:flex' : 'display:none'"
                             role="dialog"
                             aria-modal="true"
                             aria-labelledby="catalog-template-preview-title"
                             @keydown.escape.window="open = false"
                             @click.self="open = false">
                            <div class="mb-style-sheet" role="document">
                                <div class="mb-style-sheet-head">
                                    <div><h3 id="catalog-template-preview-title" x-text="previewLabel"></h3></div>
                                    <button type="button" class="mb-icon-btn" @click="open = false" aria-label="Close"><i class="bi bi-x-lg"></i></button>
                                </div>
                                <iframe x-bind:src="open ? previewUrl : ''"
                                        class="w-100 border-0 flex-grow-1"
                                        style="min-height: 60vh;"
                                        title="Full page template preview"
                                        sandbox="allow-same-origin"></iframe>
                                <div class="mb-style-sheet-foot">
                                    <button type="button" class="mb-btn-ghost" @click="open = false">Close</button>
                                    <button type="button"
                                            class="mb-btn-primary"
                                            x-on:click="if (previewName) $wire.selectTemplate(previewName)"
                                            wire:loading.attr="disabled"
                                            wire:target="selectTemplate">
                                        Use this layout
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                @elseif ($step === 'theme')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Choose a theme</h2>
                        <p class="mb-step-sub">
                            Pick the visual style for {{ $this->templateLabel($selectedTemplate) }}. We will generate every page variation with this theme, then you can choose which one to publish.
                        </p>
                    </div>
                    <div class="mb-style-grid">
                        @foreach ($themeChoices as $theme)
                            <div class="mb-field-card" wire:key="theme-{{ $theme['key'] }}">
                                <div class="fw-semibold mb-1">{{ $theme['label'] }}</div>
                                <div class="mb-cell-meta mb-3">{{ $this->templateLabel($selectedTemplate) }}</div>
                                <button type="button"
                                        class="mb-btn-primary w-100"
                                        wire:click="selectTheme({{ \Illuminate\Support\Js::from($theme['key']) }})"
                                        wire:loading.attr="disabled"
                                        wire:target="selectTheme">
                                    <span wire:loading.remove wire:target="selectTheme">Use {{ $theme['label'] }}</span>
                                    <span wire:loading wire:target="selectTheme"><i class="bi bi-hourglass-split"></i> Generating&hellip;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>

                @elseif ($step === 'empty')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">{{ $emptyReason === 'blocked' ? 'Store blocked automated access' : 'No products found' }}</h2>
                        <p class="mb-step-sub">
                            @if ($emptyReason === 'blocked')
                                This store blocked automated scraping, so the listing could not be read.
                                @if ($listingScrapeError)
                                    <span class="d-block mt-2 text-muted">{{ $listingScrapeError }}</span>
                                @endif
                                <span class="d-block mt-2">The fastest workaround is to add products manually with JSON. You can also retry after setting <code>SCRAPING_COOKIES_FILE</code> or <code>SCRAPING_PROXY</code>.</span>
                            @elseif ($emptyReason === 'no_products')
                                No products found. I need at least 5 products with images, and I won't invent extra URLs.
                                @if ($researchSource === 'listing')
                                    <span class="d-block mt-2">Try a different listing URL, retry scraping, or add products manually with JSON.</span>
                                @elseif ($researchSource === 'json')
                                    Edit your JSON and make sure at least {{ $jsonMinProducts }} products include valid URLs and image URLs.
                                @endif
                            @else
                                I couldn't find products with images on this site.
                            @endif
                        </p>
                    </div>
                    @if ($researchSource === 'listing')
                        <div class="mb-note is-info mb-3">
                            <i class="bi bi-filetype-json"></i>
                            <div>
                                <strong>Add products manually.</strong>
                                Upload or paste a JSON file with at least {{ $jsonMinProducts }} products to skip scraping and continue with keyword research.
                            </div>
                        </div>
                    @endif
                    @if ($researchSource === 'website')
                        <div class="mb-field-card mb-3">
                            <form wire:key="catalog-listing-fallback-form" wire:submit="submitListingFallback" class="mb-form-row">
                                <label class="mb-field">
                                    <span class="mb-field-label">Listing URL</span>
                                    <input type="url" wire:key="catalog-listing-url-input" wire:model="listingUrl" class="mb-input @error('listingUrl') is-invalid @enderror" placeholder="https://example.com/collections/fresh-seedlings" autocomplete="url">
                                </label>
                                @error('listingUrl')
                                    <div class="mb-field-error">{{ $message }}</div>
                                @enderror
                            </form>
                        </div>
                    @endif

                @elseif ($step === 'failed')
                    <div class="mb-step-head">
                        <span class="mb-eyebrow"><i class="bi bi-stars"></i>Step {{ $tabIndex + 1 }} of {{ count($tabs) }}</span>
                        <h2 class="mb-step-title">Something went wrong</h2>
                    </div>
                    <div class="mb-note is-error"><i class="bi bi-exclamation-triangle"></i><div>{{ $failureReason ?: 'Something went wrong while researching the site.' }}</div></div>
                @endif

            </div>
        </div>

        <div class="mb-wizard-foot">
            @if ($step === 'brand')
                <button type="button" class="mb-btn-primary" wire:click="submitBrand">Continue</button>
            @elseif ($step === 'products')
                <button type="button" class="mb-btn-primary" wire:click="submitProducts" wire:loading.attr="disabled" wire:target="submitProducts,productsJsonFile">
                    <span wire:loading.remove wire:target="submitProducts,productsJsonFile">{{ $productSource === 'json' ? 'Validate JSON' : 'Find products' }}</span>
                    <span wire:loading wire:target="submitProducts,productsJsonFile"><i class="bi bi-hourglass-split"></i> Working&hellip;</span>
                </button>
            @elseif ($step === 'json_edit')
                <button type="button" class="mb-btn-primary" wire:click="submitProducts" wire:loading.attr="disabled" wire:target="submitProducts">
                    <span wire:loading.remove wire:target="submitProducts">Continue with keywords</span>
                    <span wire:loading wire:target="submitProducts"><i class="bi bi-hourglass-split"></i> Starting&hellip;</span>
                </button>
                <button type="button" class="mb-btn-ghost" wire:click="backToProducts('json')">Back</button>
            @elseif ($step === 'website')
                <button type="button" class="mb-btn-primary" wire:click="submitWebsite" wire:loading.attr="disabled" wire:target="submitWebsite">
                    <span wire:loading.remove wire:target="submitWebsite">{{ $researchSource === 'listing' ? 'Find products' : 'Analyze' }}</span>
                    <span wire:loading wire:target="submitWebsite"><i class="bi bi-hourglass-split"></i> {{ $researchSource === 'listing' ? 'Finding products' : 'Analyzing' }}&hellip;</span>
                </button>
            @elseif ($step === 'subcategory')
                <button type="button" class="mb-btn-primary" wire:click="confirmSubcategories" @disabled($selectedSubcategories === [])>Continue</button>
                <button type="button" class="mb-btn-ghost" wire:click="pickAnotherCategory">Pick another category</button>
            @elseif ($step === 'discovering')
                @if ($researchSource === 'listing')
                    <button type="button" class="mb-btn-ghost" wire:click="backToProducts('listing')">Back</button>
                    <button type="button" class="mb-btn-ghost" wire:click="useJsonImportInstead">Use JSON instead</button>
                @endif
            @elseif ($step === 'empty')
                @if ($researchSource === 'listing')
                    <button type="button" class="mb-btn-primary" wire:click="backToProducts('json')">
                        Add products via JSON
                    </button>
                    <button type="button" class="mb-btn-ghost" wire:click="backToProducts('listing')">Try a different URL</button>
                    <button type="button" class="mb-btn-ghost" wire:click="retryAnalysis" wire:loading.attr="disabled" wire:target="retryAnalysis">
                        <span wire:loading.remove wire:target="retryAnalysis">Retry listing</span>
                        <span wire:loading wire:target="retryAnalysis"><i class="bi bi-hourglass-split"></i> Retrying&hellip;</span>
                    </button>
                @elseif ($researchSource === 'json')
                    <button type="button" class="mb-btn-primary" wire:click="editUploadedJson">Edit JSON</button>
                    <button type="button" class="mb-btn-ghost" wire:click="retryAnalysis" wire:loading.attr="disabled" wire:target="retryAnalysis">Retry ranking</button>
                    <button type="button" class="mb-btn-ghost" wire:click="backToProducts('listing')">Use listing URL instead</button>
                @else
                    @if ($researchSource !== 'listing')
                        <button type="button" class="mb-btn-primary" wire:click="submitListingFallback" wire:loading.attr="disabled" wire:target="submitListingFallback">
                            <span wire:loading.remove wire:target="submitListingFallback">Find products</span>
                            <span wire:loading wire:target="submitListingFallback"><i class="bi bi-hourglass-split"></i> Finding products&hellip;</span>
                        </button>
                    @endif
                    @if ($categories === [])
                        <button type="button" class="mb-btn-ghost" wire:click="retryAnalysis">Retry analysis</button>
                    @endif
                    @if ($categories !== [])
                        <button type="button" class="mb-btn-ghost" wire:click="pickAnotherCategory">Pick another category</button>
                    @endif
                    @if ($subcategories !== [])
                        <button type="button" class="mb-btn-ghost" wire:click="pickAnotherSubcategory">Pick another subcategory</button>
                    @endif
                @endif
                <button type="button" class="mb-btn-ghost" wire:click="startOver">Start over</button>
            @elseif ($step === 'failed')
                <button type="button" class="mb-btn-ghost" wire:click="retryAnalysis">Retry analysis</button>
                <button type="button" class="mb-btn-ghost" wire:click="startOver">Start over</button>
            @endif
        </div>
    </div>
</div>

@once('catalog-products-json-copy')
    @push('scripts')
        <script>
            document.addEventListener('click', (event) => {
                const button = event.target.closest('[data-copy-target]');

                if (!button) {
                    return;
                }

                const source = document.getElementById(button.dataset.copyTarget);

                if (!source) {
                    return;
                }

                const text = (source.value ?? source.textContent ?? '').trim();

                if (text === '') {
                    return;
                }

                const showCopied = () => {
                    button.classList.add('is-copied');
                    const icon = button.querySelector('.bi');

                    if (!icon) {
                        return;
                    }

                    icon.classList.remove('bi-clipboard');
                    icon.classList.add('bi-check-lg');

                    window.setTimeout(() => {
                        button.classList.remove('is-copied');
                        icon.classList.add('bi-clipboard');
                        icon.classList.remove('bi-check-lg');
                    }, 1500);
                };

                const fallbackCopy = () => {
                    if (source instanceof HTMLTextAreaElement) {
                        source.focus();
                        source.select();
                    }

                    if (document.execCommand('copy')) {
                        showCopied();
                    }
                };

                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(showCopied).catch(fallbackCopy);

                    return;
                }

                fallbackCopy();
            });
        </script>
    @endpush
@endonce