"""
BadGUI Header & Footer Example
Demonstrates header and footer layout components with a complete navigation site.
"""

import badgui as bg

# Create the main page with header and footer layout
with bg.page("/", "HomePage", "Home - My Website"):
    
    # Header with navigation bar
    with bg.header(elevated=True) as header:
        header.classes("bg-primary text-white")
        with bg.row() as nav_row:
            nav_row.classes("items-center justify-between w-full")
            # Logo/Brand
            bg.label("My Website").classes("text-h4 font-bold")
            
            # Navigation menu
            with bg.row() as nav_menu:
                nav_menu.classes("q-gutter-md")
                bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300")
                bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300")
    
    # Main content area
    with bg.column() as main_content:
        main_content.classes("flex-grow q-pa-lg")
        # Hero section
        with bg.card().classes("bg-gradient-to-r from-blue-500 to-purple-600 text-white q-mb-lg"):
            with bg.card_section():
                bg.label("Welcome to My Website").classes("text-h3 text-center q-mb-md")
                bg.label("Building beautiful web applications with BadGUI").classes("text-h6 text-center opacity-90")
        
        # Content sections
        with bg.row().classes("q-gutter-lg"):
            # Features section
            with bg.card().classes("col-4"):
                with bg.card_section():
                    bg.label("Features").classes("text-h5 q-mb-md text-primary")
                    bg.label("• Fast development with Python")
                    bg.label("• Generates Vue.js/Quasar projects")
                    bg.label("• NiceGUI-like syntax")
                    bg.label("• Responsive design")
            
            # Services section
            with bg.card().classes("col-4"):
                with bg.card_section():
                    bg.label("Services").classes("text-h5 q-mb-md text-primary")
                    bg.label("• Web Application Development")
                    bg.label("• UI/UX Design")
                    bg.label("• Consulting Services")
                    bg.label("• Training & Support")
            
            # Technologies section
            with bg.card().classes("col-4"):
                with bg.card_section():
                    bg.label("Technologies").classes("text-h5 q-mb-md text-primary")
                    bg.label("• Python Backend")
                    bg.label("• Vue.js 3 Frontend")
                    bg.label("• Quasar Framework")
                    bg.label("• Modern CSS/Tailwind")
    
    # Footer
    with bg.footer().classes("bg-dark text-white"):
        with bg.column().classes("q-pa-md"):
            # Footer content
            with bg.row().classes("justify-between items-start"):
                # Company info
                with bg.column().classes("col-4"):
                    bg.label("My Website").classes("text-h6 q-mb-sm")
                    bg.label("Building the future of web development with BadGUI framework.")
                    
                # Quick links
                with bg.column().classes("col-4"):
                    bg.label("Quick Links").classes("text-h6 q-mb-sm")
                    with bg.column().classes("q-gutter-xs"):
                        bg.link("Home", "/").classes("text-white no-underline")
                        bg.link("About", "/about").classes("text-white no-underline")
                        bg.link("Services", "/services").classes("text-white no-underline")
                        bg.link("Contact", "/contact").classes("text-white no-underline")
                
                # Contact info
                with bg.column().classes("col-4"):
                    bg.label("Contact").classes("text-h6 q-mb-sm")
                    bg.label("📧 contact@mywebsite.com")
                    bg.label("📞 +1 (555) 123-4567")
                    bg.label("📍 123 Main St, City, State")
            
            # Copyright
            with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"):
                bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75")

