<x-layouts.site>
    <x-slot:title>Book a Coaching Discovery Call</x-slot:title>
    <x-slot:description>Start your one-on-one financial coaching with a 45-minute discovery call. Tell us a little about you, and we'll match you with the right coach.</x-slot:description>

    <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">
            <div class="text-center" data-hero>
                <p class="eyebrow justify-center" data-hero-item>Coaching</p>
                <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>Book your discovery call</h1>
                <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-navy-600" data-hero-item>
                    Coaching starts with a focused 45-minute discovery call. Share a few details so your coach can prepare, then
                    we'll confirm your session.
                </p>
            </div>

            @if (session('inquiry_sent'))
                <div class="mx-auto mt-8 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="check-circle" class="h-6 w-6" /></span>
                    <h2 class="mt-3 font-display text-lg font-bold text-emerald-800">Received, asante!</h2>
                    <p class="mt-1 text-sm text-emerald-700">We'll be in touch shortly to confirm your coach and share the payment + booking link for your discovery call.</p>
                </div>
            @endif

            <div class="mt-10 grid gap-8 lg:grid-cols-[1.5fr,1fr]">
                {{-- Intake form --}}
                <form method="POST" action="{{ route('contact.store') }}" class="card space-y-5 p-8" data-gsap="fade-right"
                      x-data="{
                          coachedBefore: '', focus: '', debts: '', investing: '', success: '', values: '',
                          composed() {
                              return [
                                  'COACHING DISCOVERY CALL REQUEST',
                                  'Worked with a coach before: ' + (this.coachedBefore || '-'),
                                  'Main financial focus: ' + (this.focus || '-'),
                                  'Currently repaying debt: ' + (this.debts || '-'),
                                  'Investment status: ' + (this.investing || '-'),
                                  'What success looks like: ' + (this.success || '-'),
                                  'What matters most (values): ' + (this.values || '-'),
                              ].join('\n');
                          },
                      }">
                    @csrf
                    <input type="hidden" name="type" value="coaching">
                    <input type="hidden" name="message" :value="composed()">

                    <h2 class="font-display text-lg font-bold text-navy-900">A little about you</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">Your name *</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="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>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Worked with a coach before?</label>
                            <select x-model="coachedBefore" 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>No, this is my first time</option>
                                <option>Yes, I have</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Main financial focus right now</label>
                            <select x-model="focus" 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>Saving &amp; budgeting</option>
                                <option>Investing &amp; growing wealth</option>
                                <option>Retirement planning</option>
                                <option>Business finances</option>
                                <option>Not sure yet</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Are you repaying debt?</label>
                            <select x-model="debts" 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>Yes</option>
                                <option>No</option>
                                <option>Prefer not to say</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="mb-1 block text-sm font-semibold text-navy-700">Are you currently investing?</label>
                            <select x-model="investing" 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>Not yet</option>
                                <option>A little (SACCO, money market, etc.)</option>
                                <option>Actively investing</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-semibold text-navy-700">What would success look like for you?</label>
                        <textarea x-model="success" rows="2" placeholder="e.g. debt-free in 18 months, a real emergency fund, my first investment" 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">What matters most to you? <span class="font-normal text-navy-400">(your values, optional)</span></label>
                        <textarea x-model="values" 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">Request my discovery call <x-icon name="arrow-right" class="h-5 w-5" /></button>
                    <p class="text-center text-xs text-navy-400">Your details are private and used only to prepare for your session.</p>
                </form>

                {{-- Side: how it works --}}
                <div class="space-y-6">
                    <div class="card bg-navy-900 bg-mesh-dark p-6" data-gsap="fade-left">
                        <p class="text-xs font-bold uppercase tracking-wide text-wise-300">The discovery call</p>
                        <p class="mt-2 font-display text-3xl font-extrabold text-white">KES 20,000</p>
                        <p class="mt-1 text-sm text-navy-200">A focused 45-minute session to understand where you are and map the way forward.</p>
                        <p class="mt-4 rounded-2xl bg-white/10 px-4 py-3 text-sm font-semibold text-wise-200">Credited in full toward your coaching program if you decide to continue.</p>
                    </div>

                    <div class="card p-6" data-gsap="fade-left">
                        <h2 class="font-display text-sm font-bold uppercase tracking-widest text-navy-500">How it works</h2>
                        <ol class="mt-3 space-y-3 text-sm text-navy-700">
                            @foreach (['Share your details here', 'We match you with the right coach', 'Pay and book your discovery call', 'Meet, get clarity, and decide on next steps'] as $i => $step)
                                <li class="flex items-start gap-3">
                                    <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-wise-100 text-xs font-bold text-wise-700">{{ $i + 1 }}</span>
                                    {{ $step }}
                                </li>
                            @endforeach
                        </ol>
                    </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="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>
