@extends('base.base')

@section('content')
    <x-skin-colors />

    <style>
        /* Modern Premium Onboarding styling */
        #brand-wizard {
            --ow-accent: {{ $kit['colors']['primary'] ?? '#1A325D' }};
            --ow-accent-soft: rgba(26, 50, 93, 0.08);
        }
        
        .onboarding-container {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .onboarding-header {
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid #e2e8f0;
            padding: 1.25rem 2rem;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .wizard-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        /* Steps navigation */
        #brand-wizard .ow-steps-nav {
            display: flex;
            gap: 12px;
            margin-bottom: 2rem;
        }
        #brand-wizard .ow-step-pill {
            flex: 1;
            padding: 14px 16px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 600;
            text-align: center;
            border: 2px solid transparent;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        #brand-wizard .ow-step-pill.is-active {
            background: var(--ow-accent-soft);
            color: var(--ow-accent);
            border-color: var(--ow-accent);
            transform: translateY(-1px);
        }
        #brand-wizard .ow-step-pill.is-done {
            background: #d1fae5;
            color: #065f46;
        }

        #brand-wizard .ow-panel {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }
        #brand-wizard .ow-panel.is-active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Real-time Preview */
        #ow-preview {
            background: #ffffff;
            border-radius: 16px;
            padding: 32px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04);
            position: sticky;
            top: 2rem;
        }
        #ow-preview .ow-preview-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #94a3b8;
            font-weight: 700;
            margin-bottom: 16px;
        }

        /* Mock browser header */
        #ow-mock-header {
            background: var(--pw-light, #fff);
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        }
        #ow-mock-header .ow-mock-logo {
            max-height: 40px;
            max-width: 150px;
            object-fit: contain;
        }
        #ow-mock-header .ow-mock-logo-placeholder {
            font-family: var(--pw-font-secondary, serif);
            font-weight: 800;
            font-size: 1.25rem;
            color: var(--pw-primary, #1A325D);
        }
        #ow-mock-header .ow-mock-nav {
            display: flex;
            gap: 20px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--pw-dark, #0f172a);
            font-family: var(--pw-font-primary, sans-serif);
        }
        #ow-mock-header .ow-mock-cta {
            background: var(--pw-primary, #1A325D);
            color: var(--pw-light, #fff);
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            font-family: var(--pw-font-primary, sans-serif);
        }

        /* Mock hero banner */
        #ow-preview-hero {
            background: var(--pw-primary, #1A325D);
            color: var(--pw-light, #fff);
            padding: 56px 32px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        #ow-preview-hero h3 {
            color: inherit;
            font-family: var(--pw-font-secondary, serif);
            margin: 0 0 10px;
            font-size: 2.25rem;
            font-weight: 700;
        }
        #ow-preview-hero p {
            color: inherit;
            opacity: 0.85;
            margin: 0 0 20px;
            font-family: var(--pw-font-tertiary, sans-serif);
            font-size: 1rem;
        }
        #ow-preview .btn-sample {
            background: var(--pw-secondary, #B8960C);
            color: var(--pw-light, #fff);
            border: none;
            padding: 12px 28px;
            border-radius: 6px;
            font-family: var(--pw-font-primary, sans-serif);
            font-weight: 600;
            cursor: default;
            font-size: 0.9rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }

        /* Mock footer */
        #ow-mock-footer {
            background: var(--pw-dark, #0f172a);
            color: var(--pw-light, #fff);
            padding: 20px 24px;
            border-radius: 10px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: var(--pw-font-tertiary, sans-serif);
            font-size: 0.78rem;
        }
        #ow-mock-footer .ow-mock-footer-logo {
            max-height: 34px;
            max-width: 130px;
            opacity: 0.95;
        }
        #ow-mock-footer .ow-mock-footer-placeholder {
            font-family: var(--pw-font-secondary, serif);
            font-weight: 700;
            opacity: 0.9;
        }

        /* Font preview cards */
        #ow-preview-fonts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f1f5f9;
        }
        @media (max-width: 640px) {
            #ow-preview-fonts { grid-template-columns: 1fr; }
        }
        #ow-preview-fonts .ow-font-card {
            padding: 14px;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }
        #ow-preview-fonts .ow-font-role {
            font-size: 0.65rem;
            text-transform: uppercase;
            color: #94a3b8;
            margin-bottom: 6px;
            font-weight: 700;
        }
        #ow-preview-fonts .ow-font-sample-primary {
            font-family: var(--pw-font-primary, sans-serif);
            font-size: 1.15rem;
            font-weight: 700;
            color: #0f172a;
        }
        #ow-preview-fonts .ow-font-sample-secondary {
            font-family: var(--pw-font-secondary, serif);
            font-size: 1.15rem;
            font-weight: 700;
            color: #0f172a;
        }
        #ow-preview-fonts .ow-font-sample-tertiary {
            font-family: var(--pw-font-tertiary, sans-serif);
            font-size: 0.92rem;
            color: #334155;
            line-height: 1.4;
        }

        /* Font pairings list */
        .ow-pairings {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .ow-pairing {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fff;
        }
        .ow-pairing:hover {
            border-color: #94a3b8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .ow-pairing.is-selected {
            border-color: var(--ow-accent, #3b82f6);
            background: var(--ow-accent-soft);
        }
        .ow-pairing .ow-pairing-sample-a {
            font-size: 1.35rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.1;
        }
        .ow-pairing .ow-pairing-sample-b {
            font-size: 0.88rem;
            color: #475569;
            margin-top: 6px;
            line-height: 1.4;
        }
        .ow-pairing .ow-pairing-name {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .ow-pairing .ow-pairing-desc {
            font-size: 0.7rem;
            color: #94a3b8;
            margin-top: 8px;
        }
        .ow-pairing-custom {
            border-style: dashed;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #64748b;
            font-size: 0.85rem;
            min-height: 110px;
        }
        .ow-custom-fonts {
            display: none;
        }
        .ow-custom-fonts.is-visible {
            display: block;
        }

        /* Palette presets */
        .ow-palettes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .ow-palette {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fff;
        }
        .ow-palette:hover {
            border-color: #94a3b8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .ow-palette.is-selected {
            border-color: var(--ow-accent, #3b82f6);
            background: var(--ow-accent-soft);
        }
        .ow-palette .ow-palette-swatches {
            display: flex;
            height: 30px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 10px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .ow-palette .ow-palette-swatches span {
            flex: 1;
        }
        .ow-palette .ow-palette-name {
            font-weight: 700;
            font-size: 0.85rem;
            color: #0f172a;
        }
        .ow-palette .ow-palette-desc {
            font-size: 0.72rem;
            color: #64748b;
            margin-top: 4px;
            line-height: 1.3;
        }

        /* Color pickers grid */
        .ow-color-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        @media (max-width: 640px) {
            .ow-color-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .ow-color-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .ow-color-field label {
            font-size: 0.82rem;
            font-weight: 600;
            color: #334155;
        }
        .ow-color-field .ow-color-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .ow-color-field input[type="color"] {
            width: 44px;
            height: 40px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            padding: 0;
            background: transparent;
        }
        .ow-color-field input[type="text"] {
            flex: 1;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.85rem;
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
        }

        /* Logo upload slots */
        .ow-logo-upload {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.25s ease;
            position: relative;
            background: #fafafa;
        }
        .ow-logo-upload.has-file {
            border-color: #10b981;
            border-style: solid;
            background: #f0fdf4;
        }
        .ow-logo-upload.is-dragover {
            border-color: #3b82f6;
            border-style: solid;
            background: #eff6ff;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
        }
        .ow-logo-upload.is-dragover::after {
            content: 'Soltá acá';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, .9);
            color: #fff;
            font-weight: 700;
            font-size: 1.1rem;
            border-radius: 12px;
            pointer-events: none;
            letter-spacing: .02em;
        }
        .ow-logo-upload .ow-logo-preview {
            max-width: 140px;
            max-height: 70px;
            margin: 0 auto 10px;
            display: block;
            object-fit: contain;
        }
        .ow-logo-upload .ow-logo-default {
            max-width: 140px;
            max-height: 60px;
            margin: 0 auto 10px;
            display: block;
            opacity: .45;
            filter: grayscale(40%);
            object-fit: contain;
        }
        .ow-logo-upload.has-file .ow-logo-default {
            display: none;
        }
        .ow-logo-upload .ow-default-badge {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            background: #e2e8f0;
            padding: 3px 8px;
            border-radius: 10px;
            display: inline-block;
            margin-bottom: 12px;
            font-weight: 700;
        }
        .ow-logo-upload.has-file .ow-default-badge {
            display: none;
        }
        .ow-logo-upload .ow-logo-label {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 4px;
            font-size: 0.95rem;
        }
        .ow-logo-upload .ow-logo-hint {
            font-size: 0.75rem;
            color: #64748b;
            margin-bottom: 12px;
        }
        .ow-logo-upload input[type="file"] {
            display: none;
        }
        .ow-logo-upload .ow-upload-btn {
            display: inline-block;
            padding: 8px 16px;
            background: #3b82f6;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 600;
            transition: background 0.15s;
        }
        .ow-logo-upload .ow-upload-btn:hover {
            background: #2563eb;
        }
        .ow-logo-upload .ow-remove-btn {
            display: none;
            padding: 8px 16px;
            background: #ef4444;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 600;
            margin-left: 8px;
            border: none;
            transition: background 0.15s;
        }
        .ow-logo-upload .ow-remove-btn:hover {
            background: #dc2626;
        }
        .ow-logo-upload.has-file .ow-remove-btn {
            display: inline-block;
        }
        .ow-logo-upload .ow-progress {
            width: 100%;
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            margin-top: 12px;
            overflow: hidden;
            display: none;
        }
        .ow-logo-upload .ow-progress.is-uploading {
            display: block;
        }
        .ow-logo-upload .ow-progress-bar {
            height: 100%;
            background: #3b82f6;
            width: 0;
            transition: width .2s;
        }

        /* Overlay for /apply */
        #ow-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #ow-overlay.is-visible {
            display: flex;
        }
        #ow-overlay .ow-overlay-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 48px;
            text-align: center;
            max-width: 460px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }
        #ow-overlay .ow-overlay-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 20px;
            color: #0f172a;
        }
        #ow-overlay .ow-overlay-sub {
            font-size: 0.88rem;
            color: #64748b;
            margin-top: 8px;
            line-height: 1.4;
        }

        /* Toast notifications */
        #ow-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9998;
            padding: 14px 20px;
            border-radius: 8px;
            background: #0f172a;
            color: #fff;
            font-size: 0.88rem;
            font-weight: 500;
            box-shadow: 0 10px 25px rgba(0,0,0,.15);
            transform: translateY(120%);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #ow-toast.is-visible {
            transform: translateY(0);
            opacity: 1;
        }
        #ow-toast.is-error {
            background: #dc2626;
        }
    </style>

    <div id="ow-overlay" role="status">
        <div class="ow-overlay-card">
            <div class="spinner-grow" style="width:48px;height:48px;color:var(--ow-accent,#1A325D);" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
            <div class="ow-overlay-title" id="ow-overlay-title">Aplicando branding…</div>
            <div class="ow-overlay-sub" id="ow-overlay-sub">Esto puede tardar hasta 30 segundos.</div>
        </div>
    </div>

    <div id="ow-toast" role="alert"></div>

    <div class="onboarding-container">
        <!-- Minimal Header -->
        <header class="onboarding-header shadow-sm">
            <div class="container-xxl d-flex align-items-center justify-content-between p-0">
                <div class="d-flex align-items-center gap-3">
                    <span class="fs-4 fw-bold text-gray-900 d-flex align-items-center gap-2">
                        <i class="ki-duotone ki-element-plus fs-2 text-primary"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                        <span>{{ config('site.name') ?: 'Tu marca' }}</span>
                    </span>
                    <span class="badge badge-light-primary fw-semibold px-3 py-2 text-uppercase fs-9">Personalización</span>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <form method="POST" action="{{ route('admin.onboarding.skip') }}" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-light fw-bold text-gray-700 px-4 py-2" title="Podés seguir configurando después">Configurar más tarde</button>
                    </form>
                    <form method="POST" action="{{ route('logout') }}" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-outline btn-outline-dashed btn-outline-default text-gray-600 fw-bold px-4 py-2">Cerrar sesión</button>
                    </form>
                </div>
            </div>
        </header>

        <!-- Main Body Grid -->
        <main class="flex-grow-1 container-xxl py-8">
            <div id="brand-wizard" class="row g-8">
                <!-- Column 1: Wizard -->
                <div class="col-12 col-lg-6">
                    <div class="card wizard-card">
                        <div class="card-header border-0 pt-8 pb-2 px-8">
                            <div class="w-100">
                                <h2 class="fw-bold text-gray-900 mb-1 fs-1">Dale identidad a tu sitio</h2>
                                <p class="text-muted mb-0 fs-6">Personalizá logos, colores y tipografías. Nada se aplicará de forma definitiva hasta que confirmes.</p>
                            </div>
                        </div>

                        <div class="px-8 mt-5">
                            <div class="ow-steps-nav">
                                <div class="ow-step-pill is-active" data-step="1">1 · Logos</div>
                                <div class="ow-step-pill" data-step="2">2 · Colores</div>
                                <div class="ow-step-pill" data-step="3">3 · Tipografía</div>
                                <div class="ow-step-pill" data-step="4">4 · Revisar</div>
                            </div>
                        </div>

                        <div class="card-body pt-2 pb-8 px-8">
                            {{-- PANEL 1: LOGOS --}}
                            <div class="ow-panel is-active" data-panel="1">
                                <h4 class="fw-bold text-gray-800 mb-3 fs-4">Subí tus logos</h4>
                                <p class="text-muted mb-6 fs-7">
                                    Opcional: si no tenés logos listos todavía, usaremos los valores predeterminados del producto.
                                    Recomendamos subir el <strong>logo cuadrado</strong> para generar tu favicon automáticamente.
                                </p>

                                @php
                                    $slotToAssetKey = [
                                        'main' => 'main_logo',
                                        'alternative' => 'footer_logo',
                                        'logo_2' => 'loader_logo',
                                    ];
                                    $logoSlots = [
                                        'main' => ['Logo Principal','Cabecera (Header)','Horizontal y claro'],
                                        'alternative' => ['Logo Alternativo','Pie de página (Footer)','Para fondos oscuros'],
                                        'logo_2' => ['Logo Cuadrado','Favicon + loader','Proporción 1:1 de alta calidad'],
                                    ];
                                @endphp

                                <div class="row g-4">
                                    @foreach($logoSlots as $slot => [$label, $hint, $detail])
                                    @php
                                        $draftUrl = $draft['logos'][$slot] ?? null;
                                        $defaultUrl = site_asset_url($slotToAssetKey[$slot]);
                                        $hasDraft = !empty($draftUrl);
                                    @endphp
                                    <div class="col-12 col-md-4">
                                        <div class="ow-logo-upload {{ $hasDraft ? 'has-file' : '' }}" data-slot="{{ $slot }}">
                                            <span class="ow-default-badge">Original</span>

                                            <img class="ow-logo-preview" src="{{ $draftUrl ?: '' }}" alt="" {{ $hasDraft ? '' : 'style="display:none"' }} />

                                            @if($defaultUrl)
                                                <img class="ow-logo-default" src="{{ $defaultUrl }}" alt="Default" />
                                            @endif

                                            <div class="ow-logo-label">{{ $label }}</div>
                                            <div class="ow-logo-hint">{{ $hint }}<br><span class="fw-normal text-muted fs-8">({{ $detail }})</span></div>
                                            <label class="ow-upload-btn">
                                                {{ $hasDraft ? 'Cambiar' : 'Subir imagen' }}
                                                <input type="file" accept="image/*" data-slot-input="{{ $slot }}" />
                                            </label>
                                            <button type="button" class="ow-remove-btn" data-slot-remove="{{ $slot }}">Quitar</button>
                                            <div class="ow-progress"><div class="ow-progress-bar"></div></div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="d-flex justify-content-end mt-8">
                                    <button type="button" class="btn btn-primary fw-bold px-6 py-3" data-next="2">Siguiente: Colores →</button>
                                </div>
                            </div>

                            {{-- PANEL 2: COLORS --}}
                            <div class="ow-panel" data-panel="2">
                                <h4 class="fw-bold text-gray-800 mb-3 fs-4">Paleta de colores</h4>
                                <p class="text-muted mb-6 fs-7">Seleccioná una paleta recomendada o personalizá cada color de tu marca.</p>

                                @if(config('cd-system.theme.demo') === 'demo-business-consulting')
                                    <div class="alert alert-warning fs-7 mb-6">
                                        <strong>Business Consulting:</strong> este demo utiliza fuentes específicas por diseño. Tus tipografías se guardarán pero no se verán reflejadas.
                                    </div>
                                @endif

                                @php
                                    $colorLabels = [
                                        'primary' => ['Primario', 'Botones principales, acentos y llamadas a la acción'],
                                        'secondary' => ['Secundario', 'Cabeceras secundarias y fondos alternativos'],
                                        'tertiary' => ['Terciario', 'Fondos suaves y bordes decorativos'],
                                        'quaternary' => ['Cuaternario', 'Subtítulos e información complementaria'],
                                        'dark' => ['Oscuro', 'Texto principal y fondos muy oscuros'],
                                        'light' => ['Claro', 'Fondo del sitio y cajas claras'],
                                    ];
                                    $palettes = brand_kit_palette_options();
                                @endphp

                                @if(!empty($palettes))
                                    <div class="text-gray-700 fs-7 fw-bold mb-3">Paletas curadas para tu tema</div>
                                    <div class="ow-palettes">
                                        @foreach($palettes as $i => $p)
                                            <div class="ow-palette" data-palette-index="{{ $i }}">
                                                <div class="ow-palette-swatches">
                                                    <span style="background:{{ $p['colors']['primary'] }}"></span>
                                                    <span style="background:{{ $p['colors']['secondary'] }}"></span>
                                                    <span style="background:{{ $p['colors']['tertiary'] }}"></span>
                                                    <span style="background:{{ $p['colors']['quaternary'] }}"></span>
                                                    <span style="background:{{ $p['colors']['dark'] }}"></span>
                                                    <span style="background:{{ $p['colors']['light'] }}; border-left: 1px solid #e2e8f0;"></span>
                                                </div>
                                                <div class="ow-palette-name">{{ $p['name'] }}</div>
                                                <div class="ow-palette-desc">{{ $p['description'] }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="text-gray-700 fs-7 fw-bold mb-3 mt-6">Ajustes avanzados de color</div>
                                @endif

                                <div class="ow-color-grid">
                                    @foreach($colorLabels as $key => [$label, $hint])
                                    <div class="ow-color-field">
                                        <label>{{ $label }} <span class="text-muted fw-normal fs-8" title="{{ $hint }}">(?)</span></label>
                                        <div class="ow-color-row">
                                            <input type="color" data-color-picker="{{ $key }}"
                                                   value="{{ $draft['colors'][$key] ?? ($kit['colors'][$key] ?? '#000000') }}" />
                                            <input type="text" data-color-hex="{{ $key }}"
                                                   value="{{ $draft['colors'][$key] ?? ($kit['colors'][$key] ?? '') }}"
                                                   maxlength="7" pattern="^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$" />
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="d-flex justify-content-between mt-8">
                                    <button type="button" class="btn btn-light fw-bold px-6 py-3" data-next="1">← Atrás</button>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-light-secondary" data-reset="colors" title="Restaurar los colores originales del producto">
                                            Volver a defaults
                                        </button>
                                        <button type="button" class="btn btn-primary fw-bold px-6 py-3" data-next="3">Siguiente: Tipografía →</button>
                                    </div>
                                </div>
                            </div>

                            {{-- PANEL 3: FONTS --}}
                            <div class="ow-panel" data-panel="3">
                                <h4 class="fw-bold text-gray-800 mb-3 fs-4">Tipografía de tu marca</h4>
                                <p class="text-muted mb-6 fs-7">Elegí una combinación tipográfica diseñada por profesionales o seleccioná tus propias fuentes.</p>

                                @php
                                    $googleFonts = [
                                        '', 'Poppins', 'Lora', 'Inter', 'Lexend', 'Open Sans', 'Roboto',
                                        'Montserrat', 'Playfair Display', 'Merriweather', 'Work Sans',
                                        'DM Sans', 'Raleway', 'Nunito', 'Source Sans 3', 'Oswald',
                                        'Rubik', 'Archivo', 'Plus Jakarta Sans', 'Space Grotesk', 'Lato',
                                    ];
                                    $fontSlots = [
                                        'primary' => ['Primaria', 'Títulos destacados'],
                                        'secondary' => ['Secundaria', 'Subtítulos y menús'],
                                        'tertiary' => ['Terciaria', 'Cuerpo de texto general'],
                                    ];
                                    $pairings = brand_kit_font_pairings();
                                @endphp

                                <div class="text-gray-700 fs-7 fw-bold mb-3">Combinaciones recomendadas</div>
                                <div class="ow-pairings">
                                    @foreach($pairings as $i => $pr)
                                        <div class="ow-pairing" data-pairing-index="{{ $i }}">
                                            <div class="ow-pairing-name">{{ $pr['name'] }}</div>
                                            <div class="ow-pairing-sample-a" style="font-family: '{{ $pr['fonts']['secondary'] }}', serif;">
                                                Tu marca
                                            </div>
                                            <div class="ow-pairing-sample-b" style="font-family: '{{ $pr['fonts']['tertiary'] }}', sans-serif;">
                                                {{ $pr['fonts']['primary'] }} + {{ $pr['fonts']['secondary'] }}
                                            </div>
                                            <div class="ow-pairing-desc">{{ $pr['description'] }}</div>
                                        </div>
                                    @endforeach
                                    <div class="ow-pairing ow-pairing-custom" data-pairing-custom>
                                        <div>
                                            <strong>Personalizado</strong><br>
                                            <span class="fs-8 text-muted">Elegir fuentes una por una</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Load Google Fonts for preview cards dynamically --}}
                                <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600&family=Poppins:wght@400;600&family=Lora:wght@400;700&family=Open+Sans:wght@400;600&family=DM+Sans:wght@400;600&family=Space+Grotesk:wght@400;700&family=Nunito:wght@400;600&family=Merriweather:wght@400;700&family=Montserrat:wght@400;600&family=Lato:wght@400;600&display=swap">

                                <div class="ow-custom-fonts row g-4" id="ow-custom-fonts-grid">
                                    @foreach($fontSlots as $slot => [$label, $hint])
                                    <div class="col-12 col-md-4">
                                        <label class="form-label fw-bold text-gray-700">{{ $label }}</label>
                                        <select class="form-select form-select-solid" data-font="{{ $slot }}">
                                            @foreach($googleFonts as $font)
                                                @php $current = $draft['fonts'][$slot] ?? ($kit['fonts'][$slot] ?? ''); @endphp
                                                <option value="{{ $font }}" {{ $current === $font ? 'selected' : '' }}>
                                                    {{ $font ?: '— default del producto —' }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="form-text fs-8 text-muted">{{ $hint }}</div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="d-flex justify-content-between mt-8">
                                    <button type="button" class="btn btn-light fw-bold px-6 py-3" data-next="2">← Atrás</button>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-sm btn-light-secondary" data-reset="fonts" title="Restaurar las fuentes originales del producto">
                                            Volver a defaults
                                        </button>
                                        <button type="button" class="btn btn-primary fw-bold px-6 py-3" data-next="4">Revisar cambios →</button>
                                    </div>
                                </div>
                            </div>

                            {{-- PANEL 4: REVIEW --}}
                            <div class="ow-panel" data-panel="4">
                                <h4 class="fw-bold text-gray-800 mb-3 fs-4">Revisar y finalizar</h4>
                                <p class="text-muted mb-6">Tu branding temporal está listo. Si estás conforme con el diseño en el panel de la derecha, hacé clic en "Aplicar branding" para guardarlo en tu sitio de forma definitiva.</p>

                                <div class="alert alert-light-primary border border-primary-clear d-flex align-items-center p-5 mb-6">
                                    <i class="ki-duotone ki-shield-search fs-2hx text-primary me-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                    <div class="d-flex flex-column">
                                        <h5 class="fw-bold text-primary mb-1">¿Qué sucede al aplicar?</h5>
                                        <span class="fs-7 text-muted">Guardamos tus colores y tipografías, optimizamos tus logos para web, generamos los favicons de tu navegador y habilitamos el acceso completo al panel de control.</span>
                                    </div>
                                </div>

                                <div class="d-flex gap-3 flex-wrap mb-6">
                                    <a href="/?preview=brand_kit_draft" target="_blank" class="btn btn-light-primary fw-bold">
                                        <i class="ki-duotone ki-eye fs-4 me-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                        Ver sitio completo en nueva pestaña
                                    </a>
                                    <button type="button" class="btn btn-light-danger fw-bold" id="ow-discard-btn">
                                        Descartar borrador
                                    </button>
                                </div>

                                <div class="d-flex justify-content-between mt-8">
                                    <button type="button" class="btn btn-light fw-bold px-6 py-3" data-next="3">← Atrás</button>
                                    <button type="button" class="btn btn-primary btn-lg fw-bold px-8 py-4" id="ow-apply-btn">
                                        <i class="ki-duotone ki-check-circle fs-3 me-2"><span class="path1"></span><span class="path2"></span></i>
                                        Aplicar branding
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Column 2: Live Preview -->
                <div class="col-12 col-lg-6">
                    <div id="ow-preview">
                        <div class="ow-preview-label d-flex align-items-center justify-content-between mb-4">
                            <span>VISTA PREVIA EN VIVO</span>
                            <span class="badge badge-light-success fs-9 fw-bold px-3 py-1">Simulación en tiempo real</span>
                        </div>

                        <!-- Mock Header -->
                        <div id="ow-mock-header">
                            <img id="ow-mock-header-logo" class="ow-mock-logo" src="" alt="" style="display:none;" />
                            <span id="ow-mock-header-placeholder" class="ow-mock-logo-placeholder">{{ config('site.name') ?: 'Tu Marca' }}</span>
                            <div class="ow-mock-nav d-none d-md-flex">
                                <span>Inicio</span>
                                <span>Servicios</span>
                                <span>Contacto</span>
                            </div>
                            <span class="ow-mock-cta">Consultar</span>
                        </div>

                        <!-- Mock Hero -->
                        <div id="ow-preview-hero">
                            <h3>{{ config('site.name') ?: 'Tu marca' }}</h3>
                            <p>Tu mensaje y diseño aplicados al instante</p>
                            <button class="btn-sample">Ver mis servicios</button>
                        </div>

                        <!-- Mock Footer -->
                        <div id="ow-mock-footer">
                            <div>
                                <img id="ow-mock-footer-logo" class="ow-mock-footer-logo" src="" alt="" style="display:none;" />
                                <span id="ow-mock-footer-placeholder" class="ow-mock-footer-placeholder">{{ config('site.name') ?: 'Tu Marca' }}</span>
                            </div>
                            <span>© {{ date('Y') }} · Creado con BewPro</span>
                        </div>

                        <!-- Font Samples -->
                        <div id="ow-preview-fonts">
                            <div class="ow-font-card">
                                <div class="ow-font-role">Primaria · Títulos</div>
                                <div class="ow-font-sample-primary">The quick brown fox</div>
                                <div class="text-muted fs-8 mt-1" id="ow-font-primary-label">—</div>
                            </div>
                            <div class="ow-font-card">
                                <div class="ow-font-role">Secundaria · Subtítulos</div>
                                <div class="ow-font-sample-secondary">Jumps over the lazy dog</div>
                                <div class="text-muted fs-8 mt-1" id="ow-font-secondary-label">—</div>
                            </div>
                            <div class="ow-font-card">
                                <div class="ow-font-role">Terciaria · Texto</div>
                                <div class="ow-font-sample-tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                <div class="text-muted fs-8 mt-1" id="ow-font-tertiary-label">—</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    @push('scripts')
    <script>
    (function () {
        'use strict';

        const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const endpoints = {
            draftShow:   '{{ route('admin.onboarding.draft.show') }}',
            colors:      '{{ route('admin.onboarding.draft.colors') }}',
            fonts:       '{{ route('admin.onboarding.draft.fonts') }}',
            logoUpload:  (slot) => `/admin/onboarding/draft/logos/${slot}`,
            logoRemove:  (slot) => `/admin/onboarding/draft/logos/${slot}`,
            apply:       '{{ route('admin.onboarding.apply') }}',
            discard:     '{{ route('admin.onboarding.draft.discard') }}',
        };

        @php
            $__productionLogos = [
                'main'        => site_asset_url('main_logo') ?: null,
                'alternative' => site_asset_url('footer_logo') ?: null,
                'logo_2'      => site_asset_url('loader_logo') ?: null,
            ];
            $__palettes = brand_kit_palette_options();
            $__pairings = brand_kit_font_pairings();

            $__resolvedDefaults = [
                'colors' => !empty($coreDefaults['colors']) ? $coreDefaults['colors'] : ($__palettes[0]['colors'] ?? []),
                'fonts'  => !empty($coreDefaults['fonts'])  ? $coreDefaults['fonts']  : ($__pairings[0]['fonts']  ?? []),
            ];

            $__initialData = [
                'draft' => $draft,
                'production' => [
                    'colors' => $kit['colors'],
                    'fonts'  => $kit['fonts'],
                    'logos'  => $__productionLogos,
                ],
                'coreDefaults' => $__resolvedDefaults,
                'palettes' => $__palettes,
                'pairings' => $__pairings,
            ];
        @endphp
        const initialData = {!! json_encode($__initialData) !!};

        // ───── State ─────
        const state = {
            currentStep: 1,
            colors: { ...initialData.production.colors, ...initialData.draft.colors },
            fonts:  { ...initialData.production.fonts,  ...initialData.draft.fonts },
            logos:  { ...initialData.production.logos,  ...initialData.draft.logos },
        };

        // ───── Helpers ─────
        const $  = (sel, ctx) => (ctx || document).querySelector(sel);
        const $$ = (sel, ctx) => (ctx || document).querySelectorAll(sel);

        function toast(msg, isError = false) {
            const t = $('#ow-toast');
            t.textContent = msg;
            t.classList.toggle('is-error', !!isError);
            t.classList.add('is-visible');
            setTimeout(() => t.classList.remove('is-visible'), 3000);
        }

        function showOverlay(title, sub) {
            $('#ow-overlay-title').textContent = title;
            $('#ow-overlay-sub').textContent = sub;
            $('#ow-overlay').classList.add('is-visible');
        }
        function hideOverlay() { $('#ow-overlay').classList.remove('is-visible'); }

        function debounce(fn, ms) {
            let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
        }

        async function api(method, url, body = null, isMultipart = false) {
            const opts = { method, headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } };
            if (body !== null) {
                if (isMultipart) {
                    opts.body = body;
                } else {
                    opts.headers['Content-Type'] = 'application/json';
                    opts.body = JSON.stringify(body);
                }
            }
            const res = await fetch(url, opts);
            const data = await res.json().catch(() => ({ ok: false, error: 'Invalid response' }));
            if (!res.ok) {
                throw Object.assign(new Error(data.error || `HTTP ${res.status}`), { data, status: res.status });
            }
            return data;
        }

        // ───── Step navigation ─────
        function goToStep(n) {
            state.currentStep = n;
            $$('.ow-panel').forEach(p => p.classList.toggle('is-active', +p.dataset.panel === n));
            $$('.ow-step-pill').forEach(p => {
                const s = +p.dataset.step;
                p.classList.toggle('is-active', s === n);
                p.classList.toggle('is-done', s < n);
            });
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        $$('[data-next]').forEach(btn => {
            btn.addEventListener('click', () => goToStep(+btn.dataset.next));
        });
        $$('.ow-step-pill').forEach(pill => {
            pill.addEventListener('click', () => goToStep(+pill.dataset.step));
        });

        // ───── Preview sync ─────
        function applyColorsToPreview() {
            const root = $('#brand-wizard');
            root.style.setProperty('--pw-primary', state.colors.primary || '#1A325D');
            root.style.setProperty('--pw-secondary', state.colors.secondary || '#B8960C');
            root.style.setProperty('--pw-tertiary', state.colors.tertiary || '#F5F5F0');
            root.style.setProperty('--pw-light', state.colors.light || '#FFFFFF');
            root.style.setProperty('--pw-dark', state.colors.dark || '#0F1923');
        }
        function applyFontsToPreview() {
            const root = $('#brand-wizard');
            ['primary', 'secondary', 'tertiary'].forEach(slot => {
                const name = state.fonts[slot];
                root.style.setProperty(`--pw-font-${slot}`, name ? `"${name}", sans-serif` : '');
                $(`#ow-font-${slot}-label`).textContent = name || '—';
            });
            // Load Google Fonts on demand
            const loaded = new Set([...document.querySelectorAll('link[data-gf]')].map(l => l.dataset.gf));
            ['primary', 'secondary', 'tertiary'].forEach(slot => {
                const n = state.fonts[slot];
                if (n && !loaded.has(n)) {
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(n).replace(/%20/g, '+')}:wght@400;600;700&display=swap`;
                    link.dataset.gf = n;
                    document.head.appendChild(link);
                    loaded.add(n);
                }
            });
        }
        function applyLogosToPreview() {
            // Mock header usa logo principal
            const headerLogo = $('#ow-mock-header-logo');
            const headerPlaceholder = $('#ow-mock-header-placeholder');
            const mainUrl = state.logos.main;
            if (headerLogo && headerPlaceholder) {
                if (mainUrl) {
                    headerLogo.src = mainUrl;
                    headerLogo.style.display = 'block';
                    headerPlaceholder.style.display = 'none';
                } else {
                    headerLogo.style.display = 'none';
                    headerPlaceholder.style.display = 'inline';
                }
            }

            // Mock footer usa logo alternativo (fallback al principal)
            const footerLogo = $('#ow-mock-footer-logo');
            const footerPlaceholder = $('#ow-mock-footer-placeholder');
            const altUrl = state.logos.alternative || state.logos.main;
            if (footerLogo && footerPlaceholder) {
                if (altUrl) {
                    footerLogo.src = altUrl;
                    footerLogo.style.display = 'block';
                    footerPlaceholder.style.display = 'none';
                } else {
                    footerLogo.style.display = 'none';
                    footerPlaceholder.style.display = 'inline';
                }
            }
        }

        // ───── Colors ─────
        const persistColors = debounce(async () => {
            try {
                await api('PATCH', endpoints.colors, { colors: state.colors });
            } catch (e) {
                toast('No se pudo guardar el color: ' + (e.message || ''), true);
            }
        }, 500);

        // Paletas preset: click aplica los 6 colors al estado, UI y persiste
        $$('.ow-palette').forEach(card => {
            card.addEventListener('click', () => {
                const idx = +card.dataset.paletteIndex;
                const palette = (initialData.palettes || [])[idx];
                if (!palette) return;

                Object.entries(palette.colors).forEach(([key, val]) => {
                    state.colors[key] = val;
                    const picker = $(`[data-color-picker="${key}"]`);
                    const hexInput = $(`[data-color-hex="${key}"]`);
                    if (picker) picker.value = val;
                    if (hexInput) hexInput.value = val;
                });

                $$('.ow-palette').forEach(p => p.classList.remove('is-selected'));
                card.classList.add('is-selected');

                applyColorsToPreview();
                persistColors();
                toast(`Paleta "${palette.name}" aplicada`);
            });
        });

        $$('[data-color-picker]').forEach(picker => {
            const key = picker.dataset.colorPicker;
            const hexInput = $(`[data-color-hex="${key}"]`);

            picker.addEventListener('input', () => {
                const val = picker.value.toUpperCase();
                if (hexInput) hexInput.value = val;
                state.colors[key] = val;
                applyColorsToPreview();
                persistColors();
            });

            if (hexInput) {
                hexInput.addEventListener('input', () => {
                    if (/^#[0-9a-fA-F]{6}$/.test(hexInput.value)) {
                        picker.value = hexInput.value;
                        state.colors[key] = hexInput.value.toUpperCase();
                        applyColorsToPreview();
                        persistColors();
                    }
                });
            }
        });

        // ───── Fonts ─────
        const persistFonts = debounce(async () => {
            try {
                const payload = {};
                ['primary', 'secondary', 'tertiary'].forEach(s => {
                    if (state.fonts[s]) payload[s] = state.fonts[s];
                });
                await api('PATCH', endpoints.fonts, { fonts: payload });
            } catch (e) {
                toast('No se pudo guardar la tipografía: ' + (e.message || ''), true);
            }
        }, 500);

        $$('[data-font]').forEach(sel => {
            sel.addEventListener('change', () => {
                state.fonts[sel.dataset.font] = sel.value;
                applyFontsToPreview();
                persistFonts();
                $$('.ow-pairing').forEach(p => p.classList.remove('is-selected'));
                $('[data-pairing-custom]')?.classList.add('is-selected');
            });
        });

        $$('.ow-pairing').forEach(card => {
            card.addEventListener('click', () => {
                const custom = $('#ow-custom-fonts-grid');
                if (card.hasAttribute('data-pairing-custom')) {
                    $$('.ow-pairing').forEach(p => p.classList.remove('is-selected'));
                    card.classList.add('is-selected');
                    custom.classList.add('is-visible');
                    return;
                }
                const idx = +card.dataset.pairingIndex;
                const pairing = (initialData.pairings || [])[idx];
                if (!pairing) return;

                Object.entries(pairing.fonts).forEach(([slot, name]) => {
                    state.fonts[slot] = name;
                    const sel = $(`select[data-font="${slot}"]`);
                    if (sel) sel.value = name;
                });

                $$('.ow-pairing').forEach(p => p.classList.remove('is-selected'));
                card.classList.add('is-selected');
                if (custom) custom.classList.remove('is-visible');

                applyFontsToPreview();
                persistFonts();
                toast(`Pairing "${pairing.name}" aplicado`);
            });
        });

        // ───── Logos ─────
        async function uploadLogoForCard(card, file) {
            if (!card || !file) return;
            const slot = card.dataset.slot;

            const validTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml', 'image/webp'];
            if (!validTypes.includes(file.type)) {
                toast('Formato no soportado. Usá PNG, JPG, SVG o WEBP.', true);
                return;
            }
            if (file.size > 5 * 1024 * 1024) {
                toast('El archivo excede 5 MB.', true);
                return;
            }

            const progress = $('.ow-progress', card);
            const progressBar = $('.ow-progress-bar', card);
            progress.classList.add('is-uploading');
            progressBar.style.width = '30%';

            const fd = new FormData();
            fd.append('file', file);

            try {
                progressBar.style.width = '70%';
                const res = await api('POST', endpoints.logoUpload(slot), fd, true);
                progressBar.style.width = '100%';
                state.logos[slot] = res.data.secure_url;

                const preview = $('.ow-logo-preview', card);
                preview.src = res.data.secure_url;
                preview.style.display = 'block';
                card.classList.add('has-file');

                applyLogosToPreview();
                setTimeout(() => progress.classList.remove('is-uploading'), 300);
                toast('Logo subido');
            } catch (e) {
                progress.classList.remove('is-uploading');
                toast('Error subiendo logo: ' + (e.message || ''), true);
            }
        }

        $$('[data-slot-input]').forEach(input => {
            input.addEventListener('change', () => {
                const card = input.closest('.ow-logo-upload');
                uploadLogoForCard(card, input.files[0]);
            });
        });

        ['dragenter', 'dragover'].forEach(evt => {
            window.addEventListener(evt, (e) => { e.preventDefault(); }, false);
        });
        window.addEventListener('drop', (e) => {
            if (!e.target.closest('.ow-logo-upload')) { e.preventDefault(); }
        }, false);

        $$('.ow-logo-upload').forEach(card => {
            let dragCount = 0;

            card.addEventListener('dragenter', (e) => {
                e.preventDefault();
                dragCount++;
                card.classList.add('is-dragover');
            });

            card.addEventListener('dragover', (e) => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            });

            card.addEventListener('dragleave', (e) => {
                dragCount--;
                if (dragCount <= 0) {
                    card.classList.remove('is-dragover');
                    dragCount = 0;
                }
            });

            card.addEventListener('drop', (e) => {
                e.preventDefault();
                dragCount = 0;
                card.classList.remove('is-dragover');
                const files = e.dataTransfer.files;
                if (files && files.length > 0) {
                    uploadLogoForCard(card, files[0]);
                }
            });
        });

        $$('[data-slot-remove]').forEach(btn => {
            btn.addEventListener('click', async () => {
                const slot = btn.dataset.slotRemove;
                const card = btn.closest('.ow-logo-upload');
                try {
                    await api('DELETE', endpoints.logoRemove(slot));
                    delete state.logos[slot];
                    $('.ow-logo-preview', card).style.display = 'none';
                    card.classList.remove('has-file');
                    $('input[type="file"]', card).value = '';
                    applyLogosToPreview();
                    toast('Logo quitado');
                } catch (e) {
                    toast('Error quitando logo', true);
                }
            });
        });

        ['main', 'alternative', 'logo_2'].forEach(slot => {
            if (state.logos[slot]) {
                const card = $(`[data-slot="${slot}"]`);
                if (card) {
                    const preview = $('.ow-logo-preview', card);
                    preview.src = state.logos[slot];
                    preview.style.display = 'block';
                    card.classList.add('has-file');
                }
            }
        });

        // ───── Reset a defaults del producto ─────
        $$('[data-reset]').forEach(btn => {
            btn.addEventListener('click', async () => {
                const kind = btn.dataset.reset;
                const defaults = (initialData.coreDefaults || {})[kind] || {};
                if (Object.keys(defaults).length === 0) {
                    toast('No hay defaults del producto guardados para este tenant.', true);
                    return;
                }

                if (kind === 'colors') {
                    Object.entries(defaults).forEach(([k, v]) => {
                        state.colors[k] = v;
                        const picker = $(`[data-color-picker="${k}"]`);
                        const hex = $(`[data-color-hex="${k}"]`);
                        if (picker) picker.value = v;
                        if (hex) hex.value = v;
                    });
                    $$('.ow-palette').forEach(p => p.classList.remove('is-selected'));
                    const firstPalette = $('.ow-palette[data-palette-index="0"]');
                    if (firstPalette) firstPalette.classList.add('is-selected');
                    applyColorsToPreview();
                    persistColors();
                } else if (kind === 'fonts') {
                    Object.entries(defaults).forEach(([slot, name]) => {
                        state.fonts[slot] = name;
                        const sel = $(`select[data-font="${slot}"]`);
                        if (sel) sel.value = name;
                    });
                    $$('.ow-pairing').forEach(p => p.classList.remove('is-selected'));
                    const firstPairing = $('.ow-pairing[data-pairing-index="0"]');
                    if (firstPairing) firstPairing.classList.add('is-selected');
                    $('#ow-custom-fonts-grid')?.classList.remove('is-visible');
                    applyFontsToPreview();
                    persistFonts();
                }

                toast(`Defaults del producto restaurados (${kind === 'colors' ? 'colores' : 'fuentes'})`);
            });
        });

        // ───── Apply ─────
        $('#ow-apply-btn').addEventListener('click', async () => {
            showOverlay('Aplicando branding…', 'Subiendo logos finales, generando favicons y flusheando caché.');
            try {
                const res = await api('POST', endpoints.apply, {});
                hideOverlay();
                window.location.href = res.data.redirect || '/';
            } catch (e) {
                hideOverlay();
                const step = e.data?.step ? ` (falló en: ${e.data.step})` : '';
                toast('Error aplicando branding: ' + (e.message || '') + step, true);
            }
        });

        // ───── Discard ─────
        $('#ow-discard-btn').addEventListener('click', async () => {
            if (!confirm('¿Descartar todos los cambios del borrador? Esto borrará logos subidos y selecciones.')) return;
            try {
                await api('DELETE', endpoints.discard);
                window.location.reload();
            } catch (e) {
                toast('Error al descartar', true);
            }
        });

        // ───── Boot ─────
        applyColorsToPreview();
        applyFontsToPreview();
        applyLogosToPreview();
    })();
    </script>
    @endpush
@endsection