@php
    $siteName = config('apex.name', 'Apex Admins');
@endphp

<x-layouts.app :seo="$seo ?? null" :schema="$schema ?? null">
    <section class="book-hero">
        <div class="book-hero__glow" aria-hidden="true"></div>
        <div class="book-hero__grid" aria-hidden="true"></div>
        <div class="container-page book-hero__inner">
            <x-breadcrumbs
                :items="[
                    ['label' => 'Home', 'url' => url('/')],
                    ['label' => 'Book'],
                ]"
                class="book-hero__crumbs"
            />

            <div class="book-hero__content">
                <p class="book-hero__eyebrow">{{ $siteName }} · Consultation desk</p>
                <h1 class="book-hero__title">Book a consultation</h1>
                <p class="book-hero__lead">
                    Choose your session, lock a time in your timezone, and get instant confirmation —
                    no back-and-forth scheduling.
                </p>

                <ul class="book-hero__stats" aria-label="Booking highlights">
                    <li>
                        <strong>Instant</strong>
                        <span>Confirmation + calendar invite</span>
                    </li>
                    <li>
                        <strong>$0</strong>
                        <span>Until you hire</span>
                    </li>
                    <li>
                        <strong>AU-ready</strong>
                        <span>Timezone-aware scheduling</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <section class="book-stage">
        <div class="container-page">
            <div
                class="booking-shell"
                data-booking-wizard
                x-data="bookingWizard(@js([
                    'types' => $types->map(fn ($t) => [
                        'slug' => $t->slug,
                        'name' => $t->name,
                        'description' => $t->description,
                        'duration' => $t->duration_minutes,
                        'color' => $t->color ?: '#047857',
                    ])->values(),
                    'preselectedSlug' => $preselectedType,
                    'routes' => [
                        'dates' => route('book.dates'),
                        'slots' => route('book.slots'),
                        'store' => route('book.store'),
                    ],
                ]))"
                x-cloak
            >
                <div class="booking-layout">
                    <div class="booking-panel" x-ref="wizardPanel">
                        <div class="booking-progress" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                            <div class="booking-progress__track">
                                <div class="booking-progress__bar" :style="`width: ${progress}%`"></div>
                            </div>
                            <ol class="booking-progress__steps">
                                <template x-for="(label, i) in stepLabels" :key="label">
                                    <li
                                        class="booking-progress__step"
                                        :class="{ 'is-active': step === i + 1, 'is-complete': step > i + 1 }"
                                    >
                                        <button
                                            type="button"
                                            class="booking-progress__hit"
                                            @click="step > i + 1 && goToStep(i + 1)"
                                            :disabled="step <= i + 1"
                                            :aria-current="step === i + 1 ? 'step' : null"
                                        >
                                            <span class="booking-progress__dot">
                                                <span x-show="step <= i + 1" x-text="i + 1"></span>
                                                <svg x-show="step > i + 1" class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                                </svg>
                                            </span>
                                            <span class="booking-progress__label" x-text="label"></span>
                                        </button>
                                    </li>
                                </template>
                            </ol>
                        </div>

                        <div x-show="error" class="booking-alert booking-alert--error" x-text="error" role="alert"></div>

                        <div x-show="success" class="booking-alert booking-alert--success" x-cloak role="status">
                            <strong>Booking received.</strong>
                            <span x-text="successMessage || 'Check your email for confirmation.'"></span>
                        </div>

                        {{-- Step 1: Session --}}
                        <div x-show="step === 1 && !success" x-transition.opacity.duration.200ms>
                            <header class="booking-step-head">
                                <h2 class="booking-step-head__title">Choose your session</h2>
                                <p class="booking-step-head__lead">Pick the conversation that matches where you are right now.</p>
                            </header>

                            <div class="booking-type-grid">
                                <template x-for="type in types" :key="type.slug">
                                    <button
                                        type="button"
                                        class="booking-type-card"
                                        :class="{ 'is-selected': selectedType?.slug === type.slug }"
                                        :style="selectedType?.slug === type.slug ? `--type-accent: ${type.color}` : ''"
                                        @click="selectType(type)"
                                    >
                                        <span class="booking-type-card__accent" :style="`background: ${type.color}`"></span>
                                        <div class="booking-type-card__body">
                                            <div class="booking-type-card__top">
                                                <h3 class="booking-type-card__title" x-text="type.name"></h3>
                                                <span class="booking-type-card__duration" x-text="`${type.duration} min`"></span>
                                            </div>
                                            <p class="booking-type-card__text" x-text="type.description"></p>
                                            <span class="booking-type-card__cta">
                                                Select session
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                            </span>
                                        </div>
                                    </button>
                                </template>
                            </div>

                            <div class="booking-actions" x-show="selectedType">
                                <span></span>
                                <button type="button" class="booking-btn booking-btn--primary" :disabled="!canContinueStep1" @click="goToStep(2)">
                                    Continue to schedule
                                </button>
                            </div>
                        </div>

                        {{-- Step 2: Schedule (date + time) --}}
                        <div x-show="step === 2 && !success" x-transition.opacity.duration.200ms>
                            <header class="booking-step-head booking-step-head--split">
                                <div>
                                    <h2 class="booking-step-head__title">Pick a date & time</h2>
                                    <p class="booking-step-head__lead">
                                        Times shown in your timezone.
                                        <span x-show="selectedType"> · <span x-text="selectedType?.name"></span></span>
                                    </p>
                                </div>
                                <label class="booking-field booking-field--timezone">
                                    <span class="booking-field__label">Timezone</span>
                                    <select x-model="timezone" class="booking-select">
                                        <template x-for="tz in timezones" :key="tz.value">
                                            <option :value="tz.value" x-text="tz.label"></option>
                                        </template>
                                    </select>
                                </label>
                            </header>

                            <div x-show="loadingDates" class="booking-skeleton-grid" aria-hidden="true">
                                <template x-for="i in 14" :key="i">
                                    <div class="booking-skeleton"></div>
                                </template>
                            </div>

                            <div x-show="!loadingDates && availableDates.length === 0" class="booking-empty">
                                <p class="booking-empty__title">No dates available right now</p>
                                <p class="booking-empty__text">
                                    Try another session type or
                                    <a href="{{ route('contact') }}" class="home-text-link">contact us</a>
                                    directly.
                                </p>
                            </div>

                            <div x-show="!loadingDates && availableDates.length" class="booking-schedule">
                                <div class="booking-calendar">
                                    <div class="booking-calendar__header">
                                        <button type="button" class="booking-calendar__nav" @click="prevMonth()" aria-label="Previous month">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                                        </button>
                                        <p class="booking-calendar__month" x-text="calendarMonthLabel()"></p>
                                        <button type="button" class="booking-calendar__nav" @click="nextMonth()" aria-label="Next month">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                        </button>
                                    </div>

                                    <div class="booking-calendar__weekdays" aria-hidden="true">
                                        <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
                                    </div>

                                    <div class="booking-calendar__grid">
                                        <template x-for="(week, wi) in calendarWeeks" :key="wi">
                                            <template x-for="day in week" :key="day.ymd">
                                                <button
                                                    type="button"
                                                    class="booking-calendar__day"
                                                    :class="{
                                                        'is-outside': !day.inMonth,
                                                        'is-available': day.isAvailable,
                                                        'is-selected': day.isSelected,
                                                        'is-today': day.isToday,
                                                    }"
                                                    :disabled="!day.isAvailable"
                                                    :aria-label="day.isAvailable ? `${day.ymd}, ${day.slotCount} times available` : day.ymd"
                                                    @click="selectDate(day.ymd)"
                                                >
                                                    <span class="booking-calendar__num" x-text="day.day"></span>
                                                    <span class="booking-calendar__count" x-show="day.isAvailable && day.inMonth && day.slotCount" x-text="day.slotCount"></span>
                                                </button>
                                            </template>
                                        </template>
                                    </div>
                                </div>

                                <div class="booking-times">
                                    <div class="booking-times__head">
                                        <template x-if="!selectedDate">
                                            <p class="booking-times__placeholder">Select a highlighted date to see open times.</p>
                                        </template>
                                        <template x-if="selectedDate">
                                            <div>
                                                <p class="booking-times__date" x-text="formatDateLong(selectedDate)"></p>
                                                <p class="booking-times__meta">
                                                    <span x-text="availableSlotCount"></span> open slots ·
                                                    <span x-text="timezoneLabel()"></span>
                                                </p>
                                            </div>
                                        </template>
                                    </div>

                                    <div x-show="loadingSlots" class="booking-skeleton-grid booking-skeleton-grid--times" aria-hidden="true">
                                        <template x-for="i in 9" :key="i">
                                            <div class="booking-skeleton"></div>
                                        </template>
                                    </div>

                                    <div x-show="selectedDate && !loadingSlots && slots.length === 0" class="booking-empty booking-empty--compact">
                                        <p class="booking-empty__title">No times left on this date</p>
                                        <p class="booking-empty__text">Pick another date or try a different timezone.</p>
                                    </div>

                                    <div x-show="!loadingSlots && slots.length" class="booking-time-groups">
                                        <template x-for="group in slotGroups" :key="group.label">
                                            <div class="booking-time-group">
                                                <div class="booking-time-group__head">
                                                    <p class="booking-time-group__label" x-text="group.label"></p>
                                                    <span class="booking-time-group__hint" x-text="group.hint"></span>
                                                </div>
                                                <div class="booking-time-grid">
                                                    <template x-for="slot in group.slots" :key="slot.starts_at">
                                                        <button
                                                            type="button"
                                                            class="booking-time-slot"
                                                            :class="{ 'is-selected': selectedSlot?.starts_at === slot.starts_at }"
                                                            @click="selectSlot(slot)"
                                                        >
                                                            <span x-text="slot.label"></span>
                                                        </button>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <div class="booking-actions">
                                <button type="button" class="booking-btn booking-btn--ghost" @click="goToStep(1)">Back</button>
                                <button type="button" class="booking-btn booking-btn--primary" :disabled="!canContinueStep2" @click="goToStep(3)">
                                    Continue to details
                                </button>
                            </div>
                        </div>

                        {{-- Step 3: Details --}}
                        <div x-show="step === 3 && !success" x-transition.opacity.duration.200ms>
                            <header class="booking-step-head">
                                <h2 class="booking-step-head__title">Your details</h2>
                                <p class="booking-step-head__lead">
                                    Confirmation and calendar invite go to this email.
                                    <span x-show="selectedSlot">
                                        You’re booking
                                        <strong x-text="selectedSlot?.label"></strong>
                                        on
                                        <strong x-text="formatDateShort(selectedDate)"></strong>.
                                    </span>
                                </p>
                            </header>

                            <form class="booking-form" @submit.prevent="submit()" novalidate>
                                <div class="booking-form__grid">
                                    <div class="booking-field" :class="{ 'has-error': fieldErrors.name }">
                                        <label for="booking-name" class="booking-field__label">Full name <span aria-hidden="true">*</span></label>
                                        <input id="booking-name" type="text" x-model="form.name" autocomplete="name" class="booking-input" placeholder="Sarah Mitchell" :aria-invalid="fieldErrors.name ? 'true' : 'false'">
                                        <p class="booking-field__error" x-show="fieldErrors.name" x-text="fieldErrors.name"></p>
                                    </div>
                                    <div class="booking-field" :class="{ 'has-error': fieldErrors.email }">
                                        <label for="booking-email" class="booking-field__label">Work email <span aria-hidden="true">*</span></label>
                                        <input id="booking-email" type="email" x-model="form.email" autocomplete="email" class="booking-input" placeholder="you@company.com.au" :aria-invalid="fieldErrors.email ? 'true' : 'false'">
                                        <p class="booking-field__error" x-show="fieldErrors.email" x-text="fieldErrors.email"></p>
                                    </div>
                                    <div class="booking-field">
                                        <label for="booking-phone" class="booking-field__label">Phone <span class="booking-field__optional">optional</span></label>
                                        <input id="booking-phone" type="tel" x-model="form.phone" autocomplete="tel" class="booking-input" placeholder="+61 4xx xxx xxx">
                                    </div>
                                    <div class="booking-field">
                                        <label for="booking-company" class="booking-field__label">Company <span class="booking-field__optional">optional</span></label>
                                        <input id="booking-company" type="text" x-model="form.company" autocomplete="organization" class="booking-input" placeholder="Your business name">
                                    </div>
                                </div>

                                <div class="booking-field">
                                    <label for="booking-notes" class="booking-field__label">What should we prepare for? <span class="booking-field__optional">optional</span></label>
                                    <textarea id="booking-notes" x-model="form.notes" rows="4" class="booking-input booking-input--textarea" placeholder="Roles you need, team size, timeline, tools, or anything that helps us prepare."></textarea>
                                </div>

                                <div class="booking-honeypot" aria-hidden="true">
                                    <label for="booking-company-fax">Company fax</label>
                                    <input
                                        id="booking-company-fax"
                                        name="company_fax"
                                        type="text"
                                        x-model="form.company_fax"
                                        tabindex="-1"
                                        autocomplete="off"
                                        inputmode="none"
                                    >
                                </div>

                                <div class="booking-actions">
                                    <button type="button" class="booking-btn booking-btn--ghost" @click="goToStep(2)">Back</button>
                                    <button
                                        type="submit"
                                        class="booking-btn booking-btn--primary"
                                        :disabled="submitting"
                                        @click.prevent="submit()"
                                    >
                                        <span x-show="!submitting">Confirm booking</span>
                                        <span x-show="submitting" class="booking-btn__loading" x-cloak>
                                            <span class="booking-btn__spinner" aria-hidden="true"></span>
                                            Confirming…
                                        </span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <aside class="booking-summary">
                        <div class="booking-summary__card">
                            <div class="booking-summary__host">
                                <div class="booking-summary__avatar" aria-hidden="true">AA</div>
                                <div>
                                    <p class="booking-summary__kicker">With {{ $siteName }}</p>
                                    <p class="booking-summary__host-name">Talent consultation</p>
                                </div>
                            </div>

                            <template x-if="!hasSummary">
                                <p class="booking-summary__placeholder">Your session, date, and time will appear here as you book.</p>
                            </template>

                            <template x-if="selectedType">
                                <dl class="booking-summary__list">
                                    <div class="booking-summary__item">
                                        <dt>Session</dt>
                                        <dd x-text="selectedType.name"></dd>
                                    </div>
                                    <div class="booking-summary__item">
                                        <dt>Duration</dt>
                                        <dd x-text="`${selectedType.duration} minutes`"></dd>
                                    </div>
                                    <div class="booking-summary__item" x-show="selectedDate">
                                        <dt>Date</dt>
                                        <dd x-text="formatDateLong(selectedDate)"></dd>
                                    </div>
                                    <div class="booking-summary__item" x-show="selectedSlot">
                                        <dt>Time</dt>
                                        <dd>
                                            <span x-text="selectedSlot?.label"></span>
                                            <span class="booking-summary__tz" x-text="timezoneLabel()"></span>
                                        </dd>
                                    </div>
                                </dl>
                            </template>

                            <ul class="booking-summary__trust">
                                <template x-for="line in trustLines()" :key="line">
                                    <li x-text="line"></li>
                                </template>
                            </ul>

                            <div class="booking-summary__assurance">
                                <strong>Secure booking</strong>
                                <span>We’ll never share your details. Cancel or reschedule by reply email if plans change.</span>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>
</x-layouts.app>