import streamlit as st
import streamlit.components.v1 as components

def inject_particles_js():
    particles_html = """
        <div id="particles-js" style="position: fixed; width: 100%; height: 100%; z-index: -1;"></div>
        <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
        <script>
            particlesJS("particles-js", {
                "particles": {
                    "number": { "value": 100, "density": { "enable": true, "value_area": 800 } },
                    "color": { "value": "#f3ec78" },
                    "shape": { "type": "circle" },
                    "opacity": { "value": 0.5, "random": false },
                    "size": { "value": 3, "random": true },
                    "line_linked": { "enable": true, "distance": 150, "color": "#f3ec78", "opacity": 0.4, "width": 1 },
                    "move": { "enable": true, "speed": 2, "direction": "none", "random": false, "straight": false, "out_mode": "out" }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" } },
                    "modes": { "repulse": { "distance": 100 }, "push": { "particles_nb": 4 } }
                }
            });
        </script>
    """
    components.html(particles_html, height=1900, scrolling=True)

def inject_bootstrap_and_custom_css():
    st.markdown(
        """
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
        <style>
            body, html, * {
                font-family: 'Poppins', sans-serif;
            }
            body {
                background-color: #0c1926;
            }
            .card, footer{
                background-color: #0c1926;
                color: #ffffff;
            }
            .stIFrame{
                position: absolute;
            }
            h1, h2 {
                font-size: 2.5rem;
            }
            p, span, div, a, button {
                font-weight: 400;
            }
            .stMainBlockContainer{
                padding-top: 48px !important;
            }
            p , .stFileUploaderFileName, small{
                font-weight: 600;
                color: #ffffff !important;
            }
            section[data-testid="stFileUploaderDropzone"]{
                color: #ffffff !important;
                background-color: #0c1926 !important;
            }
            .stButton>button{
                background: linear-gradient(45deg, #f3ec78, #af4261) !important;
                color: #0c1926 !important;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 0.25rem;
                font-size: 1rem;
                font-weight: 600;
            }
            .gradient-text {
                background-color: red;
                background-image: linear-gradient(45deg, #f3ec78, #af4261);
                background-size: 100%;
                background-repeat: repeat;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent; 
                -moz-background-clip: text;
                -moz-text-fill-color: transparent;
            }
        </style>
        """,
        unsafe_allow_html=True,
    )