import gradio as gr

# Custom CSS styles for sections
css = """
#header {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}
#user-guidance {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
}
#main {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    border-radius: 5px;
}
#examples {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 20px;
}
#footer {
    text-align: center;
    color: #888;
    font-size: 0.9em;
}
"""

# Function for Main content (takes user input and returns a response)
def process_input(user_input):
    return f"You entered: {user_input}"

# Function to generate predefined examples
def get_example(example):
    return f"You selected: {example}"

# Create the header section
def create_header():
    with gr.Row():
        gr.Markdown("<div id='header'>Welcome to My Gradio App</div>")

# Create the user guidance section
def create_user_guidance():
    with gr.Row():
        gr.Markdown("<div id='user-guidance'>Please enter some text below to get started. Select one of the examples to see the output instantly.</div>")

# Create the main content section
def create_main():
    with gr.Row():
        with gr.Column():
            user_input = gr.Textbox(label="Your Input", placeholder="Enter something here...")
            output = gr.Textbox(label="Output", interactive=False)
            user_input.submit(process_input, inputs=user_input, outputs=output)
    return output  # Return the output component for further interactions in other sections

# Create the examples section
def create_examples(output):
    with gr.Row():
        gr.Markdown("<div id='examples'>Try one of these examples:</div>")
        example_1 = gr.Button("Example 1: Hello World")
        example_2 = gr.Button("Example 2: How are you?")
        example_1.click(get_example, inputs="Example 1", outputs=output)
        example_2.click(get_example, inputs="Example 2", outputs=output)

# Create the footer section
def create_footer():
    with gr.Row():
        gr.Markdown("<div id='footer'>© 2025 My Gradio App | All Rights Reserved</div>")

# Main function to bring all sections together
def ca_gui():
    with gr.Blocks(css=css) as ca_gui:
        create_header()  # Create the header
        create_user_guidance()  # Create user guidance section
        output = create_main()  # Create the main section (returns the output component)
        create_examples(output)  # Create the examples section
        create_footer()  # Create the footer section

    ca_gui.launch()