website/hub/services/templates/calculator/roi_calculator_help.html

{% extends 'base.html' %}
{% load static %}

{% block title %}ROI Calculator Help - Servala Investment Models{% endblock %}

{% block extra_css %}
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
<style>
.help-section {
    margin-bottom: 2rem;
}
.help-section h2 {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.help-section h3 {
    color: #28a745;
    margin-top: 1.5rem;
}
.comparison-table {
    font-size: 0.9rem;
}
.model-card {
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
}
.loan-model {
    border-left-color: #ffc107;
}
.direct-model {
    border-left-color: #28a745;
}

/* Enhanced navigation styling */
.list-group-item {
    border: none !important;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: block !important;
    width: 100% !important;
    clear: both;
}

.list-group-flush {
    display: flex !important;
    flex-direction: column !important;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    padding-left: 1rem !important;
}

.list-group-item.active {
    background-color: #007bff;
    color: white;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Section spacing */
.help-section {
    scroll-margin-top: 2rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container my-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1>ROI Calculator Help</h1>
                    <p class="text-muted">Understanding Servala's Investment Models</p>
                </div>
                <div>
                    <a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-primary">
                        <i class="bi bi-arrow-left"></i> Back to Calculator
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- Overview Section -->
            <div class="help-section" id="overview">
                <h2><i class="bi bi-lightbulb"></i> Overview</h2>
                <p>The ROI Calculator provides simultaneous comparison of both investment models, showing real-time results for each scenario. You can instantly see how both models perform without switching between them.</p>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="model-card loan-model">
                            <h5><i class="bi bi-bank"></i> Loan Model</h5>
                            <p><strong>3-8% Annual Returns</strong></p>
                            <p>Fixed interest lending with guaranteed monthly payments. Low risk, predictable returns.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="model-card direct-model">
                            <h5><i class="bi bi-rocket"></i> Direct Investment</h5>
                            <p><strong>15-40% Potential Returns</strong></p>
                            <p>Performance-based revenue sharing with scaling bonuses and extended grace periods.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Currency Support Section -->
            <div class="help-section" id="currency-support">
                <h2><i class="bi bi-cash-stack"></i> Currency Support</h2>
                <p>The ROI Calculator supports multiple currencies to accommodate different regional markets and business requirements.</p>
                
                <h3>Supported Currencies</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="model-card">
                            <h5><i class="bi bi-cash"></i> Swiss Franc (CHF)</h5>
                            <p><strong>Default Currency</strong></p>
                            <ul>
                                <li>Swiss locale formatting (de-CH)</li>
                                <li>Standard decimal separators</li>
                                <li>Traditional Swiss business format</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="model-card">
                            <h5><i class="bi bi-currency-euro"></i> Euro (EUR)</h5>
                            <p><strong>European Markets</strong></p>
                            <ul>
                                <li>European locale formatting (de-DE)</li>
                                <li>Standard European decimal separators</li>
                                <li>EU business format compliance</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h3>How Currency Selection Works</h3>
                <p>Currency can be selected in the main configuration section of the calculator. When you change currency:</p>
                <ul>
                    <li><strong>All displays update automatically:</strong> Investment amounts, revenue figures, and results</li>
                    <li><strong>Proper localization:</strong> Numbers are formatted according to the selected currency's regional standards</li>
                    <li><strong>Export consistency:</strong> PDF and CSV exports use the selected currency throughout</li>
                    <li><strong>Real-time conversion:</strong> All calculations maintain the same values while updating display format</li>
                </ul>

                <h3>Important Notes</h3>
                <div class="alert alert-info">
                    <h6><i class="bi bi-info-circle"></i> Currency Display Only</h6>
                    <p>The calculator displays amounts in your selected currency but does not perform currency conversion. All input values should be entered in your chosen currency. For example, if you select EUR, enter your investment amounts in Euros.</p>
                </div>

                <div class="alert alert-warning">
                    <h6><i class="bi bi-exclamation-triangle"></i> Consistency Important</h6>
                    <p>Ensure all your inputs (investment amount, revenue per instance, etc.) are in the same currency for accurate calculations. Mixing currencies will produce incorrect results.</p>
                </div>
            </div>

            <!-- Loan Model Section -->
            <div class="help-section" id="loan-model">
                <h2><i class="bi bi-bank"></i> Loan Model (3-7% Returns)</h2>
                
                <h3>How It Works</h3>
                <p>You lend capital to Servala at a fixed interest rate, receiving guaranteed monthly payments regardless of business performance.</p>
                
                <h4>Key Features</h4>
                <ul>
                    <li><strong>Investment Range:</strong> 100,000 - 2,000,000 (in your selected currency)</li>
                    <li><strong>Interest Rates:</strong> 3-8% annually</li>
                    <li><strong>Payment Schedule:</strong> Fixed monthly payments</li>
                    <li><strong>Risk Level:</strong> Very low - contractually guaranteed</li>
                    <li><strong>Break-even:</strong> Typically 12-18 months</li>
                </ul>

                <h4>Payment Calculation</h4>
                <p>Monthly payments use standard amortization:</p>
                <code>Monthly Payment = P × [r(1+r)^n] / [(1+r)^n - 1]</code>
                <p class="small text-muted mt-2">Where P = Principal, r = Monthly rate, n = Total payments</p>

                <h4>Best For</h4>
                <ul>
                    <li>CSPs prioritizing predictable, guaranteed returns</li>
                    <li>Limited capacity for active sales involvement</li>
                    <li>Conservative risk tolerance</li>
                    <li>Need for steady cash flow</li>
                </ul>
            </div>

            <!-- Direct Investment Section -->
            <div class="help-section" id="direct-model">
                <h2><i class="bi bi-rocket"></i> Direct Investment (15-40% Returns)</h2>
                
                <h3>How It Works</h3>
                <p>Invest directly in Servala's operations and earn returns through revenue sharing that scales with performance and investment size.</p>
                
                <h3>Total Revenue Potential</h3>
                <div class="model-card direct-model">
                    <h5><i class="bi bi-cash-stack"></i> Dual Revenue Streams</h5>
                    <p><strong>Service Revenue:</strong> Monthly fees from Servala managed services (shared with Servala based on your investment terms)</p>
                    <p><strong>Core Service Revenue:</strong> Additional revenue from selling compute, storage, and infrastructure to support each managed service instance (100% retained by CSP)</p>
                    <p class="text-muted"><small>Example: 50 service fee + 100 compute/storage = 150 total revenue per instance per month (in your selected currency)</small></p>
                </div>

                <h4>Exponential Scaling Benefits</h4>
                <div class="table-responsive">
                    <table class="table table-striped comparison-table">
                        <thead>
                            <tr>
                                <th>Investment Amount</th>
                                <th>Instance Multiplier</th>
                                <th>Revenue Premium</th>
                                <th>Performance Bonus Cap</th>
                                <th>Churn Reduction</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>500,000</td>
                                <td>1.0x</td>
                                <td>Standard rates</td>
                                <td>15%</td>
                                <td>0%</td>
                            </tr>
                            <tr>
                                <td>1,000,000</td>
                                <td>2.2x</td>
                                <td>+20% per instance</td>
                                <td>20%</td>
                                <td>27%</td>
                            </tr>
                            <tr>
                                <td>1,500,000</td>
                                <td>3.5x</td>
                                <td>+40% per instance</td>
                                <td>25%</td>
                                <td>47%</td>
                            </tr>
                            <tr>
                                <td>2,000,000</td>
                                <td>5.0x</td>
                                <td>+60% per instance</td>
                                <td>35%</td>
                                <td>60%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h4>Grace Period Benefits</h4>
                <p>Larger investments get longer periods of 100% revenue retention:</p>
                <ul>
                    <li><strong>500,000:</strong> Base grace period (6 months default)</li>
                    <li><strong>1,000,000:</strong> Base + 6 months bonus</li>
                    <li><strong>1,500,000+:</strong> Base + 12 months bonus</li>
                    <li><strong>Maximum:</strong> Up to 60% of total investment timeframe</li>
                </ul>

                <h4>Scaled Performance Bonuses</h4>
                <p>Performance bonuses now scale with investment size, providing up to 35% additional revenue share for the largest investments:</p>
                <ul>
                    <li><strong>500,000 - 1M:</strong> Up to 15-20% bonus</li>
                    <li><strong>1M - 1.5M:</strong> Up to 20-25% bonus</li>
                    <li><strong>1.5M+:</strong> Up to 25-35% bonus</li>
                </ul>
                <p class="text-info"><small><i class="bi bi-lightbulb"></i> Performance bonuses activate when you exceed 110% of baseline performance and provide exponentially better rewards for larger investments.</small></p>
                
                <h4>Revenue Premium (Economies of Scale)</h4>
                <p><strong>New Feature:</strong> Large investments unlock revenue premiums per instance, reflecting economies of scale:</p>
                <ul>
                    <li><strong>1M investment:</strong> 20% premium on all revenue per instance</li>
                    <li><strong>1.5M investment:</strong> 40% premium on all revenue per instance</li>
                    <li><strong>2M investment:</strong> 60% premium on all revenue per instance</li>
                </ul>
                <p class="text-success"><small><i class="bi bi-graph-up-arrow"></i> This applies to both service revenue and core service revenue, dramatically improving ROI for larger investments.</small></p>
                
                <h4>Performance Multiplier (Automatic)</h4>
                <p>This metric shows how your actual performance compares to baseline expectations:</p>
                <ul>
                    <li><strong>1.0x:</strong> Meeting baseline expectations</li>
                    <li><strong>1.5x:</strong> 50% better than baseline (triggers performance bonuses)</li>
                    <li><strong>2.0x:</strong> Double the baseline performance</li>
                </ul>
                <p class="text-muted"><small><i class="bi bi-info-circle"></i> This is calculated automatically based on your investment scaling and cannot be manually configured.</small></p>

                <h4>Best For</h4>
                <ul>
                    <li>CSPs wanting to maximize return potential</li>
                    <li>Ability to actively promote managed services</li>
                    <li>Moderate to high risk tolerance</li>
                    <li>Longer investment horizons (2-5 years)</li>
                </ul>
            </div>

            <!-- Model Comparison -->
            <div class="help-section" id="comparison">
                <h2><i class="bi bi-bar-chart"></i> Model Comparison</h2>
                
                <h3>Investment Comparison - 3 Years ROI (Any Currency):</h3>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Model</th>
                                <th>Risk Level</th>
                                <th>Expected ROI</th>
                                <th>Break-even</th>
                                <th>Total Return</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Loan Model (5%)</strong></td>
                                <td><span class="badge bg-success">Low</span></td>
                                <td>8% over 3 years</td>
                                <td>12-18 months</td>
                                <td>80,000 profit</td>
                            </tr>
                            <tr>
                                <td><strong>Direct Investment (500K)</strong></td>
                                <td><span class="badge bg-success">Low-Moderate</span></td>
                                <td>200-250% over 3 years</td>
                                <td>12-18 months</td>
                                <td>1,000,000+ profit</td>
                            </tr>
                            <tr>
                                <td><strong>Direct Investment (1M)</strong></td>
                                <td><span class="badge bg-warning">Moderate</span></td>
                                <td>250-300% over 3 years</td>
                                <td>15-21 months</td>
                                <td>2,500,000+ profit</td>
                            </tr>
                            <tr>
                                <td><strong>Direct Investment (2M)</strong></td>
                                <td><span class="badge bg-danger">High</span></td>
                                <td>300-400% over 3 years</td>
                                <td>18-24 months</td>
                                <td>6,000,000+ profit</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Calculator Guide -->
            <div class="help-section" id="calculator-guide">
                <h2><i class="bi bi-calculator"></i> Using the Calculator</h2>
                
                <h3>Key Parameters</h3>
                <div class="row">
                    <div class="col-md-6">
                        <h5>Primary Settings</h5>
                        <ul>
                            <li><strong>Initial Investment:</strong> 100K - 2M in selected currency (with slider)</li>
                            <li><strong>Timeframe:</strong> 1-5 years</li>
                            <li><strong>Service Revenue/Instance:</strong> Monthly Servala service fee per managed instance (20-200 in selected currency)</li>
                            <li><strong>Growth Scenarios:</strong> Conservative, Moderate, Aggressive</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>Advanced Controls (Optional)</h5>
                        <ul>
                            <li><strong>Loan Rate:</strong> Annual interest (3-8%) - affects loan model calculations</li>
                            <li><strong>Servala Share:</strong> Revenue split percentage (10-40%) for direct investment</li>
                            <li><strong>Grace Period:</strong> 100% revenue retention period (0-24 months, direct investment)</li>
                            <li><strong>Core Revenue/Instance:</strong> Additional monthly revenue from selling compute/storage per instance (0-500 in selected currency)</li>
                            <li><strong>Churn Rates:</strong> Customer loss percentages by scenario (0-15%)</li>
                        </ul>
                    </div>
                </div>
                
                <h3>Understanding the Results</h3>
                <div class="row">
                    <div class="col-md-6">
                        <h5>Real-time Metrics</h5>
                        <ul>
                            <li><strong>Net Position:</strong> Your profit after subtracting initial investment</li>
                            <li><strong>ROI Percentage:</strong> Return on investment as a percentage</li>
                            <li><strong>Performance Multiplier:</strong> How actual results compare to baseline (automatic)</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>Detailed Analysis</h5>
                        <ul>
                            <li><strong>Scenario Comparison:</strong> See results for all enabled growth scenarios</li>
                            <li><strong>Model Distinction:</strong> Clear separation between Loan and Direct investment results</li>
                            <li><strong>Monthly Breakdown:</strong> Month-by-month financial progression</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Growth Scenarios -->
            <div class="help-section" id="scenarios">
                <h2><i class="bi bi-speedometer2"></i> Growth Scenarios</h2>
                
                <div class="row">
                    <div class="col-md-4">
                        <div class="card border-success">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0">Safe (Conservative)</h5>
                            </div>
                            <div class="card-body">
                                <p><strong>2% monthly churn</strong></p>
                                <p>Steady growth: 50-150 new instances/month</p>
                                <p>Best for: Established markets, risk-averse CSPs</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-warning">
                            <div class="card-header bg-warning text-white">
                                <h5 class="mb-0">Balanced (Moderate)</h5>
                            </div>
                            <div class="card-body">
                                <p><strong>3% monthly churn</strong></p>
                                <p>Balanced growth: 100-400 new instances/month</p>
                                <p>Best for: Competitive markets, balanced approach</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-danger">
                            <div class="card-header bg-danger text-white">
                                <h5 class="mb-0">Fast (Aggressive)</h5>
                            </div>
                            <div class="card-body">
                                <p><strong>5% monthly churn</strong></p>
                                <p>Rapid growth: 200-800 new instances/month</p>
                                <p>Best for: High-growth strategies, active sales</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Understanding Charts -->
            <div class="help-section" id="charts">
                <h2><i class="bi bi-graph-up"></i> Understanding the Charts</h2>
                
                <h3>1. ROI Progression Over Time</h3>
                <p>Shows when your investment becomes profitable (crosses zero line) and how returns develop month by month. Both models are shown with solid lines for Direct Investment and dashed lines for Loan Model.</p>

                <h3>2. Net Financial Position (Break-Even Analysis)</h3>
                <p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering initial investment. Both models displayed with different styling to distinguish between them.</p>

                <h3>3. Performance Comparison (ROI %)</h3>
                <p>ROI percentages across different growth scenarios, helping you understand best and worst-case outcomes. Shows both models side-by-side for each scenario.</p>

                <h3>4. CSP Revenue Breakdown (Direct Investment Only)</h3>
                <p>Detailed monthly revenue analysis showing the dual revenue streams available with direct investment:</p>
                <ul>
                    <li><strong>Service Revenue:</strong> Monthly fees from managed services (shared with Servala)</li>
                    <li><strong>Core Service Revenue:</strong> Infrastructure sales revenue (100% retained by CSP)</li>
                    <li><strong>CSP Total:</strong> Combined revenue retained by the CSP</li>
                    <li><strong>Servala Revenue:</strong> Revenue share paid to Servala</li>
                </ul>
                <p>This chart uses a right-side legend and different line styles to clearly distinguish between revenue components. Only shows direct investment scenarios for clarity.</p>
                
                <h4>Chart Legend & Styling</h4>
                <ul>
                    <li><strong>Solid Lines:</strong> Direct Investment Model</li>
                    <li><strong>Dashed Lines:</strong> Loan Model</li>
                    <li><strong>Dotted Lines:</strong> Core service revenue streams</li>
                    <li><strong>Green:</strong> Conservative Scenario</li>
                    <li><strong>Yellow:</strong> Moderate Scenario</li>
                    <li><strong>Red:</strong> Aggressive Scenario</li>
                    <li><strong>Gray:</strong> Servala revenue share</li>
                </ul>
                
                <h4>Chart Interactions</h4>
                <p>All charts are interactive - hover over data points to see exact values. The CSP Revenue Breakdown chart shows detailed tooltips with revenue breakdowns for each month.</p>
            </div>

            <!-- FAQ Section -->
            <div class="help-section" id="faq">
                <h2><i class="bi bi-question-circle"></i> Frequently Asked Questions</h2>
                
                <h4>What does "Net Position" mean?</h4>
                <p>Your final financial position: total CSP revenue minus your initial investment. Positive values indicate profitable investment.</p>

                <h4>How are performance bonuses calculated?</h4>
                <p>Bonuses apply when you exceed 110% of baseline instance growth, providing up to 15% additional revenue share. The system automatically tracks your performance multiplier (actual vs. baseline instances) and applies bonuses accordingly.</p>
                
                <h4>What is the Performance Multiplier?</h4>
                <p>The Performance Multiplier is an automatically calculated metric showing how your actual results compare to baseline expectations. For example, 1.5x means you're performing 50% better than the baseline scenario. <strong>This cannot be manually configured</strong> - it's calculated based on your investment scaling factors.</p>

                <h4>What is Core Service Revenue?</h4>
                <p>Core Service Revenue represents the additional monthly income CSPs earn by selling compute, storage, and infrastructure resources required to run each Servala managed service instance. This revenue stream is <strong>100% retained by the CSP</strong> and is not shared with Servala, providing additional profit potential beyond the service fees.</p>

                <h4>What happens during the grace period?</h4>
                <p>You keep 100% of service revenue during this period, plus all core service revenue. Grace periods are longer for larger investments (6-12 months).</p>

                <h4>How accurate are the projections?</h4>
                <p>Projections are based on industry benchmarks and Servala's historical data, but actual results may vary based on market conditions and your sales performance.</p>
            </div>

            <div class="text-center mt-5">
                <a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-primary btn-lg">
                    <i class="bi bi-calculator"></i> Start Using the Calculator
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}