import streamlit as st
from streamlit_lottie import st_lottie
import requests

# Custom CSS for Enhanced Styling
st.markdown("""
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');
    
    body {
        background: linear-gradient(135deg, #1e1e2f, #2a2a3b);
        font-family: 'Poppins', sans-serif;
        color: white;
    }
    
    h1, h2, h3 {
        text-align: center;
        color: #00FFFF;
        text-shadow: 0px 0px 12px rgba(0, 255, 255, 1), 
                     0px 0px 20px rgba(0, 128, 255, 0.8);
    }
    
    .custom-subheader {
        color: #00FFFF;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        font-size: 28px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .section {
        background: rgba(255, 255, 255, 0.1);
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0px 4px 12px rgba(0, 255, 255, 0.2);
    }
    
    .glow-button {
        background: linear-gradient(90deg, #00FFFF, #00CCFF);
        border: none;
        padding: 12px 25px;
        color: black;
        font-weight: bold;
        border-radius: 25px;
        box-shadow: 0px 0px 10px rgba(0, 255, 255, 0.8);
        transition: 0.3s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        margin: 10px 5px;
    }
    
    .glow-button:hover {
        transform: scale(1.1);
        box-shadow: 0px 0px 20px rgba(0, 255, 255, 1);
    }

    .button-container {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    </style>
""", unsafe_allow_html=True)

# Title
st.markdown("<h1 class='custom-subheader'>🏏 Crick-o-Meter: Unleashing Data-Driven Cricket Insights! 📊🔥</h1>", unsafe_allow_html=True)

# Load Lottie Animation
@st.cache_data
def load_lottie_url(url: str):
    response = requests.get(url)
    if response.status_code != 200:
        return None
    return response.json()

lottie_animation = load_lottie_url("https://lottie.host/6e182649-61a6-4683-8680-5493855ac08a/G0pStmcS8T.json")

if lottie_animation:
    st_lottie(lottie_animation, height=200, key="cricket")
else:
    st.error("⚠️ Failed to load animation. Please check your internet connection.")

# About the App
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("<h2 class='custom-subheader'>🎯 About the App</h2>", unsafe_allow_html=True)
st.write("Crick-o-Meter is your ultimate companion for cricket statistics and analytics. Whether you're a fantasy cricket player, a data nerd, or just an ardent fan, our app gives you real-time stats, player comparisons, and predictive insights!")
st.markdown('</div>', unsafe_allow_html=True)

# Key Features
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("<h2 class='custom-subheader'>🚀 Key Features</h2>", unsafe_allow_html=True)
st.markdown("""
- 📊 **Player Performance Analysis**
- 📈 **Predictive Insights for Matches**
- 🧠 **AI-driven Cricket Forecasting**
- 📌 **Team Comparisons & Head-to-Head Stats**
""")
st.markdown('</div>', unsafe_allow_html=True)

# About the Creator
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("<h2 class='custom-subheader'>👨‍💻 About the Creator</h2>", unsafe_allow_html=True)
st.write("Hi! I'm a passionate developer blending machine learning with cricket analytics. My goal is to make cricket statistics accessible and insightful for fans worldwide.")
st.markdown('</div>', unsafe_allow_html=True)

# Contact Section
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("<h2 class='custom-subheader'>📞 Contact Me</h2>", unsafe_allow_html=True)

# Buttons with Links
st.markdown('<div class="button-container">', unsafe_allow_html=True)
st.markdown("""
<a href="https://www.linkedin.com/in/dommeti-thoran-raj-692769191/" target="_blank"><button class="glow-button">LinkedIn</button></a>
<a href="https://github.com/raj2216" target="_blank"><button class="glow-button">GitHub</button></a>
<a href="mailto:rajbunny2216@gmail.com"><button class="glow-button">Email</button></a>
""", unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)