{{-- Reusable Demo / Lead capture form --}}
@props(['compact' => false])

<div x-data="formDemo()">
    {{-- Success state --}}
    <div x-show="submitted" x-cloak class="text-center py-12">
        <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-emerald-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                @include('components.icons.check')
            </svg>
        </div>
        <h3 class="text-xl font-bold text-graphite-900 mb-2">We got your request.</h3>
        <p class="text-graphite-500 max-w-sm mx-auto">
            Our team will reach out within one business day to schedule a tailored demo for your operation.
        </p>
    </div>

    {{-- Form --}}
    <form x-show="!submitted"
          @submit.prevent="submit($event)"
          action="{{ route('book-demo.store') }}"
          method="POST"
          class="space-y-5" novalidate>
        @csrf

        {{-- Honeypot --}}
        <div class="absolute -left-[9999px] -top-[9999px] overflow-hidden" aria-hidden="true" tabindex="-1">
            <input type="text" name="website" tabindex="-1" autocomplete="off">
        </div>

        {{-- Global error --}}
        <div x-show="errors._global" x-cloak
             class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
            <span x-text="errors._global"></span>
        </div>

        <div class="{{ $compact ? 'grid grid-cols-1 gap-4' : 'grid grid-cols-1 sm:grid-cols-2 gap-5' }}">
            {{-- Name --}}
            <div>
                <label class="form-label" for="demo-name">Full Name <span class="text-red-500">*</span></label>
                <input id="demo-name" name="name" type="text" autocomplete="name"
                       class="form-input" :class="errors.name ? 'border-red-400 ring-1 ring-red-300' : ''"
                       placeholder="Rajesh Kumar" required>
                <p x-show="errors.name" x-cloak class="form-error" x-text="errors.name?.[0]"></p>
            </div>

            {{-- Company --}}
            <div>
                <label class="form-label" for="demo-company">Business / Company <span class="text-red-500">*</span></label>
                <input id="demo-company" name="company" type="text" autocomplete="organization"
                       class="form-input" :class="errors.company ? 'border-red-400 ring-1 ring-red-300' : ''"
                       placeholder="Chai Theory Pvt. Ltd." required>
                <p x-show="errors.company" x-cloak class="form-error" x-text="errors.company?.[0]"></p>
            </div>

            {{-- Mobile --}}
            <div>
                <label class="form-label" for="demo-mobile">Mobile Number <span class="text-red-500">*</span></label>
                <input id="demo-mobile" name="mobile" type="tel" autocomplete="tel"
                       class="form-input" :class="errors.mobile ? 'border-red-400 ring-1 ring-red-300' : ''"
                       placeholder="+91 98765 43210" required>
                <p x-show="errors.mobile" x-cloak class="form-error" x-text="errors.mobile?.[0]"></p>
            </div>

            {{-- Email --}}
            <div>
                <label class="form-label" for="demo-email">Work Email <span class="text-red-500">*</span></label>
                <input id="demo-email" name="email" type="email" autocomplete="email"
                       class="form-input" :class="errors.email ? 'border-red-400 ring-1 ring-red-300' : ''"
                       placeholder="rajesh@chaitheory.com" required>
                <p x-show="errors.email" x-cloak class="form-error" x-text="errors.email?.[0]"></p>
            </div>

            {{-- Business type --}}
            <div>
                <label class="form-label" for="demo-type">Business Type <span class="text-red-500">*</span></label>
                <div class="relative">
                    <select id="demo-type" name="business_type"
                            class="form-select" :class="errors.business_type ? 'border-red-400' : ''"
                            required>
                        <option value="">Select your business type</option>
                        @foreach(config('phylopos.business_types') as $type)
                        <option value="{{ $type }}">{{ $type }}</option>
                        @endforeach
                    </select>
                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-graphite-400 pointer-events-none"
                         viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <p x-show="errors.business_type" x-cloak class="form-error" x-text="errors.business_type?.[0]"></p>
            </div>

            {{-- Outlet count --}}
            <div>
                <label class="form-label" for="demo-outlets">Number of Outlets / Stores <span class="text-red-500">*</span></label>
                <div class="relative">
                    <select id="demo-outlets" name="outlet_count"
                            class="form-select" :class="errors.outlet_count ? 'border-red-400' : ''"
                            required>
                        <option value="">Select outlet count</option>
                        @foreach(config('phylopos.outlet_ranges') as $range)
                        <option value="{{ $range }}">{{ $range }}</option>
                        @endforeach
                    </select>
                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-graphite-400 pointer-events-none"
                         viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <p x-show="errors.outlet_count" x-cloak class="form-error" x-text="errors.outlet_count?.[0]"></p>
            </div>

            {{-- City --}}
            <div>
                <label class="form-label" for="demo-city">City / Country <span class="text-red-500">*</span></label>
                <input id="demo-city" name="city" type="text"
                       class="form-input" :class="errors.city ? 'border-red-400' : ''"
                       placeholder="Bengaluru / Dubai" required>
                <p x-show="errors.city" x-cloak class="form-error" x-text="errors.city?.[0]"></p>
            </div>

            {{-- Current setup --}}
            <div>
                <label class="form-label" for="demo-setup">Current Setup</label>
                <input id="demo-setup" name="current_setup" type="text"
                       class="form-input"
                       placeholder="e.g. Manual / Petpooja / Excel">
            </div>
        </div>

        {{-- Hardware + Payments interest --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <div>
                <label class="form-label">Interested in Hardware?</label>
                <div class="flex gap-3 mt-1">
                    @foreach(['yes' => 'Yes', 'maybe' => 'Maybe', 'no' => 'Not now'] as $val => $lbl)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="need_hardware" value="{{ $val }}"
                               class="text-teal-600 focus:ring-teal-500 border-graphite-300">
                        <span class="text-sm text-graphite-700">{{ $lbl }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
            <div>
                <label class="form-label">Interested in Payments?</label>
                <div class="flex gap-3 mt-1">
                    @foreach(['yes' => 'Yes', 'maybe' => 'Maybe', 'no' => 'Not now'] as $val => $lbl)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="need_payments" value="{{ $val }}"
                               class="text-teal-600 focus:ring-teal-500 border-graphite-300">
                        <span class="text-sm text-graphite-700">{{ $lbl }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Message --}}
        @if(!$compact)
        <div>
            <label class="form-label" for="demo-message">Anything else we should know?</label>
            <textarea id="demo-message" name="message" rows="3"
                      class="form-input resize-none"
                      placeholder="e.g. We want to integrate with Swiggy and need KDS for two stations…"></textarea>
        </div>
        @endif

        {{-- Submit --}}
        <button type="submit"
                class="btn-primary-lg w-full"
                :disabled="loading"
                :class="loading ? 'opacity-70 cursor-not-allowed' : ''">
            <span x-show="!loading">Request a Demo</span>
            <span x-show="loading" x-cloak class="flex items-center gap-2">
                <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
                Sending…
            </span>
        </button>

        <p class="text-xs text-graphite-400 text-center">
            By submitting you agree to our <a href="/privacy-policy" class="underline hover:text-graphite-600">Privacy Policy</a>.
            We will never share your data.
        </p>
    </form>
</div>