def demo_center():
    """Centers children using flexbox."""
    with gui.center(className="bg-light rounded p-4"):
        gui.write("Centered content")
        gui.caption("Both horizontally and vertically")

def demo_expander():
    """Collapsible section."""
    with gui.expander("Click to expand", key="demo_expander_1"):
        gui.write("Hidden content revealed!")
        gui.caption("Use for optional details, advanced settings, etc.")

def demo_write():
    """gui.write renders markdown, objects, or plain strings."""
    gui.write("**Bold**, *italic*, and `inline code`")
    gui.write("With help tooltip", help="This appears on hover")

def demo_html():
    """gui.html renders raw HTML content."""
    gui.html(
        '<span style="color: #e74c3c; font-weight: bold;">Raw HTML</span> with inline styles'
    )

def demo_alerts():
    """Status messages with icons."""
    gui.success("Operation completed successfully!")
    gui.error("Something went wrong, please try again.")

def demo_markdown():
    """gui.markdown renders an explicit markdown block."""
    gui.markdown(
        "### Markdown heading\n\n- List item one\n- List item two\n\n> Blockquote text"
    )

def demo_text():
    """gui.text renders preformatted text (like <pre>)."""
    gui.text(
        "This is preformatted text.\n  Indentation is preserved.\n    Like a <pre> block."
    )

def demo_caption_newline():
    """gui.caption for small muted text, gui.newline for line breaks."""
    gui.write("Regular text above")
    gui.caption("This is a caption — small and muted")
    gui.newline()
    gui.caption("After a gui.newline() break")

def demo_tabs():
    """Simple tabbed layout. Returns a list of context managers."""
    tab1, tab2, tab3 = gui.tabs(["Overview", "Details", "Settings"])
    with tab1:
        gui.write("Overview content here")
    with tab2:
        gui.write("Details content here")
    with tab3:
        gui.write("Settings content here")

def demo_breadcrumbs():
    """Breadcrumb navigation with custom divider."""
    with gui.breadcrumbs(divider=">"):
        gui.breadcrumb_item("Home", link_to="/")
        gui.breadcrumb_item("Components", link_to="/GuiComponents/")
        gui.breadcrumb_item("Navigation")

def demo_nav_tabs():
    """Underline-style navigation tabs."""
    with gui.nav_tabs():
        for name in ["Active", "Inactive 1", "Inactive 2"]:
            with gui.nav_item("/GuiComponents/", active=name == "Active"):
                gui.html(name)
    with gui.nav_tab_content():
        gui.write("Content for the active tab")

def demo_controllable_tabs():
    """Tabs with programmatic control via session state key."""
    tabs, index = gui.controllable_tabs(
        ["First", "Second", "Third"], key="demo_ctrl_tabs"
    )
    with tabs[index]:
        gui.write(f"Selected tab index: **{index}**")

def demo_text_input():
    """Single-line text input."""
    gui.text_input(
        "Your name",
        key="demo_text_input",
        placeholder="Enter your name",
        help="This is a help tooltip",
    )

def demo_text_area():
    """Multi-line text area with configurable height."""
    gui.text_area(
        "Description",
        key="demo_text_area",
        height=100,
        placeholder="Write something here...",
        help="Supports multi-line input",
    )

def demo_password_input():
    """Password field — input is masked."""
    gui.password_input(
        "API Key",
        key="demo_password_input",
        placeholder="sk-...",
    )

def demo_code_editor():
    """Code editor with syntax highlighting."""
    gui.code_editor(
        value='def hello():\n    print("Hello, Gooey!")',
        key="demo_code_editor",
        label="Python snippet",
    )

def demo_number_input():
    """Numeric input with min/max/step."""
    gui.number_input(
        "Temperature",
        min_value=0.0,
        max_value=2.0,
        value=0.7,
        step=0.1,
        key="demo_number_input",
    )

def demo_slider():
    """Range slider."""
    gui.slider(
        "Volume",
        min_value=0,
        max_value=100,
        value=50,
        key="demo_slider",
    )

def demo_date_input():
    """Date picker input."""
    gui.date_input(
        "Start date",
        key="demo_date_input",
    )

def demo_checkbox():
    """Boolean checkbox input."""
    gui.checkbox("Enable notifications", key="demo_checkbox", help="Toggle me")

def demo_radio():
    """Vertical radio button group."""
    gui.radio(
        "Choose a model",
        options=["GPT-4o", "Claude", "Gemini"],
        key="demo_radio",
    )

def demo_selectbox():
    """Single-select dropdown."""
    gui.selectbox(
        "Language",
        options=["Python", "JavaScript", "Go", "Rust"],
        key="demo_selectbox",
    )

def demo_switch():
    """Toggle switch — an alternative to checkbox."""
    gui.switch("Dark mode", key="demo_switch")
    gui.switch("Small switch", key="demo_switch_sm", size="small")

