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

# Title with centered alignment
st.markdown("<h1 style='text-align:center; color:white;'>Problem Statement and Aim for this Project</h1>", unsafe_allow_html=True)

# Centered header for the Streamlit app
st.markdown("<h2 style='text-align:center;'>Analyzing and classifying the consumer electronics sales.</h2>", unsafe_allow_html=True)

st.markdown(
    """
    <div style="text-align: center;">
        <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/o_hx-CUYhb2kbgFHZpd9l.jpeg" width="70%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Problem statement section with center alignment
st.markdown("<h3>Problem Statement and Aim:</h3>", unsafe_allow_html=True)

# Text explaining the problem
st.markdown(
    """
    <div>
        <p><b>Title:</b> Analyzing and predicting the electronics sales and consumer purchase intent Using Machine Learning</p>
        <p><b>Problem Statement:</b> Given a dataset of consumer electronics sales, which includes customer demographics, product details, and satisfaction metrics, can we develop a classification model that can accurately predict whether a customer intends to purchase a product or not?</p>
        <p><b>Aim for this project:</b> The goal of this project is to build a robust end-to-end machine learning pipeline to classify customer purchase intent using the provided features. The steps will include data preprocessing, exploratory data analysis (EDA), feature engineering, model training, and evaluation. The final goal is to achieve the highest possible accuracy and generalization on unseen data.</p>
        <p><b>Key Objectives:</b></p>
        <ul style="list-style-position: inside;">
            <li>Data Preprocessing, Feature Engineering</li>
            <li>Exploratory Data Analysis</li>
            <li>Model Creation & Evaluation</li>
        </ul>
    </div>
    """, 
    unsafe_allow_html=True
)

# Center-aligned image


# Background image with semi-transparent overlay
background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/clljdAv7f_LGL8dH5vCZQ.jpeg"

st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("{background_image_url}");
            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);  /* Adjust transparency here (0.4 for 40% transparency) */
            z-index: -1;
        }}
        /* Styling the content to ensure text visibility */
        .stMarkdown {{
            color: white;  /* White text to ensure visibility */
        }}
    </style>
    """, 
    unsafe_allow_html=True
)



#Buttons

if st.button("Previous ⏮️"):
    st.switch_page("Home.py")
if st.button("Next ⏭️"):
    st.switch_page("pages/1_Data_Card_and_Data_collection.py")