import streamlit as st

# Set page configuration for a wide layout
st.set_page_config(page_title="Federal University Lokoja AI Community", page_icon=":sparkles:", layout="wide")

# Custom CSS for styling the cards with a navy/dark-night blue theme
row_css = """
    <style>
    .row-container {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .card {
        flex: 1;
        max-width: 300px;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s, box-shadow 0.3s;
        overflow: hidden;
        background: linear-gradient(135deg, #1b2a49, #27476e);
        color: white;
        text-align: center;
        margin: 10px;
    }
    .card:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    }
    .card-image img {
        width: 100%;
        height: auto;
    }
    .card-title {
        font-size: 1.6em;
        margin-top: 15px;
    }
    .card-description {
        padding: 10px 15px;
        font-size: 1em;
    }
    .card-button a {
        display: inline-block;
        padding: 10px 18px;
        margin: 15px 0;
        background-color: #ffa500;
        color: #1f1f1f;
        font-weight: bold;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    .card-button a:hover {
        background-color: #e69500;
    }
    </style>
"""

# Inject the custom CSS
st.markdown(row_css, unsafe_allow_html=True)

# Display the three cards in a single row
st.markdown("""
    <div class="row-container">
        <div class="card">
            <div class="card-image">
                <img src="https://media.istockphoto.com/id/1452604857/photo/businessman-touching-the-brain-working-of-artificial-intelligence-automation-predictive.jpg?b=1&s=612x612&w=0&k=20&c=5LyslY4gssQ99CVUrUB2K75Mx2TFgnkxboAqB38OPUQ=" alt="AI Innovation Image">
            </div>
            <div class="card-title">Federal University Lokoja AI Community</div>
            <div class="card-description">
                Join our vibrant AI community to connect with researchers and enthusiasts in machine learning and AI.
            </div>
            <div class="card-button">
                <a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">Join Us Now</a>
            </div>
        </div>
        <div class="card">
            <div class="card-image">
                <img src="https://images.pexels.com/photos/8348468/pexels-photo-8348468.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Workshops and Events">
            </div>
            <div class="card-title">Workshops & Events</div>
            <div class="card-description">
                Participate in AI workshops, hackathons, and networking events to hone your skills and connect with others.
            </div>
            <div class="card-button">
                <a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">Learn More</a>
            </div>
        </div>
        <div class="card">
            <div class="card-image">
                <img src="https://media.istockphoto.com/id/1143911080/photo/binary-wall.jpg?b=1&s=612x612&w=0&k=20&c=DoUO9RCwpespaVl7nqBgd8Yxehcz8Lqxr51xyWL2Jkk=" alt="Resources">
            </div>
            <div class="card-title">Resources & Tools</div>
            <div class="card-description">
                Access state-of-the-art AI tools, datasets, and resources curated for your learning and projects.
            </div>
            <div class="card-button">
                <a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">View Resources</a>
            </div>
        </div>
    </div>
""", unsafe_allow_html=True)