Interactive FAQ Section with Accordion and CTA

<section
  class="md:px-12 md:pt-20 z-10 bg-black/50 w-full max-w-[1400px] border-white/5 border-t mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">
  <!-- Background Gradients -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-sky-500/5 rounded-full blur-[100px]"></div>
    <div class="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500/5 rounded-full blur-[100px]"></div>
  </div>

  <div class="relative z-10 w-full max-w-4xl mx-auto">
    <!-- Section Header -->
    <div class="text-center mb-16">


      <h2 class="md:text-5xl text-3xl font-normal text-white tracking-tight font-serif-custom mb-8">Frequently Asked
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-indigo-400 to-emerald-400">Questions</span>
      </h2>

      <div class="space-y-6 max-w-3xl mx-auto text-lg font-light text-zinc-400 leading-relaxed">
        <p class="">
          AI-Powered Truck Driver Recruiter is focused on maximizing recruitment productivity for the transportation
          industry by using cutting edge AI technology and industry-focused employer branding campaigns.
        </p>
        <p class="">
          As a strategic partner for HR professionals and recruiters, AI-Powered Truck Driver Recruiter offers a
          comprehensive 3-step framework that includes automated recruitment funnels, data-driven decision making, and
          continuous optimization for long-lasting growth.
        </p>
        <p class="">
          Through the use of this advanced technology and refined recruitment strategies, companies can outsmart
          competitors and gain an edge in the highly competitive trucking and warehouse industry.
        </p>
      </div>
    </div>

    <!-- FAQ Accordion -->
    <div class="space-y-4">

      <!-- Item 1 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What is AI-Powered Truck Driver Recruiter?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">AI-Powered Truck Driver Recruiter is a strategic partner for
            HR professionals and recruiters in the trucking and warehouse industry, offering Done-For-You cutting edge
            AI technology and industry-focused employer branding campaigns to maximize recruitment productivity.</p>
        </div>
      </div>

      <!-- Item 2 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What kind of recruitment features does AI-Powered Truck Driver Recruiter offer?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">AI-Powered Truck Driver Recruiter offers a three-step
            framework that includes automated recruitment funnels, data-driven decision making, and continuous
            optimization for long-lasting growth.</p>
        </div>
      </div>

      <!-- Item 3 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What is the main goal of AI-Powered Truck Driver Recruiter?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">The main goal of AI-Powered Truck Driver Recruiter is to
            enable HR professionals, recruiters, and hiring managers to unlock unprecedented productivity in the
            recruitment process for the trucking and warehouse industry.</p>
        </div>
      </div>

      <!-- Item 4 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">How does AI-Powered Truck Driver Recruiter help companies outsmart their competitors?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">By utilizing advanced technology and refined recruitment
            strategies, AI-Powered Truck Driver Recruiter can help companies outsmart their competitors in the highly
            competitive trucking and warehouse industry.</p>
        </div>
      </div>

      <!-- Item 5 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What is the recruitment funnel and why is it important for truck driver recruitment?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">The recruitment funnel is composed of four crucial elements:
            workflow process automation, multi-channel communication automation, accountability co-pilot, and analytical
            tracking and measurement. It is important for the recruitment of truck drivers because it effectively
            engages candidates, making the process more efficient and predictable.</p>
        </div>
      </div>

      <!-- Item 6 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">How does AI-Powered Truck Driver Recruiter handle employer branding for companies?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">AI-Powered Truck Driver Recruiter adapts the employer
            branding and employee value proposition based on the company's unique culture to attract drivers who align
            with their values and possess necessary skills.</p>
        </div>
      </div>

      <!-- Item 7 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What makes data-driven decision making an effective tool for recruitment?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">Data-driven decision making utilizes recruitment funnel
            reports and data analysis to track and measure every step candidates take towards a job offer, allowing for
            optimization and predictable results.</p>
        </div>
      </div>

      <!-- Item 8 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">How does AI-Powered Truck Driver Recruiter continuously optimize recruitment strategies for lasting growth?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">AI-Powered Truck Driver Recruiter continuously refines
            recruitment strategies based on evolving data to sustain growth and maintain a competitive edge in the
            trucking and warehouse industry.</p>
        </div>
      </div>

      <!-- Item 9 -->
      <div
        class="group rounded-2xl border border-white/5 bg-zinc-900/30 overflow-hidden transition-all duration-300 hover:border-white/10 hover:bg-zinc-900/50">
        <button class="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none" onclick="const p = this.nextElementSibling; const i = this.querySelector('svg'); p.classList.toggle('hidden'); i.style.transform = p.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'">
          <span class="text-base font-medium text-zinc-200 pr-8">What can companies expect from working with AI-Powered Truck Driver Recruiter?</span>
          <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="text-zinc-500 transition-transform duration-300"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div class="hidden px-6 pb-5">
          <p class="text-sm text-zinc-400 leading-relaxed">By utilizing advanced technology and industry-focused
            strategies, companies can expect to see improved recruitment productivity, outsmart their competitors, and
            attract top talent in the trucking and warehouse industry.</p>
        </div>
      </div>

    </div>

    <!-- Contact CTA -->
    <div
      class="md:p-10 overflow-hidden text-center bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 border-white/10 border rounded-3xl mt-16 pt-8 pr-8 pb-8 pl-8 relative">
      <!-- Glow Effect -->
      <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-[80px] pointer-events-none">
      </div>
      <div class="absolute bottom-0 left-0 w-64 h-64 bg-sky-500/10 rounded-full blur-[80px] pointer-events-none"></div>

      <div class="relative z-10">
        <h3 class="text-xl md:text-2xl font-semibold tracking-tight text-white mb-3">Still have questions?</h3>
        <p class="mx-auto max-w-2xl text-sm md:text-base text-zinc-400 font-light mb-8">
          Can't find the answer you're looking for? Please chat with our friendly team.
        </p>

        <div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
          <a href="/contact"
            class="inline-flex items-center justify-center gap-2 hover:brightness-110 transition-all duration-300 hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] text-xl font-semibold text-black bg-gradient-to-br from-emerald-400 to-sky-500 rounded-xl pt-3 pr-6 pb-3 pl-6 shadow-[0_0_20px_rgba(16,185,129,0.3)]">

            Get in touch
          </a>

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