pages/04_data.py

import streamlit as st

def main():
    st.set_page_config(page_title="Data Demystified", page_icon="📊", layout="wide")
    
    # Custom CSS for better engagement
    st.markdown("""
    <style>
    .highlight-box {
        padding: 1rem;
        border-radius: 10px;
        background: #f0f2f6;
        margin: 1rem 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .fun-fact {
        color: #2e7d32;
        font-weight: 500;
    }
    .emoji-header {
        font-size: 2.5rem !important;
        margin-bottom: 1rem;
    }
    </style>
    """, unsafe_allow_html=True)

    pages = {
        "🏠 Introduction": intro_page,
        "📚 Data Types Overview": types_page,
        "🗂️ Structured Data": structured_page,
        "🧩 Semi-Structured Data": semi_structured_page,
        "🎨 Unstructured Data": unstructured_page
    }

    with st.sidebar:
        st.title("Navigation")
        page = st.radio("Go to", list(pages.keys()))
    
    pages[page]()

def intro_page():
    st.markdown('<div class="emoji-header">📊 Welcome to Data Science Fundamentals</div>', unsafe_allow_html=True)
    
    col1, col2 = st.columns([3, 2])
    with col1:
        st.write("""
        ### What is Data Science?
        Data Science is the art of extracting meaningful insights from raw data - 
        like being a digital detective uncovering hidden patterns in the numbers!
        
        **Did you know?** 🤔  
        <span class="fun-fact">Every day, we create 2.5 quintillion bytes of data - 
        that's equivalent to 250,000 Libraries of Congress!</span>
        """, unsafe_allow_html=True)
        
        st.markdown("""
        ### Why It Matters:
        - Predict future trends 🌟
        - Solve complex problems 🧩
        - Power AI innovations 🤖
        - Drive business decisions 💼
        """)
    
    with col2:
        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/qpmLGi47ucDCWYEi8eZhE.png", 
                caption="Data is Everywhere!", width=300)

def types_page():
    st.header("📦 The Three Data Superheroes")
    
    with st.expander("🔍 Quick Comparison"):
        st.table({
            "Type": ["Structured", "Semi-Structured", "Unstructured"],
            "Organization": ["Perfectly Organized", "Partially Organized", "Chaotic Creativity"],
            "Examples": ["SQL Databases, Excel", "JSON, XML, CSV", "Images, Videos, Text"]
        })
    
    cols = st.columns(3)
    data_types = [
        ("🗂️ Structured", "Neat rows & columns", "#e3f2fd"),
        ("🧩 Semi-Structured", "Flexible tags & markers", "#f0f4c3"),
        ("🎨 Unstructured", "Creative free-form", "#ffcdd2")
    ]
    
    for col, (icon, desc, color) in zip(cols, data_types):
        with col:
            st.markdown(f"""
            <div style="background: {color}; padding: 1rem; border-radius: 10px;">
                <h3>{icon} {desc.split()[0]}</h3>
                <p>{' '.join(desc.split()[1:])}</p>
            </div>
            """, unsafe_allow_html=True)

def structured_page():
    st.header("🗂️ Structured Data: The Organized Perfectionist")
    
    with st.container():
        st.markdown("""
        ### Characteristics:
        - Strict schema 🔒
        - Tabular format 📊
        - Easy to query 🔍
        
        **Did you know?** 🤔  
        <span class="fun-fact">The first computerized database appeared in 1963 - 
        it weighed more than a car! 🚗💾</span>
        """, unsafe_allow_html=True)
        
        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/dSbyOXaQ6N_Kg2TLxgEyt.png", 
                width=400, caption="Structured Data Example")
        
        with st.expander("💡 Real-World Examples"):
            st.markdown("""
            - Financial records 💰
            - Inventory systems 📦
            - Student databases 🎓
            - Railway timetables 🚄
            """)

def semi_structured_page():
    st.header("🧩 Semi-Structured Data: The Flexible Friend")
    
    with st.container():
        st.markdown("""
        ### Why It's Special:
        - Partial organization 🎭
        - Self-describing formats 📝
        - Web-friendly 🌐
        
        **Did you know?** 🤔  
        <span class="fun-fact">JSON was created in 2001 - 
        the same year Wikipedia launched! 🎂📚</span>
        """, unsafe_allow_html=True)
        
        cols = st.columns(2)
        with cols[0]:
            st.code("""
            {
              "name": "Data Hero",
              "skills": ["JSON", "XML", "CSV"],
              "mission": "Bring order to chaos!"
            }
            """, language="json")
        
        with cols[1]:
            st.markdown("""
            ### Common Formats:
            - JSON (Web APIs) 🌍
            - XML (Document markup) 📄
            - CSV (Spreadsheet data) 📋
            - Email headers 📧
            """)

def unstructured_page():
    st.header("🎨 Unstructured Data: The Creative Chaos")
    
    with st.container():
        st.markdown("""
        ### The Wild West of Data:
        - No predefined format 🎨
        - Human-friendly formats 😊
        - Requires AI processing 🤖
        
        **Did you know?** 🤔  
        <span class="fun-fact">90% of all digital data is unstructured - 
        that's like having 1000 Netflix movies for every person on Earth! 🍿🌍</span>
        """, unsafe_allow_html=True)
        
        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/xhaNBRanDaj8esumqo9hl.png", 
                width=400, caption="Unstructured Data in Action")
        
        with st.expander("🌐 Modern Applications"):
            st.markdown("""
            - Facial recognition systems 👩💻
            - Voice assistants 🗣️
            - Medical image analysis 🏥
            - Social media monitoring 📱
            """)

if __name__ == "__main__":
    main()