Feature Showcase Section with Tabs & Stats

<section class="sm:pt-24 sm:pb-12 z-10 mx-8 pt-24 pb-12 relative">
        <section class="lg:p-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate bg-gradient-to-br from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mr-auto ml-auto pt-8 pr-8 pb-8 pl-8 relative">
  <!-- Header -->
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-12 px-6">
    <div class="text-left">
      <h2 class="leading-7 text-base font-semibold text-sky-400 font-geist">Feature</h2>
      <h2 class="sm:text-4xl [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-3xl font-semibold text-white tracking-tight font-geist mt-3 animate">
        Powerful tools for modern budgeting
      </h2>
      <p class="leading-8 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-lg text-white/70 max-w-2xl mt-4 animate">
        Track spending, forecast savings, and stop surprise renewals—Sora keeps everything in one clear view.
      </p>
    </div>

    <!-- Feature tabs (replace billing toggle) -->
    <div class="md:mt-0 [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll mt-8 animate" role="tablist" aria-label="Feature categories" id="feature-tabs">
      <div class="inline-flex border-white/10 border rounded-xl pt-1 pr-1 pb-1 pl-1 items-center">
        <button type="button" role="tab" aria-selected="true" data-feature="overview" class="px-4 py-2 text-sm font-medium rounded-lg transition bg-sky-500/20 text-sky-200 ring-1 ring-inset ring-sky-500/30">
          Overview
        </button>
        <button type="button" role="tab" aria-selected="false" data-feature="automation" class="px-4 py-2 text-sm font-medium rounded-lg transition text-white/80 hover:text-white">
          Automation
        </button>
        <button type="button" role="tab" aria-selected="false" data-feature="security" class="px-4 py-2 text-sm font-medium rounded-lg transition text-white/80 hover:text-white">
          Security
        </button>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:px-0 pr-0 pl-0 gap-x-6 gap-y-6">
    <!-- Left: Highlighted Feature -->
    <div class="lg:col-span-5 overflow-hidden sm:p-10 [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative backdrop-blur-xl animate">
  <div class="absolute inset-0 pointer-events-none bg-gradient-to-br from-white/[0.02] via-white/[0.03] to-white/[0.02]"></div>
  <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(1000px 500px at 10% 0%, rgba(14,165,233,0.12), transparent 60%);"></div>

  <!-- Title -->
  <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-white font-geist" data-slot="title">
    Spend smarter with real-time insights
  </h3>
  <p class="mt-3 text-white/70 leading-7" data-slot="desc">
    Category breakdowns, trend lines, and alerts help you react fast and stay under budget.
  </p>

  <!-- Bullet points -->
  <ul class="mt-6 space-y-3">
    <li class="flex items-start gap-3">
      <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-md bg-sky-500/20 ring-1 ring-sky-500/30">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
          <path d="m5 12 5 5L20 7" class=""></path>
        </svg>
      </span>
      <p class="text-sm text-white/80">Live expense signals &amp; category trends</p>
    </li>
    <li class="flex items-start gap-3">
      <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-md bg-sky-500/20 ring-1 ring-sky-500/30">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 6 9 17l-5-5" class=""></path>
        </svg>
      </span>
      <p class="text-sm text-white/80">Savings pace &amp; monthly progress</p>
    </li>
    <li class="flex items-start gap-3">
      <span class="mt-1 inline-flex h-5 w-5 items-center justify-center rounded-md bg-sky-500/20 ring-1 ring-sky-500/30">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 6 9 17l-5-5" class=""></path>
        </svg>
      </span>
      <p class="text-sm text-white/80">Calendar-aware renewals</p>
    </li>
  </ul>

  <!-- CTA: Updated style -->
  <div class="mt-6 relative">
    <button aria-label="See all features" class="group hover:shadow-sky-500/30 hover:shadow-2xl hover:scale-[1.02] hover:-translate-y-1 active:scale-95 transition-all duration-500 ease-out cursor-pointer hover:border-sky-400/60 overflow-hidden bg-gradient-to-br from-sky-900/40 via-black-900/60 to-black/80 border-sky-500/30 border-2 rounded-full pt-3 pr-4 pb-3 pl-6 relative shadow-2xl backdrop-blur-xl w-full max-w-[16rem]">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-400/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out"></div>
      <div class="group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-r from-sky-500/10 via-sky-400/20 to-sky-500/10 opacity-0 rounded-2xl absolute top-0 right-0 bottom-0 left-0"></div>
      <div class="relative z-10 flex items-center gap-4">
        <div class="flex-1 text-left">
          <p class="group-hover:text-white transition-colors duration-300 text-sm font-bold text-white font-geist drop-shadow-sm">
            See all features
          </p>
        </div>
        <div class="opacity-40 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" class="w-5 h-5 text-white">
            <path d="M9 5l7 7-7 7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" class=""></path>
          </svg>
        </div>
      </div>
    </button>
  </div>

  <!-- Small stats -->
  <div class="mt-8 grid grid-cols-2 gap-6">
    <div>
      <div class="text-4xl font-semibold tracking-tight text-white font-geist">92%</div>
      <p class="text-sm text-white/60 mt-2">Report clearer budgeting</p>
    </div>
    <div>
      <div class="text-4xl font-semibold tracking-tight text-white font-geist">45+</div>
      <p class="text-sm text-white/60 mt-2">New features this year</p>
    </div>
  </div>
