import streamlit as st

st.markdown("""
<style>
    /* Hide default Streamlit elements */
    #MainMenu {visibility: hidden;}
    header {visibility: hidden;}
    footer {visibility: hidden;}
    
    /* Navigation container */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1rem;  /* Reduced padding */
        background-color: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* Logo */
    .logo {
        color: #1a73e8;
        font-size: 1.1rem;  /* Reduced font size */
        font-weight: 600;
        text-decoration: none;
        margin-right: 1rem;  /* Added margin */
    }
    
    /* Search box */
    .search-container {
        flex: 1;
        max-width: 450px;  /* Reduced width */
        margin: 0 1rem;
    }
    
    .search-box {
        width: 100%;
        padding: 0.5rem 0.8rem;  /* Reduced padding */
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 0.9rem;
        outline: none;
    }
    
    /* Navigation links */
    .nav-links {
        display: flex;
        gap: 1rem;  /* Reduced gap */
        margin-left: 1rem;
    }
    
    .nav-link {
        color: #5f6368;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.4rem 0.6rem;  /* Reduced padding */
        white-space: nowrap;
    }
    
    .nav-link:hover {
        color: #1a73e8;
    }
</style>

<div class="nav-container">
    <a href="/" class="logo">SCISPACE</a>
    <div class="search-container">
        <input type="text" class="search-box" placeholder="Search or ask a question">
    </div>
    <div class="nav-links">
        <a href="/streamlit" class="nav-link">Streamlit</a>
        <a href="/pricing" class="nav-link">Pricing</a>
        <a href="/library" class="nav-link">My Library</a>
    </div>
</div>
""", unsafe_allow_html=True)