#!/usr/bin/env python3
"""
Multi-page BadGUI application demonstrating routing between pages.
"""

import badgui as ui

def main():
    # ===== HOME PAGE =====
    ui.page("/", "HomePage", "Home")
    
    # Welcome section
    ui.label("Welcome to BadGUI Multi-Page App!", classes=["text-h3", "text-primary", "q-mb-lg"])
    
    # Navigation links
    with ui.row(classes=["q-gutter-md", "q-mb-xl"]):
        ui.link("Go to About", "/about", classes=["q-btn", "q-btn--outline"])
        ui.link("Visit Contact", "/contact", classes=["q-btn", "q-btn--outline"]) 
        ui.link("View Products", "/products", classes=["q-btn", "q-btn--outline"])
    
    # Main content
    with ui.column(classes=["q-gutter-md"]):
        ui.label("This is the home page content", classes=["text-body1"])
        
        with ui.row(classes=["q-pa-md", "bg-grey-1"]):
            ui.label("Feature 1", classes=["text-weight-bold"])
            ui.label("Amazing functionality")
            
        with ui.row(classes=["q-pa-md", "bg-grey-1"]):
            ui.label("Feature 2", classes=["text-weight-bold"])
            ui.label("Even better features")
    
    # ===== ABOUT PAGE =====
    ui.page("/about", "AboutPage", "About Us")
    
    ui.label("About Our Company", classes=["text-h3", "text-secondary", "q-mb-lg"])
    
    # Navigation back
    with ui.row(classes=["q-gutter-sm", "q-mb-lg"]):
        ui.link("← Back to Home", "/", classes=["q-btn", "q-btn--flat"])
        ui.link("Contact Us", "/contact", classes=["q-btn", "q-btn--outline"])
    
    # About content
    with ui.column(classes=["q-gutter-md"]):
        ui.label("We are a company dedicated to making Vue.js development easier with Python.", 
                classes=["text-body1"])
        
        ui.label("Our Mission", classes=["text-h5", "text-primary"])
        ui.label("To bridge the gap between Python and modern web development.", 
                classes=["text-body2"])
                
        with ui.row(classes=["q-pa-lg", "bg-blue-1"]):
            ui.label("Founded: 2024", classes=["q-mr-lg"])
            ui.label("Team Size: 5+", classes=["q-mr-lg"])
            ui.label("Projects: 10+")
    
    # ===== CONTACT PAGE =====
    ui.page("/contact", "ContactPage", "Contact")
    
    ui.label("Get in Touch", classes=["text-h3", "text-accent", "q-mb-lg"])
    
    # Navigation
    with ui.row(classes=["q-gutter-sm", "q-mb-lg"]):
        ui.link("← Home", "/", classes=["q-btn", "q-btn--flat"])
        ui.link("About Us", "/about", classes=["q-btn", "q-btn--flat"])
    
    # Contact form
    with ui.column(classes=["q-gutter-md", "q-pa-md", "bg-grey-1"]):
        ui.label("Contact Form", classes=["text-h5"])
        
        ui.input(placeholder="Your Name", classes=["q-mb-md"])
        ui.input(placeholder="Your Email", classes=["q-mb-md"])
        ui.input(placeholder="Your Message", classes=["q-mb-md"])
        
        with ui.row():
            ui.button("Send Message", classes=["q-btn", "bg-primary", "text-white"])
            ui.button("Clear", classes=["q-btn", "q-btn--outline", "q-ml-md"])
    
    # ===== PRODUCTS PAGE =====
    ui.page("/products", "ProductsPage", "Our Products")
    
    ui.label("Our Products", classes=["text-h3", "text-primary", "q-mb-lg"])
    
    # Navigation
    with ui.row(classes=["q-gutter-sm", "q-mb-lg"]):
        ui.link("← Home", "/", classes=["q-btn", "q-btn--flat"])
        ui.link("About", "/about", classes=["q-btn", "q-btn--flat"])
        ui.link("Contact", "/contact", classes=["q-btn", "q-btn--flat"])
    
    # Products grid
    with ui.column(classes=["q-gutter-lg"]):
        # Product 1
        with ui.row(classes=["q-pa-lg", "bg-blue-1"]):
            with ui.column():
                ui.label("BadGUI Framework", classes=["text-h5", "text-primary"])
                ui.label("Python to Vue.js code generator", classes=["text-body2"])
                ui.button("Learn More", classes=["q-btn", "q-btn--outline", "q-mt-md"])
        
        # Product 2  
        with ui.row(classes=["q-pa-lg", "bg-green-1"]):
            with ui.column():
                ui.label("BadGUI CLI", classes=["text-h5", "text-positive"])
                ui.label("Command line tools for rapid development", classes=["text-body2"])
                ui.button("Download", classes=["q-btn", "q-btn--outline", "q-mt-md"])
        
        # Product 3
        with ui.row(classes=["q-pa-lg", "bg-orange-1"]):
            with ui.column():
                ui.label("BadGUI Templates", classes=["text-h5", "text-warning"])
                ui.label("Pre-built templates for common use cases", classes=["text-body2"])
                ui.button("Browse", classes=["q-btn", "q-btn--outline", "q-mt-md"])
    
    # Build the Vue.js project
    print("🚀 Building BadGUI Multi-Page project...")
    ui.build(output_dir="./multipage-output", project_name="badgui-multipage")

if __name__ == "__main__":
    main()