import streamlit as st
import altair as alt
import pandas as pd

# Custom CSS for background, fonts, and text styling
st.markdown("""
    <style>
    /* Set a soft background color */
    body {
        background-color: #eef2f7;
    }
    /* Style for main title */
    h1 {
        color: #d63384;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
    }
    /* Style for headers */
    h2 {
        color: #808080;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-top: 30px;
    }
    h3 {
        color: #20B2AA;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        margin-top: 20px;
    }
    /* Style for subheaders */
    .custom-subheader {
        color: #2ca02c;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-bottom: 15px;
    }
    /* Paragraph styling */
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        color: #F0FFF0; /* Darker text color for better visibility */
        margin-bottom: 20px;
    }
    /* List styling with checkmark bullets */
    .icon-bullet {
        list-style-type: none;
        padding-left: 20px;
    }
    .icon-bullet li {
        font-family: 'Georgia', serif;
        font-size: 1.1em;
        margin-bottom: 10px;
        color: #FFFFF0; /* Darker text color for better visibility */
    }
    .icon-bullet li::before {
        content: "✔️";
        padding-right: 10px;
        color: #17a2b8;
    }
    /* Sidebar styling */
    .sidebar .sidebar-content {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 15px;
    }
    .sidebar h2 {
        color: #495057;
    }
    </style>
    """, unsafe_allow_html=True)

# Sidebar for navigation
st.sidebar.title("Navigation")
st.sidebar.markdown("Use the sidebar to navigate through different sections.")

# Title Section
st.title("1 : INTRODUCTION TO STATISTICS")
st.markdown("""
    In this section, we'll explore the basics of data analysis using Python. **Data Analysis** involves collecting, cleaning, and analyzing data to extract valuable insights. Let's start by understanding what we mean by *data*.
""", unsafe_allow_html=True)

# Header Section
st.header("What does the term 'data' refer to?")
st.subheader("DATA")

st.markdown("""
    Data refers to a collection of information gathered from various sources. Here are a few examples:
""", unsafe_allow_html=True)

st.markdown("""
<ul class="icon-bullet">
    <li>Images</li>
    <li>Text</li>
    <li>Videos</li>
    <li>Audio recordings</li>
</ul>
""", unsafe_allow_html=True)

# Data Classification Section with a chart
st.header("Data Classification")
st.subheader("Structured Data")
st.markdown("""
    Structured data is organized and formatted, making it easy to search, analyze, and store in databases. Common examples include:
    <ul class="icon-bullet">
        <li>Excel Documents</li>
        <li>SQL Databases</li>
    </ul>
""", unsafe_allow_html=True)

st.image('https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/dSbyOXaQ6N_Kg2TLxgEyt.png', width=400)

# Visualization example for Structured Data
data = pd.DataFrame({
    'Category': ['Excel', 'SQL', 'CSV', 'JSON'],
    'Count': [45, 35, 30, 40]
})
chart = alt.Chart(data).mark_bar().encode(
    x=alt.X('Category', title='Data Format'),
    y=alt.Y('Count', title='Count'),
    color=alt.Color('Category', legend=None)
).properties(
    title='Structured Data Types',
    width=500,
    height=300
).configure_title(
    fontSize=18,
    anchor='middle',
    font='Roboto',
    color='#343a40'
)
st.altair_chart(chart)

st.subheader("Unstructured Data")
st.markdown("""
    Unstructured data doesn't follow a specific format and is often difficult to organize. Examples include:
    <ul class="icon-bullet">
        <li>Images</li>
        <li>Videos</li>
        <li>Text documents</li>
        <li>Social Media Feeds</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/xhaNBRanDaj8esumqo9hl.png", width=400)

st.subheader("Semi-Structured Data")
st.markdown("""
    Semi-structured data contains elements of both structured and unstructured data. Examples include:
    <ul class="icon-bullet">
        <li>CSV Files</li>
        <li>JSON Files</li>
        <li>Emails</li>
        <li>HTML Documents</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/Nupc6BePInRVo9gJwLfWH.png", width=400)

# Introduction to Statistics
st.title("2 : INTRODUCTION TO STATISTICS")
st.markdown("""
    _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting, and presenting data. It can be divided into two main categories:_
""", unsafe_allow_html=True)

# Descriptive Statistics Section with interactive elements
st.subheader("2.1 Descriptive Statistics")
st.markdown("""
    Descriptive statistics summarize and describe the main features of a dataset. Key concepts include:
    <ul class="icon-bullet">
        <li>Measures of Central Tendency (Mean, Median, Mode)</li>
        <li>Measures of Dispersion (Range, Variance, Standard Deviation)</li>
        <li>Data Distributions (e.g., Gaussian, Random, Normal)</li>
    </ul>
""", unsafe_allow_html=True)

# Example of an interactive chart for Central Tendency
values = st.slider('Select a range of values', 0, 100, (25, 75))
mean_value = sum(values) / len(values)
st.write(f"Mean Value: {mean_value}")

# Inferential Statistics Section
st.subheader("2.2 Inferential Statistics")
st.markdown("""
    Inferential statistics involve making predictions or inferences about a population based on a sample. These methods are used to test hypotheses and estimate population parameters.
""", unsafe_allow_html=True)