@php
    $hex = match ($theme_preset) {
        'emerald' => '#10b981',
        'blue' => '#3b82f6',
        'violet' => '#8b5cf6',
        'rose' => '#f43f5e',
        'teal' => '#0d9488',
        'orange' => '#f97316',
        'custom' => $primary_color ?: '#f59e0b',
        default => '#f59e0b', // amber
    };

    $logoUrl = null;
    if ($admin_logo) {
        if (is_array($admin_logo)) {
            $first = reset($admin_logo);
            if ($first instanceof \Livewire\Features\SupportFileUploads\TemporaryUploadedFile) {
                $logoUrl = $first->temporaryUrl();
            } else {
                $logoUrl = asset('storage/' . $first);
            }
        } elseif (is_string($admin_logo)) {
            $logoUrl = asset('storage/' . $admin_logo);
        }
    }
@endphp

<div style="border-radius: 16px; border: 1px solid #e5e7eb; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; box-sizing: border-box; width: 100%;">
    <!-- Window Header (macOS style window top bar) -->
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: #f9fafb; border-bottom: 1px solid #f3f4f6; box-sizing: border-box;">
        <div style="display: flex; align-items: center; gap: 6px;">
            <span style="width: 10px; height: 10px; border-radius: 50%; background-color: #f87171; display: inline-block;"></span>
            <span style="width: 10px; height: 10px; border-radius: 50%; background-color: #fbbf24; display: inline-block;"></span>
            <span style="width: 10px; height: 10px; border-radius: 50%; background-color: #34d399; display: inline-block;"></span>
            <span style="margin-left: 12px; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; line-height: 1;">Live Panel Preview</span>
        </div>
        <div style="display: flex; align-items: center; padding: 2px 8px; border-radius: 4px; background-color: rgba(229,231,235,0.4); font-size: 9px; color: #6b7280; font-family: monospace; line-height: 1;">
            sawdabazar.test/admin
        </div>
    </div>

    <!-- Browser Body -->
    <div style="display: flex; height: 320px; background-color: #f9fafb; box-sizing: border-box; width: 100%;">
        <!-- Mock Sidebar -->
        <div style="width: 120px; background-color: #0f172a; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; flex-shrink: 0; height: 100%;">
            <div>
                <!-- Brand logo area -->
                <div style="height: 36px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px; margin-bottom: 12px; overflow: hidden; box-sizing: border-box;">
                    @if ($logoUrl)
                        <img src="{{ $logoUrl }}" style="max-height: 24px; max-width: 100%; object-fit: contain; width: auto;" alt="Logo Preview" />
                    @else
                        <span style="font-size: 11px; font-weight: 900; color: #ffffff; letter-spacing: 0.05em; text-transform: uppercase; display: inline-block; line-height: 1.2;">CITY SHOP</span>
                    @endif
                </div>

                <!-- Navigation items mockup -->
                <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box;">
                    <li style="margin: 0; padding: 0;">
                        <span style="display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #ffffff; background-color: {{ $hex }}20; border-left: 2px solid {{ $hex }}; box-sizing: border-box; line-height: 1.2;">
                            <svg style="width: 12px; height: 12px; color: {{ $hex }}; flex-shrink: 0; display: inline-block;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z" />
                            </svg>
                            Dashboard
                        </span>
                    </li>
                    <li style="margin: 0; padding: 0;">
                        <span style="display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; font-size: 10px; font-weight: 500; color: #94a3b8; box-sizing: border-box; line-height: 1.2;">
                            <span style="display: flex; align-items: center; gap: 6px;">
                                <svg style="width: 12px; height: 12px; flex-shrink: 0; display: inline-block;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                                </svg>
                                Orders
                            </span>
                            <span style="padding: 1px 5px; border-radius: 10px; font-size: 8px; font-weight: 800; color: #ffffff; background-color: {{ $hex }}; box-sizing: border-box; line-height: 1; display: inline-block;">3</span>
                        </span>
                    </li>
                    <li style="margin: 0; padding: 0;">
                        <span style="display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 10px; font-weight: 500; color: #94a3b8; box-sizing: border-box; line-height: 1.2;">
                            <svg style="width: 12px; height: 12px; flex-shrink: 0; display: inline-block;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                            </svg>
                            Products
                        </span>
                    </li>
                </ul>
            </div>
            
            <div style="font-size: 8px; color: #475569; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; text-align: center; box-sizing: border-box; width: 100%;">
                Powered by Sawdabazar
            </div>
        </div>

        <!-- Main Viewport Mock -->
        <div style="flex: 1; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; height: 100%;">
            <!-- Header bar mock -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; box-sizing: border-box; width: 100%;">
                <div style="display: flex; align-items: center; gap: 4px;">
                    <span style="font-size: 10px; color: #9ca3af; font-weight: 500; display: inline-block; line-height: 1;">Home</span>
                    <span style="font-size: 10px; color: #d1d5db; display: inline-block; line-height: 1;">/</span>
                    <span style="font-size: 10px; color: #4b5563; font-weight: 600; display: inline-block; line-height: 1;">Dashboard</span>
                </div>
                <div style="display: flex; align-items: center; gap: 8px; box-sizing: border-box;">
                    <div style="width: 64px; height: 12px; border-radius: 4px; background-color: rgba(229,231,235,0.8); box-sizing: border-box;"></div>
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #475569; box-sizing: border-box; flex-shrink: 0; line-height: 1;">A</div>
                </div>
            </div>

            <!-- Dashboard Content Mock -->
            <div style="margin: auto 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%;">
                <!-- Metrics Card Mock -->
                <div style="padding: 12px; border-radius: 12px; border: 1px solid rgba(229,231,235,0.7); background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); box-sizing: border-box; width: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 4px; box-sizing: border-box;">
                        <span style="font-size: 9px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; line-height: 1;">Total Sales</span>
                        <span style="padding: 2px 6px; border-radius: 10px; font-size: 8px; font-weight: 700; color: #059669; background-color: #ecfdf5; display: inline-block; line-height: 1;">
                            +12.5%
                        </span>
                    </div>
                    <div style="font-size: 16px; font-weight: 800; color: #111827; line-height: 1.2;">$24,580.00</div>
                    <div style="width: 100%; height: 6px; border-radius: 3px; background-color: #f3f4f6; margin-top: 10px; overflow: hidden; position: relative; box-sizing: border-box;">
                        <div style="height: 100%; border-radius: 3px; transition: all 0.5s; width: 68%; position: absolute; left: 0; top: 0;" :style="{ backgroundColor: '{{ $hex }}' }"></div>
                    </div>
                </div>
                
                <!-- Tiny Mock Chart columns -->
                <div style="height: 56px; display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 8px 0 8px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; width: 100%;">
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 30%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}40' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 50%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}60' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 45%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}80' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 80%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 60%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}60' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 35%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}40' }"></div>
                    <div style="width: 12px; border-radius: 2px 2px 0 0; transition: all 0.3s; height: 75%; box-sizing: border-box;" :style="{ backgroundColor: '{{ $hex }}80' }"></div>
                </div>
            </div>

            <!-- Footer Action Mock -->
            <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid #e5e7eb; box-sizing: border-box; width: 100%;">
                <span style="font-size: 8px; color: #9ca3af; font-weight: 500; display: inline-block; line-height: 1;">Interactive Preview</span>
                <button type="button" 
                        style="padding: 4px 12px; border-radius: 4px; border: none; color: #ffffff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s; box-sizing: border-box; line-height: 1.2;"
                        :style="{ backgroundColor: '{{ $hex }}' }">
                    Action Button
                </button>
            </div>
        </div>
    </div>
</div>