def demo_horizontal_radio():
    """Inline radio buttons rendered as toggle buttons."""
    gui.horizontal_radio(
        "Output format",
        options=["JSON", "CSV", "XML"],
        key="demo_horizontal_radio",
    )

def demo_multiselect():
    """Multi-select dropdown."""
    gui.multiselect(
        "Tags",
        options=["AI", "ML", "NLP", "Vision", "Audio"],
        key="demo_multiselect",
    )

def demo_anchor():
    """Styled anchor tag that looks like a button."""
    gui.anchor("Visit Gooey.AI", href="https://gooey.ai", type="primary", new_tab=True)

def demo_url_button():
    """Quick external link button with icon."""
    gui.url_button("https://gooey.ai")

def demo_image():
    """Image with caption and optional download button."""
    gui.image(
        "https://picsum.photos/400/200",
        caption="Random image via picsum.photos",
    )

def demo_video():
    """Video player with optional autoplay."""
    gui.video(
        "https://v3b.fal.media/files/b/0a93710f/vY5DN0btTCiU7a5_yNqQf_0b3FO6JS.mp4#t=0.001",
        caption="🎥 Random video via YouTube",
        autoplay=True,
    )

def demo_audio():
    """Audio player with optional download."""
    gui.audio(
        "https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/0e7f71fc-dcd8-11ed-b644-02420a00015f/gooey.ai%20-%20four%20to%20the%20floor%20kick%20drum%20beat%20with...rhythms%20at%20a%20time%20signature%20of%2034%20andtempoof80%201.wav",
        caption="🎧 Random audio",
        show_download_button=True,
    )

def demo_tooltip():
    """Wrap any element in gui.tooltip for a hover tooltip."""
    with gui.tooltip("I'm a tooltip!"):
        gui.button("Hover me", key="demo_tooltip_btn")

def demo_popover():
    """Popover with custom content."""
    trigger, content = gui.popover()
    with trigger:
        gui.button("Open popover", key="demo_popover_btn")
    with content:
        gui.write("**Popover content**")
        gui.caption("Any gui components can go here")

def demo_pill():
    """Badge / pill component."""
    with gui.div(className="d-flex gap-2 flex-wrap"):
        gui.pill("Default")
        gui.pill("Primary", text_bg="primary")
        gui.pill("Secondary", text_bg="secondary")
        gui.pill("Dark", text_bg="dark")

def demo_alert_dialog():
    """Modal alert dialog with open/close state."""
    ref = gui.use_alert_dialog("demo_alert")
    if gui.button("Open alert", key="demo_alert_open", type="primary"):
        ref.set_open(True)
    if ref.is_open:
        with gui.alert_dialog(ref, "Alert Title"):
            gui.write("This is an alert dialog. Click ✕ to close.")

def demo_confirm_dialog():
    """Confirm dialog with built-in trigger button."""
    ref = gui.use_confirm_dialog("demo_confirm")
    with gui.button_with_confirm_dialog(
        ref=ref,
        trigger_label="Delete item",
        trigger_type="primary",
        modal_title="Are you sure?",
        modal_content="This action cannot be undone.",
        confirm_label="Delete",
        confirm_className="btn-danger",
    ):
        pass
    if ref.pressed_confirm:
        gui.success("Item deleted!")

def demo_json():
    """Interactive, collapsible JSON viewer."""
    gui.json(
        {
            "name": "Gooey.AI",
            "components": 45,
            "features": ["server-driven UI", "Bootstrap 5", "realtime updates"],
            "nested": {"key": "value", "list": [1, 2, 3]},
        },
        expanded=True,
    )

def demo_data_table():
    """Data table from a list of cell values."""
    gui.data_table(
        [
            ["Component", "Category", "Status"],
            ["gui.button", "Buttons", "Stable"],
            ["gui.switch", "Inputs", "Stable"],
            ["gui.styled", "Styling", "Stable"],
        ]
    )

def demo_styled():
    """gui.styled scopes CSS to its container using & as the selector."""
    with gui.styled(
        """
        & {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 12px;
            padding: 1.5rem;
            color: white;
        }
        & strong { color: #ffd700; }
    """
    ):
        gui.html(
            "This container has <strong>scoped gradient styles</strong> via <code>gui.styled()</code>"
        )

def demo_bootstrap_classes():
    """Use Bootstrap 5 utility classes via className on any component."""
    with gui.div(className="d-flex flex-column gap-2"):
        with gui.div(className="p-3 bg-dark text-white rounded"):
            gui.html("bg-dark + text-white + rounded")
        with gui.div(className="p-3 border border-2 border-primary rounded"):
            gui.html("border-primary")
        with gui.div(className="p-3 bg-light text-center fw-bold shadow-sm rounded"):
            gui.html("bg-light + shadow-sm + fw-bold")