Financing Program Dashboard Section

<section class="sm:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
  <div class="py-20 sm:py-28">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Left: Gear financing progress -->
      <article class="sm:p-12 bg-black border-white/5 border rounded-3xl pt-8 pr-8 pb-8 pl-8 transition hover:bg-white/5 hover:border-white/10">
        <h3 class="text-3xl sm:text-4xl text-white tracking-tight font-geist font-medium" style="">Gear financing program</h3>

        <!-- KPIs -->
        <div class="mt-6 grid grid-cols-2 gap-6">
          <div>
            <p class="text-xs uppercase text-white/50 font-geist">Equipment Value</p>
            <p class="mt-1 text-2xl text-white tracking-tight font-geist font-medium" style="">$349,900</p>
          </div>
          <div class="text-right">
            <p class="text-xs uppercase text-white/50 font-geist">Financed</p>
            <p class="mt-1 text-2xl text-white tracking-tight font-geist font-medium" style="">$157,230</p>
          </div>
        </div>

        <!-- Progress -->
        <div class="mt-8">
          <div class="relative h-2 w-full rounded-full bg-white/10">
            <div class="absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-neutral-400 via-neutral-300 to-neutral-200 shadow-[0_6px_20px_rgba(255,255,255,0.12)] transition-all" style="width: 45%;"></div>
            <!-- Soft cap tick -->
            <span class="absolute -top-1 h-4 w-0.5 bg-white/40 left-[30%]"></span>
            <!-- Hard cap tick -->
            <span class="absolute -top-1 h-4 w-0.5 bg-white/40 right-0"></span>
          </div>
          <div class="mt-3 flex items-center justify-between text-sm">
            <div class="flex items-center gap-2">
              <span class="text-white/50 uppercase font-geist">Goal 1</span>
              <span class="text-white/80 font-geist">$100,000</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-white/50 uppercase font-geist">Goal 2</span>
              <span class="text-white/80 font-geist">$350,000</span>
            </div>
          </div>
        </div>

        <!-- Countdown -->
        <div class="mt-10">
          <p class="text-base text-white/70 font-geist">Special financing ends in:</p>
          <p class="mt-4 text-5xl sm:text-7xl leading-none text-white tracking-tight font-geist font-medium" style="">07:14:32:18</p>
        </div>

        <!-- CTA -->
        <div class="mt-8">
          <button class="inline-flex gap-3 sm:h-14 sm:px-8 transition transform hover:scale-[1.02] hover:ring-2 hover:ring-white/20 text-white font-geist h-12 rounded-xl pr-6 pl-6 shadow-xl items-center" style="background: linear-gradient(135deg, #374151 0%, #4B5563 50%, #6B7280 100%); box-shadow: 0 12px 24px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);">
            <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[20px] h-[20px]" data-icon-replaced="true" data-lucide="credit-card" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
            </span>
            <span class="text-sm sm:text-base font-semibold tracking-tight font-geist">Apply for Financing</span>
          </button>
        </div>
      </article>

      <!-- Right: Financing information -->
      <article class="rounded-3xl border border-white/5 bg-black p-8 sm:p-12">
        <h3 class="text-3xl sm:text-4xl text-white tracking-tight font-geist font-medium" style="">Financing details</h3>

        <div class="mt-6 border-t border-white/10 divide-y divide-white/10">
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Application deadline</span>
            <span class="text-sm text-right text-white/80 font-geist">March 15, 2025</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Program ends</span>
            <span class="text-sm text-right text-white/80 font-geist">December 31, 2025</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Available credit</span>
            <span class="text-sm text-right text-white/80 font-geist">$500,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Equipment allocated</span>
            <span class="text-sm text-right text-white/80 font-geist">$350,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Max financing</span>
            <span class="text-sm text-right text-white/80 font-geist">$100,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Min purchase</span>
            <span class="text-sm text-right text-white/80 font-geist">$5,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Interest rate</span>
            <span class="text-sm text-right text-white/80 font-geist">0% APR*</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Accepted brands</span>
            <span class="text-sm text-right font-geist"><span class="text-sky-400 font-geist">Canon, Sony, Nikon, Fuji</span></span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>