Spry/website/Pages/FeaturesPage.vala

using Astralis;
using Invercargill;
using Invercargill.DataStructures;
using Inversion;
using Spry;

/**
 * FeaturesPage - Detailed features overview
 * 
 * Showcases all the capabilities of the Spry framework
 */
public class FeaturesPage : PageComponent {
    
    public const string ROUTE = "/features";
    
    public override string markup { get {
        return """
        <div sid="features-page" class="section">
            <div class="container">
                <!-- Header -->
                <div class="section-header">
                    <h1>Features</h1>
                    <p>Everything you need to build modern, reactive web applications in Vala</p>
                </div>

                <!-- Component System -->
                <section class="demo-section">
                    <h2>🧩 Component-Based Architecture</h2>
                    <p>Build your UI with reusable, composable components that encapsulate state and behavior.</p>
                    
                    <div class="features-grid" style="margin-top: var(--space-6);">
                        <div class="feature-card">
                            <div class="feature-icon purple">📦</div>
                            <h3>Encapsulated State</h3>
                            <p>Each component manages its own state, making your code predictable and testable.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon blue">🔗</div>
                            <h3>Outlets & Children</h3>
                            <p>Use outlets to compose components together, creating complex UIs from simple parts.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">♻</div>
                            <h3>Lifecycle Hooks</h3>
                            <p>prepare() and handle_action() hooks give you control over component behavior.</p>
                        </div>
                    </div>
                </section>

                <!-- HTMX Integration -->
                <section class="demo-section">
                    <h2>⚡ HTMX Integration</h2>
                    <p>Add dynamic behavior without writing JavaScript. Spry makes HTMX even more powerful.</p>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot red"></div>
                                <div class="code-dot yellow"></div>
                                <div class="code-dot green"></div>
                            </div>
                            <span class="code-lang">HTML with Spry Attributes</span>
                        </div>
                        <pre><code>&lt;!-- Declarative actions --&gt;
&lt;button spry-action=":Toggle"
        spry-target="item"
        hx-swap="outerHTML"&gt;
    Toggle Item
&lt;/button&gt;

&lt;!-- Cross-component communication --&gt;
&lt;form spry-action="ListComponent:Add"
      hx-target="#my-list"&gt;
    &lt;input name="title" /&gt;
    &lt;button type="submit"&gt;Add&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Out-of-band updates --&gt;
&lt;div spry-global="header"&gt;
    Updates automatically when data changes
&lt;/div&gt;</code></pre>
                    </div>
                    
                    <div class="features-grid" style="margin-top: var(--space-6);">
                        <div class="feature-card">
                            <div class="feature-icon purple">🎯</div>
                            <h3>spry-action</h3>
                            <p>Declare component actions directly in your markup. No event listeners needed.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon blue">🔍</div>
                            <h3>spry-target</h3>
                            <p>Target elements within your component using simple sid references.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">🌐</div>
                            <h3>spry-global</h3>
                            <p>Update multiple page regions with out-of-band HTMX swaps.</p>
                        </div>
                    </div>
                </section>

                <!-- Dependency Injection -->
                <section class="demo-section">
                    <h2>💉 Dependency Injection</h2>
                    <p>Powered by Inversion, get clean, testable code with automatic dependency resolution.</p>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot red"></div>
                                <div class="code-dot yellow"></div>
                                <div class="code-dot green"></div>
                            </div>
                            <span class="code-lang">Vala</span>
                        </div>
                        <pre><code>class TodoComponent : Component {
    // Inject dependencies in field initializers
    private TodoStore store = inject&lt;TodoStore&gt;();
    private ComponentFactory factory = inject&lt;ComponentFactory&gt;();
    private HttpContext http = inject&lt;HttpContext&gt;();
}

// Register services with different lifecycles
application.add_singleton&lt;AppState&gt;();      // One instance forever
application.add_scoped&lt;ComponentFactory&gt;(); // One per request
application.add_transient&lt;MyComponent&gt;();  // New each time</code></pre>
                    </div>
                </section>

                <!-- Templates -->
                <section class="demo-section">
                    <h2>📄 Page Templates</h2>
                    <p>Create reusable layouts with nested templates that automatically wrap your pages.</p>
                    
                    <div class="features-grid" style="margin-top: var(--space-6);">
                        <div class="feature-card">
                            <div class="feature-icon purple">🏗</div>
                            <h3>Nested Layouts</h3>
                            <p>Stack templates to create complex layouts from simple, reusable pieces.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon blue">📍</div>
                            <h3>Route-Based</h3>
                            <p>Templates are applied based on route prefixes, automatically wrapping matching pages.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">🔌</div>
                            <h3>Template Outlets</h3>
                            <p>Use <spry-template-outlet /> to define where child content renders.</p>
                        </div>
                    </div>
                </section>

                <!-- Performance -->
                <section class="demo-section">
                    <h2>🚀 High Performance</h2>
                    <p>Built on Astralis for native code performance with web framework convenience.</p>
                    
                    <div class="stats-grid" style="margin-top: var(--space-6);">
                        <div class="stat-card">
                            <div class="stat-value">Native</div>
                            <div class="stat-label">Code Execution</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">Brotli</div>
                            <div class="stat-label">Compression</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">Zero</div>
                            <div class="stat-label">JavaScript Required</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">Fast</div>
                            <div class="stat-label">Resource Loading</div>
                        </div>
                    </div>
                </section>

                <!-- CTA -->
                <div class="text-center" style="margin-top: var(--space-12);">
                    <h2>Ready to Build?</h2>
                    <p style="margin-bottom: var(--space-6);">Try the interactive demo and see Spry in action.</p>
                    <a href="/demo" class="btn btn-primary">Try Live Demo</a>
                </div>
            </div>
        </div>
        """;
    }}
}