import streamlit as st
from streamlit_extras.switch_page_button import switch_page

# Background Image Styling
st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("background.jpg");
            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;
        }}
        .button-container {{
            text-align: center;
            margin-top: 20px;
        }}
        .footer {{
            font-size: 14px;
            color: #333;
            margin-top: 50px;
            text-align: center;
            font-style: italic;
        }}
    </style>
    """,
    unsafe_allow_html=True,
)

# 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
)

# Intro to Cricket
st.markdown("<h2 class='sub-header'>Cricket - The Gentleman’s Game 🏆</h2>", unsafe_allow_html=True)
st.markdown(
    """
    <div class='text'>
    Cricket is not just a sport—it's a passion that unites nations. From the roar of the stadium to the precision of a last-ball thriller, cricket teaches discipline, strategy, and the spirit of sportsmanship.<br><br>
    Whether it's Test cricket’s grind, ODI’s balance, or T20’s thrill—each format brings unique excitement. Players like Sachin Tendulkar, MS Dhoni, and Virat Kohli have inspired generations across the globe.
    </div>
    """, unsafe_allow_html=True
)

# What is Cric Metrics?
st.markdown("<h2 class='sub-header'>What is Cric Metrics? 📊</h2>", unsafe_allow_html=True)
st.markdown(
    """
    <div class='text'>
    <b>Cric Metrics</b> is a smart analytics platform built using Python and Machine Learning. It helps cricket fans and analysts:
    <ul>
        <li>⚡ Compare players based on batting, bowling, and fielding metrics</li>
        <li>📈 Predict match outcomes and player performances</li>
        <li>📊 Visualize data using advanced graphs and charts</li>
        <li>💡 Make informed decisions using AI-powered insights</li>
    </ul>
    Whether you're a fan, coach, or data nerd—Cric Metrics is your playground for cricket analytics.
    </div>
    """, unsafe_allow_html=True
)

# Player Info Button
st.markdown("<div class='button-container'>", unsafe_allow_html=True)
if st.button("📊 Explore Player Information"):
    switch_page("pages/1player_information.py")
st.markdown("</div>", 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 with over 10 years of 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
)

# Footer
st.markdown("<div class='footer'>Built with ❤️ using Streamlit | © 2025 Cric Metrics</div>", unsafe_allow_html=True)