{{--
    Interactive fare estimator. Pure client-side (Alpine) — no backend
    needed since the fare model is simple and transparent to the rider.
--}}
<section class="bg-white py-20 dark:bg-ink lg:py-28"
         x-data="{
             distance: 6,
             riderType: 'regular',
             get fare() {
                 const base = Math.min(60, 15 + Math.max(0, this.distance - 2) * 5);
                 const discount = { regular: 1, student: 0.8, senior: 0.5 }[this.riderType];
                 return Math.round(base * discount);
             },
             get savings() {
                 return Math.round(Math.min(60, 15 + Math.max(0, this.distance - 2) * 5) - this.fare);
             },
         }">
    <div class="mx-auto max-w-4xl px-6">
        <div class="reveal mb-12 text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Fare Calculator</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                See What Your Ride <span class="text-primary dark:text-secondary">Actually Costs</span>
            </h2>
            <p class="mx-auto mt-4 max-w-lg text-sm text-slate-500 dark:text-slate-400">
                Drag the slider to your usual distance and see the fare update instantly — discounts included.
            </p>
        </div>

        <div class="reveal grid grid-cols-1 gap-10 rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel lg:grid-cols-5 lg:p-10">
            <div class="lg:col-span-3">
                <label class="mb-2 flex items-center justify-between text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                    <span>Trip Distance</span>
                    <span class="text-primary dark:text-secondary" x-text="distance + ' km'"></span>
                </label>
                <input type="range" min="1" max="25" step="1" x-model.number="distance"
                       class="w-full accent-primary dark:accent-secondary">
                <div class="mt-1 flex justify-between text-[10px] text-slate-400 dark:text-slate-500">
                    <span>1 km</span>
                    <span>25 km</span>
                </div>

                <label class="mb-2 mt-8 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Rider Type</label>
                <div class="grid grid-cols-3 gap-2">
                    <button type="button" @click="riderType = 'regular'"
                            :class="riderType === 'regular' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:bg-secondary/10 dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                            class="rounded-xl border px-3 py-2.5 text-xs font-semibold transition duration-200">
                        Regular
                    </button>
                    <button type="button" @click="riderType = 'student'"
                            :class="riderType === 'student' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:bg-secondary/10 dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                            class="rounded-xl border px-3 py-2.5 text-xs font-semibold transition duration-200">
                        Student
                    </button>
                    <button type="button" @click="riderType = 'senior'"
                            :class="riderType === 'senior' ? 'border-primary bg-primary/5 text-primary dark:border-secondary dark:bg-secondary/10 dark:text-secondary' : 'border-slate-200 text-slate-500 dark:border-white/10 dark:text-slate-400'"
                            class="rounded-xl border px-3 py-2.5 text-xs font-semibold transition duration-200">
                        Senior
                    </button>
                </div>
            </div>

            <div class="flex flex-col justify-center rounded-2xl bg-gradient-to-br from-primary to-secondary p-6 text-center text-white lg:col-span-2">
                <p class="text-xs uppercase tracking-widest text-white/70">Estimated Fare</p>
                <p class="font-heading text-4xl font-extrabold" x-text="'NPR ' + fare"></p>
                <p class="mt-2 text-xs text-white/70" x-show="savings > 0" x-cloak>
                    You save <span x-text="'NPR ' + savings"></span> with your discount
                </p>
                <a href="{{ route('cards') }}" class="mt-5 rounded-xl bg-white/15 px-4 py-2.5 text-xs font-semibold backdrop-blur transition duration-300 hover:bg-white/25">
                    Get a Card to Ride
                </a>
            </div>
        </div>
    </div>
</section>