import streamlit as st
from streamlit_lottie import st_lottie
import requests

# Load Lottie animation
def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

# CSS Styling
st.markdown("""
    <style>
    body {
        background-color: #eef2f7;
    }
    h1, h2, h3 {
        font-family: 'Roboto', sans-serif;
        text-align: center;
    }
    h1 {
        color: #00FFFF;
        font-weight: 700;
        margin-bottom: 25px;
    }
    h2 {
        color: #FFFACD;
        font-weight: 600;
        margin-top: 30px;
    }
    h3 {
        color: #ba95b0;
        font-weight: 500;
    }
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        color: #555;
    }
    .about-author {
        background: linear-gradient(135deg, #ffffff, #e0f7fa);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        margin: 20px auto;
        max-width: 600px;
        text-align: center;
    }
    .about-author h2 {
        color: #007acc;
        margin-bottom: 15px;
        font-size: 2rem;
    }
    .about-author p {
        font-size: 1.1rem;
    }
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .social-icons a img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transition: transform 0.2s;
    }
    .social-icons a img:hover {
        transform: scale(1.2);
    }
    </style>
    """, unsafe_allow_html=True)

# Title and Tagline
st.title("Zero to Hero: Mastering Machine Learning from the Ground Up 🚀🤖📚")
st.markdown("### Exploring Data Science, One Step at a Time")

# Lottie Animation
lottie_animation = load_lottieurl("https://lottie.host/6e182649-61a6-4683-8680-5493855ac08a/G0pStmcS8T.json")
if lottie_animation:
    st_lottie(lottie_animation, height=150, key="animation")

# About the App
st.subheader("About This App")
st.markdown("""
Welcome to my Machine Learning blog! This is a platform where I share my journey, 
learning experiences, and insights about data science and machine learning.
The roadmap includes:
<ul>
    <li>Problem Understanding</li>
    <li>Data Collection and Exploration</li>
    <li>Model Building and Evaluation</li>
    <li>Deployment and Monitoring</li>
</ul>
""", unsafe_allow_html=True)

# Author Section
st.markdown("""
<div class="about-author">
    <h2>About the Author</h2>
    <p>
        Hi, I'm <strong>Yash Harish Gupta</strong>! I'm an aspiring data scientist passionate about solving real-world problems 
        using machine learning. Currently, I'm learning and preparing to kickstart my career in the data science field.
    </p>
</div>
""", unsafe_allow_html=True)

# Social Links
st.markdown("""
<div class="social-icons">
    <a href="https://www.linkedin.com/in/yash-harish-gupta-71b011189/" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png" alt="LinkedIn">
    </a>
    <a href="https://github.com/YashGupta018" target="_blank">
        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub">
    </a>
</div>
""", unsafe_allow_html=True)

# Footer
st.markdown("""
<div style="text-align: center; margin-top: 20px; font-family: 'Georgia', serif;">
    <p>Made with ❤️ by Yash Harish Gupta</p>
</div>
""", unsafe_allow_html=True)