{% 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">
            <!-- Investment Scaling Benefits Section (MOST IMPORTANT) -->
            <div class="help-section" id="investment-benefits">
                <h2><i class="bi bi-trophy text-warning"></i> Why Larger Investments Win Big</h2>
                <div class="alert alert-success">
                    <h5><i class="bi bi-graph-up-arrow"></i> The More You Invest, The Better Your ROI</h5>
                    <p class="mb-0">Our calculator uses exponential scaling to reward larger investments with dramatically better returns. This isn't just about more money - it's about exponentially better performance per CHF / EUR invested.</p>
                </div>
                
                <h3>Exponential Scaling Benefits</h3>
                <div class="table-responsive">
                    <table class="table table-striped comparison-table">
                        <thead class="table-success">
                            <tr>
                                <th>Investment Amount</th>
                                <th>Instance Multiplier</th>
                                <th>Revenue Premium</th>
                                <th>Performance Bonus Cap</th>
                                <th>Grace Period Bonus</th>
                                <th>Expected 3-Year ROI</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>500,000</strong></td>
                                <td>1.0x</td>
                                <td>Standard rates</td>
                                <td>15%</td>
                                <td>Base period</td>
                                <td class="text-success"><strong>200-250%</strong></td>
                            </tr>
                            <tr class="table-warning">
                                <td><strong>1,000,000</strong></td>
                                <td><span class="text-primary">2.2x</span></td>
                                <td><span class="text-primary">+20% per instance</span></td>
                                <td>20%</td>
                                <td>+6 months</td>
                                <td class="text-success"><strong>250-300%</strong></td>
                            </tr>
                            <tr class="table-info">
                                <td><strong>1,500,000</strong></td>
                                <td><span class="text-success">3.5x</span></td>
                                <td><span class="text-success">+40% per instance</span></td>
                                <td>25%</td>
                                <td>+12 months</td>
                                <td class="text-success"><strong>300-350%</strong></td>
                            </tr>
                            <tr class="table-success">
                                <td><strong>2,000,000</strong></td>
                                <td><span class="text-success fw-bold">5.0x</span></td>
                                <td><span class="text-success fw-bold">+60% per instance</span></td>
                                <td><span class="text-success fw-bold">35%</span></td>
                                <td>+12 months</td>
                                <td class="text-success"><strong>350-400%</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Model Comparison Section -->
            <div class="help-section" id="comparison">
                <h2><i class="bi bi-bar-chart"></i> Investment Model Comparison</h2>
                
                <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>
                            <ul class="text-muted small">
                                <li>Guaranteed monthly payments</li>
                                <li>No performance risk</li>
                                <li>Fixed 3-8% annual returns</li>
                                <li>Contractual protection</li>
                            </ul>
                        </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>200-400% Potential Returns</strong></p>
                            <p>Performance-based revenue sharing with exponential scaling bonuses and extended grace periods.</p>
                            <ul class="text-success small">
                                <li>Exponential scaling rewards</li>
                                <li>Revenue premiums up to 60%</li>
                                <li>Performance bonuses up to 35%</li>
                                <li>Extended grace periods</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h3>Direct Comparison - 3 Years ROI:</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>Profit Potential</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Loan Model (1M)</strong></td>
                                <td><span class="badge bg-success">Low</span></td>
                                <td>15-25% over 3 years</td>
                                <td>12-18 months</td>
                                <td>150,000 - 250,000</td>
                            </tr>
                            <tr class="table-warning">
                                <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 - 3,000,000</td>
                            </tr>
                            <tr class="table-success">
                                <td><strong>Direct Investment (2M)</strong></td>
                                <td><span class="badge bg-danger">High</span></td>
                                <td>350-400% over 3 years</td>
                                <td>18-24 months</td>
                                <td>7,000,000 - 8,000,000</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Calculator Guide Section -->
            <div class="help-section" id="calculator-guide">
                <h2><i class="bi bi-calculator"></i> How to Use the Calculator</h2>
                
                <h3>Quick Start Guide</h3>
                <div class="row">
                    <div class="col-md-6">
                        <h5>Essential Settings</h5>
                        <ol>
                            <li><strong>Investment Amount:</strong> Use slider or type amount (100K - 2M)</li>
                            <li><strong>Timeframe:</strong> Choose 1-5 years for your projection</li>
                            <li><strong>Currency:</strong> Select CHF or EUR</li>
                            <li><strong>Growth Scenario:</strong> Enable scenarios that match your market</li>
                        </ol>
                    </div>
                    <div class="col-md-6">
                        <h5>Understanding Results</h5>
                        <ul>
                            <li><strong>Net Position:</strong> Your profit after investment</li>
                            <li><strong>ROI Percentage:</strong> Return on investment rate</li>
                            <li><strong>Investment Benefits:</strong> Real-time scaling display</li>
                            <li><strong>Break-even:</strong> When you start profiting</li>
                        </ul>
                    </div>
                </div>
                
                <h3>Advanced Parameters (Optional)</h3>
                <div class="row">
                    <div class="col-md-6">
                        <ul>
                            <li><strong>Service Revenue/Instance:</strong> Monthly Servala service fee (20-200)</li>
                            <li><strong>Core Revenue/Instance:</strong> Additional infrastructure revenue (0-500)</li>
                            <li><strong>Loan Rate:</strong> Annual interest for loan model (3-8%)</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul>
                            <li><strong>Servala Share:</strong> Revenue split for direct investment (10-40%)</li>
                            <li><strong>Grace Period:</strong> 100% revenue retention period (0-24 months)</li>
                            <li><strong>Churn Rates:</strong> Customer loss by scenario (0-15%)</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Growth Scenarios Section -->
            <div class="help-section" id="scenarios">
                <h2><i class="bi bi-speedometer2"></i> Growth Scenarios</h2>
                <p>Choose the scenarios that best match your market conditions and sales capabilities:</p>
                
                <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 Section -->
            <div class="help-section" id="charts">
                <h2><i class="bi bi-graph-up"></i> Reading the Charts</h2>
                
                <h3>Key Charts Explained</h3>
                <div class="row">
                    <div class="col-md-6">
                        <h5>1. ROI Progression Over Time</h5>
                        <p>Shows when your investment becomes profitable and how returns develop monthly. Look for the point where lines cross zero.</p>
                        
                        <h5>2. Net Financial Position</h5>
                        <p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering investment.</p>
                    </div>
                    <div class="col-md-6">
                        <h5>3. Performance Comparison</h5>
                        <p>ROI percentages across different growth scenarios - compare best and worst-case outcomes.</p>
                        
                        <h5>4. CSP Revenue Breakdown</h5>
                        <p>Monthly revenue analysis showing service revenue, core revenue, CSP total, and Servala revenue share.</p>
                    </div>
                </div>
                
                <h4>Chart Legend</h4>
                <ul>
                    <li><strong>Solid Lines:</strong> Direct Investment Model</li>
                    <li><strong>Dashed Lines:</strong> Loan Model</li>
                    <li><strong>Green:</strong> Conservative Scenario | <strong>Yellow:</strong> Moderate | <strong>Red:</strong> Aggressive</li>
                </ul>
            </div>

            <!-- Currency Support Section -->
            <div class="help-section" id="currency-support">
                <h2><i class="bi bi-cash-stack"></i> Currency Support</h2>
                
                <div class="row">
                    <div class="col-md-6">
                        <h5><i class="bi bi-cash"></i> Swiss Franc (CHF) - Default</h5>
                        <ul>
                            <li>Swiss locale formatting (de-CH)</li>
                            <li>Traditional Swiss business format</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5><i class="bi bi-currency-euro"></i> Euro (EUR)</h5>
                        <ul>
                            <li>European locale formatting (de-DE)</li>
                            <li>EU business format compliance</li>
                        </ul>
                    </div>
                </div>

                <div class="alert alert-info mt-3">
                    <h6><i class="bi bi-info-circle"></i> Important</h6>
                    <p class="mb-0">Currency selection only changes display format - no conversion is performed. Enter all amounts in your chosen currency.</p>
                </div>
            </div>

            <!-- Technical Details Section (LOWER PRIORITY) -->
            <div class="help-section" id="technical-details">
                <h2><i class="bi bi-gear"></i> Technical Details</h2>
                
                <div class="row">
                    <div class="col-md-6">
                        <h4>Loan Model Details</h4>
                        <ul>
                            <li><strong>Payment Calculation:</strong> Standard amortization formula</li>
                            <li><strong>Interest Rates:</strong> 3-8% annually</li>
                            <li><strong>Risk Level:</strong> Very low - contractually guaranteed</li>
                            <li><strong>Break-even:</strong> Typically 12-18 months</li>
                        </ul>
                        
                        <h5>Monthly Payment Formula</h5>
                        <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>
                    </div>
                    <div class="col-md-6">
                        <h4>Direct Investment Details</h4>
                        <ul>
                            <li><strong>Revenue Streams:</strong> Service fees + Core infrastructure sales</li>
                            <li><strong>Performance Tracking:</strong> Automatic baseline comparison</li>
                            <li><strong>Grace Periods:</strong> 100% revenue retention periods</li>
                            <li><strong>Churn Reduction:</strong> Investment-based customer success</li>
                        </ul>
                        
                        <h5>Performance Multiplier</h5>
                        <p>Automatically calculated: Actual instances ÷ Baseline instances</p>
                        <p class="text-muted small">1.0x = baseline, 1.5x = 50% above baseline, 2.0x = double baseline</p>
                    </div>
                </div>
            </div>

            <!-- FAQ Section (LOWEST PRIORITY) -->
            <div class="help-section" id="faq">
                <h2><i class="bi bi-question-circle"></i> Frequently Asked Questions</h2>
                
                <div class="row">
                    <div class="col-md-6">
                        <h5>Basic Questions</h5>
                        <h6>What does "Net Position" mean?</h6>
                        <p>Your profit after subtracting your initial investment. Positive = profitable.</p>

                        <h6>What is Core Service Revenue?</h6>
                        <p>Additional income from selling compute/storage per instance. <strong>100% retained by CSP</strong> - not shared with Servala.</p>

                        <h6>What happens during grace periods?</h6>
                        <p>You keep 100% of service revenue + all core revenue. Larger investments get longer grace periods.</p>
                    </div>
                    <div class="col-md-6">
                        <h5>Advanced Questions</h5>
                        <h6>How are performance bonuses calculated?</h6>
                        <p>Bonuses apply when you exceed 110% of baseline growth, providing up to 35% additional revenue share for large investments.</p>

                        <h6>What is the Performance Multiplier?</h6>
                        <p>Automatically calculated metric: actual results ÷ baseline expectations. Cannot be manually configured.</p>

                        <h6>How accurate are projections?</h6>
                        <p>Based on industry benchmarks and historical data, but actual results may vary with market conditions.</p>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5 mb-4">
                <a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-success btn-lg me-3">
                    <i class="bi bi-calculator"></i> Start Calculating Your ROI
                </a>
                <a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left"></i> Back to Calculator
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}