@page "/features"

<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
    <div class="text-center">
        <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Deep Dive</h2>
        <h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">Advanced <br /> <span class="text-primary italic">Capabilities.</span></h1>
        <p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
            LibraryLuxe is built on a foundation of modern technology to provide you with a seamless and rewarding experience.
        </p>
    </div>

    <!-- Feature Block 1: Loyalty -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
        <div class="order-2 lg:order-1">
            <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
                <div class="absolute inset-0 bg-primary opacity-5"></div>
                <div class="relative z-10 flex flex-col items-center gap-6">
                    <div class="w-24 h-24 bg-primary rounded-3xl shadow-2xl shadow-primary/30 flex items-center justify-center text-white text-4xl font-black">L</div>
                    <span class="text-[10px] font-black text-muted uppercase tracking-[0.4em]">Loyalty Dashboard</span>
                </div>
            </div>
        </div>
        <div class="order-1 lg:order-2">
            <h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Smart Rewards <br/> Ecosystem</h3>
            <p class="text-lg text-muted leading-relaxed mb-8">
                Our proprietary loyalty system rewards positive reading habits. By gamifying the library experience, we've increased on-time returns by 40% and overall community engagement by 60%.
            </p>
            <ul class="space-y-4">
                <li class="flex items-center gap-4">
                    <div class="w-2 h-2 rounded-full bg-primary"></div>
                    <span class="font-bold text-main">Point Multipliers for Gold Members</span>
                </li>
                <li class="flex items-center gap-4">
                    <div class="w-2 h-2 rounded-full bg-primary"></div>
                    <span class="font-bold text-main">Milestone Badges & Achievements</span>
                </li>
                <li class="flex items-center gap-4">
                    <div class="w-2 h-2 rounded-full bg-primary"></div>
                    <span class="font-bold text-main">Internal Rewards Marketplace</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- Feature Block 2: Notifications -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
        <div>
            <h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Instant Alerts <br/> via Firebase</h3>
            <p class="text-lg text-muted leading-relaxed mb-8">
                Stay connected with real-time push notifications. Whether it's a book you've wishlisted becoming available or a reminder about a due date, we ensure you never miss a beat.
            </p>
            <div class="grid grid-cols-2 gap-6">
                <div class="p-6 bg-card rounded-2xl border border-border">
                    <h5 class="font-black text-primary text-xs uppercase mb-2">Back in Stock</h5>
                    <p class="text-xs text-muted">Get alerted when high-demand titles return.</p>
                </div>
                <div class="p-6 bg-card rounded-2xl border border-border">
                    <h5 class="font-black text-primary text-xs uppercase mb-2">Due Soon</h5>
                    <p class="text-xs text-muted">Gentle reminders 48h before expiry.</p>
                </div>
            </div>
        </div>
        <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
            <div class="absolute inset-0 bg-emerald-500 opacity-5"></div>
            <div class="relative z-10 flex flex-col items-center gap-6">
                <div class="w-16 h-16 bg-emerald-500 rounded-2xl shadow-xl shadow-emerald-500/20 flex items-center justify-center text-white">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <span class="text-[10px] font-black text-muted uppercase tracking-[0.4em]">Real-time Infrastructure</span>
            </div>
        </div>
    </div>

    <!-- Recommendation System -->
    <section class="bg-card p-20 rounded-[4rem] border border-border text-center">
        <h3 class="text-4xl font-black text-main mb-8 uppercase tracking-tight italic">Personalized Recommendations</h3>
        <p class="text-xl text-muted max-w-3xl mx-auto mb-12">
            Our intelligent algorithms analyze your reading history and preferences to suggest your next favorite book. The more you read, the smarter it gets.
        </p>
        <div class="flex flex-wrap justify-center gap-8 opacity-40 grayscale">
            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
            <div class="w-32 h-44 bg-body rounded-xl border border-border"></div>
        </div>
    </section>
</div>