"""
Simplified Navigation Example with Header & Footer
Working example that demonstrates the header and footer functionality.
"""

import badgui as bg

# Home page
with bg.page("/", "HomePage", "Home - My Website"):
    
    # Header with navigation bar
    with bg.header(elevated=True) as header:
        header.classes("bg-primary text-white q-pa-md")
        
        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")
                bg.link("About", "/about").classes("text-white")
                bg.link("Services", "/services").classes("text-white")
                bg.link("Contact", "/contact").classes("text-white")
    
    # Main content area
    with bg.column() as main_content:
        main_content.classes("q-pa-lg")
        
        # Hero section
        with bg.card() as hero_card:
            hero_card.classes("bg-blue-500 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")
        
        # Features section
        with bg.row() as features_row:
            features_row.classes("q-gutter-lg")
            
            with bg.card() as feature1:
                feature1.classes("col-4")
                with bg.card_section():
                    bg.label("Features").classes("text-h5 q-mb-md text-primary")
                    bg.label("• Fast Python development")
                    bg.label("• Vue.js/Quasar output")
                    bg.label("• NiceGUI-like syntax")
            
            with bg.card() as feature2:
                feature2.classes("col-4")
                with bg.card_section():
                    bg.label("Services").classes("text-h5 q-mb-md text-primary")
                    bg.label("• Web Development")
                    bg.label("• UI/UX Design")
                    bg.label("• Consulting")
            
            with bg.card() as feature3:
                feature3.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 Frontend")
                    bg.label("• Quasar Framework")
    
    # # Footer
    # with bg.footer() as footer:
    #     footer.classes("bg-dark text-white q-pa-md")
        
    #     with bg.column():
    #         with bg.row() as footer_content:
    #             footer_content.classes("justify-between items-start")
                
    #             # Company info
    #             with bg.column() as company_info:
    #                 company_info.classes("col-4")
    #                 bg.label("My Website").classes("text-h6 q-mb-sm")
    #                 bg.label("Building the future of web development.")
                    
    #             # Quick links
    #             with bg.column() as quick_links:
    #                 quick_links.classes("col-4")
    #                 bg.label("Quick Links").classes("text-h6 q-mb-sm")
    #                 bg.link("Home", "/").classes("text-white")
    #                 bg.link("About", "/about").classes("text-white")
    #                 bg.link("Services", "/services").classes("text-white")
    #                 bg.link("Contact", "/contact").classes("text-white")
                
    #             # Contact info
    #             with bg.column() as contact_info:
    #                 contact_info.classes("col-4")
    #                 bg.label("Contact").classes("text-h6 q-mb-sm")
    #                 bg.label("📧 contact@mywebsite.com")
    #                 bg.label("📞 +1 (555) 123-4567")
            
    #         # Copyright
    #         with bg.row() as copyright_row:
    #             copyright_row.classes("justify-center q-mt-lg")
    #             bg.label("© 2024 My Website. Built with BadGUI.").classes("text-center")

# About page
with bg.page("/about", "AboutPage", "About - My Website"):
    
    # Header
    with bg.header(elevated=True) as header:
        header.classes("bg-primary text-white q-pa-md")
        with bg.row() as nav_row:
            nav_row.classes("items-center justify-between w-full")
            bg.label("My Website").classes("text-h4 font-bold")
            with bg.row() as nav_menu:
                nav_menu.classes("q-gutter-md")
                bg.link("Home", "/").classes("text-white")
                bg.link("About", "/about").classes("text-white font-bold")
                bg.link("Services", "/services").classes("text-white")
                bg.link("Contact", "/contact").classes("text-white")
    
    # Main content
    with bg.column() as main_content:
        main_content.classes("q-pa-lg")
        bg.label("About Us").classes("text-h3 q-mb-lg text-center")
        
        with bg.card():
            with bg.card_section():
                bg.label("Our Story").classes("text-h5 q-mb-md text-primary")
                bg.label("We create amazing web applications using BadGUI framework.")
    
    # Footer
    with bg.footer() as footer:
        footer.classes("bg-dark text-white q-pa-md")
        with bg.row() as footer_content:
            footer_content.classes("justify-center")
            bg.label("© 2024 My Website. Built with BadGUI.")

if __name__ == "__main__":
    print("🌟 BadGUI Navigation Example with Header & Footer")
    print("Features:")
    print("  • Header component with navigation")
    print("  • Footer component with structured content")
    print("  • Multi-page website structure")
    print("  • Quasar layout components")
    print()
    
    # Start the development server
    bg.dev(port=3005)