<x-layouts.site>
    <x-slot:title>For Companies</x-slot:title>
    <x-slot:description>Company financial wellness programmes, staff training, speaking engagements, and Lunch and Learn sessions for teams.</x-slot:description>

    <section class="relative overflow-hidden bg-mesh">
        <div class="container-site relative grid items-center gap-12 py-16 md:py-24 lg:grid-cols-2" data-hero>
            <div>
                <p class="eyebrow" data-hero-item>Companies</p>
                <h1 class="mt-4 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                    Financially stressed employees are <span class="text-gradient">distracted employees.</span>
                </h1>
                <p class="mt-4 max-w-xl text-lg leading-relaxed text-navy-600" data-hero-item>
                    Bring practical financial literacy into your company through staff wellness programmes,
                    workshops, speaking engagements, and short Lunch and Learn sessions.
                </p>
                <div class="mt-7 flex flex-wrap gap-3" data-hero-item>
                    <a href="#corporate-intake" class="btn-accent btn-lg">
                        Book a discovery call <x-icon name="arrow-right" class="h-5 w-5" />
                    </a>
                    <a href="{{ route('speaking') }}" class="btn-ghost btn-lg">Invite a speaker</a>
                </div>
            </div>
            <div class="relative" data-hero-item>
                <div class="card-photo h-[24rem]" data-tilt="4">
                    <img src="{{ asset('images/stock/corporate.jpg') }}" alt="Company staff in a financial wellness workshop">
                </div>
                <div class="absolute -bottom-5 -right-5 rounded-2xl bg-white p-4 shadow-brand-lg" data-float>
                    <div class="flex items-center gap-3">
                        <span class="icon-tile !h-10 !w-10"><x-icon name="building" class="h-5 w-5" /></span>
                        <div>
                            <p class="font-display text-sm font-extrabold text-navy-900">Company-ready</p>
                            <p class="text-[11px] font-bold text-navy-400">structured intake + reporting</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section bg-white">
        <div class="container-site grid items-center gap-10 lg:grid-cols-2">
            <div data-gsap="fade-right">
                <p class="eyebrow">The business case</p>
                <h2 class="section-title mt-3">Financial wellness pays for itself.</h2>
                <div class="mt-7 space-y-5">
                    @foreach ([
                        ['icon' => 'heart-pulse', 'title' => 'Less money stress', 'desc' => 'Employees who understand their money are less distracted by debt, emergencies, and salary pressure.'],
                        ['icon' => 'banknote', 'title' => 'Fewer emergency advances', 'desc' => 'Practical budgeting and debt tools reduce the cycle of short-term borrowing.'],
                        ['icon' => 'trending-up', 'title' => 'More confident decisions', 'desc' => 'Your staff leave with clear next steps, not abstract financial jargon.'],
                    ] as $row)
                        <div class="flex items-start gap-4">
                            <span class="icon-tile"><x-icon :name="$row['icon']" class="h-5 w-5" /></span>
                            <p class="pt-1 leading-relaxed text-navy-700"><strong class="text-navy-900">{{ $row['title'] }}.</strong> {{ $row['desc'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="card-photo h-96" data-gsap="fade-left">
                <img src="{{ asset('images/card-corporate.jpg') }}" alt="Money-Wise company workshop">
                <span class="overlay">
                    <span class="font-display text-lg font-bold text-white">Workshops employees can use immediately.</span>
                </span>
            </div>
        </div>
    </section>

    <section class="section bg-navy-50/50">
        <div class="container-site">
            <div class="text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">Company offerings</p>
                <h2 class="section-title mt-3">Choose the format that fits your team.</h2>
            </div>

            <div class="mt-12 grid gap-6 lg:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['icon' => 'users', 'title' => 'Staff Financial Wellness Programmes', 'desc' => 'A structured company programme using workshops, digital tools, pre-training questionnaires, and post-session feedback.'],
                    ['icon' => 'message-circle', 'title' => 'Speaking Engagements', 'desc' => 'Keynotes, conferences, retreats, leadership offsites, and staff town halls tailored to your audience profile.'],
                    ['icon' => 'clock', 'title' => 'Lunch and Learn Sessions', 'desc' => 'A concise 45-60 minute session for companies that want a practical, approachable financial literacy conversation.'],
                ] as $offering)
                    <div class="card-glow p-8" data-tilt="5">
                        <span class="icon-tile h-14 w-14"><x-icon :name="$offering['icon']" class="h-6 w-6" /></span>
                        <h3 class="mt-4 font-display text-lg font-bold text-navy-900">{{ $offering['title'] }}</h3>
                        <p class="mt-2 leading-relaxed text-navy-600">{{ $offering['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section id="corporate-intake" class="section bg-white">
        <div class="container-site grid gap-10 lg:grid-cols-[0.9fr,1.2fr]">
            <div data-gsap="fade-right">
                <p class="eyebrow">Book a discovery call</p>
                <h2 class="section-title mt-3">Tell us about your company.</h2>
                <p class="mt-4 text-lg leading-relaxed text-navy-600">
                    Share your audience profile, event format, and topics. We will review the details and follow up with next steps.
                </p>
                <div class="mt-6 rounded-2xl bg-navy-50 p-5 ring-1 ring-navy-100">
                    <p class="font-display text-sm font-bold text-navy-900">After this form</p>
                    <p class="mt-2 text-sm leading-relaxed text-navy-600">
                        The team can send a calendar link, prepare a proposal, or create a pre-training questionnaire for your staff.
                    </p>
                </div>
            </div>

            @if (session('inquiry_sent'))
                <div class="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>
                    <h3 class="mt-3 font-display text-lg font-bold text-emerald-800">Request received.</h3>
                    <p class="mt-1 text-sm text-emerald-700">We will respond with the next step for your company.</p>
                </div>
            @else
                <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="corporate">

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="corp_name" class="mb-1 block text-sm font-semibold text-navy-700">Contact person *</label>
                            <input type="text" name="name" id="corp_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">
                        </div>
                        <div>
                            <label for="corp_email" class="mb-1 block text-sm font-semibold text-navy-700">Email *</label>
                            <input type="email" name="email" id="corp_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">
                        </div>
                    </div>

                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="corp_phone" class="mb-1 block text-sm font-semibold text-navy-700">Phone</label>
                            <input type="tel" name="phone" id="corp_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 for="corp_organization" class="mb-1 block text-sm font-semibold text-navy-700">Company *</label>
                            <input type="text" name="organization" id="corp_organization" required 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 class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="corp_event_name" class="mb-1 block text-sm font-semibold text-navy-700">Event / session name</label>
                            <input type="text" name="event_name" id="corp_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="corp_event_date" class="mb-1 block text-sm font-semibold text-navy-700">Event date</label>
                            <input type="date" name="event_date" id="corp_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="corp_audience_profile" class="mb-1 block text-sm font-semibold text-navy-700">Audience profile</label>
                            <select name="audience_profile" id="corp_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="corp_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="corp_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="corp_event_format" class="mb-1 block text-sm font-semibold text-navy-700">Format</label>
                            <select name="event_format" id="corp_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="corp_delivery_mode" class="mb-1 block text-sm font-semibold text-navy-700">Delivery</label>
                            <select name="delivery_mode" id="corp_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="corp_session_duration" class="mb-1 block text-sm font-semibold text-navy-700">Duration</label>
                            <select name="session_duration" id="corp_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="corp_venue" class="mb-1 block text-sm font-semibold text-navy-700">Venue / location</label>
                        <input type="text" name="venue" id="corp_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 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-navy-50 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>
                        <label for="corp_message" class="mb-1 block text-sm font-semibold text-navy-700">What should we know before the discovery call? *</label>
                        <textarea name="message" id="corp_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>
                    </div>

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