Spry/website/Pages/FreedomPage.vala

using Astralis;
using Spry;

/**
 * FreedomPage - Free/Libre philosophy page
 * 
 * Celebrates the free software roots and values of the project
 */
public class FreedomPage : PageComponent {
    
    public const string ROUTE = "/freedom";
    
    public override string markup { get {
        return """
        <div sid="freedom-page" class="section">
            <div class="container">
                <!-- Hero -->
                <section class="freedom-section" style="margin-bottom: var(--space-12);">
                    <div class="freedom-icon">🕊</div>
                    <h1>Free as in Freedom</h1>
                    <p>
                        Spry, Astralis, and Inversion are Free/Libre Open Source Software.
                        We believe software freedom is essential for a free society.
                    </p>
                </section>

                <!-- The Four Freedoms -->
                <section style="margin-bottom: var(--space-12);">
                    <div class="section-header">
                        <h2>The Four Essential Freedoms</h2>
                        <p>As defined by the Free Software Foundation</p>
                    </div>
                    
                    <div class="features-grid">
                        <div class="feature-card">
                            <div class="feature-icon purple">0️⃣</div>
                            <h3>Freedom 0</h3>
                            <p><strong>The freedom to run the program as you wish, for any purpose.</strong></p>
                            <p style="margin-top: var(--space-2);">Use Spry for personal projects, commercial applications, education, or anything else. No restrictions.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon blue">1️⃣</div>
                            <h3>Freedom 1</h3>
                            <p><strong>The freedom to study how the program works, and change it.</strong></p>
                            <p style="margin-top: var(--space-2);">Full source code is available. Learn from it, modify it, make it your own.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">2️⃣</div>
                            <h3>Freedom 2</h3>
                            <p><strong>The freedom to redistribute copies so you can help others.</strong></p>
                            <p style="margin-top: var(--space-2);">Share Spry with your friends, colleagues, and community. Help spread software freedom.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon purple">3️⃣</div>
                            <h3>Freedom 3</h3>
                            <p><strong>The freedom to distribute modified versions to others.</strong></p>
                            <p style="margin-top: var(--space-2);">Improve Spry and share your improvements. Give the whole community a benefit.</p>
                        </div>
                    </div>
                </section>

                <!-- Why Free Software Matters -->
                <section class="demo-section" style="margin-bottom: var(--space-12);">
                    <h2>💚 Why Free Software Matters</h2>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-6);">
                        <div>
                            <h3>🔓 Transparency</h3>
                            <p>With source code available, you can verify exactly what the software does. No hidden behavior, no secret data collection.</p>
                        </div>
                        <div>
                            <h3>🛡 Security</h3>
                            <p>Open code means more eyes reviewing it. Security vulnerabilities can be found and fixed by anyone in the community.</p>
                        </div>
                        <div>
                            <h3>📚 Learning</h3>
                            <p>Free software is a treasure trove of knowledge. Study real-world code to become a better developer.</p>
                        </div>
                        <div>
                            <h3>🌐 Community</h3>
                            <p>Free software builds communities. Contributors from around the world work together to improve shared resources.</p>
                        </div>
                        <div>
                            <h3>♾ Longevity</h3>
                            <p>Free software can't be discontinued. If the original authors stop maintaining it, the community can continue.</p>
                        </div>
                        <div>
                            <h3>⚖ Ethics</h3>
                            <p>Respecting users' freedom is the ethical approach to software development. Users deserve control over their computing.</p>
                        </div>
                    </div>
                </section>

                <!-- Licensing -->
                <section class="demo-section" style="margin-bottom: var(--space-12);">
                    <h2>📜 Licensing</h2>
                    
                    <div class="ecosystem-grid" style="margin-top: var(--space-6);">
                        <div class="ecosystem-card spry">
                            <h3>
                                <div class="ecosystem-logo">S</div>
                                Spry
                            </h3>
                            <p>Licensed under the <strong>LGPL v2.1</strong> or later.</p>
                            <p style="margin-top: var(--space-2);">You can use Spry in proprietary applications while modifications to Spry itself must be shared.</p>
                        </div>
                        <div class="ecosystem-card astralis">
                            <h3>
                                <div class="ecosystem-logo">A</div>
                                Astralis
                            </h3>
                            <p>Licensed under the <strong>LGPL v2.1</strong> or later.</p>
                            <p style="margin-top: var(--space-2);">Build high-performance web services on top of Astralis without licensing restrictions.</p>
                        </div>
                        <div class="ecosystem-card inversion">
                            <h3>
                                <div class="ecosystem-logo">I</div>
                                Inversion
                            </h3>
                            <p>Licensed under the <strong>LGPL v2.1</strong> or later.</p>
                            <p style="margin-top: var(--space-2);">Use dependency injection in any project with the freedom to keep your code private.</p>
                        </div>
                    </div>
                </section>

                <!-- Contributing -->
                <section class="demo-section" style="margin-bottom: var(--space-12);">
                    <h2>🤝 Contributing</h2>
                    <p>We welcome contributions from everyone! Here's how you can help:</p>
                    
                    <div class="features-grid" style="margin-top: var(--space-6);">
                        <div class="feature-card">
                            <div class="feature-icon blue">💻</div>
                            <h3>Code</h3>
                            <p>Fix bugs, add features, improve performance. Every contribution makes Spry better for everyone.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon green">📝</div>
                            <h3>Documentation</h3>
                            <p>Write tutorials, improve API docs, create examples. Help others learn and use Spry effectively.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon purple">🐛</div>
                            <h3>Testing</h3>
                            <p>Report bugs, test new releases, write test cases. Quality assurance is essential for reliability.</p>
                        </div>
                    </div>
                </section>

                <!-- Quote -->
                <section class="demo-section">
                    <blockquote class="pull-quote">
                        <p>"Free software is a matter of liberty, not price. To understand the concept, you should think of 'free' as in 'free speech,' not as in 'free beer.'"</p>
                        <cite>— Richard Stallman</cite>
                    </blockquote>
                </section>

                <!-- CTA -->
                <div class="text-center" style="margin-top: var(--space-12);">
                    <h2>Join the Community</h2>
                    <p style="margin-bottom: var(--space-6);">Start building with free software today.</p>
                    <div class="hero-actions" style="justify-content: center;">
                        <a href="/demo" class="btn btn-primary">Try Demo</a>
                        <a href="/features" class="btn btn-secondary">Explore Features</a>
                    </div>
                </div>
            </div>
        </div>
        """;
    }}
}