Recruiting Cost Calculator Section

<div class="z-10 lg:pl-2 lg:pr-2 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
        <!-- Header -->
        <div class="text-center max-w-3xl mt-10 mr-auto mb-16 ml-auto">
          <div class="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1 mb-6" style="">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" style=""></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500" style=""></span>
            </span>
            <span class="uppercase text-xs font-medium text-blue-300 tracking-wide" style="">
              Interactive Tool
            </span>
          </div>
          <h2 class="md:text-5xl text-4xl font-semibold text-white tracking-tight mb-6">
            How much is manual recruiting
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-500">
              costing you?
            </span>
          </h2>
          <p class="text-lg text-zinc-400 font-light leading-relaxed">
            Use the sliders to estimate the time and money bleeding from your
            current process. We don’t store these numbers unless you ask for the
            report.
          </p>
        </div>

        <!-- Calculator Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 gap-x-8 gap-y-8 items-start">
          <!-- Left Column: Inputs -->
          <div class="lg:col-span-7 space-y-8">
            <!-- Role Selector -->
            <div class="bg-zinc-900/40 border border-white/10 rounded-2xl p-6 backdrop-blur-sm" style="">
              <label class="block text-sm font-medium text-zinc-300 mb-4 uppercase tracking-wider" style="">
                Select Your Role
              </label>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="relative">
                  <input type="radio" name="role" value="recruiter" class="peer absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" checked="">
                  <div class="p-4 rounded-xl bg-zinc-800/50 border border-white/5 peer-checked:bg-blue-600/10 peer-checked:border-blue-500/50 transition-all peer-hover:bg-zinc-800 flex items-center gap-3" style="">
                    <div class="w-4 h-4 rounded-full border border-zinc-500 peer-checked:border-blue-400 peer-checked:bg-blue-400 flex items-center justify-center transition-colors" style=""></div>
                    <span class="text-sm text-zinc-300 peer-checked:text-white font-medium" style="">
                      Recruiter / TA
                    </span>
                  </div>
                </div>
                <div class="relative">
                  <input type="radio" name="role" value="hr_manager" class="peer absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                  <div class="p-4 rounded-xl bg-zinc-800/50 border border-white/5 peer-checked:bg-blue-600/10 peer-checked:border-blue-500/50 transition-all peer-hover:bg-zinc-800 flex items-center gap-3" style="">
                    <div class="w-4 h-4 rounded-full border border-zinc-500 peer-checked:border-blue-400 peer-checked:bg-blue-400 flex items-center justify-center transition-colors" style=""></div>
                    <span class="text-sm text-zinc-300 peer-checked:text-white font-medium" style="">
                      HR Manager
                    </span>
                  </div>
                </div>
                <div class="relative">
                  <input type="radio" name="role" value="hiring_manager" class="peer absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                  <div class="p-4 rounded-xl bg-zinc-800/50 border border-white/5 peer-checked:bg-blue-600/10 peer-checked:border-blue-500/50 transition-all peer-hover:bg-zinc-800 flex items-center gap-3" style="">
                    <div class="w-4 h-4 rounded-full border border-zinc-500 peer-checked:border-blue-400 peer-checked:bg-blue-400 flex items-center justify-center transition-colors" style=""></div>
                    <span class="text-sm text-zinc-300 peer-checked:text-white font-medium" style="">
                      Department Head
                    </span>
                  </div>
                </div>
                <div class="relative">
                  <input type="radio" name="role" value="ceo" class="peer absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                  <div class="p-4 rounded-xl bg-zinc-800/50 border border-white/5 peer-checked:bg-blue-600/10 peer-checked:border-blue-500/50 transition-all peer-hover:bg-zinc-800 flex items-center gap-3" style="">
                    <div class="w-4 h-4 rounded-full border border-zinc-500 peer-checked:border-blue-400 peer-checked:bg-blue-400 flex items-center justify-center transition-colors" style=""></div>
                    <span class="text-sm text-zinc-300 peer-checked:text-white font-medium" style="">
                      Owner / CEO
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Sliders Container -->
            <div class="bg-zinc-900/40 border border-white/10 rounded-2xl p-6 sm:p-8 backdrop-blur-sm space-y-8" style="">
              <!-- Slider 1: Hires per year -->
              <div class="space-y-4">
                <div class="flex justify-between items-center">
                  <label class="text-sm font-medium text-zinc-300" style="">
                    Hires per year
                  </label>
                  <span class="text-sm font-mono text-blue-400 bg-blue-500/10 px-2 py-1 rounded" id="val-hires" style="">
                    50
                  </span>
                </div>
                <input type="range" id="input-hires" min="5" max="500" step="5" value="50" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500 hover:accent-blue-400 transition-all" style="">
              </div>

              <!-- Slider 2: Number of Recruiters -->
              <div class="space-y-4">
                <div class="flex justify-between items-center">
                  <label class="text-sm font-medium text-zinc-300" style="">
                    Number of Recruiters
                  </label>
                  <span class="text-sm font-mono text-blue-400 bg-blue-500/10 px-2 py-1 rounded" id="val-recruiters" style="">
                    3
                  </span>
                </div>
                <input type="range" id="input-recruiters" min="1" max="20" step="1" value="3" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500 hover:accent-blue-400 transition-all" style="">
              </div>

              <!-- Slider 3: Avg Salary -->
              <div class="space-y-4">
                <div class="flex justify-between items-center">
                  <label class="text-sm font-medium text-zinc-300" style="">
                    Avg. Recruiter Salary
                  </label>
                  <span class="text-sm font-mono text-blue-400 bg-blue-500/10 px-2 py-1 rounded" id="val-salary" style="">
                    $70,000
                  </span>
                </div>
                <input type="range" id="input-salary" min="40000" max="150000" step="5000" value="70000" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500 hover:accent-blue-400 transition-all" style="">
              </div>

              <!-- Slider 4: % Manual Tasks -->
              <div class="space-y-4">
                <div class="flex justify-between items-center">
                  <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-zinc-300" style="">
                      % Time on Manual Tasks
                    </label>
                    <div class="group relative">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-500 cursor-help" style="">
                        <circle cx="12" cy="12" r="10" class=""></circle>
                        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path>
                        <path d="M12 17h.01" class=""></path>
                      </svg>
                      <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-black border border-white/10 rounded opacity-0 group-hover:opacity-100 transition-opacity w-48 text-center pointer-events-none" style="">
                        Screening, scheduling, data entry, etc.
                      </span>
                    </div>
                  </div>
                  <span class="text-sm font-mono text-blue-400 bg-blue-500/10 px-2 py-1 rounded" id="val-manual" style="">
                    40%
                  </span>
                </div>
                <input type="range" id="input-manual" min="20" max="60" step="5" value="40" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500 hover:accent-blue-400 transition-all" style="">
              </div>

              <!-- Optional Advanced Metrics Toggle -->
              <div x-data="{ open: false }" class="">
                <div class="pt-4 border-t border-white/5">
                  <button id="toggle-advanced" class="flex items-center gap-2 text-xs font-medium text-zinc-500 hover:text-white transition-colors" style="">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" id="advanced-icon">
                      <path d="m6 9 6 6 6-6" class=""></path>
                    </svg>
                    Advanced Metrics (Optional)
                  </button>
                </div>

                <div id="advanced-metrics" class="hidden space-y-8 pt-6 transition-all duration-300">
                  <!-- Slider 5: Cost per Hire -->
                  <div class="space-y-4">
                    <div class="flex justify-between items-center">
                      <label class="text-sm font-medium text-zinc-300" style="">
                        Avg. Cost per Hire
                      </label>
                      <span class="text-sm font-mono text-zinc-400 bg-zinc-800 px-2 py-1 rounded" id="val-cph">
                        $4,000
                      </span>
                    </div>
                    <input type="range" id="input-cph" min="2000" max="15000" step="500" value="4000" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-zinc-500 hover:accent-zinc-400 transition-all">
                  </div>

                  <!-- Slider 6: Vacancy Cost -->
                  <div class="space-y-4">
                    <div class="flex justify-between items-center">
                      <label class="text-sm font-medium text-zinc-300" style="">
                        Vacancy Cost (per day)
                      </label>
                      <span class="text-sm font-mono text-zinc-400 bg-zinc-800 px-2 py-1 rounded" id="val-vacancy">
                        $300
                      </span>
                    </div>
                    <input type="range" id="input-vacancy" min="100" max="2000" step="50" value="300" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-zinc-500 hover:accent-zinc-400 transition-all">
                  </div>
                </div>
              </div>
            </div>

            <button id="calculate-btn" class="w-full py-4 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold text-lg shadow-[0_0_25px_rgba(37,99,235,0.3)] hover:shadow-[0_0_40px_rgba(37,99,235,0.5)] transition-all transform active:scale-[0.99] flex items-center justify-center gap-2 group" style="">
              Calculate My Loss
              <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="group-hover:translate-x-1 transition-transform">
                <path d="M5 12h14" class=""></path>
                <path d="m12 5 7 7-7 7" class=""></path>
              </svg>
            </button>
          </div>

          <!-- Right Column: Results -->
          <div class="lg:col-span-5 lg:sticky lg:top-32">
            <div class="relative bg-zinc-900 border border-white/10 rounded-2xl p-8 overflow-hidden shadow-2xl" style="">
              <!-- Glow -->
              <div class="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-red-500/10 blur-[80px] rounded-full pointer-events-none" style=""></div>

              <h3 class="text-sm font-medium text-zinc-400 uppercase tracking-widest mb-8">
                Estimated Annual Impact
              </h3>

              <div class="space-y-8 relative z-10">
                <!-- Total Loss -->
                <div class="">
                  <div class="text-xs text-zinc-500 mb-1" style="">
                    Total Annual Loss
                  </div>
                  <div class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-zinc-400 tracking-tight" id="result-annual">
                    $0
                  </div>
                </div>

                <div class="grid grid-cols-2 gap-4 pt-4 border-t border-white/5">
                  <div class="">
                    <div class="text-xs text-zinc-500 mb-1" style="">Monthly Loss</div>
                    <div class="text-xl font-semibold text-zinc-200" id="result-monthly" style="">
                      $0
                    </div>
                  </div>
                  <div class="">
                    <div class="text-xs text-zinc-500 mb-1" style="">Daily Loss</div>
                    <div class="text-xl font-semibold text-zinc-200" id="result-daily" style="">
                      $0
                    </div>
                  </div>
                </div>

                <!-- Dynamic Text Analysis -->
                <div class="bg-white/5 rounded-xl p-5 border border-white/5">
                  <div class="flex items-start gap-3">
                    <div class="mt-1 min-w-[20px] text-blue-400" style="">
                      <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="">
                        <circle cx="12" cy="12" r="10" class=""></circle>
                        <path d="M12 16v-4" class=""></path>
                        <path d="M12 8h.01" class=""></path>
                      </svg>
                    </div>
                    <p class="text-sm text-zinc-300 leading-relaxed font-light" id="result-text" style="">
                      Click "Calculate My Loss" to see how manual processes are
                      impacting your bottom line.
                    </p>
                  </div>
                </div>

                <!-- Webhook Form -->
                <div class="pt-6 border-t border-white/5 hidden" id="webhook-form-container">
                  <h4 class="text-sm font-medium text-white mb-4" style="">
                    Get your full report
                  </h4>
                  <form id="lead-form" class="space-y-3">
                    <input type="text" id="lead-name" placeholder="Full Name" required="" class="w-full bg-zinc-800/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 transition-all" style="">
                    <input type="email" id="lead-email" placeholder="Work Email" required="" class="w-full bg-zinc-800/50 border border-white/10 rounded-lg px-4 py-3 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 transition-all" style="">

                    <label class="flex items-start gap-3 cursor-pointer group">
                      <div class="relative flex items-center">
                        <input type="checkbox" class="peer sr-only">
                        <div class="w-4 h-4 border border-zinc-600 rounded bg-zinc-800 peer-checked:bg-blue-500 peer-checked:border-blue-500 transition-colors" style=""></div>
                        <svg class="absolute w-3 h-3 text-white hidden peer-checked:block pointer-events-none left-0.5 top-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="">
                          <polyline points="20 6 9 17 4 12" class=""></polyline>
                        </svg>
                      </div>
                      <span class="text-xs text-zinc-500 group-hover:text-zinc-400 transition-colors pt-0.5" style="">
                        Send me the detailed breakdown and resources.
                      </span>
                    </label>

                    <button type="submit" class="w-full py-3 rounded-lg bg-white text-black font-medium text-sm hover:bg-zinc-200 transition-colors mt-2">
                      Email me my full report
                    </button>
                    <p id="form-feedback" class="text-xs text-center min-h-[16px] text-emerald-400 font-medium"></p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>