Window code

@props([
    'variant' => 'app',
    'url' => null,
    'title' => null,
    'flush' => false,
    'controls' => true,
])

@php
    /*
    | Realistic browser / app window chrome used to frame product mockups so they
    | read as real UI rather than generic cards.
    |
    | variant:  browser (URL bar), app (title)
    | controls: macOS-style traffic-light dots in the title bar (default on)
    | flush:    remove inner padding (let the slot control its own layout)
    |
    | Usage:
    |   <x-ui.window variant="browser" url="app.acme.com/dashboard">…mockup…</x-ui.window>
    |   <x-ui.window :controls="false">…mockup without dots…</x-ui.window>
    */
    $showUrl = $variant === 'browser' && $url;
    $showTitle = ! $showUrl && $title;
    $showChrome = $controls || $showUrl || $showTitle;
@endphp

<div {{ $attributes->merge(['class' => 'overflow-hidden rounded-xl border border-gray-200/80 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-2xl shadow-gray-900/10 dark:shadow-black/40 ring-1 ring-gray-900/5']) }}>
    @if ($showChrome)
        <div class="flex items-center gap-3 border-b border-gray-200/80 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-950/60 px-4 py-3">
            @if ($controls)
                <div class="flex items-center gap-1.5" aria-hidden="true">
                    <span class="h-3 w-3 rounded-full bg-gray-300 dark:bg-gray-700"></span>
                    <span class="h-3 w-3 rounded-full bg-gray-300 dark:bg-gray-700"></span>
                    <span class="h-3 w-3 rounded-full bg-gray-300 dark:bg-gray-700"></span>
                </div>
            @endif

            @if ($showUrl)
                <div @class([
                    'flex items-center gap-2 rounded-md bg-white dark:bg-gray-900 px-3 py-1 text-xs text-gray-400 dark:text-gray-500 ring-1 ring-gray-200 dark:ring-gray-800',
                    'mx-auto w-full max-w-sm' => $controls,
                    'min-w-0 flex-1' => ! $controls,
                ])>
                    <x-ui.icon name="lock-simple" weight="fill" size="xs" />
                    <span class="truncate">{{ $url }}</span>
                </div>
            @elseif ($showTitle)
                <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ $title }}</span>
            @endif
        </div>
    @endif

    <div class="{{ $flush ? '' : 'p-5 sm:p-6' }}">
        {{ $slot }}
    </div>
</div>