<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ateni Pay API Documentation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary-color: #4a6cf7;
            --secondary-color: #6c5ce7;
            --dark-color: #1a1a2e;
            --light-color: #f8f9fa;
            --gray-color: #6c757d;
            --border-color: #e9ecef;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }

        body {
            display: flex;
            min-height: 100vh;
            color: #333;
            background-color: #f5f7fa;
        }

        /* Sidebar Styles */
        .sidebar {
            width: 280px;
            background-color: white;
            border-right: 1px solid var(--border-color);
            height: 100vh;
            position: fixed;
            overflow-y: auto;
            padding: 20px 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }

        .logo {
            padding: 0 20px 20px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .logo h1 {
            font-size: 1.5rem;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo span {
            color: var(--primary-color);
        }

        .sidebar-menu {
            padding: 0 15px;
        }

        .menu-section {
            margin-bottom: 25px;
        }

        .menu-section h3 {
            font-size: 0.9rem;
            text-transform: uppercase;
            color: var(--gray-color);
            margin-bottom: 10px;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .menu-items {
            list-style: none;
        }

        .menu-items li {
            margin-bottom: 8px;
        }

        .menu-items a {
            display: block;
            padding: 8px 12px;
            text-decoration: none;
            color: var(--dark-color);
            border-radius: 5px;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .menu-items a:hover {
            background-color: rgba(74, 108, 247, 0.1);
            color: var(--primary-color);
        }

        .menu-items a.active {
            background-color: rgba(74, 108, 247, 0.15);
            color: var(--primary-color);
            font-weight: 600;
            border-left: 3px solid var(--primary-color);
        }

        /* Main Content Styles */
        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 30px 40px;
            max-width: 1000px;
        }

        .content-section {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .content-section h2 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .content-section h3 {
            font-size: 1.4rem;
            margin: 25px 0 15px;
            color: var(--dark-color);
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .content-section p {
            line-height: 1.6;
            margin-bottom: 15px;
            color: #555;
        }

        .content-section ul, .content-section ol {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .content-section li {
            margin-bottom: 8px;
            line-height: 1.6;
        }

        /* Code Blocks */
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
        }

        .code-block pre {
            white-space: pre-wrap;
        }

        .endpoint {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 10px 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
            border-left: 4px solid var(--primary-color);
        }

        .method {
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: 600;
            margin-right: 15px;
            font-size: 0.85rem;
        }

        .get {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        .post {
            background-color: #d4edda;
            color: #155724;
        }

        .put {
            background-color: #fff3cd;
            color: #856404;
        }

        .delete {
            background-color: #f8d7da;
            color: #721c24;
        }

        .endpoint-url {
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
        }

        /* Table Styles */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        /* Status Badges */
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-warning {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar Navigation -->
    <div class="sidebar">
        <div class="logo">
            <h1><i class="fas fa-credit-card"></i> <span>Ateni</span> Pay</h1>
        </div>
        <div class="sidebar-menu">
            <div class="menu-section">
                <h3>Getting Started</h3>
                <ul class="menu-items">
                    <li><a href="#introduction" class="active">Introduction</a></li>
                    <li><a href="#authentication">Authentication</a></li>
                    <li><a href="#quickstart">Quick Start</a></li>
                </ul>
            </div>
            <div class="menu-section">
                <h3>API Reference</h3>
                <ul class="menu-items">
                    <li><a href="#payments">Payments</a></li>
                    <li><a href="#refunds">Refunds</a></li>
                    <li><a href="#customers">Customers</a></li>
                    <li><a href="#webhooks">Webhooks</a></li>
                </ul>
            </div>
            <div class="menu-section">
                <h3>Guides</h3>
                <ul class="menu-items">
                    <li><a href="#security">Security</a></li>
                    <li><a href="#testing">Testing</a></li>
                    <li><a href="#errors">Error Handling</a></li>
                </ul>
            </div>
            <div class="menu-section">
                <h3>Resources</h3>
                <ul class="menu-items">
                    <li><a href="#sdks">SDKs</a></li>
                    <li><a href="#support">Support</a></li>
                    <li><a href="#changelog">Changelog</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Introduction Section -->
        <div class="content-section" id="introduction">
            <h2><i class="fas fa-info-circle"></i> Introduction</h2>
            <p>Welcome to the Ateni Pay API documentation. Ateni Pay provides a simple, secure way to accept payments online. Our API follows REST principles and returns JSON-encoded responses.</p>
            
            <h3>Base URL</h3>
            <div class="code-block">
                <pre>https://api.atenipay.com/v1</pre>
            </div>
            
            <h3>Features</h3>
            <ul>
                <li>Accept credit card payments</li>
                <li>Process refunds</li>
                <li>Manage customer profiles</li>
                <li>Recurring billing</li>
                <li>Secure tokenization</li>
                <li>Webhook notifications</li>
            </ul>
        </div>

        <!-- Authentication Section -->
        <div class="content-section" id="authentication">
            <h2><i class="fas fa-key"></i> Authentication</h2>
            <p>All API requests must be authenticated using your secret API key. Include it in the Authorization header of your requests.</p>
            
            <div class="code-block">
                <pre>Authorization: Bearer sk_test_1234567890abcdef</pre>
            </div>
            
            <p>You can find your API keys in the <a href="#">Ateni Pay Dashboard</a>. Use test keys for development and live keys for production.</p>
            
            <h3>API Keys</h3>
            <table>
                <thead>
                    <tr>
                        <th>Key Type</th>
                        <th>Prefix</th>
                        <th>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Publishable Key</td>
                        <td>pk_test_...</td>
                        <td>Client-side operations</td>
                    </tr>
                    <tr>
                        <td>Secret Key</td>
                        <td>sk_test_...</td>
                        <td>Server-side operations</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Quick Start Section -->
        <div class="content-section" id="quickstart">
            <h2><i class="fas fa-rocket"></i> Quick Start</h2>
            <p>Follow these steps to make your first payment with Ateni Pay:</p>
            
            <h3>1. Create a Payment Intent</h3>
            <p>First, create a Payment Intent on your server:</p>
            
            <div class="endpoint">
                <span class="method post">POST</span>
                <span class="endpoint-url">/payment_intents</span>
            </div>
            
            <div class="code-block">
                <pre>{
  "amount": 2000,
  "currency": "usd",
  "payment_method_types": ["card"],
  "metadata": {
    "order_id": "12345"
  }
}</pre>
            </div>
            
            <h3>2. Confirm the Payment</h3>
            <p>On the client side, use the client secret from the Payment Intent to confirm the payment:</p>
            
            <div class="code-block">
                <pre>// Using Ateni.js
ateni.confirmCardPayment(clientSecret, {
  payment_method: {
    card: cardElement,
    billing_details: {
      name: 'John Doe'
    }
  }
});</pre>
            </div>
        </div>

        <!-- Payments Section -->
        <div class="content-section" id="payments">
            <h2><i class="fas fa-money-bill-wave"></i> Payments</h2>
            <p>Process one-time and recurring payments with the Payments API.</p>
            
            <h3>Create a Payment</h3>
            <div class="endpoint">
                <span class="method post">POST</span>
                <span class="endpoint-url">/payments</span>
            </div>
            
            <h4>Request Parameters</h4>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Required</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>amount</td>
                        <td>integer</td>
                        <td><span class="badge badge-success">Yes</span></td>
                        <td>Amount in smallest currency unit (e.g., cents)</td>
                    </tr>
                    <tr>
                        <td>currency</td>
                        <td>string</td>
                        <td><span class="badge badge-success">Yes</span></td>
                        <td>3-letter ISO currency code</td>
                    </tr>
                    <tr>
                        <td>payment_method</td>
                        <td>string</td>
                        <td><span class="badge badge-success">Yes</span></td>
                        <td>ID of the payment method to use</td>
                    </tr>
                    <tr>
                        <td>customer</td>
                        <td>string</td>
                        <td><span class="badge badge-warning">Optional</span></td>
                        <td>ID of the customer making the payment</td>
                    </tr>
                </tbody>
            </table>
            
            <h4>Example Response</h4>
            <div class="code-block">
                <pre>{
  "id": "pay_123456789",
  "object": "payment",
  "amount": 2000,
  "currency": "usd",
  "status": "succeeded",
  "customer": "cus_123456789",
  "created": 1616547890
}</pre>
            </div>
        </div>

        <!-- Refunds Section -->
        <div class="content-section" id="refunds">
            <h2><i class="fas fa-undo"></i> Refunds</h2>
            <p>Process full or partial refunds for payments.</p>
            
            <h3>Create a Refund</h3>
            <div class="endpoint">
                <span class="method post">POST</span>
                <span class="endpoint-url">/refunds</span>
            </div>
            
            <h4>Request Parameters</h4>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Type</th>
                        <th>Required</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>payment</td>
                        <td>string</td>
                        <td><span class="badge badge-success">Yes</span></td>
                        <td>ID of the payment to refund</td>
                    </tr>
                    <tr>
                        <td>amount</td>
                        <td>integer</td>
                        <td><span class="badge badge-warning">Optional</span></td>
                        <td>Amount to refund (defaults to full amount)</td>
                    </tr>
                    <tr>
                        <td>reason</td>
                        <td>string</td>
                        <td><span class="badge badge-warning">Optional</span></td>
                        <td>Reason for the refund</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Webhooks Section -->
        <div class="content-section" id="webhooks">
            <h2><i class="fas fa-bell"></i> Webhooks</h2>
            <p>Webhooks allow you to receive real-time notifications about events that happen in your Ateni Pay account.</p>
            
            <h3>Setting Up Webhooks</h3>
            <p>Configure your webhook endpoint in the <a href="#">Ateni Pay Dashboard</a> under Settings > Webhooks.</p>
            
            <h3>Verifying Webhooks</h3>
            <p>Each webhook request includes a signature that you should verify to ensure it came from Ateni Pay.</p>
            
            <div class="code-block">
                <pre>// Example webhook verification in Node.js
const crypto = require('crypto');

function verifyWebhookSignature(payload, signature, secret) {
  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(payload)
    .digest('hex');
    
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expectedSignature)
  );
}</pre>
            </div>
        </div>
    </div>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                    
                    // Update active link
                    document.querySelectorAll('.menu-items a').forEach(link => {
                        link.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            });
        });
        
        // Update active link on scroll
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('.content-section');
            const navLinks = document.querySelectorAll('.menu-items a');
            
            let currentSection = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (scrollY >= sectionTop - 100) {
                    currentSection = section.getAttribute('id');
                }
            });
            
            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${currentSection}`) {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>