@php
    use Illuminate\Support\Facades\Storage;

    $bgUrl = $page->background_image !== null
        ? Storage::disk('public')->url($page->background_image)
        : null;
    $logoUrl = $page->logo_image !== null
        ? Storage::disk('public')->url($page->logo_image)
        : null;
    $phase = $page->isBeforeStart() ? 'before' : ($page->isExpired() ? 'expired' : 'active');
@endphp

@extends('layouts.public')

@section('content')
    <div class="relative min-h-screen w-full overflow-x-hidden">
        @if ($bgUrl !== null)
            <div
                class="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style="background-image: url('{{ e($bgUrl) }}')"
                aria-hidden="true"
            ></div>
        @else
            <div
                class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"
                aria-hidden="true"
            ></div>
        @endif

        <div class="absolute inset-0 bg-black/50" aria-hidden="true"></div>

        <div class="relative z-10 flex min-h-screen items-center justify-center px-4 py-10 sm:px-6 sm:py-12">
            <div
                class="w-full max-w-lg rounded-2xl border border-white/15 bg-white/10 px-6 py-8 shadow-2xl backdrop-blur-md sm:px-10 sm:py-10"
                x-cloak
                x-data="publicPreregisterPage(@js([
                    'phase' => $phase,
                    'startAtMs' => $page->start_date->getTimestamp() * 1000,
                    'phoneEnabled' => (bool) $page->phone_enabled,
                    'subscribeUrl' => route('public.subscribe', ['publicPage' => $page]),
                    'csrfToken' => csrf_token(),
                    'genericError' => __('Something went wrong. Please try again.'),
                ]))"
            >
                @if ($logoUrl !== null)
                    <div class="mb-6 flex justify-center">
                        <img
                            src="{{ e($logoUrl) }}"
                            alt=""
                            class="max-h-20 w-auto object-contain object-center"
                            width="320"
                            height="80"
                        >
                    </div>
                @endif

                <h1 class="text-center text-3xl font-semibold leading-tight tracking-tight text-white sm:text-4xl">
                    {{ $page->heading }}
                </h1>

                {{-- Before start: intro + countdown --}}
                <div x-show="phase === 'before'" x-cloak class="mt-6 space-y-6">
                    @if (filled($page->intro_text))
                        <div class="whitespace-pre-line text-center text-base leading-relaxed text-white/90">
                            {{ $page->intro_text }}
                        </div>
                    @endif

                    <div
                        class="grid grid-cols-4 gap-2 rounded-xl border border-white/20 bg-black/25 px-3 py-4 text-center sm:gap-3 sm:px-4"
                        role="timer"
                        aria-live="polite"
                    >
                        <div>
                            <div class="font-mono text-2xl font-semibold tabular-nums text-white sm:text-3xl" x-text="pad(days)"></div>
                            <div class="mt-1 text-xs uppercase tracking-wide text-white/60">{{ __('days') }}</div>
                        </div>
                        <div>
                            <div class="font-mono text-2xl font-semibold tabular-nums text-white sm:text-3xl" x-text="pad(hours)"></div>
                            <div class="mt-1 text-xs uppercase tracking-wide text-white/60">{{ __('hrs') }}</div>
                        </div>
                        <div>
                            <div class="font-mono text-2xl font-semibold tabular-nums text-white sm:text-3xl" x-text="pad(minutes)"></div>
                            <div class="mt-1 text-xs uppercase tracking-wide text-white/60">{{ __('mins') }}</div>
                        </div>
                        <div>
                            <div class="font-mono text-2xl font-semibold tabular-nums text-white sm:text-3xl" x-text="pad(seconds)"></div>
                            <div class="mt-1 text-xs uppercase tracking-wide text-white/60">{{ __('secs') }}</div>
                        </div>
                    </div>
                </div>

                {{-- Active: registration form --}}
                <div x-show="phase === 'active'" x-cloak class="mt-8">
                    <form x-ref="form" class="space-y-4" @submit.prevent="submitForm()">
                        <div x-show="formError !== ''" x-cloak class="rounded-lg border border-amber-400/40 bg-amber-500/10 px-3 py-2 text-sm text-amber-100" x-text="formError"></div>

                        <div>
                            <label for="first_name" class="mb-1 block text-sm font-medium text-white/90">{{ __('First name') }}</label>
                            <input
                                id="first_name"
                                type="text"
                                name="first_name"
                                autocomplete="given-name"
                                required
                                maxlength="255"
                                x-model="first_name"
                                class="w-full rounded-lg border border-white/25 bg-white/10 px-3 py-2.5 text-white placeholder-white/40 shadow-sm backdrop-blur-sm focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
                                placeholder="{{ __('First name') }}"
                            >
                            <p x-show="fieldErrors.first_name" x-cloak class="mt-1 text-sm text-red-200" x-text="fieldErrors.first_name ? fieldErrors.first_name[0] : ''"></p>
                        </div>

                        <div>
                            <label for="last_name" class="mb-1 block text-sm font-medium text-white/90">{{ __('Last name') }}</label>
                            <input
                                id="last_name"
                                type="text"
                                name="last_name"
                                autocomplete="family-name"
                                required
                                maxlength="255"
                                x-model="last_name"
                                class="w-full rounded-lg border border-white/25 bg-white/10 px-3 py-2.5 text-white placeholder-white/40 shadow-sm backdrop-blur-sm focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
                                placeholder="{{ __('Last name') }}"
                            >
                            <p x-show="fieldErrors.last_name" x-cloak class="mt-1 text-sm text-red-200" x-text="fieldErrors.last_name ? fieldErrors.last_name[0] : ''"></p>
                        </div>

                        <div>
                            <label for="email" class="mb-1 block text-sm font-medium text-white/90">{{ __('Email') }}</label>
                            <input
                                id="email"
                                type="email"
                                name="email"
                                autocomplete="email"
                                required
                                maxlength="255"
                                x-model="email"
                                class="w-full rounded-lg border border-white/25 bg-white/10 px-3 py-2.5 text-white placeholder-white/40 shadow-sm backdrop-blur-sm focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
                                placeholder="{{ __('Email') }}"
                            >
                            <p x-show="fieldErrors.email" x-cloak class="mt-1 text-sm text-red-200" x-text="fieldErrors.email ? fieldErrors.email[0] : ''"></p>
                        </div>

                        <div x-show="phoneEnabled">
                            <label for="phone" class="mb-1 block text-sm font-medium text-white/90">{{ __('Phone') }}</label>
                            <input
                                id="phone"
                                type="tel"
                                name="phone"
                                autocomplete="tel"
                                :required="phoneEnabled"
                                maxlength="20"
                                x-model="phone"
                                class="w-full rounded-lg border border-white/25 bg-white/10 px-3 py-2.5 text-white placeholder-white/40 shadow-sm backdrop-blur-sm focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30"
                                placeholder="{{ __('Phone') }}"
                            >
                            <p x-show="fieldErrors.phone" x-cloak class="mt-1 text-sm text-red-200" x-text="fieldErrors.phone ? fieldErrors.phone[0] : ''"></p>
                        </div>

                        <button
                            type="submit"
                            class="mt-2 w-full rounded-lg bg-white px-4 py-3 text-sm font-semibold text-slate-900 shadow transition hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900 disabled:cursor-not-allowed disabled:opacity-60"
                            :disabled="submitting"
                        >
                            <span x-show="!submitting">{{ __('Register') }}</span>
                            <span x-show="submitting" x-cloak>{{ __('Sending…') }}</span>
                        </button>
                    </form>
                </div>

                {{-- Thank you (after successful AJAX) --}}
                <div x-show="phase === 'thanks'" x-cloak class="mt-8">
                    <p class="whitespace-pre-line text-center text-lg leading-relaxed text-white/95" x-text="thankYouMessage"></p>
                </div>

                {{-- Expired --}}
                <div x-show="phase === 'expired'" x-cloak class="mt-8 space-y-6">
                    @if (filled($page->expired_message))
                        <div class="whitespace-pre-line text-center text-base leading-relaxed text-white/90">
                            {{ $page->expired_message }}
                        </div>
                    @else
                        <p class="text-center text-base text-white/90">{{ __('This pre-registration period has ended.') }}</p>
                    @endif

                    @if (filled($page->ticketshop_url))
                        <div class="text-center">
                            <a
                                href="{{ e($page->ticketshop_url) }}"
                                class="inline-flex items-center justify-center rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 shadow transition hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                {{ __('Visit ticket shop') }}
                                <span class="ml-1" aria-hidden="true">→</span>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection