<!-- Developer Docs Landing - Integrated with docs.php layout -->
<div class="bg-[#050816] text-white overflow-x-hidden min-h-[80vh] py-24 pt-32">
  
  <!-- Hero Section -->
  <section class="relative text-center mb-20 px-4 reveal">
    <div class="absolute inset-0 z-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 32px 32px;"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-600/20 rounded-full blur-[120px] pointer-events-none"></div>
    
    <div class="container mx-auto max-w-4xl relative z-10">
      <div class="inline-block px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-bold uppercase tracking-wider mb-4">Developers</div>
      <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Developer Documentation</h1>
      <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
        Accept payments from <?= htmlspecialchars(site_config("site_name")) ?> using our secure APIs. Everything you need to integrate payments into your application.
      </p>

      <form class="max-w-xl mx-auto relative group" action="<?= base_url('developers/docs') ?>" method="get">
        <input type="text" name="search" placeholder="Search the docs..." aria-label="Search documentation" class="w-full h-14 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl px-6 pr-14 text-white placeholder-gray-500 focus:outline-none focus:border-indigo-500/50 focus:ring-4 focus:ring-indigo-500/20 transition-all">
        <button type="submit" class="absolute right-2 top-2 bottom-2 w-10 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl flex items-center justify-center transition-colors">
          <i class="fas fa-search"></i>
        </button>
      </form>
    </div>
  </section>

  <!-- Docs Cards Section -->
  <section class="container mx-auto max-w-7xl px-4 relative z-10 mb-24">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1 -->
      <a href="<?= base_url('developers/docs') ?>#section-1" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-indigo-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-indigo-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-indigo-500/10 text-indigo-400 group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-map-signs"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Introduction</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          <?= htmlspecialchars(site_config("site_name")) ?> Payment Gateway enables merchants to receive payments by securely redirecting customers through our PCI-compliant flow.
        </p>
        <div class="text-indigo-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          View Guide <i class="fas fa-arrow-right"></i>
        </div>
      </a>

      <!-- Card 2 -->
      <a href="<?= base_url('developers/docs') ?>#section-2" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-purple-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-purple-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-purple-500/10 text-purple-400 group-hover:scale-110 group-hover:bg-purple-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-key"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">API Reference</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          REST APIs for Sandbox and Live environments. Use Sandbox for testing, then switch to Live with your production API keys.
        </p>
        <div class="text-purple-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          View APIs <i class="fas fa-arrow-right"></i>
        </div>
      </a>

      <!-- Card 3 -->
      <a href="<?= base_url('developers/docs') ?>#section-3" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-blue-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-blue-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-blue-500/10 text-blue-400 group-hover:scale-110 group-hover:bg-blue-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-cogs"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Integration Guide</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          Step-by-step guides for PHP, Laravel, WordPress, WooCommerce. Complete with sample code and SDKs.
        </p>
        <div class="text-blue-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          Learn More <i class="fas fa-arrow-right"></i>
        </div>
      </a>

      <!-- Card 4 -->
      <a href="<?= base_url('developers/docs') ?>#section-5" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-green-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-green-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-green-500/10 text-green-400 group-hover:scale-110 group-hover:bg-green-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-mobile-alt"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Mobile App</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          Download our Android app and connect with live API keys to verify and monitor transactions in real time.
        </p>
        <div class="text-green-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          Get the App <i class="fas fa-arrow-right"></i>
        </div>
      </a>

      <!-- Card 5 -->
      <a href="<?= base_url('developers/docs') ?>#section-security" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-red-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-red-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-red-500/10 text-red-400 group-hover:scale-110 group-hover:bg-red-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-shield-alt"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Security & Compliance</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          Industry best-practices: tokenization, TLS encryption, secure storage and comprehensive audit-ready logs.
        </p>
        <div class="text-red-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          Security Specs <i class="fas fa-arrow-right"></i>
        </div>
      </a>

      <!-- Card 6 -->
      <a href="<?= base_url('developers/docs') ?>" class="group relative rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2 hover:border-indigo-500/50 hover:bg-[#0a0f1c]/80 hover:shadow-2xl hover:shadow-indigo-500/20 reveal">
        <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-6 bg-indigo-500/10 text-indigo-400 group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white transition-all duration-300">
          <i class="fas fa-book-open"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-3">Full Documentation</h3>
        <p class="text-sm text-gray-400 leading-relaxed mb-6 flex-1">
          Browse the complete documentation covering all endpoints, webhooks, error codes, and best practices.
        </p>
        <div class="text-indigo-400 text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all mt-auto">
          Browse Docs <i class="fas fa-arrow-right"></i>
        </div>
      </a>

    </div>
  </section>

  <!-- CTA Section -->
  <section class="container mx-auto max-w-4xl px-4 text-center pb-20 reveal">
    <div class="rounded-3xl bg-indigo-900/20 border border-indigo-500/20 p-12 relative overflow-hidden">
      <!-- Glow effect inside CTA -->
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-indigo-600/20 rounded-full blur-[80px] pointer-events-none"></div>
      
      <div class="relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Get Started?</h2>
        <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8">
          Create your account and start accepting payments today with <?= htmlspecialchars(site_config("site_name")) ?>'s secure payment gateway.
        </p>
        <a href="<?= base_url('sign-up') ?>" class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all shadow-[0_0_40px_rgba(79,70,229,0.3)] hover:shadow-[0_0_60px_rgba(79,70,229,0.5)]">
          Create Account <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>

</div>
