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

# Page configuration
st.set_page_config(page_title="Customer Chrun Prediction", layout="wide")

# Title with centered alignment
st.markdown(
    """
    <h1 style="text-align: center; color: white;">🏦 Customer Churn Prediction 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/67445925102349e867c92342/qVlbdupofJ-3eN5WxJqQ5.jpeg" width="80%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Project description
st.markdown(
    """
    ## Project Title: 🏦Customer Churn Prediction | 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.
    
    ##### Customer churn prediction helps businesses identify customers at risk of leaving, enabling proactive retention strategies. By analyzing patterns like purchase behavior and customer feedback, it aids in tailoring personalized offers to reduce churn. This ultimately enhances customer satisfaction, loyalty, and 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/67445925102349e867c92342/wEGDuumZJoZWqzfcijiI2.gif" width="80%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Custom background with overlay
st.markdown(
    """
    <style>
        .stApp {
            background-image: url("https://cdn-uploads.huggingface.co/production/uploads/67445925102349e867c92342/StYhJ8cNQmbb5S8EhdZLO.png");
            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")