@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $company = $setting?->company_name ?: __('Print Shop');
    $logo = $setting?->logoSrc();
    $money = fn ($n) => $currency . ' ' . number_format((float) $n, 2);

    $stepCount = count($stepLabels);
    // A counter shop with no price list has nothing to sell; a quote shop needs
    // no price list at all, so only block the counter lane on missing pricing.
    $blocked = ! $isQuoteLane && ! $hasPricing;
@endphp

<div style="--brand: {{ $primary }}; --accent: {{ $accent }};"
     class="mx-auto flex min-h-screen max-w-lg flex-col px-4 pb-10 pt-6 sm:pt-10">

    <style>
        .brand-grad { background-image: linear-gradient(135deg, var(--brand), var(--accent)); }
        .brand-text { color: var(--brand); }
        .brand-ring:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    </style>

    {{-- Header --}}
    <div class="flex items-center gap-3">
        @if ($logo)
            <img src="{{ $logo }}" alt="{{ $company }}" class="h-11 w-auto max-w-[140px] rounded-lg bg-white object-contain p-1 shadow-sm ring-1 ring-slate-900/5">
        @else
            <span class="brand-grad flex h-11 w-11 items-center justify-center rounded-lg text-lg font-bold text-white shadow-sm">
                {{ \Illuminate\Support\Str::of($company)->substr(0, 1)->upper() }}
            </span>
        @endif
        <div class="min-w-0">
            <p class="text-base font-bold leading-tight text-slate-900">{{ $company }}</p>
            @if ($step === 0)
                <p class="text-sm text-slate-500">{{ __('What can we do for you?') }}</p>
            @elseif ($service && $services->count() > 1)
                {{-- Always reachable, on every step. Burying this at the bottom of
                     the form meant a customer who tapped the wrong tile had no
                     obvious way out. --}}
                <button type="button" wire:click="changeService"
                        class="group flex items-center gap-1.5 text-sm text-slate-500 transition hover:text-slate-800">
                    <span class="truncate font-medium">{{ $service->name }}</span>
                    <span class="shrink-0 whitespace-nowrap text-xs text-slate-400 underline underline-offset-2 group-hover:text-slate-600">{{ __('change') }}</span>
                </button>
            @else
                <p class="text-sm text-slate-500">{{ $service?->name ?: __('Quick print request') }}</p>
            @endif
        </div>
    </div>

    {{-- ============================ STEP 0 · SERVICE PICKER ============================ --}}
    @if ($step === 0)
        <div class="mt-6 space-y-2.5">
            @foreach ($services as $option)
                <button type="button" wire:click="selectService({{ $option->id }})"
                        class="flex w-full items-center gap-3.5 rounded-2xl bg-white p-4 text-left shadow-sm ring-1 ring-slate-900/5 transition hover:-translate-y-px hover:shadow-md">
                    <span class="brand-grad flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-white shadow-sm">
                        <x-icon :name="$option->icon" class="h-5 w-5" />
                    </span>
                    <span class="min-w-0 flex-1">
                        <span class="block text-sm font-bold text-slate-900">{{ $option->name }}</span>
                        @if ($option->blurb)
                            <span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $option->blurb }}</span>
                        @endif
                        <span class="mt-1.5 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold
                                     {{ $option->isCounter() ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">
                            {{ $option->isCounter() ? __('Price now, pay now') : __('Quote :when', ['when' => $option->leadTimeLabel()]) }}
                        </span>
                    </span>
                    <x-icon name="arrow-right" class="h-4 w-4 shrink-0 text-slate-300" />
                </button>
            @endforeach
        </div>

    @elseif ($blocked)
        <div class="mt-8 rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">
            {{ __('Online print requests are not set up yet. Please see a member of staff at the counter.') }}
        </div>

    @else

    {{-- Progress --}}
    <div class="mt-6 flex items-center gap-1.5">
        @foreach ($stepLabels as $i => $label)
            @php $n = $i + 1; @endphp
            <div class="flex flex-1 flex-col items-center gap-1.5">
                <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
                    <div class="h-full rounded-full transition-all duration-300 {{ $step >= $n ? 'brand-grad w-full' : 'w-0' }}"></div>
                </div>
                <span class="text-[11px] font-semibold {{ $step >= $n ? 'brand-text' : 'text-slate-400' }}">{{ $label }}</span>
            </div>
        @endforeach
    </div>

    <div class="mt-5 flex-1 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5 sm:p-6">

        {{-- ============================ FILES (counter) ============================ --}}
        @if ($stepKey === 'files')
            <h1 class="text-lg font-bold text-slate-900">{{ __('What do you need printed?') }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ __('Upload your documents or photos. You can add several.') }}</p>

            @include('livewire.portal.partials.intake-uploader', ['retentionNote' => __('Your files are automatically deleted 24 hours after you submit.')])

        {{-- ========================= QUESTIONS (quote lane) ========================= --}}
        @elseif ($stepKey === 'questions')
            <h1 class="text-lg font-bold text-slate-900">{{ __('Tell us about the job') }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ __('Rough answers are fine, we will confirm everything in the quote.') }}</p>

            <div class="mt-5 space-y-4">
                @foreach ($fields as $i => $field)
                    @php
                        $block = $field['block'] ?? 'text';
                        $label = $field['label'] ?? ($blocks[$block]['label'] ?? __('Detail'));
                        $help = $field['help'] ?? ($blocks[$block]['help'] ?? null);
                        $optional = ($field['required'] ?? true) === false;
                    @endphp

                    <div>
                        <label class="text-sm font-medium text-slate-700">
                            {{ $label }}
                            @if ($optional)<span class="font-normal text-slate-400">{{ __('(optional)') }}</span>@endif
                        </label>

                        @if ($block === 'dimensions')
                            <div class="mt-1 grid grid-cols-2 gap-3">
                                <div>
                                    <input type="number" step="0.01" min="0.01" inputmode="decimal" wire:model="answers.{{ $i }}.width_m"
                                           placeholder="{{ __('Width (m)') }}"
                                           class="brand-ring block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                                    @error('answers.'.$i.'.width_m') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <input type="number" step="0.01" min="0.01" inputmode="decimal" wire:model="answers.{{ $i }}.height_m"
                                           placeholder="{{ __('Height (m)') }}"
                                           class="brand-ring block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                                    @error('answers.'.$i.'.height_m') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                                </div>
                            </div>

                        @elseif ($block === 'quantity')
                            <input type="number" min="1" inputmode="numeric" wire:model="answers.{{ $i }}"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">

                        @elseif ($block === 'choice')
                            <select wire:model="answers.{{ $i }}" class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                                <option value="">{{ __('Choose…') }}</option>
                                @foreach (($field['options'] ?? []) as $opt)
                                    <option value="{{ $opt }}">{{ $opt }}</option>
                                @endforeach
                            </select>

                        @elseif ($block === 'method')
                            <div class="mt-1.5 grid grid-cols-2 gap-2">
                                @foreach (($blocks['method']['options'] ?? []) as $value => $text)
                                    <button type="button" wire:click="$set('answers.{{ $i }}', '{{ $value }}')"
                                            @class([
                                                'rounded-xl border-2 px-3 py-3 text-sm font-semibold transition',
                                                'border-transparent text-white brand-grad shadow-sm' => ($answers[$i] ?? '') === $value,
                                                'border-slate-200 bg-white text-slate-600 hover:border-slate-300' => ($answers[$i] ?? '') !== $value,
                                            ])>{{ $text }}</button>
                                @endforeach
                            </div>

                        @elseif ($block === 'multi_choice')
                            <div class="mt-1.5 space-y-2">
                                @foreach (($field['options'] ?? []) as $opt)
                                    <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 transition hover:border-slate-300">
                                        <input type="checkbox" value="{{ $opt }}" wire:model="answers.{{ $i }}"
                                               class="h-5 w-5 rounded border-slate-300 text-slate-800 focus:ring-0">
                                        <span class="text-sm text-slate-700">{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>

                        @elseif ($block === 'long_text')
                            <textarea wire:model="answers.{{ $i }}" rows="4"
                                      class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>

                        @else
                            <input type="text" wire:model="answers.{{ $i }}"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                        @endif

                        @if ($help)
                            <p class="mt-1 text-xs text-slate-400">{{ $help }}</p>
                        @endif
                        @error('answers.'.$i) <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>
                @endforeach

                <div class="border-t border-slate-100 pt-4">
                    <p class="text-sm font-medium text-slate-700">
                        {{ $service?->requires_files ? __('Attach your artwork') : __('Artwork or a reference photo (optional)') }}
                    </p>
                    @include('livewire.portal.partials.intake-uploader', ['retentionNote' => __('We keep your artwork while we work on your quote.')])
                </div>
            </div>

        {{-- ============================== DETAILS (both) ============================== --}}
        @elseif ($stepKey === 'details')
            <h1 class="text-lg font-bold text-slate-900">{{ __('Your details') }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                {{ $isQuoteLane ? __('So we can send you the quote.') : __('So we know whose print this is.') }}
            </p>

            <div class="mt-5 space-y-4">
                <div>
                    <label class="text-sm font-medium text-slate-700">{{ __('Your name') }} <span class="text-rose-500">*</span></label>
                    <input type="text" wire:model="customer_name" placeholder="{{ __('e.g. Tanaka M.') }}"
                           class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                    @error('customer_name') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="text-sm font-medium text-slate-700">
                        {{ __('Phone') }}
                        @if ($isQuoteLane)<span class="text-rose-500">*</span>@else<span class="font-normal text-slate-400">{{ __('(optional)') }}</span>@endif
                    </label>
                    <input type="tel" wire:model="contact_phone" inputmode="tel" placeholder="07…"
                           class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                    @error('contact_phone') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="text-sm font-medium text-slate-700">
                        {{ $isQuoteLane ? __('Anything else we should know? (optional)') : __('Instructions (optional)') }}
                    </label>
                    <textarea wire:model="notes" rows="3"
                              placeholder="{{ $isQuoteLane ? __('e.g. must match our existing branding…') : __('e.g. double-sided, staple top-left…') }}"
                              class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>
                    @error('notes') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                </div>

                {{-- Voice note --}}
                <div x-data="{
                        recording: false, seconds: 0, timer: null, mediaRecorder: null, chunks: [], audioUrl: null, error: '',
                        fmt(s) { const m = Math.floor(s/60), r = s%60; return m + ':' + (r<10?'0':'') + r; },
                        async start() {
                            try {
                                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                                this.chunks = [];
                                this.mediaRecorder = new MediaRecorder(stream);
                                this.mediaRecorder.ondataavailable = e => this.chunks.push(e.data);
                                this.mediaRecorder.onstop = () => {
                                    const blob = new Blob(this.chunks, { type: 'audio/webm' });
                                    this.audioUrl = URL.createObjectURL(blob);
                                    $wire.upload('audioUpload', new File([blob], 'voice-note.webm', { type: 'audio/webm' }));
                                    stream.getTracks().forEach(t => t.stop());
                                };
                                this.mediaRecorder.start(); this.recording = true; this.seconds = 0;
                                this.timer = setInterval(() => this.seconds++, 1000);
                            } catch (e) { this.error = '{{ __('Microphone not available on this device.') }}'; }
                        },
                        stop() { if (this.mediaRecorder && this.recording) { this.mediaRecorder.stop(); this.recording = false; clearInterval(this.timer); } },
                        reset() { this.audioUrl = null; this.seconds = 0; $wire.removeAudio(); }
                     }"
                     class="rounded-xl border border-slate-200 bg-slate-50 p-3.5">
                    <div class="flex items-center gap-3">
                        <template x-if="!recording && !audioUrl">
                            <button type="button" @click="start()" class="brand-grad flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-white shadow-sm">
                                <x-icon name="microphone" class="h-5 w-5" />
                            </button>
                        </template>
                        <template x-if="recording">
                            <button type="button" @click="stop()" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-rose-500 text-white shadow-sm">
                                <span class="h-4 w-4 rounded-sm bg-white"></span>
                            </button>
                        </template>
                        <template x-if="audioUrl && !recording">
                            <button type="button" @click="reset()" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-200 text-slate-600">
                                <x-icon name="arrow-path" class="h-5 w-5" />
                            </button>
                        </template>

                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-slate-700" x-show="!recording && !audioUrl">{{ __('Add a voice note') }}</p>
                            <p class="flex items-center gap-2 text-sm font-semibold text-rose-600" x-show="recording" x-cloak>
                                <span class="h-2 w-2 animate-pulse rounded-full bg-rose-500"></span>
                                {{ __('Recording') }} <span x-text="fmt(seconds)"></span>
                            </p>
                            <audio x-show="audioUrl && !recording" x-cloak :src="audioUrl" controls class="mt-0.5 h-9 w-full"></audio>
                            <p class="text-xs text-rose-500" x-text="error" x-show="error" x-cloak></p>
                        </div>
                    </div>
                </div>
                @error('audioUpload') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
            </div>

        {{-- ============================== OPTIONS (counter) ============================== --}}
        @elseif ($stepKey === 'options')
            <h1 class="text-lg font-bold text-slate-900">{{ __('Print options') }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ __('The price updates as you choose.') }}</p>

            <div class="mt-5 space-y-4">
                {{-- What we're printing. One tap, one price. --}}
                <div>
                    <label class="text-sm font-medium text-slate-700">{{ __('What are we printing on?') }}</label>
                    <div class="mt-1.5 space-y-2">
                        @foreach ($items as $item)
                            <button type="button" wire:click="$set('counterItemId', {{ $item->id }})"
                                    @class([
                                        'flex w-full items-center justify-between gap-3 rounded-xl border-2 px-4 py-3 text-left transition',
                                        'border-transparent text-white brand-grad shadow-sm' => $counterItemId === $item->id,
                                        'border-slate-200 bg-white hover:border-slate-300' => $counterItemId !== $item->id,
                                    ])>
                                <span class="flex items-center gap-2.5 min-w-0">
                                    @if ($item->color_mode === 'color')
                                        <span class="h-4 w-4 shrink-0 rounded-full" style="background:conic-gradient(#ef4444,#f59e0b,#10b981,#3b82f6,#ef4444)"></span>
                                    @else
                                        <span class="h-4 w-4 shrink-0 rounded-full bg-slate-800 ring-1 ring-white/40"></span>
                                    @endif
                                    <span class="min-w-0">
                                        <span @class(['block truncate text-sm font-semibold', 'text-slate-700' => $counterItemId !== $item->id])>{{ $item->name }}</span>
                                        @if ($item->variantLabel())
                                            <span @class(['block truncate text-xs', 'text-white/70' => $counterItemId === $item->id, 'text-slate-400' => $counterItemId !== $item->id])>{{ $item->variantLabel() }}</span>
                                        @endif
                                    </span>
                                </span>
                                <span @class([
                                    'shrink-0 text-sm font-semibold tabular-nums',
                                    'text-white/90' => $counterItemId === $item->id,
                                    'text-slate-500' => $counterItemId !== $item->id,
                                ])>{{ $money((float) $item->price) }}<span class="text-xs font-normal">/{{ __('page') }}</span></span>
                            </button>
                        @endforeach
                    </div>
                    @error('counterItemId') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                </div>

                {{-- Pages + copies --}}
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-sm font-medium text-slate-700">{{ __('Pages') }}</label>
                        <input type="number" min="1" wire:model.live="pages" inputmode="numeric"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                        @error('pages') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-sm font-medium text-slate-700">{{ __('Copies') }}</label>
                        <input type="number" min="1" wire:model.live="copies" inputmode="numeric"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                        @error('copies') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Back-to-back --}}
                <button type="button" wire:click="$toggle('double_sided')"
                        @class([
                            'flex w-full items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition',
                            'border-transparent brand-grad text-white shadow-sm' => $double_sided,
                            'border-slate-200 bg-white hover:border-slate-300' => ! $double_sided,
                        ])>
                    <span @class([
                        'flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-2',
                        'border-white bg-white/20' => $double_sided,
                        'border-slate-300' => ! $double_sided,
                    ])>
                        @if ($double_sided)
                            <x-icon name="check" class="h-4 w-4" />
                        @endif
                    </span>
                    <span>
                        <span class="block text-sm font-semibold {{ $double_sided ? 'text-white' : 'text-slate-700' }}">{{ __('Print back-to-back') }}</span>
                        <span class="block text-xs {{ $double_sided ? 'text-white/80' : 'text-slate-400' }}">{{ __('Double-sided (both sides of the page)') }}</span>
                    </span>
                </button>

                {{-- Live price --}}
                <div class="brand-grad rounded-2xl px-5 py-4 text-white shadow-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-white/80">{{ __('Estimated price') }}</span>
                        <span class="text-2xl font-bold">{{ $money($subtotal) }}</span>
                    </div>
                    @if ($unitPrice > 0)
                        <p class="mt-1 text-xs text-white/70">
                            @php($shownPages = max(1, (int) $pages))
                            @php($shownCopies = max(1, (int) $copies))
                            {{ $money($unitPrice) }} × {{ $shownPages }} {{ trans_choice('{1}page|[2,*]pages', $shownPages) }} × {{ $shownCopies }} {{ trans_choice('{1}copy|[2,*]copies', $shownCopies) }}
                        </p>

                        @if ($bulkTier)
                            <p class="mt-2 flex items-center gap-1.5 rounded-lg bg-white/15 px-2.5 py-1.5 text-xs font-semibold text-white">
                                <x-icon name="check-circle" class="h-3.5 w-3.5 shrink-0" />
                                {{ __('Bulk price applied, :n pages or more.', ['n' => $bulkTier->min_qty]) }}
                                @if ($bulkSaving > 0)
                                    <span class="font-normal text-white/80">{{ __('You save :amt', ['amt' => $money($bulkSaving)]) }}</span>
                                @endif
                            </p>
                        @elseif ($nextBreak)
                            <p class="mt-2 flex items-center gap-1.5 rounded-lg bg-white/10 px-2.5 py-1.5 text-xs text-white/90">
                                <x-icon name="sparkles" class="h-3.5 w-3.5 shrink-0" />
                                {{ trans_choice(
                                    '{1} :count more page drops it to :price each.|[2,*] :count more pages drop it to :price each.',
                                    $nextBreak['more'],
                                    ['count' => $nextBreak['more'], 'price' => $money($nextBreak['price'])],
                                ) }}
                            </p>
                        @endif
                    @else
                        <p class="mt-1 text-xs text-white/70">{{ __('Choose a size and paper type to see the price.') }}</p>
                    @endif
                </div>

                {{-- The full ladder, so the price is never a surprise at the counter. --}}
                @if (! empty($bulkLadder))
                    <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ __('Bulk pricing') }}</p>
                        <ul class="mt-2 space-y-1 text-sm">
                            <li class="flex items-center justify-between">
                                <span class="text-slate-500">{{ trans_choice('{1} Up to :count page|[2,*] Up to :count pages', max(1, $bulkLadder[0]['min_qty'] - 1), ['count' => $bulkLadder[0]['min_qty'] - 1]) }}</span>
                                <span class="font-medium text-slate-700">{{ $money($baseUnitPrice) }}</span>
                            </li>
                            @foreach ($bulkLadder as $step)
                                <li class="flex items-center justify-between">
                                    <span class="text-slate-500">{{ __(':n pages or more', ['n' => $step['min_qty']]) }}</span>
                                    <span class="font-medium text-slate-700">{{ $money($step['price']) }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

        {{-- ============================== PAYMENT (counter) ============================== --}}
        @elseif ($stepKey === 'payment')
            <h1 class="text-lg font-bold text-slate-900">{{ __('How will you pay?') }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ __('Pay at the counter or send via EcoCash.') }}</p>

            <div class="mt-5 grid grid-cols-2 gap-2">
                <button type="button" wire:click="$set('payment_method', 'cash')"
                        @class([
                            'flex flex-col items-center gap-1.5 rounded-xl border-2 px-3 py-4 text-sm font-semibold transition',
                            'border-transparent text-white brand-grad shadow-sm' => $payment_method === 'cash',
                            'border-slate-200 bg-white text-slate-600 hover:border-slate-300' => $payment_method !== 'cash',
                        ])>
                    <x-icon name="banknotes" class="h-6 w-6" />
                    {{ __('Cash') }}
                </button>
                <button type="button" wire:click="$set('payment_method', 'ecocash')"
                        @class([
                            'flex flex-col items-center gap-1.5 rounded-xl border-2 px-3 py-4 text-sm font-semibold transition',
                            'border-transparent text-white brand-grad shadow-sm' => $payment_method === 'ecocash',
                            'border-slate-200 bg-white text-slate-600 hover:border-slate-300' => $payment_method !== 'ecocash',
                        ])>
                    <x-icon name="device-phone-mobile" class="h-6 w-6" />
                    {{ __('EcoCash') }}
                </button>
            </div>

            {{-- Price summary --}}
            <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-slate-500">{{ __('Print total') }}</span>
                    <span class="font-semibold text-slate-800">{{ $money($subtotal) }}</span>
                </div>
                @if ($payment_method === 'ecocash' && $ecocashFee > 0)
                    <div class="mt-1 flex items-center justify-between text-sm">
                        <span class="text-slate-500">{{ __('EcoCash fee') }} ({{ rtrim(rtrim(number_format($ecocashFeePercent, 2), '0'), '.') }}%)</span>
                        <span class="font-semibold text-slate-800">{{ $money($ecocashFee) }}</span>
                    </div>
                @endif
                <div class="mt-2 flex items-center justify-between border-t border-slate-200 pt-2">
                    <span class="text-sm font-semibold text-slate-700">{{ __('You pay') }}</span>
                    <span class="brand-text text-xl font-bold">{{ $money($total) }}</span>
                </div>
            </div>

            {{-- EcoCash details --}}
            @if ($payment_method === 'ecocash')
                <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-700">{{ __('Send EcoCash to') }}</p>
                    @if ($setting?->print_ecocash_number)
                        <p class="mt-1 text-2xl font-bold tracking-tight text-emerald-900">{{ $setting->print_ecocash_number }}</p>
                        @if ($setting?->print_ecocash_name)
                            <p class="text-sm text-emerald-700">{{ $setting->print_ecocash_name }}</p>
                        @endif
                        <p class="mt-2 text-xs text-emerald-700">{{ __('Send :amount, then upload your confirmation below.', ['amount' => $money($total)]) }}</p>
                    @else
                        <p class="mt-1 text-sm text-emerald-800">{{ __('Ask a staff member for the EcoCash number.') }}</p>
                    @endif

                    <div class="mt-3">
                        <label class="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-emerald-300 bg-white px-3 py-2.5 text-sm font-semibold text-emerald-700 transition hover:bg-emerald-50">
                            <x-icon name="arrow-up-tray" class="h-5 w-5" />
                            {{ $pop ? __('Change proof of payment') : __('Upload proof of payment') }}
                            <input type="file" wire:model="pop" accept=".pdf,.jpg,.jpeg,.png,image/*" class="hidden">
                        </label>
                        <x-upload-progress target="pop" class="mt-2" />
                        @if ($pop)
                            <p class="mt-2 flex items-center gap-1.5 text-xs font-medium text-emerald-700">
                                <x-icon name="check" class="h-4 w-4" />
                                {{ __('Proof attached') }}
                            </p>
                        @endif
                    </div>
                </div>
            @else
                <p class="mt-4 rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">{{ __('Please pay :amount in cash when you collect your prints.', ['amount' => $money($total)]) }}</p>
            @endif

        {{-- ============================== CONFIRM (quote lane) ============================== --}}
        @elseif ($stepKey === 'confirm')
            <h1 class="text-lg font-bold text-slate-900">{{ __('Check and send') }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ __('We will price it and come back to you.') }}</p>

            <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ __('Your request') }}</p>
                <p class="mt-1 text-sm font-bold text-slate-900">{{ $service?->name }}</p>

                <dl class="mt-3 space-y-1.5">
                    @foreach ($answerSummary as $row)
                        <div class="flex justify-between gap-4 text-sm">
                            <dt class="text-slate-500">{{ $row['label'] }}</dt>
                            <dd class="text-right font-medium text-slate-800">{{ $row['value'] }}</dd>
                        </div>
                    @endforeach
                    <div class="flex justify-between gap-4 text-sm">
                        <dt class="text-slate-500">{{ __('Attachments') }}</dt>
                        <dd class="text-right font-medium text-slate-800">
                            {{ count($fileMeta) ? trans_choice('{1}:count file|[2,*]:count files', count($fileMeta), ['count' => count($fileMeta)]) : __('None') }}
                        </dd>
                    </div>
                    <div class="flex justify-between gap-4 border-t border-slate-200 pt-1.5 text-sm">
                        <dt class="text-slate-500">{{ __('Contact') }}</dt>
                        <dd class="text-right font-medium text-slate-800">{{ $customer_name }} · {{ $contact_phone }}</dd>
                    </div>
                </dl>
            </div>

            <div class="mt-4">
                <label class="text-sm font-medium text-slate-700">{{ __('When do you need it? (optional)') }}</label>
                <input type="date" wire:model="needed_by" min="{{ now()->toDateString() }}"
                       class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                @error('needed_by') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
            </div>

            <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-4">
                <p class="flex items-center gap-2 text-sm font-semibold text-slate-700">
                    <x-icon name="clock" class="h-4 w-4 text-slate-400" />
                    {{ __('What happens next') }}
                </p>
                <p class="mt-1.5 text-sm leading-relaxed text-slate-500">
                    {{ __('No payment now. We will price this and send you a quote :when. Nothing is booked in until you accept it.', ['when' => $service?->leadTimeLabel() ?: __('shortly')]) }}
                </p>
            </div>
        @endif

        {{-- Navigation --}}
        <div class="mt-6 flex items-center gap-3">
            {{-- Ghost, so the gradient Continue button is the only solid thing
                 on screen and the eye goes forward, not back. --}}
            @if ($step > 1)
                <button type="button" wire:click="back"
                        class="flex items-center gap-1.5 rounded-xl bg-transparent px-3 py-3 text-sm font-semibold text-slate-500 transition hover:text-slate-800">
                    <x-icon name="arrow-left" class="h-4 w-4" />
                    {{ __('Back') }}
                </button>
            @elseif ($services->count() > 1)
                <button type="button" wire:click="changeService"
                        class="flex items-center gap-1.5 rounded-xl bg-transparent px-3 py-3 text-sm font-semibold text-slate-500 transition hover:text-slate-800">
                    <x-icon name="arrow-left" class="h-4 w-4" />
                    {{ __('All services') }}
                </button>
            @endif

            @if ($step < $stepCount)
                <button type="button" wire:click="next" wire:loading.attr="disabled" wire:target="incoming,pop,next"
                        class="brand-grad flex flex-1 items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50">
                    {{ __('Continue') }}
                    <x-icon name="arrow-right" class="h-4 w-4" />
                </button>
            @else
                <button type="button" wire:click="submit" wire:loading.attr="disabled" wire:target="submit,pop"
                        class="brand-grad flex flex-1 items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50">
                    <span wire:loading.remove wire:target="submit">{{ $isQuoteLane ? __('Send request') : __('Submit request') }}</span>
                    <span wire:loading wire:target="submit" class="flex items-center gap-2">
                        <x-icon name="spinner" class="h-4 w-4" />
                        {{ __('Sending…') }}
                    </span>
                </button>
            @endif
        </div>
    </div>
    @endif

    {{-- Offered on the front door only — the service picker, or step 1 for a
         shop that offers one thing and so has no picker. Mid-form it would be
         an interruption; after they send it, the status page carries the same
         card with notifications attached. --}}
    @if ($step <= 1)
        <x-portal-app-card :code="$intakeCode" :company="$setting?->company_name" />
    @endif

    <p class="mt-5 text-center text-xs text-slate-400">{{ __('Powered by') }} {{ $company }}</p>
</div>