/**
 * ALTERNATIVE PARTICLE CONFIGURATIONS
 * Berbagai preset dan custom configuration
 * Gunakan salah satu sesuai kebutuhan
 */

// ================================================
// PRESET 1: BUBBLES (CURRENT - Recommended)
// ================================================
const bubblesConfig = {
    preset: "bubbles",
    particles: {
        number: { value: 60 },
        color: {
            value: ["#9333ea", "#ec4899", "#a78bfa", "#f472b6"]
        },
        links: {
            enable: true,
            distance: 150,
            color: "#9333ea",
            opacity: 0.3
        }
    }
};

// ================================================
// PRESET 2: FIREFLY (Elegant & Minimal)
// ================================================
const fireflyConfig = {
    preset: "firefly",
    particles: {
        number: { value: 40 },
        color: {
            value: ["#ec4899", "#9333ea"]
        },
        move: {
            speed: 1
        }
    }
};

// ================================================
// PRESET 3: LINKS ONLY (Minimalist)
// ================================================
const linksOnlyConfig = {
    preset: "links",
    particles: {
        number: { value: 50 },
        color: {
            value: "#9333ea"
        },
        opacity: { value: 0.5 },
        links: {
            enable: true,
            distance: 120,
            opacity: 0.4,
            width: 1.5
        }
    }
};

// ================================================
// PRESET 4: STARS (Cosmic Effect)
// ================================================
const starsConfig = {
    preset: "stars",
    particles: {
        number: { value: 80 },
        color: {
            value: ["#a78bfa", "#f472b6", "#9333ea"]
        },
        size: {
            value: { min: 0.5, max: 2 }
        }
    }
};

// ================================================
// PRESET 5: SNOW (Soft & Calm)
// ================================================
const snowConfig = {
    preset: "snow",
    particles: {
        number: { value: 70 },
        color: {
            value: ["#9333ea", "#ec4899"]
        },
        opacity: {
            value: 0.6
        }
    }
};

// ================================================
// CUSTOM 1: HIGH ENERGY (Heavy Effects)
// ================================================
const highEnergyConfig = {
    background: { color: { value: "transparent" } },
    fullScreen: { enable: false, zIndex: 0 },
    particles: {
        number: {
            value: 100,
            density: { enable: true, value_area: 800 }
        },
        color: {
            value: ["#9333ea", "#ec4899", "#a78bfa", "#f472b6", "#c084fc"]
        },
        shape: { type: "circle" },
        opacity: {
            value: { min: 0.2, max: 0.8 },
            animation: {
                enable: true,
                speed: 2,
                minimumValue: 0.1,
                sync: false
            }
        },
        size: {
            value: { min: 1, max: 4 },
            animation: {
                enable: true,
                speed: 4,
                minimumValue: 0.5,
                sync: false
            }
        },
        move: {
            enable: true,
            speed: { min: 1, max: 3 },
            direction: "none",
            random: true,
            straight: false,
            outModes: { default: "bounce" }
        },
        links: {
            enable: true,
            distance: 200,
            color: "#9333ea",
            opacity: 0.4,
            width: 1.5
        },
        interactivity: {
            events: {
                onHover: { enable: true, mode: "repulse" },
                onClick: { enable: true, mode: "push" },
                resize: { enable: true }
            },
            modes: {
                repulse: { distance: 250, duration: 0.4, speed: 1.5 },
                push: { quantity: 10 }
            }
        }
    },
    detectRetina: true
};

// ================================================
// CUSTOM 2: MINIMAL (Light & Clean)
// ================================================
const minimalConfig = {
    background: { color: { value: "transparent" } },
    fullScreen: { enable: false, zIndex: 0 },
    particles: {
        number: {
            value: 20,
            density: { enable: true, value_area: 1000 }
        },
        color: {
            value: "#9333ea"
        },
        shape: { type: "circle" },
        opacity: {
            value: 0.5,
            animation: { enable: false }
        },
        size: {
            value: { min: 1, max: 2 },
            animation: { enable: false }
        },
        move: {
            enable: true,
            speed: { min: 0.3, max: 0.8 },
            direction: "none",
            random: true,
            straight: false,
            outModes: { default: "out" }
        },
        links: {
            enable: false
        },
        interactivity: {
            events: {
                onHover: { enable: true, mode: "repulse" },
                onClick: { enable: false },
                resize: { enable: true }
            },
            modes: {
                repulse: { distance: 150, duration: 0.4, speed: 1 }
            }
        }
    },
    detectRetina: true
};

