import streamlit as st 

# Set page config
st.set_page_config(page_title="Experimental Solution", layout="wide")

# Use JavaScript to create and maintain a sticky header
js_code = """
<script>
// Function to create sticky header
function createStickyHeader() {
    // Create header element
    const header = document.createElement('div');
    header.style.position = 'fixed';
    header.style.top = '0';
    header.style.left = '0';
    header.style.width = '100%';
    header.style.backgroundColor = '#262730';
    header.style.color = 'white';
    header.style.padding = '10px';
    header.style.zIndex = '9999';
    header.style.textAlign = 'center';
    header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
    
    // Add content to header
    header.innerHTML = `
        <h3 style="display:inline-block; margin:0 20px;">My App Navigation</h3>
        <a href="#section1" style="color:white; margin:0 10px;">Section 1</a>
        <a href="#section2" style="color:white; margin:0 10px;">Section 2</a>
        <a href="#section3" style="color:white; margin:0 10px;">Section 3</a>
    `;
    
    // Append header to body
    document.body.appendChild(header);
    
    // Add padding to top of body to prevent content from being hidden
    document.body.style.paddingTop = (header.offsetHeight + 10) + 'px';
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', createStickyHeader);
// Backup in case the first attempt fails
setTimeout(createStickyHeader, 1000);
</script>
"""

# Inject the JavaScript
st.components.v1.html(js_code, height=0)

# Add a small spacer for header
st.markdown("<div style='height:60px;'></div>", unsafe_allow_html=True)

# Regular Streamlit content
st.title("My Application")

st.header("Section 1", anchor="section1")
st.write("This is section 1 content")
for i in range(10):
    st.write(f"Content line {i}")

st.header("Section 2", anchor="section2")
st.write("This is section 2 content")
for i in range(10):
    st.write(f"Content line {i}")

st.header("Section 3", anchor="section3")
st.write("This is section 3 content")
for i in range(10):
    st.write(f"Content line {i}")


# --- SHARED ON ALL PAGES ---
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.title("SBS V2.0 mapper")
st.sidebar.subheader("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# --- PAGE SETUP ---
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:",
    default=True,)

# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
#pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run()