import gradio as gr

# Enhanced CSS for Mobile Optimization
mobile_ui_css = """
.gradio-container { max-width: 500px !important; margin: auto !important; } /* Mobile center */
.hotel-card { border-radius: 20px; background: white; padding: 15px; margin-bottom: 10px; border: 1px solid #eee; }
.price-tag { background: #D4AF37; color: white; padding: 5px 12px; border-radius: 50px; font-weight: bold; float: right; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.8em; margin-top: 5px; }
.available { background: #E6F4EA; color: #1E8E3E; }
.occupied { background: #FCE8E6; color: #D93025; }
footer { display: none !important; }
"""

with gr.Blocks(css=mobile_ui_css, title="Hulhumale Direct") as demo:
    # 1. Top Promotion Bar (Sticky style)
    gr.HTML("<div style='background: #0A1828; color: white; padding: 10px; text-align: center; border-radius: 0 0 15px 15px;'>🌟 Tonight's Special: 10% Off in Phase 2</div>")
    
    # 2. Header
    gr.HTML("<h2 style='text-align:center; color:#0A1828; margin-top:20px;'>🏝️ Hulhumale Direct</h2>")
    
    with gr.Tabs():
        # TRAVELER VIEW
        with gr.Tab("Explore"):
            # Mock Card 1
            gr.HTML("""
                <div class='hotel-card'>
                    <span class='price-tag'>850 MVR</span>
                    <h3 style='margin:0;'>Coral View Inn</h3>
                    <p style='color:#666; font-size:0.9em;'>📍 Hulhumale Phase 1</p>
                    <span class='status-badge available'>● Available Now</span>
                    <a href='tel:+9607771234' style='display:block; background:#0A1828; color:white; text-align:center; padding:10px; margin-top:10px; border-radius:10px; text-decoration:none;'>📞 Call to Book</a>
                </div>
            """)
            
        # OWNER VIEW
        with gr.Tab("Manage"):
            gr.Markdown("### 🔑 Quick Update")
            status = gr.Radio(["Available", "Occupied"], label="Set Status")
            price = gr.Number(label="Update Price (MVR)")
            update_btn = gr.Button("Save Changes", variant="primary")

demo.launch()