Interactive Feature Tabs Section with Gradient Indicator

<section
  class="shadow-black/30 bg-white/5 border-white/10 border rounded-3xl pt-0 pr-8 pb-0 pl-8 shadow-2xl backdrop-blur-sm">
  <div class="max-w-7xl rounded-3xl mr-auto ml-auto pt-12 pb-12">
    <!-- Header -->
    <div class="sm:mb-10 text-center mb-8">
      <div
        class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-xs text-white/80 mx-auto">
        <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" data-lucide="sparkles"
          class="lucide lucide-sparkles h-3.5 w-3.5">
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            class=""></path>
          <path d="M20 2v4" class=""></path>
          <path d="M22 4h-4" class=""></path>
          <circle cx="4" cy="20" r="2" class=""></circle>
        </svg>
        <span class="">Features</span>
      </div>
      <h2 class="sm:text-5xl lg:text-6xl text-4xl font-semibold text-white tracking-tight mt-3">What makes our AI chat
        truly unique?</h2>
    </div>

    <!-- Tabs -->
    <div class="flex justify-center">
      <div class="relative">
        <div
          class="inline-flex flex-wrap items-center gap-2 rounded-[24px] border border-white/10 bg-white/5 px-2.5 py-2">
          <!-- Tab 1 -->
          <button onclick="switchTab(0)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 ring-1 ring-white/20">
              <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" data-lucide="calendar" class="lucide lucide-calendar h-3.5 w-3.5 text-white"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
            </span>
            <span>Meeting Assistant</span>
          </button>

          <!-- Tab 2 -->
          <button onclick="switchTab(1)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <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" data-lucide="git-branch" class="lucide lucide-git-branch h-3.5 w-3.5 text-white/80"><line x1="6" x2="6" y1="3" y2="15" class=""></line><circle cx="18" cy="6" r="3" class=""></circle><circle cx="6" cy="18" r="3" class=""></circle><path d="M18 9a9 9 0 0 1-9 9" class=""></path></svg>
            </span>
            <span class="">Scheduler &amp; Lead Router</span>
          </button>

          <!-- Tab 3 -->
          <button onclick="switchTab(2)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox=" fill=" none"="" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data"="" class="lucide lucide-brain h-3.5 w-3.5 text-white/80"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
            </span>
            <span class="">Conversation Insights</span>
          </button>

          <!-- Tab 4 -->
          <button onclick="switchTab(3)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <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" data-lucide="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5 text-white/80"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
            </span>
            <span class="">Revenue Performance</span>
          </button>
        </div>

        <!-- Animated gradient line -->
        <div id="gradient-line"
          class="pointer-events-none absolute -bottom-2 h-0.5 rounded-full transition-all duration-300 ease-out"
          style="background: linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.8) 25%, rgba(217, 70, 239, 0.8) 75%, rgba(217, 70, 239, 0) 100%); left: 23px; width: 158.32px;">
        </div>

        <div class="pointer-events-none absolute left-0 right-0 -bottom-2 h-px"
          style="background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(148,163,184,.15) 20%, rgba(148,163,184,.15) 80%, rgba(255,255,255,0) 100%);">
        </div>
      </div>

      <script>
        function switchTab(index) {
          const buttons = document.querySelectorAll('.tab-button');
          const line = document.getElementById('gradient-line');
          
          // Update button styles
          buttons.forEach((btn, i) => {
            const iconSpan = btn.querySelector('span:first-child');
            if (i === index) {
              btn.classList.remove('bg-white/5', 'text-white/80');
              btn.classList.add('bg-white/10', 'text-white/90');
              iconSpan.classList.remove('bg-white/5', 'ring-white/15');
              iconSpan.classList.add('bg-gradient-to-br', 'from-indigo-500', 'to-violet-500', 'ring-white/20');
            } else {
              btn.classList.remove('bg-white/10', 'text-white/90');
              btn.classList.add('bg-white/5', 'text-white/80');
              iconSpan.classList.remove('bg-gradient-to-br', 'from-indigo-500', 'to-violet-500', 'ring-white/20');
              iconSpan.classList.add('bg-white/5', 'ring-white/15');
            }
          });
          
          // Calculate position and width for gradient line
          const activeButton = buttons[index];
          const container = activeButton.parentElement;
          const containerRect = container.getBoundingClientRect();
          const buttonRect = activeButton.getBoundingClientRect();
          
          const left = buttonRect.left - containerRect.left + 12;
          const width = buttonRect.width - 24;
          
          line.style.left = left + 'px';
          line.style.width = width + 'px';
        }
        
        // Initialize on load
        if (typeof window !== 'undefined') {
          window.addEventListener('load', () => {
            switchTab(0);
          });
        }
      </script>
    </div>

    <!-- Feature Panel -->
    <div class="sm:mt-10 sm:p-10 border-white/10 border rounded-[28px] mt-8 pt-6 pr-6 pb-6 pl-6 backdrop-blur-sm">
      <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-12 gap-x-8 gap-y-8 items-start">
        <!-- Copy -->
        <div class="">
          <h3 class="sm:text-5xl leading-snug text-4xl font-semibold text-white tracking-tight">Smarter, faster
            scheduling
            <span class="xl:bg-clip-text xl:text-transparent bg-gradient-to-br from-gray-500/100 to-gray-500/50">made effortless</span>
          </h3>
          <p class="sm:text-lg text-base text-slate-300 mt-4">Our assistant doesn’t just replyit coordinates.
            Whether you’re chatting on a call, in-app, or through your calendar, it automatically finds the best times,
            manages reschedules, and keeps everything synced without lifting a finger.</p>

          <!-- Pills -->
          <div class="mt-6 flex flex-col gap-4">
            <div
              class="inline-flex sm:w-[540px] text-sm text-slate-200 w-full max-w-full border-white/10 border rounded-2xl pt-3 pr-4 pb-3 pl-4 shadow-sm gap-x-3 gap-y-3 items-center"
              style="box-shadow: inset 0 -12px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)">
              <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 ring-white/10 ring-1 rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe h-4.5 w-4.5 text-white/90"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
          </span>
              <span class="font-medium tracking-[-0.01em]">Instant meeting setup — automatically detects context and books at the right time.</span>
            </div>

            <div
              class="inline-flex sm:w-[540px] text-sm text-slate-200 w-full max-w-full border-white/10 border rounded-2xl pt-3 pr-4 pb-3 pl-4 shadow-sm gap-x-3 gap-y-3 items-center"
              style="box-shadow: inset 0 -12px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)">
              <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 ring-white/10 ring-1 rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smile" class="lucide lucide-smile" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(255, 255, 255);"><circle cx="12" cy="12" r="10" class=""></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path><line x1="9" x2="9.01" y1="9" y2="9" class=""></line><line x1="15" x2="15.01" y1="9" y2="9" class=""></line></svg>
          </span>
              <span class="font-medium tracking-[-0.01em]">Smart suggestions — adapts to your preferences and past conversations.</span>
            </div>
          </div>
        </div>

        <!-- Visual -->
        <div class="relative">
          <div
            class="relative overflow-hidden rounded-2xl border border-white/10 bg-[#0d0f16]/70 shadow-lg aspect-[4/3]">
            <!-- Subtle grid -->
            <div class="opacity-30 absolute top-0 right-0 bottom-0 left-0"
              style="background-image: linear-gradient(0deg, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 1px); background-size: 24px 24px, 24px 24px">
            </div>

            <!-- Stacked card mock -->
            <div class="absolute top-10 right-10 bottom-16 left-10">
              <div class="absolute inset-x-6 top-2 h-[82%] rounded-[28px] border border-white/10 bg-white/[0.03]"></div>
              <div
                class="bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[84%] border-white/10 border rounded-[28px] absolute top-5 right-4 left-4">
              </div>
              <div
                class="shadow-black/30 [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] bg-gradient-to-br from-white/10 via-white/0 to-white/10 h-[86%] border-white/15 border rounded-[28px] absolute top-8 right-2 left-2 backdrop-blur-md"
                style="box-shadow: 0 10px 30px rgba(0,0,0,0.35) inset">
                <!-- Inner lines -->
                <div class="bg-white/10 h-4 rounded-lg absolute top-8 right-6 left-6"></div>
                <div class="bg-white/10 h-4 rounded-lg absolute top-8 right-6 left-6"></div>
                <div class="bg-white/10 h-4 rounded-lg absolute top-8 right-6 left-6"></div>
                <div class="h-3.5 bg-white/10 rounded-lg my-16 absolute top-0 right-24 bottom-12 left-6"></div>
                <div class="bg-white/10 h-12 rounded-xl absolute top-28 right-32 left-6"></div>






              </div>
            </div>

            <!-- Bottom-right avatars and orbs -->
            <div class="flex z-0 absolute right-16 bottom-6 left-16 gap-x-3 gap-y-3 items-center justify-center">

              <img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover rounded-full ring-white/20 ring-1" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/66cda8d4-dd4e-44ee-8ef9-cba94340ba05_3840w.webp" alt="Avatar 1"><img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover ring-white/20 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2024b6bd-7dee-4c3c-8e15-adfeaab5e3ee_3840w.webp" alt="Avatar 1"><img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover ring-white/20 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8fb04a14-10bb-42af-8464-ab91b4a2ab2f_320w.webp" alt="Avatar 1">

              <img class="transition-all duration-300 z-10 w-16 h-16 object-cover ring-white/25 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/077ae66a-62bc-4bf7-afa2-ff734313b35c_3840w.webp" alt="Avatar 2">

              <img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover ring-white/20 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/39e15168-9f77-4837-9a4b-89c74b8bc38b_3840w.webp" alt="Avatar 3"><img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover ring-white/20 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8af5e860-0834-42ee-9c28-7a688c9c1907_3840w.webp" alt="Avatar 3"><img class="transition-all duration-300 hover:w-16 hover:h-16 hover:ring-white/25 hover:z-10 w-8 h-8 object-cover rounded-full ring-white/20 ring-1" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4eb1be61-53d3-409e-9285-97c3c2f64161_320w.webp" alt="Avatar 3">

            </div>

            <!-- Subtle divider like frame edge -->


            <!-- Accent glow -->
            <div class="pointer-events-none absolute -inset-1 rounded-2xl opacity-60 blur-xl"
              style="background: radial-gradient(60% 60% at 70% 20%, rgba(99,102,241,.22), rgba(217,70,239,0) 70%);">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>