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

# Page configuration
st.set_page_config(page_title="Electronics Sales Analysis", layout="wide")

# Title with centered alignment
st.markdown(
    """
    <h1 style="text-align: center; color: white;">📱 Consumer Electronics Sales Analysis and ML Model 💻</h1>
    """, 
    unsafe_allow_html=True
)

# Main image with 90% width
st.markdown(
    """
    <div style="text-align: center;">
        <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/dV0WXaXfOUrNjQmNQkspQ.jpeg" width="90%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Project description
st.markdown(
    """
    ## Project Title: 📱Consumer Electronics Sales | EDA + Model 💻:
    
    ##### 📊 Data Exploration and Preprocessing:
    - Preparing data by encoding categorical features like "ProductCategory" and "ProductBrand" and scaling numerical data such as "price" and "rating", as the dataset has minimal outliers or missing values.
    - Analyzing trends in **Product Categories**, **Brands**, **Prices**, **CustomerAge**, etc., to identify influential factors.
    
    ##### 🤖 Predictive Modeling:
    - **Target Variable**: Predicting key metrics like *PurchaseIntent*.
    - **Model Selection**: Building ML models such as **KNN**, **Logistic Regression**, and **Support Vector Machine** for classification tasks.
    - **Feature Engineering**: Extracting insights from **ProductCategory**, **ProductBrand**, and label encoding.
    
    ##### 📈 Model Evaluation:
    - Comparing model performance using metrics like **accuracy**, **F1 score**, or **Log-loss score**, depending on the task.
    - Employing techniques like **hyperparameter tuning** and **cross-validation** for optimization.
    
    ##### By integrating **machine learning** with **data analysis**, this project empowers the Electronics market to enhance customer satisfaction, optimize pricing strategies according to purchase intent, and maximize profitability.
    """, 
    unsafe_allow_html=True
)

# Custom title styling
st.markdown(
    """
    <style>
        .title {
            color: white;  /* White color for better visibility */
            font-size: 36px;  /* Large font size */
            font-weight: bold;  /* Bold text */
            text-align: center;  /* Center alignment */
            margin-top: 20px;
        }
    </style>
    """, 
    unsafe_allow_html=True
)

# Flowchart title
st.markdown(
    '<div class="title">Electronics Sales Analysis and Model Creation Flow</div>', 
    unsafe_allow_html=True
)

# Flowchart GIF with 90% width
st.markdown(
    """
    <div style="text-align: center;">
        <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/BNnk1RdpWhdjTnW9Wm5gA.gif" alt="classification-project-flowchart.gif" width="90%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Custom background with overlay
st.markdown(
    """
    <style>
        .stApp {
            background-image: url("https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/cQN7GOIFQytVGZ-UzJYcR.jpeg");
            background-size: cover;
            background-position: center;
            height: 100vh;
        }
        
        /* Semi-transparent overlay */
        .stApp::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);  /* 40% transparency */
            z-index: -1;
        }
    </style>
    """, 
    unsafe_allow_html=True
)

# Center-aligned button with emoji and functionality
if st.button("Next ⏭️"):
    st.switch_page("pages/0_Problem-Statement_and_Aim.py")