'use client';

export default function ModernBackground() {
    return (
        <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
            {/* Clean base background */}
            <div className="absolute inset-0 bg-gradient-to-br from-white via-red-50/10 to-white" />

            {/* Subtle gradient orbs - red tones but very soft */}
            <div
                className="absolute top-0 left-0 w-[800px] h-[800px] bg-gradient-to-br from-red-100/25 via-rose-100/20 to-transparent rounded-full blur-3xl"
            />

            <div
                className="absolute bottom-0 right-0 w-[900px] h-[900px] bg-gradient-to-tl from-red-100/20 via-pink-100/15 to-transparent rounded-full blur-3xl"
            />

            {/* Minimal grid pattern - very subtle */}
            <div
                className="absolute inset-0 opacity-[0.008]"
                style={{
                    backgroundImage: `
                        linear-gradient(to right, #94a3b8 1px, transparent 1px),
                        linear-gradient(to bottom, #94a3b8 1px, transparent 1px)
                    `,
                    backgroundSize: '100px 100px'
                }}
            />

            {/* Soft vignette effect */}
            <div className="absolute inset-0 bg-gradient-radial from-transparent via-transparent to-white/40"
                style={{
                    background: 'radial-gradient(circle at center, transparent 0%, transparent 60%, rgba(255,255,255,0.3) 100%)'
                }}
            />

            {/* Top fade for smooth header transition */}
            <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-white via-white/60 to-transparent" />
        </div>
    );
}
