import streamlit as st

# Page config with icon and wide layout for more space
st.set_page_config(page_title="App Maintenance - Available Here", page_icon="🛠️", layout="centered")

# Hide default Streamlit style elements for cleaner look
st.markdown("""
    <style>
    #MainMenu {visibility: hidden;}
    footer {visibility: hidden;}
    header {visibility: hidden;}
    body {
        background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .container {
        text-align: center;
        padding: 80px 20px;
        border-radius: 15px;
        background-color: rgba(255,255,255,0.9);
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        max-width: 600px;
        margin: auto;
    }
    .title {
        font-size: 56px;
        font-weight: 700;
        color: #003366;
        margin-bottom: 10px;
    }
    .subtitle {
        font-size: 22px;
        color: #555555;
        margin-bottom: 40px;
    }
    .btn-primary {
        background-color: #0066cc;
        color: white !important;
        padding: 18px 36px;
        font-size: 20px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0,102,204,0.3);
        transition: all 0.3s ease;
        display: inline-block;
    }
    .btn-primary:hover {
        background-color: #004a99;
        box-shadow: 0 6px 20px rgba(0,75,153,0.4);
        color: #e0e0e0 !important;
    }
    </style>
""", unsafe_allow_html=True)

# Main container content
st.markdown("""
<div class="container">
    <div class="title">🛠️ We're Improving Your Experience</div>
    <div class="subtitle">
        Our app is undergoing scheduled maintenance, but don't worry, <br>you can still explore!
    </div>
    <a class="btn-primary" href="https://kind-bream-informed.ngrok-free.app/" target="_blank">Live App</a>
</div>
""", unsafe_allow_html=True)