@php
    use Illuminate\Support\Facades\Storage;

    /** @var \Illuminate\Support\Collection<int, \App\Models\PageBlock> $blocksToRender */
    $bgPath = $page->background_image;
    $bgUrl = is_string($bgPath) && $bgPath !== '' ? Storage::disk('public')->url($bgPath) : null;
    $overlayColor = (string) ($page->background_overlay_color ?: '#000000');
    $overlayOpacity = max(0, min(100, (int) ($page->background_overlay_opacity ?? 50))) / 100;
    $hasExpiredCtaBlock = $blocksToRender->contains(fn (\App\Models\PageBlock $b): bool => $b->type === 'cta_banner');
    $redirectAfterSubmit = $page->post_submit_redirect_url;

    $alpinePhase = match ($pageState) {
        'countdown' => 'before',
        'expired' => 'expired',
        default => 'active',
    };

    $formBlock = $page->getFormBlock();
    $formContent = $formBlock?->content ?? [];
    $formButtonLabel = (string) (data_get($formContent, 'button_label') ?: __('public.register_button'));
    $formButtonColor = (string) data_get($formContent, 'button_color', '#F47B20');
    $formButtonTextColor = (string) data_get($formContent, 'button_text_color', '#FFFFFF');
@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"
            style="background-color: {{ e($overlayColor) }}; opacity: {{ $overlayOpacity }}"
            aria-hidden="true"
        ></div>

        <div class="relative z-10 flex min-h-screen items-center justify-center px-4 py-6 sm:px-6 sm:py-10">
            <div
                class="animate-preregister-in w-full max-w-3xl rounded-3xl border border-white/20 bg-black/60 px-5 py-8 shadow-[0_0_0_1px_rgba(0,0,0,0.2),0_28px_90px_-4px_rgba(0,0,0,0.28),0_48px_140px_2px_rgba(0,0,0,0.18),0_72px_200px_16px_rgba(0,0,0,0.12)] backdrop-blur-[4px] sm:px-10 sm:py-10"
                x-cloak
                x-data="publicPreregisterPage(@js([
                    'phase' => $alpinePhase,
                    'startAtMs' => $page->start_date->getTimestamp() * 1000,
                    'phoneEnabled' => $page->isPhoneFieldEnabledForSubscribers(),
                    'subscribeUrl' => route('public.subscribe', ['publicPage' => $page]),
                    'csrfToken' => csrf_token(),
                    'genericError' => __('Something went wrong. Please try again.'),
                    'labelDay' => __('day'),
                    'labelDays' => __('days'),
                    'invalidEmailMsg' => __('Please enter a valid email address.'),
                    'invalidPhoneMsg' => __('Please enter a valid phone number (8–15 digits).'),
                    'formButtonLabel' => $formButtonLabel,
                    'formButtonColor' => $formButtonColor,
                    'formButtonTextColor' => $formButtonTextColor,
                    'pageShareUrl' => url()->current(),
                    'redirectUrl' => filled($redirectAfterSubmit) ? $redirectAfterSubmit : null,
                    'strings' => [
                        'linkCopied' => __('Link gekopieerd!'),
                        'redirectCountdown' => __('You will be redirected in :seconds s…'),
                    ],
                ]))"
            >
                <div class="flex flex-col items-stretch space-y-4">
                    @foreach ($blocksToRender as $block)
                        <x-dynamic-component
                            :component="$block->bladeComponentName()"
                            :block="$block"
                            :page="$page"
                            :page-state="$pageState"
                            :subscriber-count="$subscriberCount"
                        />
                    @endforeach

                    @if ($pageState === 'expired')
                        <div class="space-y-6">
                            @if (filled($page->expired_message))
                                {{-- Same as text/hero blocks: no line breaks inside whitespace-pre-line wrapper. --}}
                                <div class="whitespace-pre-line text-center text-[15px] leading-[1.65] text-white/92 sm:text-base sm:leading-relaxed">{{ trim((string) $page->expired_message) }}</div>
                            @else
                                <p class="text-center text-[15px] leading-relaxed text-white/92 sm:text-base">{{ __('This pre-registration period has ended.') }}</p>
                            @endif

                            @if (filled($page->ticketshop_url) && ! $hasExpiredCtaBlock)
                                <div class="text-center">
                                    <a
                                        href="{{ e($page->ticketshop_url) }}"
                                        class="inline-flex min-h-[52px] items-center justify-center rounded-xl bg-festival px-8 py-3.5 text-base font-bold tracking-wide text-white shadow-lg shadow-festival/30 transition duration-200 ease-out hover:scale-[1.02] hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-festival focus:ring-offset-2 focus:ring-offset-black/80 active:scale-[0.99]"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        {{ __('Visit ticket shop') }}
                                        <span class="ml-1" aria-hidden="true">→</span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection