src/ui/components/footer.py

import streamlit as st

def render_footer():
    """Render a minimalist, professional scientific footer as shown in the screenshots."""
    
    st.markdown("<div style='margin-top: 5rem; border-top: 1px solid #eee; padding-top: 2rem;'></div>", unsafe_allow_html=True)
    
    col1, col2 = st.columns([2, 1])
    
    with col1:
        st.markdown(f"""
            <div style='display: flex; align-items: flex-start; gap: 0.8rem; color: #444;'>
                <i class="fas fa-quote-left" style="color: #d32f2f; font-size: 1.2rem; margin-top: 4px;"></i>
                <div>
                    <div style='font-weight: 700; font-size: 0.95rem; color: #222; margin-bottom: 4px;'>Manuscript Reference:</div>
                    <div style='font-style: italic; font-size: 0.88rem; line-height: 1.5; color: #555;'>
                        Verma, S., et al. (2026). spMetaTME: A spatial atlas of tumour microenvironment metabolism and 
                        metabolic interactions inferred by a pre-trained self-supervised metabolic hypergraph.
                    </div>
                </div>
            </div>
            
            <div style='margin-top: 1.2rem;'>
                <a href="https://github.com/Angione-Lab/spMetaTME-Atlas" target="_blank" style="text-decoration: none;">
                    <div style="
                        display: inline-flex; 
                        align-items: center; 
                        gap: 8px; 
                        border: 1px solid #24292f; 
                        padding: 6px 16px; 
                        border-radius: 50px; 
                        color: #24292f; 
                        font-size: 0.85rem; 
                        font-weight: 500;
                        transition: all 0.2s ease;
                    " onMouseOver="this.style.background='#f6f8fa'" onMouseOut="this.style.background='white'">
                        <i class="fab fa-github"></i> View on GitHub
                    </div>
                </a>
            </div>
        """, unsafe_allow_html=True)
        
    with col2:
        st.markdown(f"""
            <div style='text-align: right; color: #666; font-size: 0.82rem; line-height: 1.6;'>
                <div style='font-weight: 600; color: #444;'>© 2026 spMetaTME Atlas</div>
                <div style='opacity: 0.8;'>Interactive Platform for Spatial Metabolic Analysis</div>
            </div>
        """, unsafe_allow_html=True)
    
    st.markdown("<div style='margin-bottom: 3rem;'></div>", unsafe_allow_html=True)