import streamlit as st
import pandas as pd
import numpy as np

custom_css = """
<style>
    html, body, [data-testid="stAppViewContainer"] {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: white;  /* Ensures all text is readable */
    }
    h2, h3 {
        color: #FFD700; /* Gold color for headings */
    }
    p {
        color: #FFFFFF; /* White text for paragraphs */
    }
    .stButton>button {
        background-color: #4CAF50; /* Green */
        color: white;
        padding: 10px 24px;
        border: none;
        border-radius: 5px;
        text-align: center;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .stButton>button:hover {
        background-color: #45a049; /* Darker Green on hover */
        color: white;
    }
    .stButton>div:nth-child(1)>button {
        background-color: #2196F3; /* Blue */
    }
    .stButton>div:nth-child(2)>button {
        background-color: #f44336; /* Red */
    }
    .stButton>div:nth-child(3)>button {
        background-color: #FF9800; /* Orange */
    }
</style>
"""

# Inject the CSS into the app
st.markdown(custom_css, unsafe_allow_html=True)

st.markdown("<h2 style='text-align: center; color: Black;'>📊🔍What is Data </h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Raw facts, figures, or other information gathered for analysis, reference, or use in decision-making processes are called as data. It serves as the foundation for several processes in a variety of domains, such as machine learning, which uses to provide insights and train models."
    "</p>", 
    unsafe_allow_html=True
)
st.markdown("Data can come in various forms, including text, numbers, images, videos, or signals, and is usually categorized into three main types:")
st.markdown("1. Structured data")
st.markdown("2. Unstructured data")
st.markdown("3. Semi-Structured data")

st.markdown("<h3 style='text-align: left; color: Black;'>📊Structured data </h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Organized in a predefined format, typically in rows and columns (e.g., spreadsheets, relational databases)."
    "</p>", 
    unsafe_allow_html=True
)

st.markdown("<h3 style='text-align: left; color: Black;'>🖼️Unstructured data </h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Does not follow a predefined structure, such as text documents, images, and videos."
    "</p>", 
    unsafe_allow_html=True
)

st.markdown("<h3 style='text-align: left; color: Black;'>🗂️Semi-Structured data </h3>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "Has elements of both structured and unstructured data, like JSON or XML files."
    "</p>", 
    unsafe_allow_html=True
)

# Buttons for each stage
st.markdown("### Types of Data:")
col1, col2,col3 = st.columns(3)

with col1:
    if st.button("EXCEL"):
        st.switch_page("pages/excel_Files.py")
    if st.button("CSV"):
        st.switch_page("pages/info_of_CSV.py")

with col2:
    if st.button("XML"):
        st.switch_page("pages/Info_of_XML.py")
    if st.button("JSON"):
        st.switch_page("pages/Info_of_Json.py")
    if st.button("HTML"):
        st.switch_page("pages/Info_of_HTML.py")
with col3:
    if st.button("IMAGE"):
         st.switch_page("pages/Info _of_Image.py")

    if st.button("Video"):
        st.switch_page("pages/Info_of_Video.py")