<x-layouts.site>
    <x-slot:title>Book a Speaker</x-slot:title>
    <x-slot:description>Bring financial wisdom and wealth conversations to your event. Book Money-Wise for a keynote, workshop, panel, training or webinar.</x-slot:description>

    {{-- Hero --}}
    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -left-24 top-16 h-80 w-80 bg-wise-300/35" data-parallax="0.2" aria-hidden="true"></div>
        <div class="container-site section relative max-w-4xl text-center" data-hero>
            <p class="eyebrow justify-center" data-hero-item>Speaker booking</p>
            <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                Bringing financial wisdom and <span class="text-gradient">wealth conversations</span> to you
            </h1>
            <p class="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-navy-600" data-hero-item>
                Practical, faith-aware money talks that move audiences from anxiety to action. Share your event details
                below, or book a quick discovery call to talk it through.
            </p>
        </div>
    </section>

    <section class="section bg-white">
        <div class="container-site max-w-5xl">
            @if (session('inquiry_sent'))
                <div class="mx-auto mb-10 max-w-xl rounded-brand bg-emerald-50 p-6 text-center ring-1 ring-emerald-200" data-gsap="zoom">
                    <span class="mx-auto grid h-12 w-12 place-items-center rounded-full bg-emerald-100 text-emerald-600"><x-icon name="send" class="h-6 w-6" /></span>
                    <h2 class="mt-3 font-display text-lg font-bold text-emerald-800">Request received, asante!</h2>
                    <p class="mt-1 text-sm text-emerald-700">We'll get back to you within one working day to confirm the details.</p>
                </div>
            @endif

            <div class="grid gap-8 lg:grid-cols-[1.5fr,1fr]">
                {{-- Booking form --}}
                <form method="POST" action="{{ route('contact.store') }}" class="card space-y-5 p-8" data-gsap="fade-right"
                      x-data="{
                          eventName: '', eventDate: '', venueMode: '', venue: '', audienceSize: '', audienceProfile: '',
                          formats: [], otherFormat: '', topics: '', duration: '', address: '', notes: '',
                          composed() {
                              const fmt = [...this.formats, this.otherFormat].filter(Boolean).join(', ');
                              return [
                                  'SPEAKER BOOKING REQUEST',
                                  'Event: ' + (this.eventName || '-'),
                                  'Date: ' + (this.eventDate || '-'),
                                  'Delivery: ' + (this.venueMode || '-') + (this.venueMode === 'Physical' && this.venue ? ' (' + this.venue + ')' : ''),
                                  'Staff / audience size: ' + (this.audienceSize || '-'),
                                  'Staff profile: ' + (this.audienceProfile || '-'),
                                  'Format: ' + (fmt || '-'),
                                  'Preferred topic(s): ' + (this.topics || '-'),
                                  'Session duration: ' + (this.duration || '-'),
                                  'What to address: ' + (this.address || '-'),
                                  'Additional notes: ' + (this.notes || '-'),
                              ].join('\n');
                          },
                      }">
                    @csrf
                    <input type="hidden" name="type" value="speaking">
                    <input type="hidden" name="message" :value="composed()">

                    <h2 class="font-display text-lg font-bold text-navy-900">Event details</h2>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="name" class="mb-1 block text-sm font-semibold text-navy-700">Contact person *</label>
                            <input type="text" name="name" id="name" required value="{{ old('name') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                            @error('name') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="organization" class="mb-1 block text-sm font-semibold text-navy-700">Organisation</label>
                            <input type="text" name="organization" id="organization" value="{{ old('organization') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                        <div>
                            <label for="email" class="mb-1 block text-sm font-semibold text-navy-700">Email *</label>
                            <input type="email" name="email" id="email" required value="{{ old('email') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                            @error('email') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label for="phone" class="mb-1 block text-sm font-semibold text-navy-700">Phone <span class="font-normal text-navy-400">(optional)</span></label>
                            <input type="tel" name="phone" id="phone" value="{{ old('phone') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Event name</label>
                            <input type="text" x-model="eventName" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Event date</label>
                            <input type="text" x-model="eventDate" placeholder="e.g. 14 Aug 2026" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Delivery</label>
                            <select x-model="venueMode" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                <option value="">Select</option>
                                <option>Physical</option>
                                <option>Virtual</option>
                            </select>
                        </div>
                        <div x-show="venueMode === 'Physical'" x-cloak>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Venue / place</label>
                            <input type="text" x-model="venue" placeholder="e.g. Nairobi, Sarova Stanley" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Number of staff / audience</label>
                            <input type="text" x-model="audienceSize" placeholder="e.g. 25" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-semibold text-navy-700">Staff / audience profile</label>
                        <select x-model="audienceProfile" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                            <option value="">Select</option>
                            <option>Entry level</option>
                            <option>Mid / supervisors</option>
                            <option>Senior / executive</option>
                            <option>Soon to retire</option>
                            <option>Mixed</option>
                            <option>Other</option>
                        </select>
                    </div>

                    <div>
                        <span class="mb-2 block text-sm font-semibold text-navy-700">Speaking format</span>
                        <div class="flex flex-wrap gap-2">
                            @foreach (['Keynote', 'Workshop', 'Panel', 'Training', 'Webinar'] as $f)
                                <label class="cursor-pointer">
                                    <input type="checkbox" x-model="formats" value="{{ $f }}" class="peer sr-only">
                                    <span class="inline-block rounded-full bg-navy-50 px-4 py-2 text-sm font-semibold text-navy-600 ring-1 ring-navy-200 transition peer-checked:bg-wise-500 peer-checked:text-white peer-checked:ring-wise-500">{{ $f }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Preferred topic</label>
                            <select x-model="topics" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                <option value="">Select</option>
                                <option>Getting out of debt</option>
                                <option>Budgeting &amp; saving</option>
                                <option>Investing &amp; growing wealth</option>
                                <option>Retirement planning</option>
                                <option>Money &amp; relationships</option>
                                <option>Financial wellness for staff</option>
                                <option>Other (tell us below)</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Session duration</label>
                            <select x-model="duration" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                <option value="">Select</option>
                                <option>1 hr - 2 hrs</option>
                                <option>Half day (4 hrs)</option>
                                <option>Full day</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-semibold text-navy-700">What would you like us to address?</label>
                        <textarea x-model="address" rows="2" placeholder="e.g. staff struggling with debt, low savings culture, retirement anxiety" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400"></textarea>
                    </div>
                    <div>
                        <label class="mb-1 block text-sm font-semibold text-navy-700">Additional notes</label>
                        <textarea x-model="notes" rows="2" class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400"></textarea>
                    </div>

                    <button type="submit" class="btn-accent btn-lg w-full">Send booking request <x-icon name="send" class="h-5 w-5" /></button>
                </form>

                {{-- Side: discovery call + formats + contacts --}}
                <div class="space-y-6">
                    <div class="card bg-navy-900 bg-mesh-dark p-6 text-center" data-gsap="fade-left">
                        <span class="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-wise-400 text-navy-950"><x-icon name="calendar" class="h-6 w-6" /></span>
                        <h2 class="mt-3 font-display text-lg font-bold text-white">Prefer to talk first?</h2>
                        <p class="mt-1 text-sm text-navy-200">Book a quick speaking discovery call and we'll shape the session together.</p>
                        <a href="https://calendly.com/moneywiseke/discovery" target="_blank" rel="noopener" class="btn-accent btn-sm mt-4 w-full">Book a discovery call</a>
                    </div>

                    <div class="card p-6" data-gsap="fade-left">
                        <h2 class="font-display text-sm font-bold uppercase tracking-widest text-navy-500">Popular formats</h2>
                        <ul class="mt-3 space-y-2.5 text-sm text-navy-700">
                            @foreach (['Keynote talks', 'Interactive workshops', 'Panel discussions', 'Staff training', 'Webinars'] as $f)
                                <li class="flex items-center gap-2.5"><x-icon name="check-circle" class="h-4 w-4 text-wise-500" /> {{ $f }}</li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="card p-6" data-gsap="fade-left">
                        <h2 class="font-display text-sm font-bold uppercase tracking-widest text-navy-500">Reach us directly</h2>
                        <div class="mt-3 space-y-2.5 text-sm font-semibold">
                            <a href="tel:+254112440122" class="flex items-center gap-2.5 text-navy-700 transition hover:text-wise-600"><x-icon name="phone" class="h-4 w-4 text-wise-500" /> +254 112 440 122</a>
                            <a href="https://wa.me/254112440122" target="_blank" rel="noopener" class="flex items-center gap-2.5 text-navy-700 transition hover:text-wise-600"><x-icon name="whatsapp" class="h-4 w-4 text-emerald-500" /> WhatsApp us</a>
                            <a href="mailto:sema@moneywise.co.ke" class="flex items-center gap-2.5 text-navy-700 transition hover:text-wise-600"><x-icon name="mail" class="h-4 w-4 text-wise-500" /> sema@moneywise.co.ke</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-layouts.site>
