@php
    $incomePresets = [1200, 1500, 2000, 2500, 3000, 4000];
@endphp

<div class="min-h-[100dvh] bg-[radial-gradient(circle_at_top,rgba(46,184,80,0.10),transparent_45%),radial-gradient(circle_at_bottom_right,rgba(84,104,255,0.08),transparent_40%)]">
    <div class="mx-auto w-full max-w-5xl px-4 py-5 sm:px-6 sm:py-7">
        <header class="mb-4 flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">{{ __('onboarding.quick_setup') }}</p>
                <p class="mt-1 text-sm font-medium text-foreground/65">{{ __('onboarding.step_of', ['current' => $step + 1, 'total' => 6]) }}</p>
            </div>
            <button type="button" wire:click="skip" class="rounded-full border border-border/70 bg-white/70 px-3.5 py-2 text-xs font-semibold text-foreground/60 backdrop-blur hover:text-foreground">
                {{ __('onboarding.skip') }}
            </button>
        </header>

        <div class="mb-4 flex gap-1.5">
            @for ($i = 0; $i < 6; $i++)
                <div class="h-1.5 flex-1 rounded-full transition-colors {{ $step >= $i ? 'bg-primary shadow-[0_0_12px_hsl(160_60%_45%/0.25)]' : 'bg-foreground/10' }}"></div>
            @endfor
        </div>

        <section class="rounded-[28px] border border-white/70 bg-white/85 p-5 shadow-[0_18px_50px_rgba(15,23,42,0.08)] backdrop-blur-xl sm:p-8">
            <div class="mb-5 grid gap-3 sm:grid-cols-4">
                <div class="rounded-xl border border-border/70 bg-white/90 p-3">
                    <p class="text-[11px] text-foreground/55">{{ __('onboarding.income.label') }}</p>
                    <p class="mt-1 text-base font-semibold">€{{ number_format((float) $income, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-xl border border-border/70 bg-white/90 p-3">
                    <p class="text-[11px] text-foreground/55">{{ __('onboarding.bills.selected') }}</p>
                    <p class="mt-1 text-base font-semibold">{{ $this->selectedBillsCount }}</p>
                </div>
                <div class="rounded-xl border border-border/70 bg-white/90 p-3">
                    <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.monthly_commitments') }}</p>
                    <p class="mt-1 text-base font-semibold">€{{ number_format($this->monthlyPlannedSpend, 0, ',', '.') }}</p>
                </div>
                <div class="rounded-xl border border-border/70 bg-white/90 p-3">
                    <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.free_cash_estimate') }}</p>
                    <p class="mt-1 text-base font-semibold {{ $this->freeCash >= 0 ? 'text-primary' : 'text-expense' }}">{{ $this->freeCash >= 0 ? '+' : '-' }}€{{ number_format(abs($this->freeCash), 0, ',', '.') }}</p>
                </div>
            </div>

            @if ($step === 0)
                <div class="space-y-6">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.benefits_eyebrow') }}</p>
                        <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.benefits_title') }}</h1>
                        <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.benefits_desc') }}</p>
                    </div>
                    <div class="grid gap-3 sm:grid-cols-2">
                        @foreach (__('onboarding.welcome_points') as $pt)
                            <div class="rounded-2xl border border-white/70 bg-white/75 p-3.5">
                                <p class="text-sm leading-relaxed text-foreground/85">{{ $pt['text'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            @if ($step === 1)
                <div class="grid gap-6 lg:grid-cols-[1.45fr_1fr]">
                    <div class="space-y-6">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.income_eyebrow') }}</p>
                            <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.income_title') }}</h1>
                            <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.income_desc') }}</p>
                        </div>

                        <div class="rounded-2xl border border-income/25 bg-gradient-to-br from-income/[0.08] to-white p-4 sm:p-5">
                            <label for="income" class="text-xs font-semibold uppercase tracking-[0.14em] text-foreground/55">{{ __('onboarding.income.label') }}</label>
                            <div class="mt-3 flex items-center gap-2.5">
                                <button type="button" wire:click="bumpIncome(-50)" class="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-white text-xl text-foreground/70">-</button>
                                <span class="text-2xl font-semibold text-foreground/70">€</span>
                                <input id="income" type="number" wire:model.live.debounce.350ms="income" class="h-12 w-full rounded-xl border border-input bg-white px-3 text-2xl font-semibold tracking-tight outline-none ring-primary/20 focus:ring-2" />
                                <button type="button" wire:click="bumpIncome(50)" class="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border bg-white text-xl text-foreground/70">+</button>
                            </div>
                            <p class="mt-3 text-xs text-foreground/55">{{ __('onboarding.flow.income_helper_plus_minus') }}</p>
                        </div>

                        <div>
                            <p class="mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/50">{{ __('onboarding.income.presets_caption') }}</p>
                            <div class="flex flex-wrap gap-2">
                                @foreach ($incomePresets as $preset)
                                    <button type="button" wire:click="setIncomePreset({{ $preset }})" class="rounded-full border px-3.5 py-2 text-sm font-medium transition {{ (int) $income === $preset ? 'border-income/40 bg-income/10 text-income' : 'border-border bg-white text-foreground/70' }}">
                                        €{{ number_format($preset, 0, ',', '.') }}
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label for="incomePayday" class="text-sm font-medium text-foreground/85">{{ __('onboarding.flow.payday_label') }}</label>
                            <input id="incomePayday" type="number" min="1" max="28" wire:model.live.debounce.350ms="incomePayday" placeholder="{{ __('onboarding.flow.payday_placeholder') }}" class="h-11 w-full rounded-xl border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                        </div>
                    </div>
                    <aside class="rounded-2xl border border-border/70 bg-white/80 p-4">
                        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-foreground/55">{{ __('onboarding.flow.guidance_title') }}</p>
                        <ul class="mt-3 space-y-2 text-sm leading-relaxed text-foreground/75">
                            <li>• {{ __('onboarding.flow.income_guidance_1') }}</li>
                            <li>• {{ __('onboarding.flow.income_guidance_2') }}</li>
                            <li>• {{ __('onboarding.flow.income_guidance_3') }}</li>
                        </ul>
                    </aside>
                </div>
            @endif

            @if ($step === 2)
                <div class="grid gap-6 lg:grid-cols-[1.45fr_1fr]">
                    <div class="space-y-6">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.expenses_eyebrow') }}</p>
                            <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.expenses_title') }}</h1>
                            <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.expenses_desc') }}</p>
                        </div>
                        <div class="grid gap-3">
                            @foreach ($bills as $idx => $bill)
                                <div class="rounded-2xl border border-border/70 bg-white/80 p-3.5">
                                    <div class="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
                                        <div class="flex items-center gap-2.5">
                                            <input type="checkbox" wire:click="toggleBill({{ $idx }})" @checked($bill['on']) class="h-4 w-4 rounded border-border" />
                                            <input type="text" wire:model.live.debounce.350ms="bills.{{ $idx }}.name" placeholder="{{ __('onboarding.flow.expense_name_placeholder') }}" class="h-10 min-w-[13rem] rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-foreground/60">€</span>
                                            <input type="number" min="0" step="0.01" wire:model.live.debounce.350ms="bills.{{ $idx }}.amount" placeholder="{{ __('onboarding.flow.expense_amount_placeholder') }}" class="h-10 w-32 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <aside class="space-y-3 rounded-2xl border border-border/70 bg-white/80 p-4">
                        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-foreground/55">{{ __('onboarding.flow.impact_title') }}</p>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.active_recurring_cost') }}</p>
                            <p class="mt-1 text-lg font-semibold">€{{ number_format($this->selectedBillsTotal, 0, ',', '.') }}</p>
                        </div>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.active_recurring_count') }}</p>
                            <p class="mt-1 text-lg font-semibold">{{ $this->selectedBillsCount }}</p>
                        </div>
                        <p class="text-xs leading-relaxed text-foreground/60">{{ __('onboarding.flow.expenses_guidance') }}</p>
                    </aside>
                </div>
            @endif

            @if ($step === 3)
                <div class="grid gap-6 lg:grid-cols-[1.45fr_1fr]">
                    <div class="space-y-6">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.budget_eyebrow') }}</p>
                            <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.budget_title') }}</h1>
                            <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.budget_desc') }}</p>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            @foreach (__('onboarding.budget.categories') as $category)
                                <button type="button" wire:click="setBudgetCategory('{{ $category['id'] }}')" class="rounded-full border px-3.5 py-2 text-sm font-medium transition {{ $budgetCategory === $category['id'] ? 'border-expense/40 bg-expense/10 text-expense' : 'border-border bg-white text-foreground/70' }}">
                                    {{ $category['label'] }}
                                </button>
                            @endforeach
                        </div>

                        <div class="rounded-2xl border border-expense/25 bg-gradient-to-br from-expense/[0.07] to-white p-4 sm:p-5">
                            <label for="budgetLimit" class="text-sm font-medium text-foreground/85">{{ __('onboarding.budget.limit_label') }}</label>
                            <div class="mt-2 flex items-center gap-2">
                                <span class="text-lg text-foreground/65">€</span>
                                <input id="budgetLimit" type="number" min="0" wire:model.live.debounce.350ms="budgetLimit" placeholder="{{ __('onboarding.flow.budget_placeholder') }}" class="h-11 w-full rounded-xl border border-input bg-white px-3 text-lg font-semibold tracking-tight outline-none ring-primary/20 focus:ring-2" />
                            </div>
                        </div>
                    </div>
                    <aside class="space-y-3 rounded-2xl border border-border/70 bg-white/80 p-4">
                        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-foreground/55">{{ __('onboarding.flow.impact_title') }}</p>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.budget.limit_label') }}</p>
                            <p class="mt-1 text-lg font-semibold">€{{ number_format((float) $budgetLimit, 0, ',', '.') }}</p>
                        </div>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.plan_load') }}</p>
                            <p class="mt-1 text-lg font-semibold">{{ $this->plannedSpendPct }}%</p>
                        </div>
                        <p class="text-xs leading-relaxed text-foreground/60">{{ __('onboarding.flow.budget_guidance') }}</p>
                    </aside>
                </div>
            @endif

            @if ($step === 4)
                <div class="grid gap-6 lg:grid-cols-[1.45fr_1fr]">
                    <div class="space-y-6">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.debts_eyebrow') }}</p>
                                <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.debts_title') }}</h1>
                                <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.debts_desc') }}</p>
                            </div>
                            <button type="button" wire:click="addDebtRow" class="rounded-full border border-border bg-white px-3 py-2 text-xs font-semibold text-foreground/70">
                                + {{ __('onboarding.flow.add_debt') }}
                            </button>
                        </div>

                        <div class="space-y-3">
                            @foreach ($debts as $idx => $debt)
                                <div class="rounded-2xl border border-border/70 bg-white/80 p-3.5">
                                    <div class="grid gap-2 sm:grid-cols-2">
                                        <label class="text-xs font-medium text-foreground/60 sm:col-span-2">{{ __('onboarding.flow.debt_name_label') }}</label>
                                        <input type="text" wire:model.live.debounce.350ms="debts.{{ $idx }}.name" placeholder="{{ __('onboarding.flow.debt_name') }}" class="h-10 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2 sm:col-span-2" />
                                        <label class="text-xs font-medium text-foreground/60">{{ __('onboarding.flow.debt_balance_label') }}</label>
                                        <label class="text-xs font-medium text-foreground/60">{{ __('onboarding.flow.debt_minimum_label') }}</label>
                                        <input type="number" min="0" step="0.01" wire:model.live.debounce.350ms="debts.{{ $idx }}.balance" placeholder="{{ __('onboarding.flow.debt_balance') }}" class="h-10 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                                        <input type="number" min="0" step="0.01" wire:model.live.debounce.350ms="debts.{{ $idx }}.minimumPayment" placeholder="{{ __('onboarding.flow.debt_minimum') }}" class="h-10 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                                        <label class="text-xs font-medium text-foreground/60">{{ __('onboarding.flow.debt_due_day_label') }}</label>
                                        <label class="text-xs font-medium text-foreground/60">{{ __('onboarding.flow.debt_type_label') }}</label>
                                        <input type="number" min="1" max="28" wire:model.live.debounce.350ms="debts.{{ $idx }}.dueDay" placeholder="{{ __('onboarding.flow.debt_due_day') }}" class="h-10 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2" />
                                        <select wire:model.change="debts.{{ $idx }}.type" class="h-10 rounded-lg border border-input bg-white px-3 text-sm outline-none ring-primary/20 focus:ring-2">
                                            <option value="loan">{{ __('onboarding.flow.debt_type_loan') }}</option>
                                            <option value="credit_card">{{ __('onboarding.flow.debt_type_card') }}</option>
                                        </select>
                                        <div class="sm:col-span-2">
                                            <button type="button" wire:click="removeDebtRow({{ $idx }})" class="text-xs font-semibold text-danger/85">
                                                {{ __('onboarding.flow.remove') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <aside class="space-y-3 rounded-2xl border border-border/70 bg-white/80 p-4">
                        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-foreground/55">{{ __('onboarding.flow.impact_title') }}</p>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.debts_count') }}</p>
                            <p class="mt-1 text-lg font-semibold">{{ $this->debtCount }}</p>
                        </div>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.debts_total') }}</p>
                            <p class="mt-1 text-lg font-semibold">€{{ number_format($this->debtTotalBalance, 0, ',', '.') }}</p>
                        </div>
                        <div class="rounded-xl border border-border/70 bg-white p-3">
                            <p class="text-[11px] text-foreground/55">{{ __('onboarding.flow.debts_monthly_minimum') }}</p>
                            <p class="mt-1 text-lg font-semibold">€{{ number_format($this->debtMinimumTotal, 0, ',', '.') }}</p>
                        </div>
                    </aside>
                </div>
            @endif

            @if ($step === 5)
                <div class="space-y-6">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary/80">{{ __('onboarding.flow.summary_eyebrow') }}</p>
                        <h1 class="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{{ __('onboarding.flow.summary_title') }}</h1>
                        <p class="mt-3 max-w-2xl text-sm leading-relaxed text-foreground/65">{{ __('onboarding.flow.summary_desc') }}</p>
                    </div>
                    <div class="grid gap-3 sm:grid-cols-2">
                        <div class="rounded-xl border border-border/70 bg-white/80 p-3.5"><p class="text-xs text-foreground/55">{{ __('onboarding.income.label') }}</p><p class="mt-1 text-lg font-semibold">€{{ number_format((float) $income, 0, ',', '.') }}</p></div>
                        <div class="rounded-xl border border-border/70 bg-white/80 p-3.5"><p class="text-xs text-foreground/55">{{ __('onboarding.flow.monthly_commitments') }}</p><p class="mt-1 text-lg font-semibold">€{{ number_format($this->monthlyPlannedSpend, 0, ',', '.') }}</p></div>
                        <div class="rounded-xl border border-border/70 bg-white/80 p-3.5"><p class="text-xs text-foreground/55">{{ __('onboarding.flow.free_cash_estimate') }}</p><p class="mt-1 text-lg font-semibold {{ $this->freeCash >= 0 ? 'text-primary' : 'text-expense' }}">{{ $this->freeCash >= 0 ? '+' : '-' }}€{{ number_format(abs($this->freeCash), 0, ',', '.') }}</p></div>
                        <div class="rounded-xl border border-border/70 bg-white/80 p-3.5"><p class="text-xs text-foreground/55">{{ __('onboarding.flow.plan_load') }}</p><p class="mt-1 text-lg font-semibold">{{ $this->plannedSpendPct }}%</p></div>
                    </div>
                    <div class="rounded-2xl border border-primary/25 bg-primary/[0.06] p-4">
                        <p class="text-sm font-semibold text-foreground">{{ __('onboarding.summary.ai_heading') }}</p>
                        <ul class="mt-2 space-y-2 text-sm leading-relaxed text-foreground/75">
                            @foreach ($this->advice as $tip)
                                <li>• {{ $tip }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif
        </section>

        <footer class="sticky bottom-3 z-10 mt-4 rounded-2xl border border-white/70 bg-white/85 p-3 shadow-[0_10px_35px_rgba(15,23,42,0.08)] backdrop-blur">
            <div class="flex items-center justify-between">
                <button type="button" wire:click="prevStep" @disabled($step === 0) class="rounded-full border border-border bg-white px-4 py-2 text-sm font-semibold text-foreground/70 disabled:opacity-40">
                    {{ __('onboarding.back') }}
                </button>
                @if ($step < 5)
                    <button type="button" wire:click="nextStep" @disabled(!$this->canAdvance) class="rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-[0_8px_24px_hsl(160_60%_45%/0.25)] disabled:opacity-40">
                        {{ __('onboarding.continue') }}
                    </button>
                @else
                    <button type="button" wire:click="finish" class="rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-[0_8px_24px_hsl(160_60%_45%/0.25)]">
                        {{ __('onboarding.flow.go_to_app') }}
                    </button>
                @endif
            </div>
        </footer>
    </div>
</div>