import streamlit as st

# Set page configuration
st.set_page_config(page_title="Innomatics Online Trainer Bot", layout="centered")

# Custom CSS styling
st.markdown("""
    <style>
    .main {
        background: linear-gradient(135deg, #430089 0%, #82ffa1 100%);
        padding: 2rem;
        font-family: 'Segoe UI', sans-serif;
    }
    .stButton>button {
        background: #ffffff10;
        border: 2px solid #ffffff50;
        color: white;
        font-size: 18px;
        font-weight: 600;
        padding: 0.8em 1.2em;
        border-radius: 12px;
        width: 100%;
        transition: 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    .stButton>button:hover {
        background: #ffffff30;
        border-color: #fff;
        color: #ffffff;
    }
    h1, h3, p {
        color: #ffffff;
        text-align: center;
    }
    hr {
        border: 1px solid #ffffff50;
        margin: 2em 0;
    }
    </style>
""", unsafe_allow_html=True)

# Header content
st.title("🤖 Innomatics Online Trainer Bot")
st.markdown("### 👋 Welcome to your personalized learning companion!")
st.markdown("This smart assistant helps you navigate your doubts in Data Science and related fields.")

st.markdown("## 📚 Choose a module where you need help:")

# Grid of subject buttons
subjects = [
    ("Python", "pages/python.py"),
    ("Machine Learning", "pages/machine_learning.py"),
    ("Deep Learning", "pages/deep_learning.py"),
    ("Statistics", "pages/statistics.py"),
    ("GenAI", "pages/gen_ai.py"),
    ("SQL", "pages/sql.py")
]

# Render buttons in a grid (3 per row)
for i in range(0, len(subjects), 2):
    cols = st.columns(2)
    for j in range(2):
        if i + j < len(subjects):
            with cols[j]:
                if st.button(subjects[i + j][0]):
                    st.switch_page(subjects[i + j][1])

# Footer note
st.markdown("---")
st.markdown("🧠 *Empowering your journey through every concept, one question at a time.*")