//! # Basic Layout Example
//! 
//! Demonstrates the simplest way to use foundation components to create
//! a basic application layout with header, content, and footer.

use rustelo_components::{
    navigation::{BrandHeader, Footer, NavMenu},
    content::UnifiedContentCard,
    ui::SpaLink,
};
use leptos::*;

/// Basic layout using foundation components directly
#[component]
pub fn BasicLayout() -> impl IntoView {
    view! {
        <div class="min-h-screen flex flex-col">
            // Header with navigation
            <BrandHeader 
                brand_name="My Rustelo App"
                logo_url="/logo.svg"
                class="shadow-sm"
            >
                <NavMenu orientation="horizontal">
                    <SpaLink href="/" active_class="text-blue-600">
                        "Home"
                    </SpaLink>
                    <SpaLink href="/about" active_class="text-blue-600">
                        "About"
                    </SpaLink>
                    <SpaLink href="/contact" active_class="text-blue-600">
                        "Contact"
                    </SpaLink>
                </NavMenu>
            </BrandHeader>

            // Main content area  
            <main class="flex-1 container mx-auto px-4 py-8">
                <UnifiedContentCard 
                    title="Welcome to Rustelo"
                    subtitle="A modern web framework for Rust"
                >
                    <p class="mb-4">
                        "This is a basic layout example using foundation components. "
                        "The header, navigation, content card, and footer are all "
                        "provided by the components foundation library."
                    </p>
                    
                    <div class="flex gap-4">
                        <SpaLink href="/docs" class="btn btn-primary">
                            "Documentation"
                        </SpaLink>
                        <SpaLink href="/examples" class="btn btn-secondary">
                            "More Examples"
                        </SpaLink>
                    </div>
                </UnifiedContentCard>
                
                // Additional content sections
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
                    <UnifiedContentCard 
                        title="Fast Development"
                        image_url="/features/speed.svg"
                    >
                        <p>"Build web applications quickly with pre-built components."</p>
                    </UnifiedContentCard>
                    
                    <UnifiedContentCard 
                        title="Type Safety"
                        image_url="/features/safety.svg" 
                    >
                        <p>"Leverage Rust's type system for reliable web applications."</p>
                    </UnifiedContentCard>
                    
                    <UnifiedContentCard 
                        title="Modern Stack"
                        image_url="/features/modern.svg"
                    >
                        <p>"Built with Leptos, WebAssembly, and modern web standards."</p>
                    </UnifiedContentCard>
                </div>
            </main>

            // Footer
            <Footer copyright="© 2024 My Company">
                <div class="flex space-x-4">
                    <SpaLink href="/privacy" class="text-gray-600 hover:text-gray-800">
                        "Privacy Policy"
                    </SpaLink>
                    <SpaLink href="/terms" class="text-gray-600 hover:text-gray-800">
                        "Terms of Service"
                    </SpaLink>
                    <SpaLink href="/support" class="text-gray-600 hover:text-gray-800">
                        "Support"
                    </SpaLink>
                </div>
            </Footer>
        </div>
    }
}

// Example of using the layout in a full app
#[component]
pub fn App() -> impl IntoView {
    view! {
        <BasicLayout />
    }
}

/*
To use this example:

1. Add to your Cargo.toml:
```toml
[dependencies]
components = { path = "path/to/components" }
leptos = { version = "0.8", features = ["csr"] }
```

2. In your main.rs:
```rust
use basic_layout::App;

fn main() {
    mount_to_body(|| view! { <App /> });
}
```

This provides:
- ✅ Responsive header with navigation
- ✅ Flexible main content area
- ✅ Reusable content cards
- ✅ SPA-aware navigation links
- ✅ Professional footer

The layout is:
- 📱 Mobile-responsive by default
- ♿ Accessible with proper ARIA attributes
- 🎨 Styled with utility classes (works with Tailwind CSS)
- 🔗 Uses SPA routing for fast navigation
- 🧩 Composable - easy to modify and extend
*/