{% 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-lg-3">
            <div class="sticky-top" style="top: 1rem;">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Quick Navigation</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <a class="list-group-item list-group-item-action" href="#overview">
                                <i class="bi bi-lightbulb me-2"></i>Overview
                            </a>
                            <a class="list-group-item list-group-item-action" href="#loan-model">
                                <i class="bi bi-bank me-2"></i>Loan Model (3-7%)
                            </a>
                            <a class="list-group-item list-group-item-action" href="#direct-model">
                                <i class="bi bi-rocket me-2"></i>Direct Investment (15-40%)
                            </a>
                            <a class="list-group-item list-group-item-action" href="#comparison">
                                <i class="bi bi-bar-chart me-2"></i>Model Comparison
                            </a>
                            <a class="list-group-item list-group-item-action" href="#calculator-guide">
                                <i class="bi bi-calculator me-2"></i>Using the Calculator
                            </a>
                            <a class="list-group-item list-group-item-action" href="#scenarios">
                                <i class="bi bi-speedometer2 me-2"></i>Growth Scenarios
                            </a>
                            <a class="list-group-item list-group-item-action" href="#charts">
                                <i class="bi bi-graph-up me-2"></i>Understanding Charts
                            </a>
                            <a class="list-group-item list-group-item-action" href="#faq">
                                <i class="bi bi-question-circle me-2"></i>FAQ
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-9">
            <!-- Overview Section -->
            <div class="help-section" id="overview">
                <h2><i class="bi bi-lightbulb"></i> Overview</h2>
                <p>The ROI Calculator helps you analyze potential returns from partnering with Servala through two distinct investment models:</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-7% 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>

            <!-- 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> CHF 100,000 - CHF 2,000,000</li>
                    <li><strong>Interest Rates:</strong> Typically 3-7% 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>

                <h4>Progressive Scaling Benefits:</h4>
                <div class="table-responsive">
                    <table class="table table-striped comparison-table">
                        <thead>
                            <tr>
                                <th>Investment Amount</th>
                                <th>Scaling Factor</th>
                                <th>Customer Acquisition</th>
                                <th>Churn Reduction</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>CHF 500,000</td>
                                <td>1.0x</td>
                                <td>Baseline</td>
                                <td>0%</td>
                            </tr>
                            <tr>
                                <td>CHF 1,000,000</td>
                                <td>1.5x</td>
                                <td>+50% vs baseline</td>
                                <td>20%</td>
                            </tr>
                            <tr>
                                <td>CHF 2,000,000</td>
                                <td>2.0x</td>
                                <td>+100% vs baseline</td>
                                <td>40%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h4>Grace Period Benefits:</h4>
                <p>Larger investments get longer periods of 100% revenue retention:</p>
                <ul>
                    <li><strong>CHF 500,000:</strong> 6 months grace period</li>
                    <li><strong>CHF 1,000,000:</strong> 8 months grace period</li>
                    <li><strong>CHF 2,000,000:</strong> 12 months grace period</li>
                </ul>

                <h4>Performance Bonuses:</h4>
                <p>CSPs exceeding 110% of baseline performance receive up to 15% additional revenue share.</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>CHF 1,000,000 Investment Over 3 Years Example:</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>CHF 80,000 profit</td>
                            </tr>
                            <tr>
                                <td><strong>Direct Investment</strong></td>
                                <td><span class="badge bg-warning">Moderate-High</span></td>
                                <td>35% over 3 years</td>
                                <td>15-24 months</td>
                                <td>CHF 540,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>Investment Settings:</h5>
                        <ul>
                            <li><strong>Investment Amount:</strong> CHF 100K - 2M</li>
                            <li><strong>Timeframe:</strong> 1-5 years</li>
                            <li><strong>Investment Model:</strong> Loan vs Direct</li>
                            <li><strong>Revenue/Instance:</strong> Monthly income per managed service</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>Advanced Controls:</h5>
                        <ul>
                            <li><strong>Loan Rate:</strong> Annual interest (3-8%)</li>
                            <li><strong>Servala Share:</strong> Revenue split percentage</li>
                            <li><strong>Grace Period:</strong> 100% revenue retention period</li>
                            <li><strong>Churn Rates:</strong> Customer loss percentages</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.</p>

                <h3>2. Net Financial Position</h3>
                <p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering initial investment.</p>

                <h3>3. Performance Comparison</h3>
                <p>ROI percentages across different growth scenarios, helping you understand best and worst-case outcomes.</p>

                <h3>4. Investment Model Comparison</h3>
                <p>Direct comparison of total returns between loan and direct investment models for your specific parameters.</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.</p>

                <h4>Can I switch between models?</h4>
                <p>Model changes require mutual agreement and may involve restructuring. Generally evaluated at renewal periods.</p>

                <h4>What happens during the grace period?</h4>
                <p>You keep 100% of revenue during this period. 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 %}