import streamlit as st

def show_header(favicon_image_base64, image_base64):
    st.markdown(
        f"""
        <div class="container card border-0 shadow-sm p-4 ">
            <div class="card-body">
                <div class="row d-flex">
                    <div class="col-md-6 position-relative">
                        <img src="data:image/png;base64,{favicon_image_base64}" alt="favicon" class="position-absolute w-100 h-auto text-center top-0 bottom-0 z-0">
                        <h1 class="gradient-text"> Prédiction de la Tumeur avec l'Intelligence Artificielle </h1>
                        <h4 style="text-align: justify"> Utilisez notre solution avancée pour prédire le type de tumeur à partir d'images médicales. Téléchargez une image de tumeur et obtenez une prédiction précise en quelques secondes. </h4>
                    </div>
                    <div class="col-md-6 d-flex border-0">
                        <img src="data:image/png;base64,{image_base64}" class="img-fluid mx-auto" alt="Responsive image">
                    </div>
                </div>
            </div>
        </div>
        """,
        unsafe_allow_html=True,
    )

def show_prediction_section():
    st.markdown(
        f"""
        <div class="container mb-64" id="competences">
            <div class="h1 text-center my-4 gradient-text">
                Faites une prédiction
            </div>
        </div>
        """,
        unsafe_allow_html=True,
    )

def show_footer(linkedin_image_base64, github_image_base64, huggingface_image_base64):
    st.markdown(
        f"""
         <footer class="container shadow-sm text-center text-lg-start mt-5">
                <div class="container p-4">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                            <h5 class="text-uppercase gradient-text">Contact Information</h5>
                            <p>
                                Yannick Simo<br>
                                Junior Data Scientist<br>
                                Email: yannicksimo616@gmail.com<br>
                            </p>
                        </div>
                        <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                            <h5 class="text-uppercase gradient-text">Suivez-moi</h5>
                            <a href="https://www.linkedin.com/in/simo-yannick-38137b231/" class="btn btn-floating p-0" role="button">
                                <img src="data:image/svg+xml;base64,{linkedin_image_base64}" class="w-50" alt="linkedin icon">
                            </a>
                            <a href="https://github.com/Skym616" class="btn btn-floating p-0" role="button">
                                <img src="data:image/svg+xml;base64,{github_image_base64}" class="w-50" alt="github icon">
                            </a>
                            <a href="https://huggingface.co/Skym616" class="btn btn-floating p-0" role="button">
                                <img src="data:image/svg+xml;base64,{huggingface_image_base64}" class="w-50" alt="huggingface icon">
                            </a>
                    </div>
                    </div>
                </div>
                <div class="text-center p-3 text-white gradient-text">
                    &copy; 2025 Yannick Simo (Skym616). All rights reserved.
                </div>
            </footer>
        """, unsafe_allow_html=True
    )