<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help Center - LocalLendables</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .help-category {
            border-left: 4px solid #28a745;
            transition: all 0.3s ease;
        }
        
        .help-category:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .help-item {
            border-bottom: 1px solid #e9ecef;
            padding: 1rem 0;
        }
        
        .help-item:last-child {
            border-bottom: none;
        }
        
        .workflow-demo {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .step-badge {
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
    </style>
</head>
<body class="bg-light">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/dashboard/1">
                <i class="fas fa-leaf me-2"></i>LocalLendables
            </a>
            <div class="d-flex align-items-center text-white">
                <a href="/dashboard/1" class="btn btn-outline-light btn-sm">
                    <i class="fas fa-home me-1"></i>Dashboard
                </a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- Header -->
        <div class="text-center mb-5">
            <h1><i class="fas fa-question-circle me-3"></i>Help Center</h1>
            <p class="lead">Your guide to LocalLendables lending workflows and features</p>
        </div>

        <!-- Quick Start Guide -->
        <div class="workflow-demo">
            <h3><i class="fas fa-rocket me-2"></i>Quick Start: Your First Lending Experience</h3>
            <div class="row mt-4">
                <div class="col-md-3 text-center mb-3">
                    <div class="step-badge mx-auto mb-2">1</div>
                    <h6>List Your Item</h6>
                    <small>Add photos and description</small>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="step-badge mx-auto mb-2">2</div>
                    <h6>Configure Workflow</h6>
                    <small>Set signature requirements</small>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="step-badge mx-auto mb-2">3</div>
                    <h6>Generate QR Code</h6>
                    <small>Print and attach (optional)</small>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="step-badge mx-auto mb-2">4</div>
                    <h6>Manage Loans</h6>
                    <small>Track and complete cycles</small>
                </div>
            </div>
        </div>

        <!-- Help Categories -->
        <div class="row">
            <!-- Workflow Management -->
            <div class="col-md-6 mb-4">
                <div class="card help-category h-100">
                    <div class="card-header">
                        <h5><i class="fas fa-cogs me-2"></i>Workflow Management</h5>
                    </div>
                    <div class="card-body">
                        <div class="help-item">
                            <h6>Digital Signatures</h6>
                            <p class="mb-1">Configure whether items require digital agreements before lending begins.</p>
                            <small class="text-muted">Tip: Use signatures for valuable items, skip for casual lending</small>
                        </div>
                        <div class="help-item">
                            <h6>Owner Push-Forward</h6>
                            <p class="mb-1">Bypass any workflow step or complete processes directly.</p>
                            <small class="text-muted">Perfect for trusted borrowers or urgent situations</small>
                        </div>
                        <div class="help-item">
                            <h6>Lending Timeline</h6>
                            <p class="mb-1">Track items through Agreement → Pickup → Active → Return → Completion.</p>
                            <small class="text-muted">Green dots show completed steps, yellow shows current step</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- QR Code System -->
            <div class="col-md-6 mb-4">
                <div class="card help-category h-100">
                    <div class="card-header">
                        <h5><i class="fas fa-qrcode me-2"></i>QR Code System</h5>
                    </div>
                    <div class="card-body">
                        <div class="help-item">
                            <h6>Mobile Scanning</h6>
                            <p class="mb-1">No app needed! Open your camera and point at the QR code.</p>
                            <small class="text-muted">Works on any smartphone to check status and take actions</small>
                        </div>
                        <div class="help-item">
                            <h6>Printing QR Labels</h6>
                            <p class="mb-1">Generate printable labels to attach permanently to your items.</p>
                            <small class="text-muted">Like FedEx tracking - each item gets one permanent QR code</small>
                        </div>
                        <div class="help-item">
                            <h6>QR-Free Operation</h6>
                            <p class="mb-1">All features work through the web dashboard without QR codes.</p>
                            <small class="text-muted">QR codes are convenient but never required</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Points & Rewards -->
            <div class="col-md-6 mb-4">
                <div class="card help-category h-100">
                    <div class="card-header">
                        <h5><i class="fas fa-star me-2"></i>Points & Rewards</h5>
                    </div>
                    <div class="card-body">
                        <div class="help-item">
                            <h6>Earning Points</h6>
                            <p class="mb-1">Get 1 point each for successful lending and borrowing cycles.</p>
                            <small class="text-muted">Points awarded when owner confirms return completion</small>
                        </div>
                        <div class="help-item">
                            <h6>Redeeming Rewards</h6>
                            <p class="mb-1">Use points for community rewards and local business coupons.</p>
                            <small class="text-muted">Check the Rewards page for available offers</small>
                        </div>
                        <div class="help-item">
                            <h6>QR Coupons</h6>
                            <p class="mb-1">Redeemed rewards come with QR codes for easy merchant scanning.</p>
                            <small class="text-muted">Show QR code at participating businesses</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Troubleshooting -->
            <div class="col-md-6 mb-4">
                <div class="card help-category h-100">
                    <div class="card-header">
                        <h5><i class="fas fa-tools me-2"></i>Troubleshooting</h5>
                    </div>
                    <div class="card-body">
                        <div class="help-item">
                            <h6>Stuck Workflow</h6>
                            <p class="mb-1">Owner can push forward any step using the action buttons.</p>
                            <small class="text-muted">Look for "Skip to Active" or "Mark Returned" buttons</small>
                        </div>
                        <div class="help-item">
                            <h6>QR Code Not Working</h6>
                            <p class="mb-1">Use the My Loans dashboard instead - same functionality.</p>
                            <small class="text-muted">QR codes are convenience features, not requirements</small>
                        </div>
                        <div class="help-item">
                            <h6>Missing Signatures</h6>
                            <p class="mb-1">Owner can bypass signature requirements if needed.</p>
                            <small class="text-muted">Or configure items to not require signatures</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Workflow Configuration Guide -->
        <div class="card mt-4">
            <div class="card-header">
                <h5><i class="fas fa-sliders-h me-2"></i>Workflow Configuration Examples</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="bg-success text-white p-3 rounded mb-2">
                            <h6><i class="fas fa-shield-alt me-2"></i>High-Value Items</h6>
                            <small>Signature: Required | Push-Forward: Enabled</small>
                        </div>
                        <small>Best for: Expensive tools, electronics, vehicles</small>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-warning text-dark p-3 rounded mb-2">
                            <h6><i class="fas fa-handshake me-2"></i>Casual Items</h6>
                            <small>Signature: Not Required | Push-Forward: Enabled</small>
                        </div>
                        <small>Best for: Books, basic tools, everyday items</small>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-danger text-white p-3 rounded mb-2">
                            <h6><i class="fas fa-lock me-2"></i>Regulated Items</h6>
                            <small>Signature: Required | Push-Forward: Disabled</small>
                        </div>
                        <small>Best for: Professional equipment, safety items</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="text-center mt-5">
            <h5>Quick Access</h5>
            <div class="d-flex justify-content-center gap-2 flex-wrap">
                <a href="/my-loans" class="btn btn-primary">
                    <i class="fas fa-handshake me-1"></i>My Loans
                </a>
                <a href="/rewards" class="btn btn-success">
                    <i class="fas fa-star me-1"></i>Rewards
                </a>
                <a href="/workflow-demo" class="btn btn-info">
                    <i class="fas fa-cogs me-1"></i>Workflow Demo
                </a>
                <a href="/workflow-results" class="btn btn-warning">
                    <i class="fas fa-check-circle me-1"></i>Test Results
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/contextual-help.js"></script>
</body>
</html>