import streamlit as st

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

# Custom CSS for styling the cards with navy/dark-night blue theme
custom_css = """
    <style>
    .card-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .card {
        width: 350px;
        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;
    }
    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    }
    .card-image img {
        width: 100%;
        height: auto;
    }
    .card-title {
        font-size: 1.8em;
        margin: 15px 0;
    }
    .card-description {
        font-size: 1em;
        padding: 10px 15px;
    }
    .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(custom_css, unsafe_allow_html=True)

# Display the card layout in a row
st.markdown("""
    <div class="card-container">
        <div class="card">
            <div class="card-image">
                <img src="https://via.placeholder.com/350x150" alt="AI Innovation Image">
            </div>
            <div class="card-title">Federal University Lokoja AI Community</div>
            <div class="card-description">
                Connect, collaborate, and innovate with fellow AI enthusiasts, researchers, and experts. Explore the latest in machine learning and AI developments!
            </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://via.placeholder.com/350x150" alt="Community Events Image">
            </div>
            <div class="card-title">AI Workshops & Events</div>
            <div class="card-description">
                Participate in hands-on workshops, hackathons, and seminars led by experts. Network and learn new AI skills together!
            </div>
            <div class="card-button">
                <a href="https://events.example.com" target="_blank">Discover Events</a>
            </div>
        </div>
        <div class="card">
            <div class="card-image">
                <img src="https://via.placeholder.com/350x150" alt="Resources Image">
            </div>
            <div class="card-title">Resources & Tools</div>
            <div class="card-description">
                Access curated datasets, state-of-the-art models, and tutorials to help you excel in your AI journey.
            </div>
            <div class="card-button">
                <a href="https://resources.example.com" target="_blank">View Resources</a>
            </div>
        </div>
    </div>
""", unsafe_allow_html=True)