</div>

    <!-- Right: Preview (matches bullets) -->
    <div class="lg:col-span-7 overflow-hidden sm:p-6 [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll border-white/10 border rounded-3xl pt-4 pr-4 pb-4 pl-4 relative backdrop-blur-xl animate">
      <!-- Top bar -->
      <div class="flex items-center justify-between rounded-2xl bg-white/[0.03] border border-white/10 px-4 py-3 mb-4">
        <div class="flex items-center gap-3">
          <div class="h-7 w-7 rounded-lg bg-sky-500/20 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 20c4.418 0 8-3.582 8-8S16.418 4 12 4a8 8 0 1 0 0 16Z" class=""></path>
              <path d="M12 6v6l3 3" class=""></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-slate-200 font-geist">Sora</span>
        </div>
        <div class="hidden sm:flex items-center gap-2">
          <div class="rounded-full bg-white/5 border border-white/10 px-3 py-1.5 text-xs text-slate-400 font-geist">
            Live insights enabled
          </div>
        </div>
      </div>

      <!-- Stat cards -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
        <div class="rounded-xl bg-white/[0.03] border border-white/10 p-3">
          <div class="mb-2 flex items-center justify-between">
            <div class="h-7 w-7 rounded-lg bg-sky-500/15 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M3 3v18h18" class=""></path><path d="M19 9l-6 6-4-4-3 3" class=""></path></svg>
            </div>
          </div>
          <div class="text-[10px] text-slate-400 font-geist">Spending</div>
          <div class="text-xl font-semibold text-white font-geist tracking-tight">$2,450</div>
          <div class="text-[10px] text-sky-400 font-geist">-3.4% vs last month</div>
        </div>

        <div class="rounded-xl bg-white/[0.03] border border-white/10 p-3">
          <div class="mb-2 flex items-center justify-between">
            <div class="h-7 w-7 rounded-lg bg-sky-500/15 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 6v6l3 3" class=""></path></svg>
            </div>
          </div>
          <div class="text-[10px] text-slate-400 font-geist">Savings</div>
          <div class="text-xl font-semibold text-white font-geist tracking-tight">$12,890</div>
          <div class="text-[10px] text-sky-400 font-geist">+8.2% growth</div>
        </div>

        <div class="rounded-xl bg-white/[0.03] border border-white/10 p-3">
          <div class="mb-2 flex items-center justify-between">
            <div class="h-7 w-7 rounded-lg bg-sky-500/15 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M12 2v20" class=""></path><path d="M2 12h20" class=""></path></svg>
            </div>
          </div>
          <div class="text-[10px] text-slate-400 font-geist">Investments</div>
          <div class="text-xl font-semibold text-white font-geist tracking-tight">$8,320</div>
          <div class="text-[10px] text-sky-400 font-geist">+4.6% returns</div>
        </div>
      </div>

      <!-- Analysis row -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <!-- Bars -->
        <div class="lg:col-span-2 rounded-xl bg-white/[0.03] border border-white/10 p-4">
          <div class="flex items-center justify-between mb-3">
            <span class="text-sm text-slate-300 font-geist">Expense Breakdown</span>
            <span class="text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-slate-400 font-geist">Last 30 Days</span>
          </div>
          <div class="grid grid-cols-12 gap-2 h-24 items-end">
            <div class="h-6 bg-white/10 rounded"></div>
            <div class="h-10 bg-white/10 rounded"></div>
            <div class="h-8 bg-white/10 rounded"></div>
            <div class="h-12 bg-white/10 rounded"></div>
            <div class="h-9 bg-white/10 rounded"></div>
            <div class="h-7 bg-white/10 rounded"></div>
            <div class="h-6 bg-white/10 rounded"></div>
            <div class="h-24 bg-sky-500/70 rounded shadow-[0_0_20px_rgba(56,189,248,0.45)]"></div>
            <div class="h-10 bg-white/10 rounded"></div>
            <div class="h-7 bg-white/10 rounded"></div>
            <div class="h-16 bg-white/10 rounded"></div>
            <div class="h-20 bg-white/10 rounded"></div>
          </div>
        </div>

        <!-- Donut -->
        <div class="rounded-xl bg-white/[0.03] border border-white/10 p-4 flex items-center justify-center">
          <div class="relative w-32 h-32">
            <svg class="-rotate-90" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="10" class=""></circle>
              <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" class="text-sky-400" stroke-width="10" stroke-dasharray="251.2" stroke-dashoffset="87" stroke-linecap="round"></circle>
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="text-center">
                <div class="text-2xl font-semibold tracking-tight text-white font-geist">72%</div>
                <div class="text-[10px] text-slate-400 font-geist">Budget Used</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Calendar preview -->
      <div class="mt-4 rounded-xl bg-white/[0.03] border border-white/10 p-4">
        <div class="flex items-center justify-between mb-3">
          <span class="text-sm text-slate-300 font-geist">November 2025</span>
          <div class="flex items-center gap-2 text-xs text-slate-400 font-geist">
            <span class="">Oct</span><span class="text-slate-500">•</span><span>Dec</span>
          </div>
        </div>
        <div class="h-16 rounded-lg bg-white/[0.02] border border-white/10 flex items-center px-3 overflow-hidden">
          <div class="text-[10px] text-slate-500 font-geist mr-3">Thu</div>
          <div class="px-3 py-1.5 rounded-full bg-sky-500/20 border border-sky-500/30 text-[10px] text-sky-300 font-geist inline-flex items-center gap-2">
            Subscription Renewal
            <span class="flex -space-x-1">
              <span class="w-3 h-3 rounded-full bg-sky-400 border border-black/50"></span>
              <span class="w-3 h-3 rounded-full bg-sky-500 border border-black/50"></span>
              <span class="w-3 h-3 rounded-full bg-sky-600 border border-black/50"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
      </section>