'use client';

export default function BackgroundElements() {
    return (
        <>
            {/* Maximalist Background Elements */}
            <div className="fixed inset-0 opacity-10" data-oid="el66nr5">
                <div
                    className="absolute top-10 left-10 w-32 h-32 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full blur-xl"
                    data-oid="9hklq-v"
                ></div>
                <div
                    className="absolute top-1/4 right-20 w-24 h-24 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full blur-lg"
                    data-oid=".d15w--"
                ></div>
                <div
                    className="absolute bottom-1/4 left-1/3 w-40 h-40 bg-gradient-to-r from-green-500 to-yellow-500 rounded-full blur-2xl"
                    data-oid="0hbd8ub"
                ></div>
                <div
                    className="absolute bottom-10 right-10 w-28 h-28 bg-gradient-to-r from-red-500 to-orange-500 rounded-full blur-lg"
                    data-oid="p-snpfb"
                ></div>
            </div>

            {/* Complex Pattern Overlay */}
            <div className="fixed inset-0 opacity-5" data-oid="3.k-57l">
                <div
                    className="absolute inset-0"
                    style={{
                        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
                    }}
                    data-oid="_dwnxyj"
                ></div>
            </div>
        </>
    );
}