@php
    $rewards = [
        ['icon' => 'fa-graduation-cap', 'title' => 'Student Discount', 'desc' => 'Verified students save on every fare, automatically applied at tap-in.', 'color' => 'primary'],
        ['icon' => 'fa-person-cane', 'title' => 'Senior Citizen Discount', 'desc' => 'Concessional rates for senior citizens on every partner route.', 'color' => 'secondary'],
        ['icon' => 'fa-users', 'title' => 'Referral Rewards', 'desc' => 'Invite a friend to Yatra Card — you both get NPR 50 in ride credit.', 'color' => 'accent'],
        ['icon' => 'fa-handshake', 'title' => 'Partner Offers', 'desc' => 'Exclusive discounts at partner shops, cafes, and mobile top-up providers.', 'color' => 'primary'],
        ['icon' => 'fa-coins', 'title' => 'Loyalty Points', 'desc' => 'Earn a point on every tap; redeem points for free rides after 100 trips.', 'color' => 'secondary'],
        ['icon' => 'fa-bolt', 'title' => 'Early Recharge Bonus', 'desc' => 'Top up NPR 1,000 or more in one go and get a small ride-credit bonus.', 'color' => 'accent'],
    ];
@endphp

@component('layouts.app', [
    'title' => 'Rewards & Discounts',
    'metaDescription' => 'Yatra Card rewards — student and senior citizen discounts, referral credit, loyalty points, and partner offers.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Wallet & Rewards',
        'title' => 'Ride More, Save More',
        'subtitle' => 'Yatra Card rewards the people who use it every day — students, seniors, and loyal commuters alike.',
    ])

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($rewards as $i => $reward)
                    <div class="reveal group rounded-2xl border border-slate-100 bg-white p-7 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ ($i % 3) * 90 }}ms">
                        <div class="mb-4 grid h-12 w-12 place-items-center rounded-xl bg-{{ $reward['color'] }}/10 text-{{ $reward['color'] }} transition duration-300 group-hover:scale-110">
                            <i class="fa-solid {{ $reward['icon'] }}"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $reward['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $reward['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-4xl px-6 text-center">
            <p class="reveal mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Loyalty Points</p>
            <h2 class="reveal font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Every Tap Earns You Something
            </h2>
            <p class="reveal mx-auto mt-4 max-w-xl text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                You're already riding. Yatra Points just makes sure it adds up to something.
            </p>

            <div class="reveal mx-auto mt-10 max-w-md rounded-2xl border border-slate-100 bg-white p-7 shadow-sm dark:border-white/10 dark:bg-panel">
                <div class="mb-3 flex items-center justify-between text-sm">
                    <span class="font-semibold text-slate-700 dark:text-slate-200">62 / 100 taps</span>
                    <span class="text-secondary">Next reward: Free ride</span>
                </div>
                <div class="h-2.5 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10">
                    <div class="h-full w-[62%] rounded-full bg-gradient-to-r from-secondary to-accent"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-5xl px-6">
            <div class="reveal mx-auto mb-14 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Rider Tiers</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    The More You Ride, <span class="text-primary dark:text-secondary">The More You Get</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                @foreach ([
                    ['tier' => 'Bronze', 'range' => '0 – 99 taps', 'perk' => 'Standard fares, full app access', 'active' => false, 'icon' => 'fa-medal', 'color' => 'text-amber-600 bg-amber-500/10'],
                    ['tier' => 'Silver', 'range' => '100 – 299 taps', 'perk' => '1 free ride every 100 taps', 'active' => true, 'icon' => 'fa-medal', 'color' => 'text-slate-500 bg-slate-400/10'],
                    ['tier' => 'Gold', 'range' => '300+ taps', 'perk' => 'Priority support + partner offers', 'active' => false, 'icon' => 'fa-medal', 'color' => 'text-yellow-500 bg-yellow-400/10'],
                ] as $tier)
                    <div class="reveal-scale relative rounded-2xl border p-6 text-center shadow-sm {{ $tier['active'] ? 'border-secondary bg-secondary/5 dark:bg-secondary/10' : 'border-slate-100 bg-white dark:border-white/10 dark:bg-panel' }}">
                        @if ($tier['active'])
                            <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-secondary px-3 py-1 text-[10px] font-bold uppercase tracking-wide text-white">Your Tier</span>
                        @endif
                        <div class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl {{ $tier['color'] }}">
                            <i class="fa-solid {{ $tier['icon'] }} text-xl"></i>
                        </div>
                        <h3 class="font-heading text-lg font-bold text-slate-900 dark:text-white">{{ $tier['tier'] }}</h3>
                        <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">{{ $tier['range'] }}</p>
                        <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">{{ $tier['perk'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28"
              x-data="{
                  code: 'YATRA-ANITA82',
                  copied: false,
                  copy() {
                      navigator.clipboard.writeText(this.code).then(() => {
                          this.copied = true;
                          window.showToast('Copied!', 'Your referral code is ready to share.', 'fa-copy');
                          setTimeout(() => this.copied = false, 2000);
                      });
                  },
              }">
        <div class="mx-auto max-w-2xl px-6 text-center">
            <p class="reveal mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Referral Program</p>
            <h2 class="reveal font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Give NPR 50, Get NPR 50
            </h2>
            <p class="reveal mx-auto mt-4 max-w-lg text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                Share your code — when a friend applies for their first card, you both get ride credit.
            </p>

            <div class="reveal mx-auto mt-8 max-w-md rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                <div class="flex items-center gap-3 rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 dark:border-white/20 dark:bg-surface">
                    <span class="flex-1 text-left font-mono text-sm font-bold tracking-wide text-slate-800 dark:text-white" x-text="code"></span>
                    <button type="button" @click="copy()" aria-label="Copy referral code"
                            class="grid h-9 w-9 flex-shrink-0 place-items-center rounded-lg bg-primary text-white transition duration-300 hover:scale-105 dark:bg-secondary">
                        <i class="fa-solid" :class="copied ? 'fa-check' : 'fa-copy'"></i>
                    </button>
                </div>
                <div class="mt-4 flex justify-center gap-3">
                    <a href="#" aria-label="Share on WhatsApp" class="grid h-10 w-10 place-items-center rounded-lg bg-[#25D366]/10 text-[#25D366] transition hover:bg-[#25D366] hover:text-white">
                        <i class="fa-brands fa-whatsapp"></i>
                    </a>
                    <a href="#" aria-label="Share on Facebook" class="grid h-10 w-10 place-items-center rounded-lg bg-[#1877F2]/10 text-[#1877F2] transition hover:bg-[#1877F2] hover:text-white">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                    <a href="#" aria-label="Share on X" class="grid h-10 w-10 place-items-center rounded-lg bg-slate-800/10 text-slate-800 transition hover:bg-slate-800 hover:text-white dark:text-slate-300">
                        <i class="fa-brands fa-x-twitter"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    @include('partials.home.cta')
@endcomponent