import streamlit as st

# Page configuration
st.set_page_config(
    page_title="HomePage",
    page_icon="🚀",
    layout="wide"
)

# Global CSS for consistent styling
st.markdown(""" 
    <style>
    h1 {
        text-align: center;
        color: #BB3385;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .description {
        text-align: center;
        font-size: 18px;
        margin-bottom: 30px;
        color: #333333;
    }
    .centered-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        color: #BB3385;
        font-weight: bold;
        text-align: center;
    }
    .steps-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 40px;
    }
    .step {
        width: 200px;
        height: 80px;
        margin: 10px;
        font-size: 18px;
        color: black;
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    }
    .step:nth-child(1) { background-color: #32CD32; } /* Light Red */
    .step:nth-child(2) { background-color: #1E90FF; } /* Gold */
    .step:nth-child(3) { background-color: #FF8C00; } /* Light Green */
    .step:nth-child(4) { background-color: #FF0000; } /* Light Blue */
    .step:nth-child(5) { background-color: #9400D3; } /* Light Pink */  
    .step:nth-child(6) { background-color: #0000FF; } /* Light Salmon */
    .step:nth-child(7) { background-color: #808080; } /* Thistle */
    .step:nth-child(8) { background-color: #FF00FF; } /* Light Yellow */
    .step:nth-child(9) { background-color: #FF6347; } /* Light Cyan */
    .step:nth-child(10) { background-color:	#00FFFF; } /* Wheat */
    </style>
""", unsafe_allow_html=True)

# Render the title
st.markdown('<h1> Life Cycle of ML💡</h1>', unsafe_allow_html=True)

# Render the steps layout
st.markdown(
    """
    <div class="steps-container">
        <div class="step">1. Problem Statement</div>
        <div class="step">2. Data Collection</div>
        <div class="step">3. Simple EDA</div>
        <div class="step">4. Data Preprocessing</div>
        <div class="step">5. EDA</div>
        <div class="step">6. Feature Engineering</div>
        <div class="step">7. Model Training</div>
        <div class="step">8. Model Testing</div>
        <div class="step">9. Model Deployment</div>
        <div class="step">10. Monitoring</div>
    </div>
    """,
    unsafe_allow_html=True
)