{% extends "docs/layout.html" %}

{% block title %}Application Solutions - Project Mycelium{% endblock %}

{% block docs_content %}
<div class="my-4">
    <h1>Application Solutions</h1>
    <p class="lead">Discover self-healing applications that maintain sovereignty while offering convenience.</p>

    <div class="doc-section">
        <h2>Overview</h2>
        <p>ThreeFold Application Solutions represent a new approach to application deployment that balances ease of use with digital sovereignty. These pre-configured, self-healing applications are designed to run on the ThreeFold Grid while allowing users to maintain complete control over their infrastructure and data.</p>
        
        <div class="alert alert-info">
            <div class="d-flex">
                <div class="me-3">
                    <i class="bi bi-info-circle-fill fs-3"></i>
                </div>
                <div>
                    <h5 class="alert-heading">The ThreeFold Difference</h5>
                    <p class="mb-0">Unlike traditional SaaS offerings that require surrendering control of your data to the provider, ThreeFold Application Solutions run on compute resources that remain under your sovereign control, while the solution provider manages only the application layer.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Application Categories</h2>
        <p>The Project Mycelium offers a diverse range of application solutions across multiple categories:</p>
        
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-people me-2 text-primary"></i>Collaboration</h5>
                        <p class="card-text">Tools for team communication, document sharing, and real-time collaboration.</p>
                        <p class="small text-muted">Examples: Office suites, project management, video conferencing</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-window me-2 text-primary"></i>Productivity</h5>
                        <p class="card-text">Applications to enhance personal and team productivity and workflow management.</p>
                        <p class="small text-muted">Examples: CRM systems, task management, time tracking</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-code-square me-2 text-primary"></i>Development</h5>
                        <p class="card-text">Tools and environments for software development and DevOps practices.</p>
                        <p class="small text-muted">Examples: Code repositories, CI/CD pipelines, development environments</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-database me-2 text-primary"></i>Database</h5>
                        <p class="card-text">Managed database solutions with high availability and performance optimization.</p>
                        <p class="small text-muted">Examples: SQL/NoSQL databases, time-series databases, analytics engines</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-chat-left-text me-2 text-primary"></i>Communication</h5>
                        <p class="card-text">Secure messaging, email, and communication platforms with privacy by design.</p>
                        <p class="small text-muted">Examples: Email servers, chat platforms, video conferencing</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-layout-text-window me-2 text-primary"></i>Content Management</h5>
                        <p class="card-text">Systems for creating, managing, and publishing digital content.</p>
                        <p class="small text-muted">Examples: WordPress, wikis, document management</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>How It Works</h2>
        <p>Application Solutions on the Project Mycelium function through a unique partnership model between users and solution providers:</p>
        
        <div class="row align-items-center mb-4">
            <div class="col-md-6">
                <img src="/static/images/docs/application-flow.svg" alt="Application Solution Flow Diagram" class="img-fluid rounded shadow">
            </div>
            <div class="col-md-6">
                <ol class="list-group list-group-numbered mb-0">
                    <li class="list-group-item d-flex">
                        <div>
                            <strong>Resource Provision</strong>
                            <p class="mb-0 text-muted">You allocate compute slices from your ThreeFold account to run the application.</p>
                        </div>
                    </li>
                    <li class="list-group-item d-flex">
                        <div>
                            <strong>Solution Deployment</strong>
                            <p class="mb-0 text-muted">The solution provider deploys their application on your sovereign compute resources.</p>
                        </div>
                    </li>
                    <li class="list-group-item d-flex">
                        <div>
                            <strong>Application Management</strong>
                            <p class="mb-0 text-muted">The provider handles updates, maintenance, and ensures the application remains operational.</p>
                        </div>
                    </li>
                    <li class="list-group-item d-flex">
                        <div>
                            <strong>Payment Model</strong>
                            <p class="mb-0 text-muted">You pay the solution provider in USD Credits based on the agreed-upon pricing model.</p>
                        </div>
                    </li>
                </ol>
            </div>
        </div>

        <div class="alert alert-success">
            <div class="d-flex">
                <div class="me-3">
                    <i class="bi bi-shield-check fs-3"></i>
                </div>
                <div>
                    <h5 class="alert-heading">Sovereignty Maintained</h5>
                    <p class="mb-0">Your data and applications remain on infrastructure under your control. The solution provider cannot access your data without your explicit permission, and you can revoke their management access at any time.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Self-Healing Architecture</h2>
        <p>All applications in the Project Mycelium feature self-healing capabilities to ensure reliability and minimal downtime:</p>
        
        <div class="row">
            <div class="col-md-6">
                <div class="d-flex mb-3">
                    <div class="flex-shrink-0 me-3">
                        <i class="bi bi-heart-pulse fs-3 text-danger"></i>
                    </div>
                    <div>
                        <h5>Continuous Monitoring</h5>
                        <p>Real-time health checks and performance metrics collection to detect issues before they affect your operations.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="d-flex mb-3">
                    <div class="flex-shrink-0 me-3">
                        <i class="bi bi-arrow-repeat fs-3 text-warning"></i>
                    </div>
                    <div>
                        <h5>Automated Recovery</h5>
                        <p>Systems automatically detect failures and initiate recovery procedures like service restarts or container recreation.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="d-flex mb-3">
                    <div class="flex-shrink-0 me-3">
                        <i class="bi bi-clock-history fs-3 text-primary"></i>
                    </div>
                    <div>
                        <h5>Backup Systems</h5>
                        <p>Regular automated backups with verification and point-in-time recovery capabilities to prevent data loss.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="d-flex mb-3">
                    <div class="flex-shrink-0 me-3">
                        <i class="bi bi-shield-check fs-3 text-success"></i>
                    </div>
                    <div>
                        <h5>Security Updates</h5>
                        <p>Automatic security patches and updates to protect against vulnerabilities and maintain system integrity.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Solution Provider Certification</h2>
        <p>Solution providers in the Project Mycelium undergo a certification process to ensure quality and reliability:</p>
        
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead class="table-primary">
                    <tr>
                        <th>Certification Level</th>
                        <th>Requirements</th>
                        <th>Benefits</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="badge bg-success">Certified</span></td>
                        <td>
                            <ul class="mb-0">
                                <li>Rigorous technical review</li>
                                <li>Security audits</li>
                                <li>SLA commitments</li>
                                <li>Customer support standards</li>
                            </ul>
                        </td>
                        <td>
                            <ul class="mb-0">
                                <li>Featured placement in marketplace</li>
                                <li>Higher trust rating</li>
                                <li>Extended support options</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-warning">Community</span></td>
                        <td>
                            <ul class="mb-0">
                                <li>Basic technical verification</li>
                                <li>Community-reviewed</li>
                                <li>Documentation standards</li>
                                <li>Transparent operations</li>
                            </ul>
                        </td>
                        <td>
                            <ul class="mb-0">
                                <li>Standard marketplace listing</li>
                                <li>Community support options</li>
                                <li>Path to certification</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="doc-section">
        <h2>Deployment Process</h2>
        <p>Deploying an application from the Project Mycelium is a straightforward process:</p>
        
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-shop fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">1. Select Application</h5>
                        <p class="card-text">Browse the marketplace and select your desired application solution.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-gear fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">2. Configure Options</h5>
                        <p class="card-text">Choose deployment options, resource levels, and customize settings.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-cpu fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">3. Allocate Resources</h5>
                        <p class="card-text">Assign compute slices to run the application from your account.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-check-circle fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">4. Deploy & Access</h5>
                        <p class="card-text">Complete deployment and receive access credentials.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Resource Requirements</h2>
        <p>Different applications have varying resource requirements based on their complexity and functionality:</p>
        
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">Light</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-cpu me-2"></i>
                            <div>1-2 vCPUs</div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-memory me-2"></i>
                            <div>2-4 GB RAM</div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="bi bi-hdd me-2"></i>
                            <div>10-20 GB Storage</div>
                        </div>
                        <hr>
                        <p class="text-muted mb-0">Suitable for personal blogs, simple websites, and lightweight applications.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0">Medium</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-cpu me-2"></i>
                            <div>2-4 vCPUs</div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-memory me-2"></i>
                            <div>4-8 GB RAM</div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="bi bi-hdd me-2"></i>
                            <div>20-50 GB Storage</div>
                        </div>
                        <hr>
                        <p class="text-muted mb-0">Ideal for team collaboration tools, content management systems, and small business applications.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">Heavy</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-cpu me-2"></i>
                            <div>4+ vCPUs</div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-memory me-2"></i>
                            <div>8+ GB RAM</div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="bi bi-hdd me-2"></i>
                            <div>50+ GB Storage</div>
                        </div>
                        <hr>
                        <p class="text-muted mb-0">Required for databases, enterprise applications, and resource-intensive workloads.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-light mt-5">
        <div class="card-body">
            <h2><i class="bi bi-app-indicator me-2"></i>Ready to Deploy Applications?</h2>
            <p class="lead">Browse our collection of sovereign applications and find the perfect solution for your needs.</p>
            <div class="mt-3">
                <a href="/marketplace/applications" class="btn btn-primary me-2">Explore Applications</a>
                <a href="/docs" class="btn btn-outline-secondary">Back to Documentation</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}