Infrastructure Metrics and Integrations Section

<section class="section-container dark-section overflow-hidden text-[#F2EFEA] bg-[#26221E] py-32 relative">
  <div class="max-w-[88rem] mx-auto px-6 lg:px-12 relative z-10">
    <!-- 1. Header Section -->
    <div class="flex justify-between items-end mb-20 border-b border-white/10 pb-8">
      <h2 class="text-5xl md:text-6xl tracking-tighter font-jakarta font-light">
        Reliable<br>Infrastructure
      </h2>
      <p class="text-xl tracking-tight opacity-50 font-jakarta font-light">
        API_V3
      </p>
    </div>

    <!-- 2. Diagram Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-8 items-center">
      <!-- Left List -->
      <div class="space-y-6 text-sm font-medium tracking-tight">
        <p class="opacity-40 text-xs uppercase mb-8 font-geist">Integration</p>

        <div
          class="flex items-center gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-40 text-xs w-6 font-geist">01</span>
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">ERP Systems</span>
        </div>
        <div
          class="flex items-center gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-40 text-xs w-6 font-geist">02</span>
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">CRM Sync</span>
        </div>
        <div
          class="flex items-center gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-40 text-xs w-6 font-geist">03</span>
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">Subscription Logic</span>
        </div>
        <div
          class="flex items-center gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-40 text-xs w-6 font-geist">04</span>
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">Legacy Billing</span>
        </div>
      </div>

      <!-- Center Visual -->
      <div class="card-flashlight p-2 rounded-2xl h-[400px]" style="--mouse-x: 340px; --mouse-y: 398.4609375px;">
        <div
          class="card-content w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center bg-black/20">
          <!-- Nodes Container -->
          <div class="z-10 flex flex-col w-full relative items-center justify-center h-full">
            <!-- Middle Layer (Stripe Hub) -->
            <div class="flex items-center justify-center gap-4 w-full relative">
              <!-- Left Node -->
              <div
                class="px-3 py-1.5 rounded bg-white/10 border border-white/20 text-white text-[10px] font-geist shadow-lg backdrop-blur">
                SDK
              </div>
              <!-- Center Node -->
              <div
                class="shadow-2xl shadow-[#C48C56]/20 text-sm font-bold text-[#F2EFEA] z-20 border-[#C48C56]/50 border bg-[#2C2824] rounded-lg p-4 font-jakarta">
                NexPay
              </div>
              <!-- Right Node -->
              <div
                class="px-3 py-1.5 rounded bg-white/10 border border-white/20 text-white text-[10px] font-geist shadow-lg backdrop-blur">
                Events
              </div>
            </div>
            <!-- Decorative lines -->
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20">
              <div class="w-full h-px bg-white/50"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right List -->
      <div class="space-y-6 text-sm font-medium tracking-tight text-right">
        <p class="opacity-40 text-xs uppercase mb-8 font-geist">Performance Metrics</p>

        <div
          class="flex items-center justify-end gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">99.99% API Uptime</span>
          <iconify-icon icon="solar:arrow-right-up-linear"
            class="opacity-0 group-hover:opacity-100 transition-opacity"></iconify-icon>
        </div>
        <div
          class="flex items-center justify-end gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">250ms Global Latency</span>
        </div>
        <div
          class="flex items-center justify-end gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">ISO 27001 Certified</span>
        </div>
        <div
          class="flex items-center justify-end gap-4 group cursor-pointer border-b border-white/5 pb-4 hover:border-white/30 transition-colors">
          <span class="opacity-70 group-hover:opacity-100 transition-opacity font-geist">Real-time Fraud Detection</span>
        </div>
      </div>
    </div>
  </div>
</section>