import gradio as gr
from ui.navigator_tab import create_navigator_tab
from ui.suggestions_tab import create_suggestions_tab

def build_ui():
    with gr.Blocks(title="RetailGenie") as demo:
        # ✅ Global CSS
        gr.HTML(
            """
            <style>
                .centered-text {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 12px;
                }
                #main-wrapper {
                    max-width: 1000px;
                    margin: 0 auto;
                    padding: 20px;
                }
            </style>
            """
        )

        # 🧾 Disclaimer
        gr.Markdown(
            """
            <div style="background-color:#2a2a2a; padding: 15px; border-radius: 10px; border: 1px solid #444; text-align: center; font-size: 14px; color: #ddd;">
            ⚠ <strong>Disclaimer:</strong> <strong>RetailGenie</strong> is a prototype developed for <strong>educational and demonstration purposes only</strong>. Product suggestions, availability, and store locations are based on <strong>sample data</strong> and may not reflect real-time inventory.<br><br>
            🕒 <strong>Note:</strong> Some responses may take a few seconds due to model inference and file processing within a constrained development environment.
            </div>
            """,
            elem_classes="centered-text"
        )

        # 🧞‍♂ Title
        gr.Markdown("# 🧞‍♂ RetailGenie – In-Store Smart Assistant", elem_classes="centered-text")

        # 💡 Tabs
        with gr.Tabs():
            create_navigator_tab()
            create_suggestions_tab()

        # 🏁 Footer
        gr.Markdown("Made by TEAM AtoM⚡", elem_classes="centered-text")

    return demo