@namespace MidrandBooks.Components

<style>
    .mesh-bg {
        background-image: radial-gradient(at 0% 0%, rgba(245, 158, 11, 0.08) 0, transparent 60%), 
                          radial-gradient(at 50% 0%, rgba(20, 184, 166, 0.06) 0, transparent 60%), 
                          radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.08) 0, transparent 60%);
        background-color: #030712;
    }

    @@keyframes float-up {
        0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: var(--float-opacity, 0.2);
        }
        90% {
            opacity: var(--float-opacity, 0.2);
        }
        100% {
            transform: translateY(-20vh) rotate(360deg);
            opacity: 0;
        }
    }
</style>

<div id="animated-bg" class="fixed inset-0 -z-50 overflow-hidden mesh-bg">
    <!-- Abstract Elegant Soft Warm Gradients -->
    <div class="absolute -top-[30%] -left-[10%] h-[80%] w-[60%] rounded-full bg-amber-500/5 blur-[120px] animate-pulse" 
         style="animation-duration: 14s;" />
    <div class="absolute -bottom-[20%] -right-[5%] h-[80%] w-[50%] rounded-full bg-sky-500/4 blur-[150px] animate-pulse" 
         style="animation-duration: 20s;" />
    <div class="absolute top-[40%] left-[30%] h-[300px] w-[300px] rounded-full bg-orange-400/4 blur-[100px] animate-pulse" 
         style="animation-duration: 16s;" />

    <!-- Grid Pattern Overlay -->
    <div class="absolute inset-0 opacity-[0.4]" 
         style="background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 24px 24px;" />

    <!-- Floating Particles/Pages -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
        @for (int i = 0; i < PageCount; i++)
        {
            var config = PageConfigs[i];
            <div class="absolute rounded-lg border border-slate-900/10 bg-white/70 backdrop-blur-[1px] transition-transform duration-1000 ease-out shadow-sm"
                 style="width: @(config.Size)px;
                        height: @(config.Size * 1.3)px;
                        left: @(config.Left)%;
                        bottom: -100px;
                        opacity: @(config.Opacity);
                        transform: rotate(@(config.Rotation)deg);
                        animation: float-up @(config.Duration)s linear infinite;
                        animation-delay: @(config.Delay)s;">
                <!-- Micro lines inside floating "pages" to represent book texture -->
                <div class="w-4/5 h-[1.5px] bg-slate-900/10 my-2 mx-auto rounded" />
                <div class="w-3/5 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
                <div class="w-1/2 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
            </div>
        }
    </div>
</div>

@code {
    private const int PageCount = 10;
    private List<PageConfig> PageConfigs { get; set; } = new();

    protected override void OnInitialized()
    {
        var random = new Random(42); // Seeded random for consistent luxury aesthetic
        for (int i = 0; i < PageCount; i++)
        {
            PageConfigs.Add(new PageConfig
            {
                Size = random.NextDouble() * 30 + 15,
                Left = random.NextDouble() * 100,
                Delay = random.NextDouble() * 15,
                Duration = random.NextDouble() * 25 + 35,
                Opacity = random.NextDouble() * 0.12 + 0.04,
                Rotation = random.NextDouble() * 360
            });
        }
    }

    private class PageConfig
    {
        public double Size { get; set; }
        public double Left { get; set; }
        public double Delay { get; set; }
        public double Duration { get; set; }
        public double Opacity { get; set; }
        public double Rotation { get; set; }
    }
}