@php
    $startsLocal = $booking->starts_at->timezone($booking->timezone);
    $endsLocal = $booking->ends_at->timezone($booking->timezone);
    $siteName = config('apex.name', 'Apex Admins');

    $gcalDates = $startsLocal->copy()->utc()->format('Ymd\THis\Z').'/'.$endsLocal->copy()->utc()->format('Ymd\THis\Z');
    $gcalUrl = 'https://calendar.google.com/calendar/render?'.http_build_query([
        'action' => 'TEMPLATE',
        'text' => $booking->bookingType->name.' — '.$siteName,
        'dates' => $gcalDates,
        'details' => 'Consultation with '.$siteName.'. Confirmation sent to '.$booking->email.'.',
        'ctz' => $booking->timezone,
    ]);
@endphp

<x-layouts.app :seo="$seo ?? null">
    <section class="book-hero book-hero--confirm">
        <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">
            <div class="book-confirm-hero">
                <div class="booking-confirm-icon" aria-hidden="true">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <p class="book-hero__eyebrow">Confirmed</p>
                <h1 class="book-hero__title book-hero__title--sm">You're all set, {{ $booking->name }}</h1>
                <p class="book-hero__lead">
                    Your consultation with {{ $siteName }} is locked in.
                    We’ve sent a confirmation email with your session details.
                </p>
            </div>
        </div>
    </section>

    <section class="book-stage">
        <div class="container-page">
            <div class="booking-confirm-layout">
                <div class="booking-confirm-card">
                    <p class="booking-summary__kicker">Session details</p>

                    <dl class="booking-confirm-details">
                        <div>
                            <dt>Session</dt>
                            <dd>{{ $booking->bookingType->name }}</dd>
                        </div>
                        <div>
                            <dt>Date</dt>
                            <dd>{{ $startsLocal->format('l, j F Y') }}</dd>
                        </div>
                        <div>
                            <dt>Time</dt>
                            <dd>{{ $startsLocal->format('g:i A') }} – {{ $endsLocal->format('g:i A') }}</dd>
                        </div>
                        <div>
                            <dt>Timezone</dt>
                            <dd>{{ $booking->timezone }}</dd>
                        </div>
                        <div>
                            <dt>Duration</dt>
                            <dd>{{ $booking->bookingType->duration_minutes }} minutes</dd>
                        </div>
                        <div>
                            <dt>Email</dt>
                            <dd>{{ $booking->email }}</dd>
                        </div>
                        @if($booking->phone)
                            <div>
                                <dt>Phone</dt>
                                <dd>{{ $booking->phone }}</dd>
                            </div>
                        @endif
                        @if($booking->company)
                            <div>
                                <dt>Company</dt>
                                <dd>{{ $booking->company }}</dd>
                            </div>
                        @endif
                    </dl>

                    <div class="booking-confirm-actions">
                        <a href="{{ route('book.calendar', $booking->confirmation_token) }}" class="booking-btn booking-btn--primary">
                            Download .ics
                        </a>
                        <a href="{{ $gcalUrl }}" target="_blank" rel="noopener" class="booking-btn booking-btn--ghost">
                            Add to Google Calendar
                        </a>
                        <x-ui.button href="{{ route('home') }}" variant="secondary">Back to home</x-ui.button>
                    </div>
                </div>

                <div class="booking-confirm-next">
                    <p class="booking-summary__kicker">What happens next</p>
                    <ol class="booking-next-steps">
                        <li>
                            <strong>Check your inbox</strong>
                            <span>Your confirmation is on its way to {{ $booking->email }}.</span>
                        </li>
                        <li>
                            <strong>We prepare for your call</strong>
                            <span>Our team reviews your notes so the conversation is focused and useful.</span>
                        </li>
                        <li>
                            <strong>Join at your scheduled time</strong>
                            <span>We’ll send any meeting details before your session if needed.</span>
                        </li>
                        <li>
                            <strong>Get your shortlist</strong>
                            <span>Most clients receive vetted candidates within 5–7 business days.</span>
                        </li>
                    </ol>

                    <div class="booking-confirm-links">
                        <a href="{{ route('case-studies.index') }}" class="home-text-link">Read client results</a>
                        <a href="{{ route('services.index') }}" class="home-text-link">Explore services</a>
                        <a href="{{ route('book.index') }}" class="home-text-link">Book another session</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-layouts.app>