@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $company = $setting?->company_name ?: config('app.name');
    $logo = $setting?->logoSrc();

    $qty = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
    $money = fn ($v) => $currency_code . ' ' . number_format((float) $v, 2);

    $deadline = $rfq->response_deadline;
    $steps = [
        1 => __('The request'),
        2 => __('Your pricing'),
        3 => __('Terms & submit'),
    ];

    // One place decides what this page is: a live form, a receipt, or a notice.
    $mode = match (true) {
        $rfq->status === 'cancelled' => 'cancelled',
        $invitation->status === 'awarded' => 'won',
        $invitation->status === 'not_selected' => 'lost',
        $decliningNow => 'declining',
        $invitation->status === 'declined' => 'declined',
        $submitted => 'receipt',
        ! $isOpen => 'closed',
        default => 'form',
    };
@endphp

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

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

    {{-- ============================ HEADER ============================ --}}
    <header class="flex flex-wrap items-center justify-between gap-4">
        <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>
                <p class="text-base font-bold leading-tight text-slate-900">{{ $company }}</p>
                <p class="text-sm text-slate-500">{{ __('Request for quotation') }}</p>
            </div>
        </div>

        <div class="text-right">
            <p class="font-mono text-sm font-bold text-slate-900">{{ $rfq->rfq_number }}</p>
            <p class="text-xs text-slate-500">{{ $invitation->supplier?->name }}</p>
        </div>
    </header>

    {{-- ============================ DEADLINE ========================== --}}
    @if ($mode === 'form' && $deadline)
        <div class="mt-5 flex items-center gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3">
            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
                <x-icon name="clock" class="h-5 w-5" />
            </span>
            <div class="min-w-0">
                <p class="text-sm font-semibold text-amber-900">{{ __('Closes :when', ['when' => $deadline->diffForHumans()]) }}</p>
                <p class="text-xs text-amber-700">{{ $deadline->format('l j F Y, H:i') }}</p>
            </div>
        </div>
    @endif

    {{-- ============================ NOTICES =========================== --}}
    @if (in_array($mode, ['cancelled', 'closed', 'won', 'lost', 'declined', 'receipt'], true))
        @php
            $notice = match ($mode) {
                'cancelled' => ['tone' => 'slate',   'title' => __('This request has been withdrawn'),  'body' => __('The buyer cancelled this request for quotation. Nothing further is needed from you.')],
                'closed'    => ['tone' => 'slate',   'title' => __('This request is now closed'),       'body' => __('The deadline has passed and quotations can no longer be submitted or changed. Thank you for your interest.')],
                'won'       => ['tone' => 'emerald', 'title' => __('Your quotation was successful'),    'body' => __('Congratulations, your quotation has been accepted. A purchase order will follow from the buyer.')],
                'lost'      => ['tone' => 'slate',   'title' => __('This request has been awarded'),    'body' => __('On this occasion the business went elsewhere. Thank you for taking the time to quote, we will be in touch on the next one.')],
                'declined'  => ['tone' => 'amber',   'title' => __('You declined this request'),        'body' => __('We have recorded that you are unable to quote on this occasion. Thank you for letting us know.')],
                default     => ['tone' => 'emerald', 'title' => __('Quotation received, thank you'),   'body' => __('Your pricing is with the buying team. You will hear from them once all quotations have been reviewed.')],
            };
            $tones = [
                'emerald' => ['bg-emerald-50', 'border-emerald-200', 'bg-emerald-100 text-emerald-600', 'text-emerald-900', 'text-emerald-700'],
                'amber'   => ['bg-amber-50',   'border-amber-200',   'bg-amber-100 text-amber-600',     'text-amber-900',   'text-amber-700'],
                'slate'   => ['bg-slate-50',   'border-slate-200',   'bg-slate-100 text-slate-500',     'text-slate-900',   'text-slate-600'],
            ];
            [$bg, $border, $chip, $titleTone, $bodyTone] = $tones[$notice['tone']];
        @endphp

        <div class="mt-6 rounded-2xl border {{ $border }} {{ $bg }} p-6 text-center">
            <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl {{ $chip }}">
                @if ($notice['tone'] === 'emerald')
                    <x-icon name="check-circle" class="h-6 w-6" />
                @else
                    <x-icon name="information-circle" class="h-6 w-6" />
                @endif
            </span>
            <h1 class="mt-4 text-lg font-bold {{ $titleTone }}">{{ $notice['title'] }}</h1>
            <p class="mx-auto mt-1 max-w-md text-sm {{ $bodyTone }}">{{ $notice['body'] }}</p>

            {{-- Receipt summary --}}
            @if ($mode === 'receipt' || $mode === 'won' || $mode === 'lost')
                @if ((float) $invitation->total > 0)
                    <div class="mx-auto mt-5 max-w-sm rounded-xl bg-white p-4 text-left shadow-sm ring-1 ring-slate-900/5">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-slate-500">{{ __('Your total') }}</span>
                            <span class="font-bold tabular-nums text-slate-900">{{ $invitation->currency_code }} {{ number_format((float) $invitation->total, 2) }}</span>
                        </div>
                        @if ($invitation->lead_time_days !== null)
                            <div class="mt-2 flex items-center justify-between text-sm">
                                <span class="text-slate-500">{{ __('Lead time') }}</span>
                                <span class="text-slate-700">{{ __(':n days', ['n' => $invitation->lead_time_days]) }}</span>
                            </div>
                        @endif
                        @if ($invitation->valid_until)
                            <div class="mt-2 flex items-center justify-between text-sm">
                                <span class="text-slate-500">{{ __('Valid until') }}</span>
                                <span class="text-slate-700">{{ $invitation->valid_until->format('j M Y') }}</span>
                            </div>
                        @endif
                        <div class="mt-2 flex items-center justify-between text-sm">
                            <span class="text-slate-500">{{ __('Submitted') }}</span>
                            <span class="text-slate-700">{{ optional($invitation->submitted_at)->format('j M Y, H:i') }}</span>
                        </div>
                    </div>
                @endif
            @endif

            {{-- Still open? Let them change their mind either way. --}}
            @if ($isOpen && in_array($mode, ['receipt', 'declined'], true))
                <button type="button" wire:click="{{ $mode === 'receipt' ? 'revise' : 'revise' }}"
                        class="brand-text mt-5 text-sm font-semibold underline underline-offset-4 transition hover:opacity-80">
                    {{ $mode === 'receipt' ? __('Revise my quotation') : __('Actually, I would like to quote') }}
                </button>
                @if ($deadline)
                    <p class="mt-1 text-xs text-slate-400">{{ __('You can change your answer until :when.', ['when' => $deadline->format('j M Y, H:i')]) }}</p>
                @endif
            @endif
        </div>
    @endif

    {{-- ============================ DECLINE FORM ====================== --}}
    @if ($mode === 'declining')
        <div class="mt-6 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5 sm:p-6">
            <h1 class="text-lg font-bold text-slate-900">{{ __('Unable to quote?') }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                {{ __('No problem, telling us is far more useful than silence, and it keeps you on the list for the next one.') }}
            </p>

            <label class="mt-5 block text-sm font-semibold text-slate-700" for="decline-reason">{{ __('Reason (optional)') }}</label>
            <textarea id="decline-reason" rows="3" wire:model="decline_reason"
                      placeholder="{{ __('e.g. Out of stock until October, or outside our product range') }}"
                      class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0"></textarea>
            @error('decline_reason') <p class="mt-2 text-sm text-rose-600">{{ $message }}</p> @enderror

            <div class="mt-5 flex items-center justify-between gap-3">
                <button type="button" wire:click="cancelDecline" class="text-sm font-semibold text-slate-500 transition hover:text-slate-700">
                    {{ __('Back') }}
                </button>
                <button type="button" wire:click="decline" wire:loading.attr="disabled" wire:target="decline"
                        class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-bold text-white shadow-sm transition hover:bg-slate-800 disabled:opacity-60">
                    <span wire:loading.remove wire:target="decline">{{ __('Submit "no bid"') }}</span>
                    <span wire:loading wire:target="decline">{{ __('Sending…') }}</span>
                </button>
            </div>
        </div>
    @endif

    {{-- ============================ THE FORM ========================== --}}
    @if ($mode === 'form')

        {{-- Progress --}}
        <div class="mt-6 flex items-center gap-1.5">
            @foreach ($steps as $n => $label)
                <button type="button" wire:click="goToStep({{ $n }})" @disabled($n > $step)
                        class="flex flex-1 flex-col items-center gap-1.5 {{ $n < $step ? 'cursor-pointer' : 'cursor-default' }}">
                    <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>
                </button>
            @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">

            {{-- ==================== STEP 1 · THE REQUEST ==================== --}}
            @if ($step === 1)
                <h1 class="text-lg font-bold text-slate-900">{{ $rfq->title ?: __('What we need priced') }}</h1>
                <p class="mt-1 text-sm text-slate-500">
                    {{ __('Please review the requirement below, then price it on the next step. It takes a couple of minutes and no account is needed.') }}
                </p>

                @if ($rfq->scope)
                    <div class="mt-5 rounded-xl bg-slate-50 p-4">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Scope') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-700">{{ $rfq->scope }}</p>
                    </div>
                @endif

                <div class="mt-5 divide-y divide-slate-100 overflow-hidden rounded-xl ring-1 ring-slate-100">
                    @foreach ($rfq->lines as $i => $line)
                        <div class="flex items-start gap-3 bg-white p-4">
                            <span class="brand-text flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-[11px] font-bold">{{ $i + 1 }}</span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-900">{{ $line->description }}</p>
                                @if ($line->specification)
                                    <p class="mt-0.5 whitespace-pre-line text-xs text-slate-500">{{ $line->specification }}</p>
                                @endif
                            </div>
                            <span class="shrink-0 whitespace-nowrap rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-semibold tabular-nums text-slate-700">
                                {{ $qty($line->quantity) }} {{ $line->unit }}
                            </span>
                        </div>
                    @endforeach
                </div>

                {{-- Key facts --}}
                <dl class="mt-5 grid grid-cols-2 gap-4 rounded-xl bg-slate-50 p-4 sm:grid-cols-4">
                    <div>
                        <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Reference') }}</dt>
                        <dd class="mt-0.5 font-mono text-sm font-semibold text-slate-900">{{ $rfq->rfq_number }}</dd>
                    </div>
                    <div>
                        <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Closes') }}</dt>
                        <dd class="mt-0.5 text-sm text-slate-700">{{ $deadline ? $deadline->format('j M Y, H:i') : __('Open') }}</dd>
                    </div>
                    <div>
                        <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Required by') }}</dt>
                        <dd class="mt-0.5 text-sm text-slate-700">{{ optional($rfq->required_by)->format('j M Y') ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Payment terms') }}</dt>
                        <dd class="mt-0.5 text-sm text-slate-700">{{ $rfq->payment_terms ?: '—' }}</dd>
                    </div>
                </dl>

                @if ($rfq->delivery_address)
                    <div class="mt-4">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Deliver to') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-700">{{ $rfq->delivery_address }}</p>
                    </div>
                @endif

                @if ($rfq->terms)
                    <div class="mt-4 rounded-xl border border-slate-200 p-4">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Conditions') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ $rfq->terms }}</p>
                    </div>
                @endif
            @endif

            {{-- ==================== STEP 2 · PRICING ======================== --}}
            @if ($step === 2)
                <h1 class="text-lg font-bold text-slate-900">{{ __('Your pricing') }}</h1>
                <p class="mt-1 text-sm text-slate-500">
                    {{ __('Enter a price per unit. Leave an item unticked if you cannot supply it, you can still quote for the rest.') }}
                </p>

                <div class="mt-5">
                    <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="rfq-currency">{{ __('Quote in') }}</label>
                    <select id="rfq-currency" wire:model.live="currency_code"
                            class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0 sm:max-w-[10rem]">
                        @foreach ($currencies as $c)
                            <option value="{{ $c->code }}">{{ $c->code }}</option>
                        @endforeach
                    </select>
                    @error('currency_code') <p class="mt-2 text-sm text-rose-600">{{ $message }}</p> @enderror
                </div>

                @error('lines') <p class="mt-4 rounded-xl bg-rose-50 px-3 py-2 text-sm text-rose-700">{{ $message }}</p> @enderror

                <div class="mt-4 space-y-3">
                    @foreach ($rfq->lines as $i => $line)
                        @php
                            $row = $lines[$line->id] ?? [];
                            $available = $row['is_available'] ?? true;
                            $lineTotal = $available
                                ? round((float) ($row['quantity'] ?? 0) * (float) ($row['unit_price'] ?? 0), 2)
                                : 0;
                        @endphp
                        <div wire:key="price-line-{{ $line->id }}"
                             class="rounded-2xl border p-4 transition {{ $available ? 'border-slate-200 bg-white' : 'border-slate-200 bg-slate-50' }}">

                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold {{ $available ? 'text-slate-900' : 'text-slate-400 line-through' }}">
                                        {{ $i + 1 }}. {{ $line->description }}
                                    </p>
                                    @if ($line->specification)
                                        <p class="mt-0.5 text-xs text-slate-500">{{ $line->specification }}</p>
                                    @endif
                                    <p class="mt-1 text-xs font-medium text-slate-500">
                                        {{ __('Wanted: :qty :unit', ['qty' => $qty($line->quantity), 'unit' => $line->unit]) }}
                                    </p>
                                </div>

                                <label class="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-semibold text-slate-500 transition has-[:checked]:brand-text">
                                    <input type="checkbox" wire:model.live="lines.{{ $line->id }}.is_available"
                                           class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    {{ __('I can supply') }}
                                </label>
                            </div>

                            @if ($available)
                                <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-12">
                                    <div class="sm:col-span-3">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Qty') }}</label>
                                        <input type="number" step="0.000001" min="0" inputmode="decimal"
                                               wire:model.live.debounce.500ms="lines.{{ $line->id }}.quantity"
                                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm tabular-nums shadow-sm focus:ring-0" />
                                    </div>
                                    <div class="sm:col-span-4">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                            {{ __('Price per unit') }} <span class="normal-case text-slate-300">({{ $currency_code }})</span>
                                        </label>
                                        <input type="number" step="0.01" min="0" inputmode="decimal" placeholder="0.00"
                                               wire:model.live.debounce.500ms="lines.{{ $line->id }}.unit_price"
                                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm font-semibold tabular-nums shadow-sm focus:ring-0" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Tax %') }}</label>
                                        <input type="number" step="0.01" min="0" max="100" inputmode="decimal"
                                               wire:model.live.debounce.500ms="lines.{{ $line->id }}.tax_rate"
                                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm tabular-nums shadow-sm focus:ring-0" />
                                    </div>
                                    <div class="col-span-2 flex items-end sm:col-span-3">
                                        <p class="w-full rounded-xl bg-slate-50 px-3 py-2.5 text-right text-sm font-bold tabular-nums text-slate-900">
                                            {{ number_format($lineTotal, 2) }}
                                        </p>
                                    </div>

                                    <div class="col-span-2 sm:col-span-12">
                                        <details class="group">
                                            <summary class="cursor-pointer list-none text-xs font-semibold text-slate-400 transition hover:text-slate-600">
                                                + {{ __('Offer an alternative, or add a note') }}
                                            </summary>
                                            <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
                                                <input type="text" wire:model="lines.{{ $line->id }}.alternate_description"
                                                       placeholder="{{ __('Equivalent product you can supply') }}"
                                                       class="brand-ring block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                                                <input type="text" wire:model="lines.{{ $line->id }}.notes"
                                                       placeholder="{{ __('Note about this item') }}"
                                                       class="brand-ring block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                                            </div>
                                        </details>
                                    </div>
                                </div>

                                @error('lines.' . $line->id . '.unit_price') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                                @error('lines.' . $line->id . '.quantity') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                            @else
                                <p class="mt-3 text-xs text-slate-400">{{ __('Marked as unavailable, this item will be left out of your quotation.') }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- ==================== STEP 3 · TERMS & SUBMIT ================= --}}
            @if ($step === 3)
                <h1 class="text-lg font-bold text-slate-900">{{ __('Your terms') }}</h1>
                <p class="mt-1 text-sm text-slate-500">{{ __('Almost there. These are the terms your price depends on.') }}</p>

                <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="lead">{{ __('Lead time (days)') }}</label>
                        <input id="lead" type="number" min="0" inputmode="numeric" wire:model="lead_time_days"
                               placeholder="{{ __('e.g. 7') }}"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                        @error('lead_time_days') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="valid">{{ __('Quotation valid until') }}</label>
                        <input id="valid" type="date" wire:model="valid_until"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0" />
                        @error('valid_until') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="pay">{{ __('Payment terms') }}</label>
                        <input id="pay" type="text" wire:model="payment_terms" placeholder="{{ __('e.g. 50% deposit, balance on delivery') }}"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                    </div>
                    <div>
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="deliv">{{ __('Delivery terms') }}</label>
                        <input id="deliv" type="text" wire:model="delivery_terms" placeholder="{{ __('e.g. Delivered to site, included') }}"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="warranty">{{ __('Warranty / guarantee') }}</label>
                        <input id="warranty" type="text" wire:model="warranty" placeholder="{{ __('e.g. 12 months against manufacturing defects') }}"
                               class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:ring-0" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="snotes">{{ __('Anything else we should know?') }}</label>
                        <textarea id="snotes" rows="2" wire:model="supplier_notes"
                                  class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>
                    </div>
                </div>

                {{-- Formal document --}}
                <div class="mt-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Attach your formal quotation (optional)') }}</p>
                    <label class="mt-2 flex cursor-pointer items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 px-4 py-5 text-center transition hover:border-slate-400 hover:bg-slate-100"
                           wire:loading.class="opacity-50" wire:target="attachment">
                        <x-icon name="paper-clip" class="h-6 w-6 text-slate-400" />
                        <span class="text-sm font-semibold text-slate-600">
                            {{ $attachment ? __('Change file') : ($invitation->attachment_name ?: __('Attach a PDF or spreadsheet')) }}
                        </span>
                        <input type="file" wire:model="attachment" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" class="hidden">
                    </label>
                    <x-upload-progress target="attachment" class="mt-2" />
                    @if ($attachment)
                        <p class="mt-2 text-xs text-emerald-600">{{ __('Attached: :name', ['name' => $attachment->getClientOriginalName()]) }}</p>
                    @endif
                </div>

                {{-- Who is answering --}}
                <div class="mt-6 border-t border-slate-100 pt-5">
                    <p class="text-sm font-semibold text-slate-900">{{ __('Your details') }}</p>
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('So we know who to come back to about this quotation.') }}</p>

                    <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                        <div>
                            <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="rname">{{ __('Name') }}</label>
                            <input id="rname" type="text" wire:model="respondent_name"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0" />
                            @error('respondent_name') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="remail">{{ __('Email') }}</label>
                            <input id="remail" type="email" wire:model="respondent_email"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0" />
                            @error('respondent_email') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400" for="rphone">{{ __('Phone') }}</label>
                            <input id="rphone" type="text" wire:model="respondent_phone"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0" />
                            @error('respondent_phone') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                {{-- Final summary --}}
                <div class="mt-6 rounded-2xl bg-slate-900 p-5 text-white">
                    <div class="flex items-center justify-between text-sm text-slate-300">
                        <span>{{ __('Subtotal') }}</span>
                        <span class="tabular-nums">{{ $money($totals['subtotal']) }}</span>
                    </div>
                    <div class="mt-2 flex items-center justify-between text-sm text-slate-300">
                        <span>{{ __('Tax') }}</span>
                        <span class="tabular-nums">{{ $money($totals['tax']) }}</span>
                    </div>
                    <div class="mt-3 flex items-center justify-between border-t border-white/15 pt-3 text-lg font-bold">
                        <span>{{ __('Your quotation') }}</span>
                        <span class="tabular-nums">{{ $money($totals['total']) }}</span>
                    </div>
                    <p class="mt-2 text-xs text-slate-400">
                        {{ trans_choice('{1}:count item priced|[2,*] :count items priced', $totals['priced'], ['count' => $totals['priced']]) }}
                        {{ __('of :n requested', ['n' => $totals['total_lines']]) }}
                    </p>
                </div>
            @endif
        </div>

        {{-- "Can't quote" escape hatch, always available while open --}}
        <div class="mt-4 text-center">
            <button type="button" wire:click="startDecline" class="text-xs font-medium text-slate-400 underline underline-offset-4 transition hover:text-slate-600">
                {{ __('I cannot quote on this request') }}
            </button>
        </div>

        {{-- ==================== STICKY ACTION BAR ==================== --}}
        <div class="fixed inset-x-0 bottom-0 z-20 border-t border-slate-200 bg-white/95 px-4 py-3 shadow-[0_-8px_30px_-12px_rgba(15,23,42,0.25)] backdrop-blur">
            <div class="mx-auto flex max-w-3xl items-center justify-between gap-4">
                <div class="min-w-0">
                    @if ($step > 1)
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Your total') }}</p>
                        <p class="truncate text-lg font-bold tabular-nums text-slate-900">{{ $money($totals['total']) }}</p>
                    @else
                        <p class="text-xs text-slate-500">{{ trans_choice('{1}:count item to price|[2,*] :count items to price', $rfq->lines->count(), ['count' => $rfq->lines->count()]) }}</p>
                    @endif
                </div>

                <div class="flex shrink-0 items-center gap-2">
                    @if ($step > 1)
                        <button type="button" wire:click="back"
                                class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                            {{ __('Back') }}
                        </button>
                    @endif

                    @if ($step < 3)
                        <button type="button" wire:click="next" wire:loading.attr="disabled" wire:target="next"
                                class="brand-grad rounded-xl px-6 py-2.5 text-sm font-bold text-white shadow-sm transition hover:opacity-90 disabled:opacity-60">
                            {{ $step === 1 ? __('Start quoting') : __('Continue') }}
                        </button>
                    @else
                        <button type="button" wire:click="submit" wire:loading.attr="disabled" wire:target="submit,attachment"
                                class="brand-grad rounded-xl px-6 py-2.5 text-sm font-bold text-white shadow-sm transition hover:opacity-90 disabled:opacity-60">
                            <span wire:loading.remove wire:target="submit">{{ __('Submit quotation') }}</span>
                            <span wire:loading wire:target="submit">{{ __('Submitting…') }}</span>
                        </button>
                    @endif
                </div>
            </div>
        </div>
    @endif

    {{-- ============================ FOOTER ============================ --}}
    <footer class="mt-8 text-center text-xs leading-relaxed text-slate-400">
        <p>{{ __('This link is unique to :supplier. Quotations are sealed, no other bidder can see your pricing.', ['supplier' => $invitation->supplier?->name]) }}</p>
        @if ($setting?->email || $setting?->phone)
            <p class="mt-1">
                {{ __('Questions?') }}
                @if ($setting?->email) <a href="mailto:{{ $setting->email }}" class="brand-text font-medium">{{ $setting->email }}</a>@endif
                @if ($setting?->phone) · {{ $setting->phone }}@endif
            </p>
        @endif
    </footer>
</div>