import streamlit as st

# Custom CSS to enhance the UI
st.markdown(
    """
    <style>
        .title {
            font-size: 40px;
            color: #4CAF50;
            text-align: center;
            margin-bottom: 20px;
        }
        .header {
            font-size: 30px;
            color: #FF5722;
            margin-bottom: 20px;
        }
        .sidebar-title {
            color: #673AB7;
            font-size: 24px;
        }
        .container {
            background-color: #E3F2FD;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }
        .button {
            background-color: #FF5722;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        .button:hover {
            background-color: #E64A19;
        }
        .sidebar {
            background-color: #F3E5F5;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
    """,
    unsafe_allow_html=True
)

st.image("https://via.placeholder.com/300", width=300, caption="Munir Bhai")

# Add title and header with custom styles
st.markdown("<div class='title'>Hi! Munir Bhai...</div>", unsafe_allow_html=True)
st.markdown("<div class='header'>Welcome to the Interactive Form</div>", unsafe_allow_html=True)

st.video("https://www.youtube.com/watch?v=gK03De6nb1Y")

# Form container
st.markdown("<div class='container'>", unsafe_allow_html=True)

# Text input
name = st.text_input("Enter your name")

# Number input
age = st.number_input("Enter your age", min_value=0, max_value=120, step=1)

# Radio button for gender selection
gender = st.radio("Enter your gender", ["Male", "Female"], horizontal=True)

# Select box for city
city = st.selectbox("Enter your city", ["None", "Delhi", "Mumbai", "Kolkata", "Chennai"])

# Select box for qualification
qualification = st.selectbox(
    "Enter your qualification", ["None", "B.Tech", "M.Tech", "PhD"]
)

# Submit button
if st.button("Submit", key="submit-button"):
    st.markdown(f"<div class='header'>Hi, {name} Bhai!</div>", unsafe_allow_html=True)
    st.write(f"Your age is {age} years old.")
    st.write(f"Your gender is {gender}.")
    if city != "None":
        st.write(f"You live in {city}.")
    if qualification != "None":
        st.balloons()
        st.write(f"Your qualification is {qualification}.")

# Close container
st.markdown("</div>", unsafe_allow_html=True)

# Sidebar content
st.sidebar.markdown(
    """
    <div class='sidebar'>
        <div class='sidebar-title'>Hi {name} Bhai...</div>
        <div class='sidebar-title'>Kaise ho Bhai?</div>
    </div>
    """,
    unsafe_allow_html=True
)