# About page
with bg.page("/about", "AboutPage", "About - My Website"):
    
    # Header with navigation bar
    with bg.header(elevated=True).classes("bg-primary text-white"):
        with bg.row().classes("items-center justify-between w-full"):
            # Logo/Brand
            bg.label("My Website").classes("text-h4 font-bold")
            
            # Navigation menu
            with bg.row().classes("q-gutter-md"):
                bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300")
                bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300 font-bold")
                bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300")
    
    # Main content
    with bg.column().classes("flex-grow q-pa-lg"):
        bg.label("About Us").classes("text-h3 q-mb-lg text-center")
        
        with bg.card().classes("max-w-4xl mx-auto"):
            with bg.card_section():
                bg.label("Our Story").classes("text-h5 q-mb-md text-primary")
                bg.label("We are passionate developers who believe in making web development accessible and enjoyable. Our BadGUI framework combines the simplicity of Python with the power of modern web technologies.")
                
                bg.label("Our Mission").classes("text-h5 q-mb-md q-mt-lg text-primary")
                bg.label("To empower developers to create beautiful, functional web applications without the complexity of traditional web development. We bridge the gap between Python's simplicity and modern web frameworks.")
    
    # Footer (same as home page)
    with bg.footer().classes("bg-dark text-white"):
        with bg.column().classes("q-pa-md"):
            with bg.row().classes("justify-between items-start"):
                with bg.column().classes("col-4"):
                    bg.label("My Website").classes("text-h6 q-mb-sm")
                    bg.label("Building the future of web development with BadGUI framework.")
                    
                with bg.column().classes("col-4"):
                    bg.label("Quick Links").classes("text-h6 q-mb-sm")
                    with bg.column().classes("q-gutter-xs"):
                        bg.link("Home", "/").classes("text-white no-underline")
                        bg.link("About", "/about").classes("text-white no-underline")
                        bg.link("Services", "/services").classes("text-white no-underline")
                        bg.link("Contact", "/contact").classes("text-white no-underline")
                
                with bg.column().classes("col-4"):
                    bg.label("Contact").classes("text-h6 q-mb-sm")
                    bg.label("📧 contact@mywebsite.com")
                    bg.label("📞 +1 (555) 123-4567")
                    bg.label("📍 123 Main St, City, State")
            
            with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"):
                bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75")

# Services page
with bg.page("/services", "ServicesPage", "Services - My Website"):
    
    # Header with navigation bar
    with bg.header(elevated=True).classes("bg-primary text-white"):
        with bg.row().classes("items-center justify-between w-full"):
            bg.label("My Website").classes("text-h4 font-bold")
            
            with bg.row().classes("q-gutter-md"):
                bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300")
                bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300 font-bold")
                bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300")
    
    # Main content
    with bg.column().classes("flex-grow q-pa-lg"):
        bg.label("Our Services").classes("text-h3 q-mb-lg text-center")
        
        with bg.row().classes("q-gutter-lg justify-center"):
            # Web Development
            with bg.card().classes("col-5"):
                with bg.card_section():
                    bg.label("🌐 Web Development").classes("text-h5 q-mb-md text-primary")
                    bg.label("Custom web applications built with modern technologies. We specialize in Python backends and Vue.js frontends.")
                    
                with bg.card_actions():
                    bg.button("Learn More").classes("bg-primary text-white")
            
            # UI/UX Design
            with bg.card().classes("col-5"):
                with bg.card_section():
                    bg.label("🎨 UI/UX Design").classes("text-h5 q-mb-md text-primary")
                    bg.label("Beautiful, intuitive user interfaces that provide excellent user experience across all devices.")
                    
                with bg.card_actions():
                    bg.button("View Portfolio").classes("bg-primary text-white")
        
        with bg.row().classes("q-gutter-lg justify-center q-mt-lg"):
            # Consulting
            with bg.card().classes("col-5"):
                with bg.card_section():
                    bg.label("💡 Consulting").classes("text-h5 q-mb-md text-primary")
                    bg.label("Expert advice on technology choices, architecture decisions, and development best practices.")
                    
                with bg.card_actions():
                    bg.button("Get Consultation").classes("bg-primary text-white")
            
            # Training
            with bg.card().classes("col-5"):
                with bg.card_section():
                    bg.label("📚 Training").classes("text-h5 q-mb-md text-primary")
                    bg.label("Comprehensive training programs for your team on BadGUI, Vue.js, Python, and modern web development.")
                    
                with bg.card_actions():
                    bg.button("View Courses").classes("bg-primary text-white")
    
    # Footer
    with bg.footer().classes("bg-dark text-white"):
        with bg.column().classes("q-pa-md"):
            with bg.row().classes("justify-between items-start"):
                with bg.column().classes("col-4"):
                    bg.label("My Website").classes("text-h6 q-mb-sm")
                    bg.label("Building the future of web development with BadGUI framework.")
                    
                with bg.column().classes("col-4"):
                    bg.label("Quick Links").classes("text-h6 q-mb-sm")
                    with bg.column().classes("q-gutter-xs"):
                        bg.link("Home", "/").classes("text-white no-underline")
                        bg.link("About", "/about").classes("text-white no-underline")
                        bg.link("Services", "/services").classes("text-white no-underline")
                        bg.link("Contact", "/contact").classes("text-white no-underline")
                
                with bg.column().classes("col-4"):
                    bg.label("Contact").classes("text-h6 q-mb-sm")
                    bg.label("📧 contact@mywebsite.com")
                    bg.label("📞 +1 (555) 123-4567")
                    bg.label("📍 123 Main St, City, State")
            
            with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"):
                bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75")

