{% extends 'dashboard/header.html' %}
{% load static %}

{% block title %}PEZA DEVS - Build with Malawi's Leading APIs{% endblock %}
<link href="https://fonts.cdnfonts.com/css/maria-2" rel="stylesheet">
      
{% block extra_css %}
<style>
  body{
    font-family: var(--font-main);
    background: var(--surface-secondary);
    color: var(--text-primary);
  }
    /* Override dashboard styles */
    .main-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .sidebar, .header, .mobile-bottom-nav {
        display: none !important;
    }
    
    /* Compact Theme */
    :root {
        --primary-blue: #0969da;
        --primary-purple: #1f6feb;
    }
    
    /* Hero Section - Compact */
    .landing-hero {
        background: var(--surface-secondary);
        min-height: 80vh;
        position: relative;
        overflow: hidden;
    }
    
    .hero-content {
        padding-top: 100px;
        padding-bottom: 60px;
        position: relative;
        z-index: 2;
    }
    
    /* Glassmorphism Cards - Compact */
    .glass-card {
        background: #ffffff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        border-radius: 16px;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }
    
    /* Feature Cards - Compact */
    .feature-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        height: 100%;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
        border: 1px solid var(--border);
    }
    
    .feature-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-hover);
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        background: #ddf4ff;
    }
    
    .feature-icon i {
        font-size: 20px;
        position: relative;
        z-index: 1;
        color: #0969da;
    }
    
    /* Gradient Text */
    .gradient-text {
        color: var(--primary);
    }
    
    /* Compact Buttons */
    .btn-primary {
        background: var(--primary);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--primary);
    }
    
    .btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
    }
    
    .btn-secondary {
        background: #f6f8fa;
        color: var(--text-primary);
        border: 1px solid var(--border);
        padding: 11px 22px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        transition: background 0.15s ease, border-color 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-secondary:hover {
        background: #eaeef2;
        border-color: var(--border-hover);
    }
    
    /* Compact Navigation */
    .nav-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #ffffff;
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
        transition: all 0.2s ease;
    }
    
    .nav-link {
        color: #57606a;
        font-size: 14px;
        transition: all 0.2s ease;
        padding: 8px 14px;
        border-radius: 6px;
        font-weight: 500;
    }
    
    /* Compact Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #dafbe1;
        border: 1px solid #9be9a8;
        border-radius: 100px;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 600;
        color: #1a7f37;
        margin-bottom: 24px;
    }
    
    .pulse-dot {
        width: 6px;
        height: 6px;
        background: #1a7f37;
        border-radius: 50%;
        animation: pulse-ring 2s ease-in-out infinite;
    }
    
    /* Stats Section - Compact */
    .stats-section {
        background: #0d1117;
        padding: 60px 0;
    }
    
    .stat-card {
        text-align: center;
        padding: 20px;
        background: #161b22;
        border-radius: 16px;
        border: 1px solid #30363d;
    }
    
    .stat-number {
        font-size: 36px;
        font-weight: 800;
        color: #f0f6fc;
        line-height: 1;
        margin-bottom: 8px;
    }
    
    .stat-label {
        color: #c9d1d9;
        font-weight: 500;
        font-size: 14px;
    }
    
    /* API Demo Card - Compact */
    .api-demo-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
    }
    
    .code-window {
        background: #0d1117;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 16px;
    }
    
    .code-header {
        background: #161b22;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid #30363d;
    }
    
    .code-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    
    .code-body {
        padding: 18px;
        font-family: var(--font-mono);
        font-size: 13px;
        line-height: 1.6;
        color: #c9d1d9;
        overflow-x: auto;
    }
    
    /* Pricing Cards - Compact */
    .pricing-card {
        background: white;
        border-radius: 16px;
        padding: 32px;
        border: 1px solid var(--border);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
        height: 100%;
        position: relative;
    }
    
    .pricing-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-hover);
    }
    
    .pricing-card.featured {
        background: #ddf4ff;
        color: #0550ae;
        border-color: #0969da;
        box-shadow: var(--shadow-md);
    }
    
    .pricing-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: #1a7f37;
        color: white;
        padding: 4px 20px;
        border-radius: 100px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    
    /* Testimonial Cards - Compact */
    .testimonial-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        border: 1px solid var(--border);
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
        height: 100%;
    }
    
    .testimonial-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-hover);
    }
    
    .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #0969da;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 16px;
    }
    
    /* Footer - Compact */
    .footer {
        background: #f6f8fa;
        border-top: 1px solid var(--border);
        padding: 60px 0 30px;
    }
    
    /* Step Numbers - Compact */
    .step-circle {
        width: 48px;
        height: 48px;
        background: #0969da;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 0 auto 16px;
        box-shadow: var(--shadow-sm);
    }
    
    /* CTA Section - Compact */
    .cta-section {
        background: #0d1117;
        padding: 80px 0;
    }
    
    /* Trust Indicators - Compact */
    .trust-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        background: #f6f8fa;
        border-radius: 100px;
        border: 1px solid var(--border);
        font-weight: 500;
        font-size: 13px;
        color: #57606a;
    }
    
    /* API Grid - Compact */
    .api-grid-item {
        background: #ddf4ff;
        border: 1px solid #b6e3ff;
        border-radius: 10px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .hero-content {
            padding-top: 80px;
            padding-bottom: 40px;
        }
        
        .stat-number {
            font-size: 32px;
        }
        
        .feature-card {
            padding: 20px;
        }
        
        .pricing-card {
            padding: 24px;
        }
        
        .nav-link {
            padding: 8px 12px;
            font-size: 13px;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Navigation Header -->
<header class="nav-header" id="navbar"  >
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between">
            <!-- Logo -->
            <a href="/" class="flex items-center gap-2">
                <!-- <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                    <i class='bx bx-code-alt text-white text-lg'></i>
                </div> -->
                 <img src="{% static 'new_logo.png' %}" alt="PEZA DEVS Logo" class="h-8 w-auto">
            <span class="text-subtitle" style="font-weight: 700; font-family: 'Maria', sans-serif;">PEZA DEVS</span>
                <div>
                  
                   
                </div>
            </a>

            <!-- Desktop Menu -->
            <nav class="hidden md:block">
                <div class="flex items-center gap-1">
                    <a href="#features" class="nav-link">Features</a>
                    <a href="#apis" class="nav-link">APIs</a>
                    <a href="#pricing" class="nav-link">Pricing</a>
                    <a href="{% url 'api-documentation' %}" class="nav-link">Docs</a>
                    <a href="{% url 'developer-dashboard' %}" class="btn-secondary ml-2">
                        Dashboard
                    </a>
                    <a href="{% url 'login' %}" class="btn-primary ml-2">
                        <i class='bx bx-log-in text-sm'></i>
                        Sign In
                    </a>
                </div>
            </nav>

            <!-- Mobile Menu Button -->
            <button class="md:hidden text-gray-900 p-2" onclick="toggleMobileMenu()">
                <i class='bx bx-menu text-xl'></i>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div id="mobileMenu" class="hidden md:hidden bg-white rounded-lg mt-3 p-3 shadow-lg border border-gray-100">
            <div class="space-y-1">
                <a href="#features" class="block nav-link">Features</a>
                <a href="#apis" class="block nav-link">APIs</a>
                <a href="#pricing" class="block nav-link">Pricing</a>
                <a href="{% url 'api-documentation' %}" class="block nav-link">Docs</a>
                <div class="pt-3 space-y-2 border-t border-gray-100">
                    <a href="{% url 'developer-dashboard' %}" class="block btn-secondary text-center w-full">Dashboard</a>
                    <a href="{% url 'login' %}" class="block btn-primary text-center w-full">Sign In</a>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Hero Section -->
<section class="landing-hero relative" style="background-image: url('https://developers.mtn.com/images/backgrounds/bg-opt-4-blue.svg'); background-size: cover;">
  <!-- Dark overlay -->
  <div class="absolute inset-0 bg-black/50"></div>
<div class="container mx-auto px-4">
        <div class="hero-content">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <!-- Badge -->
                    <div class="status-badge">
                        <span class="pulse-dot"></span>
                        <span>Trusted by 500+ Developers</span>
                    </div>
                    
                    <!-- Main Heading -->
                    <h1 class="text-4xl lg:text-5xl font-extrabold mb-4 leading-tight text-white">
                      Build with
                      <span class="block text-white">Malawi's Leading APIs</span>
                    </h1>
                    
                    <!-- Subtitle -->
                    <p class="text-lg text-white mb-8 leading-relaxed">
                        Access OCR, location services, and more through our developer-friendly API platform.
                    </p>
                    
                    <!-- CTA Buttons -->
                    <div class="flex flex-wrap gap-3 mb-8">
                        <a href="" class="btn-primary px-8 py-3">
                            <i class='bx bx-rocket'></i>
                            Start Building Free
                        </a>
                        <a href="#features" class="btn-secondary px-8 py-3">
                            <i class='bx bx-play-circle'></i>
                            How It Works
                        </a>
                    </div>
                    
                    <!-- Trust Indicators -->
                    <div class="flex flex-wrap gap-3">
                        <div class="trust-indicator">
                            <i class='bx bx-check-shield text-green-600'></i>
                            <span>99.9% Uptime</span>
                        </div>
                        <div class="trust-indicator">
                            <i class='bx bx-bolt text-yellow-600'></i>
                            <span>&lt;50ms Response</span>
                        </div>
                    </div>
                </div>
                {% include 'dashboard/qr.html' %}
                 {% include 'dashboard/bot.html' %}
                <!-- API Demo -->
                <div>
                      <img src="{% static 'kkk.png' %}" alt="OCR Demo" class="w-full max-w-3xl mx-auto mb-6 rounded-lg shadow-lg">
                 
                    <div class="api-demjo-card">
                        <!-- API Grid -->
                        
                        
                        <!-- Code Window -->
                        <div class="code-window">
                            <div class="code-header">
                                <div class="code-dot bg-red-500"></div>
                                <div class="code-dot bg-yellow-500"></div>
                                <div class="code-dot bg-green-500"></div>
                                <span class="text-gray-400 text-xs ml-2">api_request.py</span>
                            </div>
                            <div class="code-body">
<span class="code-comment"># Quick Start Example</span>
<span class="code-keyword">import</span> requests

<span class="code-keyword">response</span> = requests.<span class="code-function">post</span>(
    <span class="code-string">"https://api.pezamw.com/v1/ocr/text"</span>,
    headers={<span class="code-string">"X-API-Key"</span>: <span class="code-string">"pk_live_***"</span>},
    files={<span class="code-string">"image"</span>: <span class="code-function">open</span>(<span class="code-string">"doc.jpg"</span>, <span class="code-string">"rb"</span>)}
)

<span class="code-keyword">print</span>(response.<span class="code-function">json</span>())
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Features Section -->
<section id="features" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <h2 class="text-3xl lg:text-4xl font-extrabold mb-4 text-gray-900">
                Everything You Need to Build
            </h2>
            <p class="text-gray-600">
                Production-ready APIs designed to solve real-world problems.
            </p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Feature 1 -->
            <div class="feature-card">
                <div class="feature-icon" style="--icon-color-1: #2563eb; --icon-color-2: #7c3aed;">
                    <i class='bx bx-text'></i>
                </div>
                <h3 class="text-xl font-bold mb-3 text-gray-900">Smart OCR</h3>
                <p class="text-gray-600 mb-4 text-sm leading-relaxed">
                    Extract text from images, documents, receipts, and IDs with industry-leading accuracy.
                </p>
                <ul class="space-y-2">
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Document parsing</span>
                    </li>
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Receipt analysis</span>
                    </li>
                </ul>
            </div>
            
            <!-- Feature 2 -->
            <div class="feature-card">
                <div class="feature-icon" style="--icon-color-1: #7c3aed; --icon-color-2: #c026d3;">
                    <i class='bx bx-map'></i>
                </div>
                <h3 class="text-xl font-bold mb-3 text-gray-900">Location Intelligence</h3>
                <p class="text-gray-600 mb-4 text-sm leading-relaxed">
                    Find hospitals, clinics, pharmacies, and essential services across Malawi.
                </p>
                <ul class="space-y-2">
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Healthcare locations</span>
                    </li>
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Emergency services</span>
                    </li>
                </ul>
            </div>
            
            <!-- Feature 3 -->
            <div class="feature-card">
                <div class="feature-icon" style="--icon-color-1: #10b981; --icon-color-2: #059669;">
                    <i class='bx bx-water'></i>
                </div>
                <h3 class="text-xl font-bold mb-3 text-gray-900">Flood Detection</h3>
                <p class="text-gray-600 mb-4 text-sm leading-relaxed">
                    Computer vision API for detecting flood areas in satellite imagery.
                </p>
                <ul class="space-y-2">
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Satellite analysis</span>
                    </li>
                    <li class="flex items-center gap-2 text-gray-600 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span>Risk assessment</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <h2 class="text-3xl lg:text-4xl font-extrabold mb-4 text-gray-900">Get Started in Minutes</h2>
            <p class="text-gray-600">Three steps to your first API call.</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8 mb-12">
            <div class="text-center">
                <div class="step-circle">1</div>
                <h3 class="text-lg font-bold mb-2 text-gray-900">Create Account</h3>
                <p class="text-gray-600 text-sm">
                    Sign up for free and get instant access.
                </p>
            </div>
            
            <div class="text-center">
                <div class="step-circle">2</div>
                <h3 class="text-lg font-bold mb-2 text-gray-900">Get API Key</h3>
                <p class="text-gray-600 text-sm">
                    Generate API keys from your dashboard.
                </p>
            </div>
            
            <div class="text-center">
                <div class="step-circle">3</div>
                <h3 class="text-lg font-bold mb-2 text-gray-900">Start Building</h3>
                <p class="text-gray-600 text-sm">
                    Make your first API call.
                </p>
            </div>
        </div>
        
        <!-- Code Example -->
        <div class="max-w-3xl mx-auto">
            <div class="glass-card p-0 overflow-hidden">
                <div class="code-window">
                    <div class="code-header">
                        <div class="code-dot bg-red-500"></div>
                        <div class="code-dot bg-yellow-500"></div>
                        <div class="code-dot bg-green-500"></div>
                        <span class="text-gray-400 text-xs ml-auto mr-2">Python</span>
                    </div>
                    <div class="code-body">
<span class="code-comment"># Install the SDK</span>
<span class="code-keyword">pip install</span> peza-sdk

<span class="code-comment"># Initialize client</span>
<span class="code-keyword">from</span> peza <span class="code-keyword">import</span> Client

client = Client(api_key=<span class="code-string">"pk_live_your_key_here"</span>)

<span class="code-comment"># Make your first request</span>
result = client.ocr.<span class="code-function">extract_text</span>(
    image=<span class="code-string">"path/to/document.jpg"</span>
)
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pricing Section -->
<section id="pricing" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <h2 class="text-3xl lg:text-4xl font-extrabold mb-4 text-gray-900">Simple, Transparent Pricing</h2>
            <p class="text-gray-600">Start for free, scale as you grow.</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            <!-- Free Plan -->
            <div class="pricing-card">
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold mb-2 text-gray-900">Starter</h3>
                    <div class="text-4xl font-extrabold mb-1 text-gray-900">Free</div>
                    <p class="text-gray-600 text-sm">Perfect for testing</p>
                </div>
                
                <ul class="space-y-3 mb-6">
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span class="text-gray-700">100 requests/month</span>
                    </li>
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span class="text-gray-700">3 API keys</span>
                    </li>
                </ul>
                
                <a href="#" class="btn-secondary w-full justify-center py-2">
                    Get Started Free
                </a>
            </div>
            
            <!-- Pro Plan -->
            <div class="pricing-card featured">
                <div class="pricing-badge">Most Popular</div>
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold mb-2">Professional</h3>
                    <div class="flex items-end justify-center gap-1 mb-1">
                        <span class="text-4xl font-extrabold">MWK 15,000</span>
                        <span class="text-white/80">/month</span>
                    </div>
                    <p class="text-white/90 text-sm">For growing teams</p>
                </div>
                
                <ul class="space-y-3 mb-6">
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-white'></i>
                        <span>10,000 requests/month</span>
                    </li>
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-white'></i>
                        <span>10 API keys</span>
                    </li>
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-white'></i>
                        <span>Priority support</span>
                    </li>
                </ul>
                
                <a href="" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold text-center block hover:bg-gray-50 transition-colors text-sm">
                    Start Free Trial
                </a>
            </div>
            
            <!-- Enterprise Plan -->
            <div class="pricing-card">
                <div class="text-center mb-6">
                    <h3 class="text-xl font-bold mb-2 text-gray-900">Enterprise</h3>
                    <div class="text-4xl font-extrabold mb-1 text-gray-900">Custom</div>
                    <p class="text-gray-600 text-sm">For large scale</p>
                </div>
                
                <ul class="space-y-3 mb-6">
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span class="text-gray-700">Unlimited requests</span>
                    </li>
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span class="text-gray-700">24/7 Phone support</span>
                    </li>
                    <li class="flex items-center gap-2 text-sm">
                        <i class='bx bx-check-circle text-green-500'></i>
                        <span class="text-gray-700">SLA guarantee</span>
                    </li>
                </ul>
                
                <a href="mailto:sales@pezamw.com" class="btn-secondary w-full justify-center py-2">
                    Contact Sales
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <h2 class="text-3xl lg:text-4xl font-extrabold mb-4 text-gray-900">Loved by Developers</h2>
            <p class="text-gray-600">See what developers are building</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6">
            <div class="testimonial-card">
                <div class="flex items-center gap-3 mb-4">
                    <div class="avatar">TM</div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-sm">Takondwa Mwase</h4>
                        <p class="text-gray-600 text-xs">HealthTech Solutions</p>
                    </div>
                </div>
                <p class="text-gray-700 mb-3 text-sm leading-relaxed italic">
                    "The location API has been crucial for our hospital finder app. Integration was seamless."
                </p>
                <div class="flex text-yellow-500 text-sm">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                </div>
            </div>
            
            <div class="testimonial-card">
                <div class="flex items-center gap-3 mb-4">
                    <div class="avatar">CN</div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-sm">Chisomo Ngwira</h4>
                        <p class="text-gray-600 text-xs">Fintech Startup</p>
                    </div>
                </div>
                <p class="text-gray-700 mb-3 text-sm leading-relaxed italic">
                    "OCR API saved us months of development time. The accuracy is outstanding!"
                </p>
                <div class="flex text-yellow-500 text-sm">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                </div>
            </div>
            
            <div class="testimonial-card">
                <div class="flex items-center gap-3 mb-4">
                    <div class="avatar">PM</div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-sm">Patrick Mbewe</h4>
                        <p class="text-gray-600 text-xs">AgriTech Solutions</p>
                    </div>
                </div>
                <p class="text-gray-700 mb-3 text-sm leading-relaxed italic">
                    "The flood detection API is a game-changer for our early warning system."
                </p>
                <div class="flex text-yellow-500 text-sm">
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                    <i class='bx bxs-star'></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl lg:text-4xl font-extrabold text-white mb-4">
            Ready to Start Building?
        </h2>
        <p class="text-white/90 mb-8 max-w-xl mx-auto text-sm">
            Join hundreds of developers building the future with Peza APIs. 
            Get started for free, no credit card required.
        </p>
        <div class="flex flex-wrap justify-center gap-3">
            <a href="" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-50 transition-all inline-flex items-center gap-2 text-sm">
                <i class='bx bx-rocket'></i>
                Start Free Today
            </a>
            <a href="{% url 'api-documentation' %}" class="bg-transparent border border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white/10 transition-all inline-flex items-center gap-2 text-sm">
                <i class='bx bx-book-open'></i>
                View Docs
            </a>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 mb-8">
            <!-- Company -->
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                        <i class='bx bx-code-alt text-white'></i>
                    </div>
                    <span class="text-lg font-bold text-gray-900">Peza</span>
                </div>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">
                    Building the future of African technology through powerful APIs.
                </p>
                <div class="flex gap-2">
                    <a href="#" class="w-8 h-8 bg-gray-100 rounded flex items-center justify-center hover:bg-gray-200 transition-colors">
                        <i class='bx bxl-twitter text-gray-700'></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-gray-100 rounded flex items-center justify-center hover:bg-gray-200 transition-colors">
                        <i class='bx bxl-github text-gray-700'></i>
                    </a>
                </div>
            </div>
            
            <!-- Product -->
            <div>
                <h4 class="text-sm font-bold text-gray-900 mb-4">Product</h4>
                <ul class="space-y-2">
                    <li><a href="#features" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Features</a></li>
                    <li><a href="#pricing" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Pricing</a></li>
                    <li><a href="{% url 'api-explorer' %}" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">API Explorer</a></li>
                </ul>
            </div>
            
            <!-- Developer -->
            <div>
                <h4 class="text-sm font-bold text-gray-900 mb-4">Developer</h4>
                <ul class="space-y-2">
                    <li><a href="{% url 'developer-dashboard' %}" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Dashboard</a></li>
                    <li><a href="{% url 'api-keys-management' %}" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">API Keys</a></li>
                    <li><a href="{% url 'api-documentation' %}" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Docs</a></li>
                </ul>
            </div>
            
            <!-- Support -->
            <div>
                <h4 class="text-sm font-bold text-gray-900 mb-4">Support</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Help Center</a></li>
                    <li><a href="mailto:support@pezamw.com" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">Contact Us</a></li>
                </ul>
            </div>
        </div>
        
        <div class="pt-6 border-t border-gray-200 text-center">
            <p class="text-gray-600 text-sm">
                © {% now "Y" %} Peza Malawi. All rights reserved.
            </p>
        </div>
    </div>
</footer>
{% endblock %}

{% block extra_js %}
<script>
    // Mobile menu toggle
    function toggleMobileMenu() {
        const menu = document.getElementById('mobileMenu');
        menu.classList.toggle('hidden');
    }
    
    // Navbar scroll effect
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 30) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const href = this.getAttribute('href');
            if (href === '#') return;
            
            e.preventDefault();
            const targetElement = document.querySelector(href);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70,
                    behavior: 'smooth'
                });
                
                const mobileMenu = document.getElementById('mobileMenu');
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            }
        });
    });
</script>
{% endblock %}