<div class="mx-auto max-w-3xl px-4 sm:px-6 py-10">
    <h1 class="text-3xl uppercase tracking-wide text-stone-100">Mixing &amp; mastering</h1>
    <p class="mt-2 text-stone-400">
        Send us your stems or a rough mix and we will turn it around.
    </p>

    @if ($error)
        <div class="mt-6 rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">
            {{ $error }}
        </div>
    @endif

    <section class="mt-8">
        <h2 class="font-mono text-xs uppercase tracking-widest text-stone-500">What do you need?</h2>
        <div class="mt-3 grid gap-3 sm:grid-cols-3">
            @foreach ($this->services as $service)
                <button type="button" wire:click="selectService({{ $service->id }})"
                    class="rounded-lg border p-4 text-left transition
                        {{ $serviceId === $service->id
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-ink-700 bg-ink-900 hover:border-ink-600' }}">
                    <div class="font-semibold text-stone-100">{{ $service->name }}</div>
                    <div class="mt-1 text-xs text-stone-400">{{ $service->summary }}</div>
                    <div class="mt-3 font-mono text-amber-400">£{{ number_format((float) $service->price, 0) }}</div>
                </button>
            @endforeach
        </div>
    </section>

    <section class="mt-8">
        <label class="flex cursor-pointer items-start gap-3 rounded-lg border border-ink-700 bg-ink-900 p-4">
            <input type="checkbox" wire:model.live="express"
                   class="mt-1 rounded border-ink-600 bg-ink-800 text-amber-500 focus:ring-amber-500">
            <span class="text-sm">
                <span class="font-semibold text-stone-100">
                    Express — back {{ $this->service?->turnaroundLabel(true) }}
                </span>
                <span class="mt-1 block text-stone-400">
                    Instead of {{ $this->service?->turnaroundLabel(false) }}.
                    <span class="font-mono text-amber-400">
                        +£{{ number_format((float) ($this->service?->express_surcharge ?? 0), 0) }}
                    </span>
                </span>
            </span>
        </label>
    </section>

    @if ($this->availablePackage)
        <section class="mt-4">
            <label class="flex cursor-pointer items-start gap-3 rounded-lg border border-ink-700 bg-ink-900 p-4">
                <input type="checkbox" wire:model.live="usePackage"
                       class="mt-1 rounded border-ink-600 bg-ink-800 text-amber-500 focus:ring-amber-500">
                <span class="text-sm">
                    <span class="font-semibold text-stone-100">
                        Use a credit from my {{ $this->availablePackage->package->name }} package
                    </span>
                    <span class="mt-1 block text-stone-400">
                        {{ $this->availablePackage->mixmaster_credits_remaining }}
                        {{ Str::plural('credit', $this->availablePackage->mixmaster_credits_remaining) }} left.
                        @if ($express)
                            {{-- Said plainly rather than discovered at the total. --}}
                            Express is charged separately.
                        @endif
                    </span>
                </span>
            </label>
        </section>
    @endif

    <section class="mt-8">
        <label for="trackTitle" class="block font-mono text-xs uppercase tracking-widest text-stone-500">
            Track name
        </label>
        <input id="trackTitle" wire:model="trackTitle" maxlength="120"
               class="mt-2 w-full rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500">
        @error('trackTitle') <p class="mt-1 text-xs text-red-300">{{ $message }}</p> @enderror
    </section>

    <section class="mt-6">
        <span class="block font-mono text-xs uppercase tracking-widest text-stone-500">Your audio</span>
        <div class="mt-3 flex gap-2">
            <button type="button" wire:click="$set('sourceMode', 'upload')"
                class="rounded-lg border px-4 py-2 text-sm
                    {{ $sourceMode === 'upload' ? 'border-amber-500 bg-amber-500/10' : 'border-ink-700 bg-ink-900' }}">
                Upload a file
            </button>
            <button type="button" wire:click="$set('sourceMode', 'link')"
                class="rounded-lg border px-4 py-2 text-sm
                    {{ $sourceMode === 'link' ? 'border-amber-500 bg-amber-500/10' : 'border-ink-700 bg-ink-900' }}">
                Send a link
            </button>
        </div>

        @if ($sourceMode === 'link')
            <input type="url" wire:model="sourceLink" placeholder="https://youtube.com/… or BeatStars"
                   class="mt-3 w-full rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500">
        @else
            <p class="mt-3 rounded-lg border border-ink-700 bg-ink-900 p-4 text-sm text-stone-400">
                You will upload your file on the next screen, once the order exists to attach it to.
                WAV, MP3, AIFF or a ZIP of stems.
            </p>
        @endif
    </section>

    <section class="mt-6">
        <label for="notes" class="block font-mono text-xs uppercase tracking-widest text-stone-500">
            Anything we should know — optional
        </label>
        <textarea id="notes" wire:model="notes" rows="3" maxlength="1000"
                  placeholder="Reference tracks, the vibe you are after, anything to watch out for."
                  class="mt-2 w-full rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500"></textarea>
    </section>

    <section class="mt-8 rounded-lg border border-ink-700 bg-ink-900 p-5">
        <div class="flex flex-wrap items-baseline justify-between gap-3">
            <div>
                <div class="font-semibold text-stone-100">{{ $this->service?->name }}</div>
                <div class="mt-1 text-sm text-stone-400">
                    Back {{ $this->service?->turnaroundLabel($express) }} from when we have your audio and payment.
                </div>
            </div>
            <div class="font-mono text-3xl tabular-nums text-amber-400">
                @if ($this->total === '0.00') On your package @else £{{ $this->total }} @endif
            </div>
        </div>

        <button type="button" wire:click="place" wire:loading.attr="disabled"
            class="mt-5 w-full rounded-lg bg-amber-500 px-4 py-3 font-semibold uppercase tracking-wide
                   text-ink-950 hover:bg-amber-400 disabled:opacity-60">
            <span wire:loading.remove wire:target="place">Place order</span>
            <span wire:loading wire:target="place">Creating your order&hellip;</span>
        </button>
    </section>
</div>