# Contact page
with bg.page("/contact", "ContactPage", "Contact - My Website"):
    
    # Header with navigation bar
    with bg.header(elevated=True).classes("bg-primary text-white"):
        with bg.row().classes("items-center justify-between w-full"):
            bg.label("My Website").classes("text-h4 font-bold")
            
            with bg.row().classes("q-gutter-md"):
                bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300")
                bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300")
                bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300 font-bold")
    
    # Main content
    with bg.column().classes("flex-grow q-pa-lg"):
        bg.label("Contact Us").classes("text-h3 q-mb-lg text-center")
        
        with bg.row().classes("q-gutter-lg justify-center"):
            # Contact form
            with bg.card().classes("col-6"):
                with bg.card_section():
                    bg.label("Send us a message").classes("text-h5 q-mb-md text-primary")
                    
                    with bg.column().classes("q-gutter-md"):
                        bg.input(placeholder="Your Name", v_model="name").classes("full-width")
                        bg.input(placeholder="Your Email", v_model="email").classes("full-width")
                        bg.input(placeholder="Subject", v_model="subject").classes("full-width")
                        # Note: textarea would need to be implemented as a separate component
                        bg.input(placeholder="Your Message", v_model="message").classes("full-width")
                        bg.button("Send Message").classes("bg-primary text-white full-width")
            
            # Contact info
            with bg.card().classes("col-4"):
                with bg.card_section():
                    bg.label("Get in touch").classes("text-h5 q-mb-md text-primary")
                    
                    with bg.column().classes("q-gutter-md"):
                        with bg.row().classes("items-center"):
                            bg.label("📧")
                            with bg.column():
                                bg.label("Email")
                                bg.label("contact@mywebsite.com").classes("text-primary")
                        
                        with bg.row().classes("items-center"):
                            bg.label("📞")
                            with bg.column():
                                bg.label("Phone")
                                bg.label("+1 (555) 123-4567").classes("text-primary")
                        
                        with bg.row().classes("items-center"):
                            bg.label("📍")
                            with bg.column():
                                bg.label("Address")
                                bg.label("123 Main St, City, State 12345").classes("text-primary")
                        
                        with bg.row().classes("items-center"):
                            bg.label("🕒")
                            with bg.column():
                                bg.label("Hours")
                                bg.label("Mon-Fri: 9AM-6PM").classes("text-primary")
    
    # Footer
    with bg.footer().classes("bg-dark text-white"):
        with bg.column().classes("q-pa-md"):
            with bg.row().classes("justify-between items-start"):
                with bg.column().classes("col-4"):
                    bg.label("My Website").classes("text-h6 q-mb-sm")
                    bg.label("Building the future of web development with BadGUI framework.")
                    
                with bg.column().classes("col-4"):
                    bg.label("Quick Links").classes("text-h6 q-mb-sm")
                    with bg.column().classes("q-gutter-xs"):
                        bg.link("Home", "/").classes("text-white no-underline")
                        bg.link("About", "/about").classes("text-white no-underline")
                        bg.link("Services", "/services").classes("text-white no-underline")
                        bg.link("Contact", "/contact").classes("text-white no-underline")
                
                with bg.column().classes("col-4"):
                    bg.label("Contact").classes("text-h6 q-mb-sm")
                    bg.label("📧 contact@mywebsite.com")
                    bg.label("📞 +1 (555) 123-4567")
                    bg.label("📍 123 Main St, City, State")
            
            with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"):
                bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75")

if __name__ == "__main__":
    print("🌟 BadGUI Header & Footer Navigation Example")
    print("This example demonstrates:")
    print("  • Header component with navigation bar")
    print("  • Footer component with structured content")
    print("  • Multi-page website with consistent layout")
    print("  • Responsive design with Quasar components")
    print("  • Professional styling with Tailwind classes")
    print()
    
    # Start the development server
    bg.dev(port=3003)