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

{% block title %}USD Credits - Project Mycelium{% endblock %}

{% block docs_content %}
<div class="docs-content">
    <h1>USD Credits</h1>
    <p class="lead">Project Mycelium uses a simple USD credits system for all transactions.</p>

    <div class="alert alert-info">
        <h5>Simple and Intuitive</h5>
        <p>1 Credit = $1 USD. No complex conversions or confusing terminology.</p>
    </div>

    <h2>How Credits Work</h2>
    <ul>
        <li><strong>Direct USD Pricing:</strong> All products are priced in clear USD amounts</li>
        <li><strong>Easy Top-up:</strong> Add credits to your wallet with standard payment methods</li>
        <li><strong>Auto Top-up:</strong> Automatically purchase credits when your balance gets low</li>
        <li><strong>One-Click Purchasing:</strong> Buy products instantly with the "Buy Now" button</li>
    </ul>

    <h2>Auto Top-up</h2>
    <p>Configure automatic credit purchasing for seamless marketplace experience:</p>
    <ol>
        <li>Go to your <a href="/dashboard/wallet">Wallet</a></li>
        <li>Enable Auto Top-up in the settings section</li>
        <li>Set your threshold (e.g., when credits fall below $10)</li>
        <li>Set your top-up amount (e.g., purchase $25 when triggered)</li>
        <li>Choose your payment method</li>
    </ol>

    <h2>Versatile Purchase Options</h2>
    <p>The marketplace offers two convenient ways to purchase products:</p>
    <ul>
        <li><strong>Buy Now:</strong> Instant one-click purchase with automatic balance management and auto top-up integration</li>
        <li><strong>Add to Cart:</strong> Traditional shopping cart experience for purchasing multiple items together</li>
    </ul>
    
    <div class="alert alert-tip">
        <strong>Best of Both Worlds:</strong> Use "Buy Now" for quick single purchases, or "Add to Cart" when you want to compare multiple products or make bulk purchases.
    </div>

    <h2>Getting Started</h2>
    <ol>
        <li>Create your Project Mycelium account</li>
        <li>Add credits to your wallet</li>
        <li>Browse the marketplace</li>
        <li>Click "Buy Now" for instant purchases</li>
    </ol>
</div>
{% endblock %}