import streamlit as st
import base64  # ✅ Add this

from streamlit_extras.switch_page_button import switch_page

# Load and encode background image
def get_base64_bg(image_path):
    with open(image_path, "rb") as img_file:
        encoded = base64.b64encode(img_file.read()).decode()
    return f"data:image/jpg;base64,{encoded}"

background_img = get_base64_bg("background.jpg")

# Inject custom CSS with background
st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("{background_img}");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }}
        .header {{
            text-align: center;
            color: red;
            font-size: 30px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding-top: 20px;
        }}
        .logo {{
            position: absolute;
            right: 20px;
            top: 10px;
            width: 80px;
            height: auto;
        }}
        .sub-header {{
            color: darkorange;
            font-size: 26px;
            font-weight: bold;
            margin-top: 30px;
        }}
        .text {{
            font-size: 17px;
            color: black;
            font-style: italic;
            background-color: rgba(255, 255, 255, 0.75);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }}
        .footer {{
            font-size: 14px;
            color: #333;
            margin-top: 50px;
            text-align: center;
            font-style: italic;
        }}
    </style>
    """,
    unsafe_allow_html=True
)

# App Header with Logo
st.markdown(
    """
    <div class='header'>
        🏏 Cric Metrics - AI-Powered Cricket Insights 🏏
        <img src='1.png' class='logo'>
    </div>
    """,
    unsafe_allow_html=True
)

# Sub-sections
st.markdown("<h2 class='sub-header'>Cricket - The Gentleman’s Game 🏆</h2>", unsafe_allow_html=True)
st.markdown(
    "<p class='text'>"
    "Cricket is one of the most popular sports worldwide, loved by millions. "
    "It is played in multiple formats, including Tests, ODIs, and T20s. "
    "With legendary players, thrilling rivalries, and unforgettable moments, cricket is more than a game—it's an emotion! 🏏"
    "</p>",
    unsafe_allow_html=True
)

st.markdown("<h2 class='sub-header'>What is Cric Metrics? 📊</h2>", unsafe_allow_html=True)
st.markdown(
    "<p class='text'>"
    "Cric Metrics is an AI-powered cricket analytics platform. It offers player comparisons, performance analysis, "
    "team stats, and match predictions. It empowers fans, analysts, and teams with smart, data-driven insights. 🤖📈"
    "</p>",
    unsafe_allow_html=True
)

# Add more info if you'd like
st.markdown("<h2 class='sub-header'>More About Cric Metrics</h2>", unsafe_allow_html=True)
st.markdown(
    "<p class='text'>"
    "From grassroots cricket to international glory, Cric Metrics helps track form, fitness, and match-winning impact. "
    "We leverage machine learning models and visual analytics to make cricket smarter and more fun! 🚀"
    "</p>",
    unsafe_allow_html=True
)
# About Author
st.markdown("<h2 class='sub-header'>About the Author 👨‍💻</h2>", unsafe_allow_html=True)
st.markdown(
    """
    <div class='text'>
    <b>Sai Kalyan Satwik</b> is a seasoned cricket enthusiast and tech entrepreneur having experience in data science and software development. <br><br>
    His passion for cricket meets his technical expertise in this app, blending numbers with narratives for fans and analysts alike. 
    </div>
    """,
    unsafe_allow_html=True
)

# Button
if st.button("📊 Player Information"):
    st.switch_page("pages/1player_information.py")

# Footer
st.markdown("<div class='footer'>Created with ❤️ by Sai Kalyan Satwik</div>", unsafe_allow_html=True)