<x-layouts.site>
    <x-slot:title>Contact Us</x-slot:title>
    <x-slot:description>Get in touch with Money-Wise, support, company financial wellness, speaking engagements and coaching.</x-slot:description>

    @php
        $topics = [
            'support' => ['icon' => 'message-circle', 'label' => 'General support', 'blurb' => 'Questions about tools, courses or your account'],
            'corporate' => ['icon' => 'building', 'label' => 'Company wellness', 'blurb' => 'Financial wellness programmes for your company'],
            'speaking' => ['icon' => 'users', 'label' => 'Book a speaker', 'blurb' => 'Conferences, retreats and events'],
            'coaching' => ['icon' => 'compass', 'label' => 'Coaching', 'blurb' => 'One-on-one financial guidance'],
        ];
        $selected = request('topic', 'support');
        if (! array_key_exists($selected, $topics)) { $selected = 'support'; }
    @endphp

    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -left-24 top-20 h-80 w-80 bg-wise-300/30" data-parallax="0.2" aria-hidden="true"></div>

        <div class="container-site section relative max-w-5xl">
            <div class="text-center" data-hero>
                <p class="eyebrow justify-center" data-hero-item>Karibu, talk to us</p>
                <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>We'd love to hear from you</h1>
                <p class="mx-auto mt-4 max-w-xl text-lg text-navy-600" data-hero-item>Whatever the money question, there's no judgement here. Pick a topic and say hello.</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="send" class="h-6 w-6" /></span>
                    <h2 class="mt-3 font-display text-lg font-bold text-emerald-800">Message sent, asante!</h2>
                    <p class="mt-1 text-sm text-emerald-700">We'll get back to you within one working day.</p>
                </div>
            @endif

            <div class="mt-10 grid gap-8 lg:grid-cols-[1fr,1.4fr]" x-data="{ topic: '{{ $selected }}' }">
                {{-- Topic picker + direct contacts --}}
                <div class="space-y-6">
                    <div class="space-y-2.5" data-gsap-stagger>
                        @foreach ($topics as $key => $topic)
                            <button @click="topic = '{{ $key }}'"
                                    :class="topic === '{{ $key }}' ? 'ring-wise-500 bg-wise-50 shadow-wise' : 'ring-navy-100 bg-white'"
                                    class="flex w-full items-center gap-4 rounded-2xl p-4 text-left ring-2 transition">
                                <span class="icon-tile"><x-icon :name="$topic['icon']" class="h-5 w-5" /></span>
                                <span>
                                    <span class="block font-display text-sm font-bold text-navy-900">{{ $topic['label'] }}</span>
                                    <span class="text-xs text-navy-500">{{ $topic['blurb'] }}</span>
                                </span>
                            </button>
                        @endforeach
                    </div>

                    <div class="card p-6" data-gsap="fade-up">
                        <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>

                {{-- Form --}}
                <form method="POST" action="{{ route('contact.store') }}" class="card space-y-5 p-8" data-gsap="fade-left">
                    @csrf
                    <input type="hidden" name="type" :value="topic">

                    <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>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <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 x-show="['corporate','speaking'].includes(topic)">
                            <label for="organization" class="mb-1 block text-sm font-semibold text-navy-700">Company / organization</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>

                    <div x-show="['corporate','speaking'].includes(topic)" x-cloak class="space-y-5 rounded-2xl bg-navy-50/70 p-5 ring-1 ring-navy-100">
                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="event_name" class="mb-1 block text-sm font-semibold text-navy-700">Event / session name</label>
                                <input type="text" name="event_name" id="event_name" value="{{ old('event_name') }}"
                                       class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                            </div>
                            <div>
                                <label for="event_date" class="mb-1 block text-sm font-semibold text-navy-700">Event date</label>
                                <input type="date" name="event_date" id="event_date" value="{{ old('event_date') }}"
                                       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 for="audience_profile" class="mb-1 block text-sm font-semibold text-navy-700">Audience profile</label>
                                <select name="audience_profile" id="audience_profile"
                                        class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                    <option value="">Select one</option>
                                    @foreach (['Entry-level staff', 'Mid-level / supervisors', 'Executive / senior staff', 'Soon-to-retire staff', 'Retrenchment / transition group', 'All staff', 'Other'] as $profile)
                                        <option value="{{ $profile }}" @selected(old('audience_profile') === $profile)>{{ $profile }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="staff_size" class="mb-1 block text-sm font-semibold text-navy-700">Expected attendees</label>
                                <input type="number" min="1" name="staff_size" id="staff_size" value="{{ old('staff_size') }}"
                                       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-3">
                            <div>
                                <label for="event_format" class="mb-1 block text-sm font-semibold text-navy-700">Format</label>
                                <select name="event_format" id="event_format"
                                        class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                    <option value="">Select one</option>
                                    @foreach (['Keynote', 'Workshop', 'Panel', 'Training', 'Conference / retreat / offsite', 'Lunch and Learn', 'Other'] as $format)
                                        <option value="{{ $format }}" @selected(old('event_format') === $format)>{{ $format }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="delivery_mode" class="mb-1 block text-sm font-semibold text-navy-700">Delivery</label>
                                <select name="delivery_mode" id="delivery_mode"
                                        class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                    <option value="">Select one</option>
                                    @foreach (['Physical', 'Virtual', 'Hybrid'] as $mode)
                                        <option value="{{ $mode }}" @selected(old('delivery_mode') === $mode)>{{ $mode }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="session_duration" class="mb-1 block text-sm font-semibold text-navy-700">Duration</label>
                                <select name="session_duration" id="session_duration"
                                        class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                                    <option value="">Select one</option>
                                    @foreach (['1-2 hours', 'Half day', 'Full day'] as $duration)
                                        <option value="{{ $duration }}" @selected(old('session_duration') === $duration)>{{ $duration }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div>
                            <label for="venue" class="mb-1 block text-sm font-semibold text-navy-700">Venue / location</label>
                            <input type="text" name="venue" id="venue" value="{{ old('venue') }}"
                                   class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">
                        </div>

                        <div>
                            <p class="mb-2 block text-sm font-semibold text-navy-700">What would you like us to address?</p>
                            <div class="grid gap-2 sm:grid-cols-2">
                                @foreach (['Debt', 'Saving', 'Budgeting', 'Investing', 'Retirement planning', 'Financial confidence', 'Money and relationships', 'Other'] as $topicOption)
                                    <label class="flex items-start gap-3 rounded-xl bg-white p-3 ring-1 ring-navy-100">
                                        <input type="checkbox" name="topics[]" value="{{ $topicOption }}" @checked(in_array($topicOption, old('topics', []), true))
                                               class="mt-1 rounded border-navy-200 text-wise-500 focus:ring-wise-400">
                                        <span class="text-sm font-semibold text-navy-700">{{ $topicOption }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div>
                        <label for="message" class="mb-1 block text-sm font-semibold text-navy-700">How can we help? *</label>
                        <textarea name="message" id="message" rows="5" required
                                  class="w-full rounded-2xl border-navy-200 px-4 py-3 focus:border-wise-400 focus:ring-wise-400">{{ old('message') }}</textarea>
                        @error('message') <p class="mt-1 text-sm font-medium text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    <button type="submit" class="btn-accent btn-lg w-full">Send message <x-icon name="send" class="h-5 w-5" /></button>
                </form>
            </div>
        </div>
    </section>
</x-layouts.site>
