import React from 'react'
import { motion } from 'framer-motion'

export default function MeshBackground() {
    return (
        <div className="fixed inset-0 overflow-hidden pointer-events-none">
            {/* Drifting brass blobs */}
            <motion.div
                className="absolute rounded-full"
                style={{
                    width: 420, height: 420,
                    background: 'radial-gradient(circle, rgba(201,169,97,0.12) 0%, transparent 70%)',
                    top: '-10%', left: '-15%',
                }}
                animate={{ x: [0, 60, 0], y: [0, 40, 0] }}
                transition={{ duration: 14, repeat: Infinity, ease: 'easeInOut' }}
            />
            <motion.div
                className="absolute rounded-full"
                style={{
                    width: 360, height: 360,
                    background: 'radial-gradient(circle, rgba(201,169,97,0.08) 0%, transparent 70%)',
                    bottom: '-12%', right: '-10%',
                }}
                animate={{ x: [0, -50, 0], y: [0, -30, 0] }}
                transition={{ duration: 18, repeat: Infinity, ease: 'easeInOut' }}
            />
            {/* Fine grain overlay */}
            <div
                className="absolute inset-0 opacity-[0.025]"
                style={{
                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
                }}
            />
        </div>
    )
}