<x-filament-panels::page>
    <style>
        .ob-wrap { max-width: 720px; margin: 0 auto; }
        .ob-stepper { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
        .ob-step {
            width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: #e5e7eb; color: #9ca3af; font-weight: 600;
            transition: all .2s;
        }
        .ob-step.active { background: var(--primary-500, #3b82f6); color: #fff; }
        .ob-step.done { background: #10b981; color: #fff; }
        .ob-step-line { flex: 0 0 60px; align-self: center; height: 2px; background: #e5e7eb; }
        .ob-step-line.done { background: #10b981; }

        .ob-buttons { display: flex; justify-content: space-between; margin-top: 24px; }
        .ob-btn {
            padding: 10px 20px; border-radius: 8px; font-weight: 500;
            cursor: pointer; border: none; font-size: 14px;
        }
        .ob-btn-primary { background: var(--primary-500, #3b82f6); color: #fff; }
        .ob-btn-primary:hover { background: var(--primary-600, #2563eb); }
        .ob-btn-secondary { background: transparent; color: #6b7280; border: 1px solid #e5e7eb; }
        .ob-btn-secondary:hover { background: #f9fafb; }
        .ob-btn-success { background: #10b981; color: #fff; padding: 12px 28px; font-size: 15px; }
        .ob-btn-success:hover { background: #059669; }

        .ob-intro {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border: 1px solid #bfdbfe;
            border-radius: 12px; padding: 20px;
            margin-bottom: 24px;
            font-size: 14px; line-height: 1.6;
        }
        .dark .ob-intro { background: linear-gradient(135deg, #1e3a8a40, #1e40af40); border-color: #1e40af; color: #dbeafe; }
        .ob-intro h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
    </style>

    <div class="ob-wrap">
        <div class="ob-intro">
            <h3>👋 Bun venit!</h3>
            Hai să facem 30 de secunde de configurare ca AutoCRM-ul tău să arate exact cum vrei tu.
            Toate aceste setări pot fi schimbate oricând din meniul „Setări".
        </div>

        {{-- Stepper --}}
        <div class="ob-stepper">
            @for ($i = 1; $i <= 3; $i++)
                <div class="ob-step {{ $step === $i ? 'active' : ($step > $i ? 'done' : '') }}">
                    {{ $step > $i ? '✓' : $i }}
                </div>
                @if ($i < 3)
                    <div class="ob-step-line {{ $step > $i ? 'done' : '' }}"></div>
                @endif
            @endfor
        </div>

        <form wire:submit.prevent="finish">
            {{ $this->form }}

            <div class="ob-buttons">
                <div>
                    @if ($step > 1)
                        <button type="button" class="ob-btn ob-btn-secondary" wire:click="prev">← Înapoi</button>
                    @endif
                </div>
                <div>
                    @if ($step < 3)
                        <button type="button" class="ob-btn ob-btn-primary" wire:click="next">Continuă →</button>
                    @else
                        <button type="submit" class="ob-btn ob-btn-success">🎉 Termină configurarea</button>
                    @endif
                </div>
            </div>
        </form>
    </div>
</x-filament-panels::page>
