Ethical AI Hiring Impact & Audit Section

<section class="z-10 sm:px-6 lg:px-8 max-w-7xl border-white/5 border-t mr-auto ml-auto pt-24 pr-4 pb-24 pl-4 relative">
  <!-- Section Header -->
  <div class="flex flex-col max-w-3xl mb-16">

    <h2 class="sm:text-4xl md:text-5xl text-3xl font-semibold text-white tracking-tight mb-6">
      Committed to improving hiring through
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-sky-500">Ethical Hybrid AI</span>
    </h2>
    <p class="sm:text-lg text-base text-zinc-400 leading-relaxed font-light">
      At AI-Powered Truck Driver Recruiter, we believe building a diverse team and ethical culture is win-win. Diversity
      isn’t just a box to check—it’s a commitment to thinking about talent in a new way.
    </p>
  </div>

  <div class="space-y-6">
    <!-- Row 1: 2/3 Stats - 1/3 Audit -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Card 1: Performance Stats (Large) -->
      <div
        class="relative lg:col-span-2 ring-1 ring-white/10 md:p-10 overflow-hidden bg-zinc-950 border-zinc-900 rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg group">
        <div
          class="absolute -right-20 -top-20 h-64 w-64 bg-gradient-to-bl from-sky-500/10 to-emerald-500/10 rounded-full blur-3xl opacity-50 group-hover:opacity-100 transition-opacity duration-700">
        </div>

        <div class="flex items-center gap-3 mb-6 relative z-10">
          <div class="h-10 w-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-trending-up text-sky-400">
              <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
              <polyline points="16 7 22 7 22 13" class=""></polyline>
            </svg>
          </div>
          <h3 class="text-2xl md:text-3xl font-semibold tracking-tight text-zinc-100">Performance Impact</h3>
        </div>

        <p class="text-zinc-400 max-w-2xl mb-10 relative z-10">
          Studies confirm that ethical and diverse teams significantly outperform their peers financially.
        </p>

        <!-- Custom Chart Visualization -->
        <div class="relative w-full bg-zinc-900/50 rounded-xl border border-white/5 p-6 md:p-8">
          <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>

          <div class="grid grid-cols-2 gap-8 md:gap-16 items-end justify-center h-48 relative z-10">
            <!-- Stat Group 1: Diversity -->
            <div class="flex flex-col items-center gap-4 h-full justify-end group/bar">
              <div class="relative flex items-end gap-3 h-full">
                <!-- Peer Bar -->
                <div
                  class="w-12 md:w-16 bg-zinc-800 rounded-t-lg relative group-hover/bar:bg-zinc-700 transition-colors duration-500"
                  style="height: 50%">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-zinc-500 font-medium">Peers</span>
                </div>
                <!-- Diverse Bar -->
                <div
                  class="w-12 md:w-16 bg-gradient-to-t from-sky-600 to-sky-400 rounded-t-lg relative shadow-[0_0_20px_rgba(56,189,248,0.2)] group-hover/bar:shadow-[0_0_30px_rgba(56,189,248,0.4)] transition-all duration-500"
                  style="height: 68%">
                  <div
                    class="absolute -top-8 left-1/2 -translate-x-1/2 bg-sky-500/10 border border-sky-500/20 text-sky-300 px-2 py-0.5 rounded text-xs font-bold whitespace-nowrap">
                    +36%</div>
                </div>
              </div>
              <span class="text-sm font-medium text-zinc-300 mt-2">Diverse Teams</span>
              <span class="text-[10px] uppercase tracking-wider text-zinc-600">McKinsey Report</span>
            </div>

            <!-- Stat Group 2: Ethics -->
            <div class="flex flex-col items-center gap-4 h-full justify-end group/bar">
              <div class="relative flex items-end gap-3 h-full">
                <!-- Peer Bar -->
                <div
                  class="w-12 md:w-16 bg-zinc-800 rounded-t-lg relative group-hover/bar:bg-zinc-700 transition-colors duration-500"
                  style="height: 50%">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-zinc-500 font-medium">Peers</span>
                </div>
                <!-- Ethical Bar -->
                <div
                  class="w-12 md:w-16 bg-gradient-to-t from-emerald-600 to-emerald-400 rounded-t-lg relative shadow-[0_0_20px_rgba(52,211,153,0.2)] group-hover/bar:shadow-[0_0_30px_rgba(52,211,153,0.4)] transition-all duration-500"
                  style="height: 90%">
                  <div
                    class="absolute -top-8 left-1/2 -translate-x-1/2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 px-2 py-0.5 rounded text-xs font-bold whitespace-nowrap">
                    +80%</div>
                </div>
              </div>
              <span class="text-sm font-medium text-zinc-300 mt-2">Ethical Teams</span>
              <span class="text-[10px] uppercase tracking-wider text-zinc-600">Deloitte Study</span>
            </div>
          </div>

          <!-- Baseline -->
          <div class="absolute bottom-12 left-6 right-6 h-px bg-white/10 z-0"></div>
        </div>
      </div>

      <!-- Card 2: 3rd Party Audit (Small) -->
      <div class="lg:col-span-1">
        <div
          class="group relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 bg-gradient-to-br from-zinc-900 via-zinc-950 to-black border-white/10 border rounded-3xl h-full flex flex-col">
          <div class="p-6 md:p-8 flex-1 flex flex-col relative z-10">
            <div class="flex items-center justify-between mb-8">
              <h3 class="text-xl font-semibold text-white tracking-tight">Independent Audits</h3>
              <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
            </div>

            <!-- Audit Visual -->
            <div class="flex-1 flex items-center justify-center py-6">
              <div class="relative">
                <div class="absolute inset-0 bg-emerald-500/20 blur-xl rounded-full animate-pulse"></div>
                <!-- Shield -->
                <div
                  class="relative h-24 w-24 rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center shadow-2xl">
                  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-file-badge text-emerald-400">
                    <path d="M12 22h6a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v10" class=""></path>
                    <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
                    <path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" class=""></path>
                    <path d="M7 16.5 8 18l2-1" class=""></path>
                  </svg>
                  <!-- Badge -->
                  <div
                    class="absolute -bottom-3 -right-3 bg-zinc-900 border border-emerald-500/30 rounded-full p-1.5 shadow-lg">
                    <div class="bg-emerald-500 rounded-full p-1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                        class="text-zinc-950">
                        <path d="M20 6 9 17l-5-5" class=""></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="space-y-3 mt-6">
              <div class="flex items-center gap-3 text-sm text-zinc-400">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="text-emerald-500">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Legal &amp; Policy Experts</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-zinc-400">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="text-emerald-500">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Technical Verification</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-zinc-400">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="text-emerald-500">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span>Unbiased Certification</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Row 2: 1/3 continuous - 2/3 Outcome -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Card 3: Continuous Assessment (Small) -->
      <div class="lg:col-span-1">
        <aside
          class="relative overflow-hidden rounded-3xl flex flex-col bg-zinc-950 border-white/10 border p-6 h-full hover:border-sky-500/30 transition-colors duration-500 group">
          <div class="flex items-center justify-between text-sm text-zinc-400 mb-6">
            <span class="font-medium text-white">Internal Data Reporting</span>
            <div class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-sky-500/10 border border-sky-500/20">
              <span class="relative flex h-1.5 w-1.5">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-sky-500"></span>
              </span>
              <span class="text-[10px] font-semibold text-sky-400 uppercase">Live</span>
            </div>
          </div>

          <!-- Abstract Line Chart -->
          <div
            class="flex-1 relative min-h-[140px] w-full bg-zinc-900/50 rounded-xl border border-white/5 overflow-hidden">
            <!-- Grid Lines -->
            <div class="absolute inset-0 flex justify-between px-4">
              <div class="w-px h-full bg-white/5 border-r border-dashed border-white/5"></div>
              <div class="w-px h-full bg-white/5 border-r border-dashed border-white/5"></div>
              <div class="w-px h-full bg-white/5 border-r border-dashed border-white/5"></div>
            </div>
            <!-- Line Path -->
            <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none">
              <defs class="">
                <linearGradient id="gradientLine" x1="0%" y1="0%" x2="100%" y2="0%" class="">
                  <stop offset="0%" stop-color="#38bdf8" stop-opacity="0" class=""></stop>
                  <stop offset="50%" stop-color="#38bdf8" class=""></stop>
                  <stop offset="100%" stop-color="#3b82f6" class=""></stop>
                </linearGradient>
              </defs>
              <path d="M0 100 Q 40 90, 80 80 T 160 70 T 240 50 T 320 40 T 400 30" fill="none"
                stroke="url(#gradientLine)" stroke-width="2" class="drop-shadow-[0_0_8px_rgba(56,189,248,0.5)]"></path>
              <!-- Animated Dot -->
              <circle cx="0" cy="0" r="3" fill="#ffffff" class="">
                <animateMotion dur="6s" repeatCount="indefinite"
                  path="M0 100 Q 40 90, 80 80 T 160 70 T 240 50 T 320 40 T 400 30" class=""></animateMotion>
              </circle>
            </svg>
          </div>

          <p class="text-sm text-zinc-400 mt-6 leading-relaxed">
            Continual assessment ensures systems remain less biased and compliant with evolving laws.
          </p>
        </aside>
      </div>

      <!-- Card 4: Business Outcomes (Large) -->
      <div class="lg:col-span-2">
        <div class="relative overflow-hidden rounded-3xl bg-zinc-950 border-white/10 border p-8 h-full group">
          <div
            class="absolute right-0 top-0 w-1/2 h-full bg-gradient-to-l from-zinc-900/50 to-transparent pointer-events-none">
          </div>

          <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10 h-full">
            <div class="md:w-1/2 flex flex-col justify-center">
              <div class="inline-flex items-center gap-2 mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-network text-emerald-400">
                  <rect x="16" y="16" width="6" height="6" rx="1" class=""></rect>
                  <rect x="2" y="16" width="6" height="6" rx="1" class=""></rect>
                  <rect x="9" y="2" width="6" height="6" rx="1" class=""></rect>
                  <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" class=""></path>
                  <path d="M12 12V8" class=""></path>
                </svg>
                <span class="text-sm font-semibold text-emerald-400">Business Outcomes</span>
              </div>
              <h3 class="text-2xl md:text-3xl font-semibold text-white tracking-tight mb-4">
                Tying initiatives to real results
              </h3>
              <p class="text-zinc-400 leading-relaxed text-sm md:text-base">
                Using Hybrid AI, we connect your hiring process directly to measurable business success. Our systems are
                designed to identify non-traditional talent while filtering out bias.
              </p>

              <div class="mt-8 flex gap-4">
                <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/5">
                  <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                  <span class="text-xs text-white font-medium">Effectiveness</span>
                </div>
                <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/5">
                  <div class="w-2 h-2 rounded-full bg-sky-500"></div>
                  <span class="text-xs text-white font-medium">Compliance</span>
                </div>
              </div>
            </div>

            <!-- Visualization: Flow -->
            <div
              class="md:w-1/2 h-full min-h-[200px] relative rounded-xl bg-zinc-900/50 border border-white/5 overflow-hidden flex items-center justify-center">
              <div class="absolute inset-0 flex items-center justify-center gap-1 md:gap-4">
                <!-- Node 1: Candidate -->
                <div class="flex flex-col items-center gap-2">
                  <div
                    class="w-10 h-10 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-users">
                      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                      <circle cx="9" cy="7" r="4" class=""></circle>
                      <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
                      <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
                    </svg>
                  </div>
                  <span class="text-[10px] text-zinc-500">Candidates</span>
                </div>

                <!-- Arrow -->
                <div class="w-8 md:w-12 h-px bg-gradient-to-r from-zinc-700 to-sky-500 relative">
                  <div class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-1 bg-sky-500 rounded-full animate-ping">
                  </div>
                </div>

                <!-- Node 2: Hybrid AI Core -->
                <div class="relative z-10">
                  <div class="absolute inset-0 bg-sky-500/20 blur-xl rounded-full"></div>
                  <div
                    class="w-16 h-16 rounded-2xl bg-zinc-900 border border-sky-500/30 flex items-center justify-center relative shadow-[0_0_15px_rgba(14,165,233,0.3)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-cpu text-sky-400">
                      <rect x="4" y="4" width="16" height="16" rx="2" class=""></rect>
                      <rect x="9" y="9" width="6" height="6" class=""></rect>
                      <path d="M15 2v2" class=""></path>
                      <path d="M15 20v2" class=""></path>
                      <path d="M2 15h2" class=""></path>
                      <path d="M2 9h2" class=""></path>
                      <path d="M20 15h2" class=""></path>
                      <path d="M20 9h2" class=""></path>
                      <path d="M9 2v2" class=""></path>
                      <path d="M9 20v2" class=""></path>
                    </svg>
                    <!-- Badge -->
                    <div
                      class="absolute -top-2 -right-2 bg-emerald-500 text-black text-[9px] font-bold px-1.5 py-0.5 rounded-full border border-emerald-400">
                      Ethical</div>
                  </div>
                </div>

                <!-- Arrow -->
                <div class="w-8 md:w-12 h-px bg-gradient-to-r from-sky-500 to-emerald-500 relative">
                  <div
                    class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-1 bg-emerald-500 rounded-full animate-ping delay-100">
                  </div>
                </div>

                <!-- Node 3: Result -->
                <div class="flex flex-col items-center gap-2">
                  <div
                    class="w-10 h-10 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-check-circle-2">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                  </div>
                  <span class="text-[10px] text-emerald-400 font-medium">Hired</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</section>