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

{% block title %}Documentation - Project Mycelium{% endblock %}

{% block docs_content %}
<div class="my-4">
    <h1>Project Mycelium Documentation</h1>
    <p class="lead">Welcome to the comprehensive guide to using the Project Mycelium platform.</p>

    <div class="alert alert-info mb-4">
        <div class="d-flex">
            <div class="me-3">
                <i class="bi bi-info-circle-fill fs-3"></i>
            </div>
            <div>
                <h5 class="alert-heading">Documentation Overview</h5>
                <p>This documentation provides detailed information about the Project Mycelium, its components, and how to effectively use the platform.</p>
                <p>Use the sidebar navigation to explore different sections of the documentation.</p>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Introduction</h2>
        <p>The Project Mycelium is an all-in-one platform facilitating the exchange of value through the USD credits system. It connects providers and users, enabling the discovery, acquisition, and management of various resources and services within a decentralized ecosystem.</p>
        <p>Our vision is a world where internet infrastructure and services are distributed, secure, and maintain user sovereignty. The marketplace is our solution to bring this vision to life, providing a platform where anyone can access or provide digital resources in a fair and transparent way.</p>
    </div>

    <div class="doc-section">
        <h2>Core Marketplace Categories</h2>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Marketplace</th>
                        <th>Description</th>
                        <th>Exchange Mechanism</th>
                        <th>Documentation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Compute Resources (Slices)</strong></td>
                        <td>Primary marketplace for compute capacity</td>
                        <td>Credits transferred based on resource utilization</td>
                        <td><a href="/docs/compute" class="btn btn-sm btn-outline-primary">Learn More</a></td>
                    </tr>
                    <tr>
                        <td><strong>Mycelium Nodes</strong></td>
                        <td>Physical computing hardware marketplace</td>
                        <td>Credits transferred based on hardware value</td>
                        <td><a href="/docs/mycelium_nodes" class="btn btn-sm btn-outline-primary">Learn More</a></td>
                    </tr>
                    <tr>
                        <td><strong>Mycelium Gateways</strong></td>
                        <td>Internet connectivity services</td>
                        <td>Credits paid based on bandwidth consumption</td>
                        <td><a href="/docs/gateways" class="btn btn-sm btn-outline-primary">Learn More</a></td>
                    </tr>
                    <tr>
                        <td><strong>Agentic Apps</strong></td>
                        <td>Pre-configured, self-healing applications</td>
                        <td>Credits paid to application providers for application management while users maintain sovereignty</td>
                        <td><a href="/docs/applications" class="btn btn-sm btn-outline-primary">Learn More</a></td>
                    </tr>
                    <tr>
                        <td><strong>Human Energy Services</strong></td>
                        <td>Professional technical services</td>
                        <td>Credits transferred based on agreed rates</td>
                        <td><a href="/docs/services" class="btn btn-sm btn-outline-primary">Learn More</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="doc-section">
        <h2>Core Principles</h2>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-shield-lock me-2"></i>Sovereignty</h5>
                        <p class="card-text">Consumers maintain control over their resources and deployed solutions.</p>
                        <p class="small text-muted">Learn how we ensure user sovereignty through our technical architecture and governance model.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-eye me-2"></i>Transparency</h5>
                        <p class="card-text">Clear pricing and reputation metrics for all marketplace participants.</p>
                        <p class="small text-muted">Discover how our transparent systems build trust across the ecosystem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-diagram-3 me-2"></i>Decentralization</h5>
                        <p class="card-text">Distributed architecture with no single point of control or failure.</p>
                        <p class="small text-muted">Explore how our decentralized architecture enhances security and resilience.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-people me-2"></i>Community</h5>
                        <p class="card-text">Built by and for the community, with fair and inclusive participation.</p>
                        <p class="small text-muted">Learn about our community governance model and how to get involved.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Getting Started</h2>
        <p>Ready to dive in? Here's how to get started with the Project Mycelium:</p>
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-person-plus-fill fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">1. Create an Account</h5>
                        <p class="card-text">Sign up and verify your identity to join the ThreeFold ecosystem.</p>
                        <a href="/register" class="btn btn-outline-primary mt-2">Register Now</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="bi bi-wallet2 fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title">2. Setup Credits Wallet</h5>
                        <p class="card-text">Configure your credits wallet to participate in marketplace transactions.</p>
                        <a href="/docs/credits" class="btn btn-outline-primary mt-2">Credits Guide</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <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">3. Explore the Marketplace</h5>
                        <p class="card-text">Browse available resources, applications, and services.</p>
                        <a href="/marketplace" class="btn btn-outline-primary mt-2">Visit Marketplace</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>Need Help?</h2>
        <p>If you can't find what you're looking for in the documentation, there are several ways to get help:</p>
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5><i class="bi bi-chat-dots me-2"></i>Community Forum</h5>
                        <p>Join our community forum to ask questions and share your experiences.</p>
                        <a href="#" class="btn btn-sm btn-outline-secondary">Visit Forum</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5><i class="bi bi-github me-2"></i>GitHub Issues</h5>
                        <p>Report bugs or request features through our GitHub repository.</p>
                        <a href="#" class="btn btn-sm btn-outline-secondary">Open Issue</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5><i class="bi bi-envelope me-2"></i>Contact Support</h5>
                        <p>Reach out to our support team for personalized assistance.</p>
                        <a href="https://threefoldfaq.crisp.help/en/" class="btn btn-sm btn-outline-secondary" target="_blank">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}