// ================================================
// CUSTOM 3: GRADIENT WAVE (Dynamic)
// ================================================
const gradientWaveConfig = {
    background: { color: { value: "transparent" } },
    fullScreen: { enable: false, zIndex: 0 },
    particles: {
        number: {
            value: 50,
            density: { enable: true, value_area: 800 }
        },
        color: {
            value: ["#ec4899", "#a78bfa", "#9333ea"]
        },
        shape: { type: "circle" },
        opacity: {
            value: { min: 0.3, max: 0.7 },
            animation: {
                enable: true,
                speed: 1.5,
                minimumValue: 0.1,
                sync: true  // Sync untuk wave effect
            }
        },
        size: {
            value: { min: 1.5, max: 3.5 },
            animation: {
                enable: true,
                speed: 3,
                minimumValue: 0.5,
                sync: true  // Sync untuk wave effect
            }
        },
        move: {
            enable: true,
            speed: { min: 0.5, max: 1.5 },
            direction: "bottom",  // Gerak ke bawah
            random: true,
            straight: false,
            outModes: { default: "bounce" }
        },
        links: {
            enable: true,
            distance: 180,
            color: "#ec4899",
            opacity: 0.3,
            width: 1,
            triangles: { enable: false }
        },
        interactivity: {
            events: {
                onHover: { enable: true, mode: "repulse" },
                onClick: { enable: true, mode: "push" },
                resize: { enable: true }
            },
            modes: {
                repulse: { distance: 200, duration: 0.4, speed: 1.2 },
                push: { quantity: 8 }
            }
        }
    },
    detectRetina: true
};

// ================================================
// CUSTOM 4: AMBIENT (Subtle Background)
// ================================================
const ambientConfig = {
    background: { color: { value: "transparent" } },
    fullScreen: { enable: false, zIndex: 0 },
    particles: {
        number: {
            value: 30,
            density: { enable: true, value_area: 1200 }
        },
        color: {
            value: "#9333ea"
        },
        shape: { type: "circle" },
        opacity: {
            value: { min: 0.2, max: 0.4 },
            animation: {
                enable: true,
                speed: 0.5,
                minimumValue: 0.1,
                sync: false
            }
        },
        size: {
            value: { min: 1, max: 2.5 },
            animation: {
                enable: true,
                speed: 2,
                minimumValue: 0.5,
                sync: false
            }
        },
        move: {
            enable: true,
            speed: { min: 0.2, max: 0.6 },
            direction: "none",
            random: true,
            straight: false,
            outModes: { default: "out" }
        },
        links: {
            enable: false
        },
        interactivity: {
            events: {
                onHover: { enable: true, mode: "repulse" },
                onClick: { enable: false },
                resize: { enable: true }
            },
            modes: {
                repulse: { distance: 120, duration: 0.4, speed: 0.8 }
            }
        }
    },
    detectRetina: true
};

// ================================================
// CUSTOM 5: PRISMATIC (Bright & Shiny)
// ================================================
const prismaticConfig = {
    background: { color: { value: "transparent" } },
    fullScreen: { enable: false, zIndex: 0 },
    particles: {
        number: {
            value: 80,
            density: { enable: true, value_area: 700 }
        },
        color: {
            value: ["#a78bfa", "#f472b6", "#9333ea", "#c084fc", "#ec4899"]
        },
        shape: { type: "circle" },
        opacity: {
            value: { min: 0.4, max: 0.8 },
            animation: {
                enable: true,
                speed: 2,
                minimumValue: 0.2,
                sync: false
            }
        },
        size: {
            value: { min: 2, max: 4 },
            animation: {
                enable: true,
                speed: 3,
                minimumValue: 1,
                sync: false
            }
        },
        move: {
            enable: true,
            speed: { min: 0.8, max: 2.5 },
            direction: "none",
            random: true,
            straight: false,
            outModes: { default: "bounce" }
        },
        links: {
            enable: true,
            distance: 200,
            color: "#a78bfa",
            opacity: 0.4,
            width: 2
        },
        interactivity: {
            events: {
                onHover: { enable: true, mode: "repulse" },
                onClick: { enable: true, mode: "push" },
                resize: { enable: true }
            },
            modes: {
                repulse: { distance: 300, duration: 0.4, speed: 2 },
                push: { quantity: 15 }
            }
        }
    },
    detectRetina: true
};

/**
 * HOW TO USE:
 * 
 * Di particles-config.js, ganti config object dengan salah satu dari:
 * - bubblesConfig (current)
 * - fireflyConfig
 * - linksOnlyConfig
 * - starsConfig
 * - snowConfig
 * - highEnergyConfig
 * - minimalConfig
 * - gradientWaveConfig
 * - ambientConfig
 * - prismaticConfig
 * 
 * Contoh:
 * await tsParticles.load("tsparticles", highEnergyConfig);
 */

// Export untuk use di particles-config.js
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        bubblesConfig,
        fireflyConfig,
        linksOnlyConfig,
        starsConfig,
        snowConfig,
        highEnergyConfig,
        minimalConfig,
        gradientWaveConfig,
        ambientConfig,
        prismaticConfig
    };
}