import streamlit as st

# Configure Streamlit Page
st.set_page_config(page_title="AI & ML Innovation Hub", page_icon="🤖", layout="wide")

# Custom CSS for Styling
st.markdown("""
    <style>
        /* Background Gradient for Sections */
        .ml-section {
            background: linear-gradient(to right, #E1F5FE, #FCE4EC);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
        }
        /* Font Size for Consistency */
        .medium-font {
            font-size: 18px !important;
        }
        /* Title Styling */
        .main-title {
            text-align: center;
            color: #D81B60; /* Pink */
            font-size: 36px;
            font-weight: bold;
        }
        /* Subtitle */
        .sub-title {
            text-align: center;
            color: #283593; /* Dark Blue */
            font-size: 32px;
            font-weight: bold;
        }
        /* Section Titles */
        .section-title {
            color: #9C27B0; /* Purple */
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /* Paragraph Content */
        .content {
            font-size: 18px;
            color: #2C3E50;
            line-height: 1.6;
        }
        /* Bullet Points */
        .content ul {
            font-size: 18px;
            color: #2C3E50;
            padding-left: 25px;
        }
        .content li {
            margin: 8px 0;
        }
        /* Links */
        .content a {
            color: #1565C0;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
        }
        .content a:hover {
            text-decoration: underline;
            color: #D81B60;
        }
    </style>
""", unsafe_allow_html=True)

# Title & Subtitle
st.markdown("""
    <div class="ml-section medium-font" style="text-align: center; margin-bottom: 20px;">
        <h1 style="color: #880085; font-size: 36px;">🚀 Unlock the Power of AI & Machine Learning!</h1>
        <h2 style="color: #000080; font-size: 28px;">Start from zero and become a hero! 🚀📈</h2>
    </div>
""", unsafe_allow_html=True)

# Display Image
st.image("https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im.jpg", caption="Exploring the Power of AI and ML", use_container_width=True)

# About Me Section
st.markdown("""
    <div class="ml-section medium-font">
        <h2>🧑‍💻 About Me</h2>
        <p>
            Hi! I'm <b>Chittala Varshitha</b>, a passionate Data Scientist and ML Enthusiast. With a strong background in Statistics and Data Science, 
            I specialize in Python, SQL, R, and visualization tools.
            <br><br>
            This AI & ML space is designed to help beginners and professionals dive into artificial intelligence, understand machine learning fundamentals, 
            and work on real-world AI-driven projects.
        </p>
        <p><b>Skills:</b> Python, R, SQL, NumPy, Pandas, Power BI, Excel</p>
        <p><b>Connect with me:</b></p>
        <ul>
            <li>🔗 <a href='https://www.linkedin.com/in/chittalavarshitha' target='_blank'>LinkedIn</a></li>
            <li>📝 <a href='https://medium.com/@yourmediumprofile' target='_blank'>Medium</a></li>
        </ul>
    </div>
""", unsafe_allow_html=True)

# What You'll Learn Section
st.markdown("""
    <div class="ml-section medium-font">
        <h2 class="section-title">🔍 Master AI, ML & Deep Learning Essentials</h2>
        <p>Gain hands-on experience in AI & ML, explore real-world applications, and build impactful projects! 🚀</p>
        <ul>
            <li>⚡ <b>ML, AI & Deep Learning Fundamentals:</b> Learn the key concepts behind AI, ML, and their applications.</li>
            <li>🔬 <b>ML vs Deep Learning:</b> Understand their differences and how they impact modern technology.</li>
            <li>📖 <b>Core ML Concepts:</b> Understand Supervised, Unsupervised, and Reinforcement Learning.</li>
            <li>📊 <b>Feature Engineering & Data Preprocessing:</b> Discover techniques to clean and transform data for better model accuracy.</li>
            <li>📈 <b>Exploratory Data Analysis (EDA):</b> Master data visualization, outlier detection, and pattern identification.</li>
            <li>🤖 <b>Building & Evaluating ML Models:</b> Master model training, validation, and performance metrics.</li>
            <li>🚀 <b>End-to-End AI Projects:</b> Work on real-world applications.</li>    
        </ul>
    </div>
""", unsafe_allow_html=True)

# Call to Action
st.markdown("""
    <div class="ml-section medium-font" style="text-align: center;">
        <h2 class="sub-title">🎯 Ready to Become an AI & ML Expert?</h2>
        <p>Let's learn, build, and innovate in the world of artificial intelligence together! 🤖</p>
    </div>
""", unsafe_allow_html=True)