Interactive Recruiting Cost Calculator Section

<div class="lg:pl-2 lg:pr-2 z-10 max-w-7xl mt-10 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">
      <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"></span>
      <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
      </span>
      <span class="uppercase text-xs font-medium text-blue-300 tracking-wide">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="lg:bg-clip-text lg:text-transparent bg-gradient-to-tr from-[#005cf0] to-emerald-400 mix-blend-luminosity shadow">costing you?</span>
    </h2>
    <p class="leading-relaxed text-lg font-light text-zinc-400">
      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">
        <label class="block text-sm font-medium text-zinc-300 mb-4 uppercase tracking-wider">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">
              <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">
              </div>
              <span class="text-sm text-zinc-300 peer-checked:text-white font-medium">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">
              <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">
              </div>
              <span class="text-sm text-zinc-300 peer-checked:text-white font-medium">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">
              <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">
              </div>
              <span class="text-sm text-zinc-300 peer-checked:text-white font-medium">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">
              <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">
              </div>
              <span class="text-sm text-zinc-300 peer-checked:text-white font-medium">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">
        <!-- 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">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">50</span>
          </div>
          <input type="range" min="5" max="500" step="5" value="50" class="appearance-none cursor-pointer bg-zinc-800 w-full h-2 rounded-lg" id="input-hires">
        </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">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">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">
        </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">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">$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">
        </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">% 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">
                  <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">
                      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">40%</span>
          </div>
          <input type="range" id="input-manual" min="20" max="80" step="5" value="40" class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer">
        </div>

        <!-- Advanced Metrics Toggle -->
        <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">
                <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">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">
          </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">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">
          </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">
            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">
        <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">
        </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">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">Monthly Loss</div>
              <div class="text-xl font-semibold text-zinc-200" id="result-monthly">$0</div>
            </div>
            <div>
              <div class="text-xs text-zinc-500 mb-1">Daily Loss</div>
              <div class="text-xl font-semibold text-zinc-200" id="result-daily">$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">
                <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="w-[20px] h-[20px]" data-icon-replaced="true"
                  style="color: rgb(96, 165, 250); width: 20px; height: 20px;">
                  <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">
                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">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">
              <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">
              <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>