BlazorWebAssembly/Pages/Features.razor

@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="relative w-full max-w-sm mx-auto aspect-[4/5] group perspective-1000">
                <!-- Back Card (Reward 2) -->
                <div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-xl flex flex-col transform transition-all duration-500 origin-bottom-left -rotate-6 group-hover:-rotate-12 group-hover:-translate-x-8 group-hover:-translate-y-4">
                    <div class="flex justify-between items-start mb-6">
                        <div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                        </div>
                        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">1100 pts</span>
                    </div>
                    <h3 class="text-xl font-bold text-main mb-2">Free Yearly Basic Membership</h3>
                    <p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
                    <button disabled class="w-full py-3 rounded-xl font-bold bg-body text-muted border border-border cursor-not-allowed">
                        Claim Reward
                    </button>
                </div>
                
                <!-- Front Card (Reward 1) -->
                <div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-2xl flex flex-col transform transition-all duration-500 origin-bottom-right rotate-6 group-hover:rotate-12 group-hover:translate-x-8 group-hover:-translate-y-2 z-10">
                    <div class="flex justify-between items-start mb-6">
                        <div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                        </div>
                        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">100 pts</span>
                    </div>
                    <h3 class="text-xl font-bold text-main mb-2">Free Monthly Basic Membership</h3>
                    <p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
                    <button disabled class="w-full py-3 rounded-xl font-bold bg-primary text-white shadow-lg shadow-primary/20 opacity-90 cursor-default">
                        Claim Reward
                    </button>
                </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="aspect-video rounded-[3rem] shadow-2xl relative overflow-hidden group flex flex-col items-center justify-center cursor-pointer bg-card"
             @onmouseenter="HandleNotifHover" @onmouseleave="HandleNotifLeave">
            <div class="absolute inset-0 bg-primary opacity-5"></div>
            
            <!-- Bell Icon -->
            <div class="relative z-10 transition-transform duration-500 group-hover:-translate-y-8">
                <div class="relative origin-top animate-vibrate group-hover:animate-none group-hover:scale-105 transition-all text-primary">
                    <svg class="w-20 h-20 drop-shadow-xl" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                    <!-- Badge -->
                    <span class="absolute top-1 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-black shadow-md border-2 border-card">1</span>
                </div>
            </div>

            <!-- Notification Card (hidden by default, slides up on hover) -->
            <div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 z-20">
                <div class="bg-body rounded-2xl p-6 shadow-2xl relative overflow-hidden">
                    @if (_isNotifHovered)
                    {
                        <h4 class="text-primary font-black text-xl mb-2">Book Available!</h4>
                        <p class="text-sm text-main font-medium leading-relaxed min-h-[40px]">@_notificationText<span class="inline-block w-1.5 h-4 bg-primary ml-1 animate-pulse"></span></p>
                    }
                </div>
            </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 md:gap-12 mt-8">
            <div class="flex flex-col items-center group cursor-pointer w-48">
                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
                    <img src="https://covers.openlibrary.org/b/isbn/9780743273565-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                </div>
                <div class="h-12 mt-6 flex items-start justify-center">
                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Because you liked Productivity books</span>
                </div>
            </div>
            <div class="flex flex-col items-center group cursor-pointer w-48">
                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
                    <img src="https://covers.openlibrary.org/b/id/14828198-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                </div>
                <div class="h-12 mt-6 flex items-start justify-center">
                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Trending among readers</span>
                </div>
            </div>
            <div class="flex flex-col items-center group cursor-pointer w-48">
                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
                    <img src="https://covers.openlibrary.org/b/isbn/9780060850524-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                </div>
                <div class="h-12 mt-6 flex items-start justify-center">
                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Popular this week</span>
                </div>
            </div>
            <div class="flex flex-col items-center group cursor-pointer w-48">
                <div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
                    <img src="https://covers.openlibrary.org/b/isbn/9780062316097-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                </div>
                <div class="h-12 mt-6 flex items-start justify-center">
                    <span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Based on your recent reads</span>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
    @@keyframes vibrate {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(6deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-6deg); }
    }
    .animate-vibrate {
        animation: vibrate 0.15s linear infinite;
        transform-origin: top center;
    }
</style>

@code {
    private bool _isNotifHovered = false;
    private string _notificationText = "";
    private string _fullText = "Good news! Your wished book is now available for borrowing. Grab it before someone else does!";

    private async Task HandleNotifHover()
    {
        if (_isNotifHovered) return;
        _isNotifHovered = true;
        _notificationText = "";
        
        await Task.Delay(300); // Wait for the card to slide up
        
        for (int i = 0; i < _fullText.Length; i++)
        {
            if (!_isNotifHovered) break; // Stop if mouse left
            _notificationText += _fullText[i];
            StateHasChanged();
            await Task.Delay(25); // Typing speed
        }
    }

    private void HandleNotifLeave()
    {
        _isNotifHovered = false;
        _notificationText = "";
    }
}