{% extends "base.html" %}

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

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1>Project Mycelium</h1>
                <p class="lead mb-4">The all-in-one platform for decentralized compute resources, applications, and services within the ThreeFold ecosystem.</p>
                <div class="d-flex flex-wrap justify-content-center gap-3">
                    <a href="/register" class="btn btn-primary cta-primary">Get Started</a>
                    <a href="/login" class="btn btn-outline-secondary cta-secondary">Log In</a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="text-center">
                    <img src="/static/images/logo_light.png" alt="ThreeFold Logo" class="img-fluid" style="max-height: 150px;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Marketplace Preview Section -->
<section class="marketplace-preview">
    <div class="container">
        <div class="text-center mb-5">
            <h2>Discover the Project Mycelium</h2>
            <p class="lead">Find and access resources, applications and services in a sovereign, secure way</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-cpu text-primary display-4 mb-3"></i>
                        <h3>Compute Resources</h3>
                        <p>Access compute capacity (slices) from the decentralized ThreeFold Grid.</p>
                        <a href="/marketplace/compute" class="btn btn-sm btn-outline-primary">Explore</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-hdd-rack text-primary display-4 mb-3"></i>
                        <h3>Mycelium Nodes</h3>
                        <p>Buy and sell physical computing hardware to support the Grid.</p>
                        <a href="/marketplace/mycelium_nodes" class="btn btn-sm btn-outline-primary">Explore</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <i class="bi bi-app text-primary display-4 mb-3"></i>
                        <h3>Applications</h3>
                        <p>Discover self-healing applications that maintain sovereignty.</p>
                        <a href="/marketplace/applications" class="btn btn-sm btn-outline-primary">Explore</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="container">
        <div class="text-center mb-5">
            <h2>Frequently Asked Questions</h2>
            <p class="lead">Common questions about the Project Mycelium</p>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <!-- FAQ Item 1 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="false" aria-controls="faqCollapse1">
                                What is the Project Mycelium?
                            </button>
                        </h2>
                        <div id="faqCollapse1" class="accordion-collapse collapse" aria-labelledby="faqHeading1" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                The Project Mycelium is a central platform facilitating the exchange of value through the Credits system. It connects providers and users, enabling the discovery, acquisition, and management of various resources and services within the ThreeFold ecosystem.
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 2 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading2">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2" aria-expanded="false" aria-controls="faqCollapse2">
                                What can I find on the Marketplace?
                            </button>
                        </h2>
                        <div id="faqCollapse2" class="accordion-collapse collapse" aria-labelledby="faqHeading2" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                The Marketplace offers various categories including: Compute Resources (slices) for cloud computing, physical Mycelium Nodes for hardware, Mycelium Gateways for connectivity, self-healing Agentic Apps that maintain your data sovereignty, and Human Energy Services where you can access professional expertise.
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 3 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading3">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3" aria-expanded="false" aria-controls="faqCollapse3">
                                How does sovereignty work with self-healing applications?
                            </button>
                        </h2>
                        <div id="faqCollapse3" class="accordion-collapse collapse" aria-labelledby="faqHeading3" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Unlike traditional SaaS offerings where you surrender control to the provider, ThreeFold's model maintains your sovereignty in two ways:</p>
                                <ol class="mb-3">
                                    <li><strong>Direct Management:</strong> Manage your own compute slices directly for complete control</li>
                                    <li><strong>Sovereign Allocation:</strong> Allocate your sovereign compute slices to application providers who deploy and manage applications on your infrastructure</li>
                                </ol>
                                <p>With applications, you maintain control because:</p>
                                <ul>
                                    <li>You still own and control the underlying resources</li>
                                    <li>Your data remains on infrastructure under your control</li>
                                    <li>Providers cannot access your data without explicit permission</li>
                                    <li>You can revoke management access at any time</li>
                                    <li>Applications feature continuous monitoring, automated recovery, backup systems, and security updates</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 4 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading4">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse4" aria-expanded="false" aria-controls="faqCollapse4">
                                What are Credits and how do they work?
                            </button>
                        </h2>
                        <div id="faqCollapse4" class="accordion-collapse collapse" aria-labelledby="faqHeading4" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Credits are the intuitive USD-based currency system used within the marketplace, where 1 Credit = $1.00 USD. This modern approach makes pricing transparent and easy to understand. Credits facilitate seamless transactions between providers and users, with automatic top-up functionality to ensure uninterrupted service. You can purchase Credits with various payment methods, transfer them to other users, and the system automatically handles conversions for all marketplace transactions.
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 5 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading5">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse5" aria-expanded="false" aria-controls="faqCollapse5">
                                How do I get started with the Marketplace?
                            </button>
                        </h2>
                        <div id="faqCollapse5" class="accordion-collapse collapse" aria-labelledby="faqHeading5" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>Getting started is simple with three easy steps:</p>
                                <ol class="mb-3">
                                    <li><strong>Create Account:</strong> Create an account and verify your identity</li>
                                    <li><strong>Set Up Wallet:</strong> Set up your Credits wallet to participate in marketplace transactions, with optional auto top-up for seamless purchases</li>
                                    <li><strong>Explore Marketplace:</strong> Browse available resources, applications, and services</li>
                                </ol>
                                <p>The platform will guide you through the process of selecting, configuring, and deploying your chosen resources or services.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 6 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading6">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse6" aria-expanded="false" aria-controls="faqCollapse6">
                                How does auto top-up work?
                            </button>
                        </h2>
                        <div id="faqCollapse6" class="accordion-collapse collapse" aria-labelledby="faqHeading6" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Auto top-up ensures you never run out of Credits during important transactions. You can configure a threshold amount (e.g., $10) and a top-up amount (e.g., $25). When your balance falls below the threshold during a purchase, the system automatically adds the specified amount using your preferred payment method. This seamless process means your purchases complete without interruption, and you maintain control with daily and monthly spending limits for security.
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 7 -->
                    <div class="accordion-item mb-3">
                        <h2 class="accordion-header" id="faqHeading7">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse7" aria-expanded="false" aria-controls="faqCollapse7">
                                What are the core principles of ThreeFold?
                            </button>
                        </h2>
                        <div id="faqCollapse7" class="accordion-collapse collapse" aria-labelledby="faqHeading7" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>ThreeFold is built on four core principles:</p>
                                <ol>
                                    <li><strong>Sovereignty:</strong> Users maintain control over their resources and data</li>
                                    <li><strong>Transparency:</strong> Clear pricing and reputation metrics for all marketplace participants</li>
                                    <li><strong>Decentralization:</strong> Distributed architecture with no single point of control or failure</li>
                                    <li><strong>Community:</strong> Built by and for the community, with fair and inclusive participation</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
{% endblock %}