#!/usr/bin/env python3
"""
Multi-page BadGUI Application Example
Demonstrates routing and navigation between pages.
"""

import badgui as bg

def create_navbar():
    """Create consistent navigation across all pages."""
    with bg.row().classes("bg-primary text-white q-pa-md justify-between items-center"):
        bg.label("My Multi-Page App").classes("text-h6 text-weight-bold")
        
        with bg.row().classes("q-gutter-md"):
            bg.link("Home", "/").classes("text-white no-underline q-btn q-btn-flat")
            bg.link("About", "/about").classes("text-white no-underline q-btn q-btn-flat")
            bg.link("Services", "/services").classes("text-white no-underline q-btn q-btn-flat")
            bg.link("Contact", "/contact").classes("text-white no-underline q-btn q-btn-flat")

def main():
    # Home Page
    with bg.page("/", "HomePage", "Home - My App"):
        create_navbar()
        
        with bg.column().classes("text-center q-pa-xl"):
            bg.label("Welcome Home").classes("text-h2 text-primary q-mb-lg")
            bg.label("This is a multi-page BadGUI application.").classes("text-h6 text-grey-7 q-mb-lg")
            
            with bg.row().classes("justify-center q-gutter-md"):
                bg.link("Learn About Us", "/about").classes("q-btn q-btn-primary")
                bg.link("Our Services", "/services").classes("q-btn q-btn-secondary")

    # About Page
    with bg.page("/about", "AboutPage", "About - My App"):
        create_navbar()
        
        with bg.column().classes("q-pa-xl max-width-md mx-auto"):
            bg.label("About Us").classes("text-h3 text-center q-mb-lg")
            bg.label("We are a company dedicated to building amazing web applications.").classes("text-body1 q-mb-md")
            bg.label("Our team has years of experience in web development.").classes("text-body1 q-mb-lg")
            
            bg.link("← Back to Home", "/").classes("q-btn q-btn-outline")

    # Services Page
    with bg.page("/services", "ServicesPage", "Services - My App"):
        create_navbar()
        
        with bg.column().classes("q-pa-xl"):
            bg.label("Our Services").classes("text-h3 text-center q-mb-xl")
            
            services = [
                ("Web Development", "Custom web applications built with modern technologies"),
                ("Mobile Apps", "Native and cross-platform mobile app development"),
                ("Consulting", "Technical consulting and architecture design"),
                ("Support", "Ongoing maintenance and support services")
            ]
            
            with bg.row().classes("q-col-gutter-lg"):
                for title, description in services:
                    with bg.column().classes("col-12 col-md-6 col-lg-3"):
                        with bg.column().classes("bg-white rounded shadow-2 q-pa-lg text-center"):
                            bg.label(title).classes("text-h6 text-primary q-mb-md")
                            bg.label(description).classes("text-body2")

    # Contact Page
    with bg.page("/contact", "ContactPage", "Contact - My App"):
        create_navbar()
        
        with bg.column().classes("q-pa-xl max-width-sm mx-auto"):
            bg.label("Contact Us").classes("text-h3 text-center q-mb-lg")
            
            # Contact form
            bg.input(placeholder="Your Name").classes("q-mb-md").props("filled required")
            bg.input(placeholder="Your Email").classes("q-mb-md").props("filled required type=email")
            bg.input(placeholder="Subject").classes("q-mb-md").props("filled required")
            bg.input(placeholder="Your Message").classes("q-mb-lg").props("filled required type=textarea rows=4")
            
            bg.button("Send Message").classes("q-btn q-btn-primary full-width q-mb-md")
            
            bg.link("← Back to Home", "/").classes("q-btn q-btn-outline full-width")

    bg.build("multipage-app-output")

if __name__ == "__main__":
    main()