Bento Feature Grid Section with Chart & Timeline

<section class="relative z-10 max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-8 pr-4 pb-20 pl-4">
  <div class="relative overflow-hidden rounded-3xl bg-white ring-1 ring-neutral-200 sm:p-8 p-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-8">
      <div class="">
        <p class="text-[11px] sm:text-xs uppercase tracking-[0.2em] text-neutral-500 font-sans">(01) Innovation</p>
        <h2 class="sm:text-4xl md:text-5xl text-3xl text-neutral-900 mt-2 font-bricolage font-medium tracking-tighter">Driving Success with Quantum Labs</h2>
      </div>
      <p class="text-sm sm:text-base text-neutral-600 max-w-[42ch] font-sans">Quantum Labs empowers startups and
        enterprises with cutting-edge solutions to accelerate growth, optimize performance, and scale
        seamlessly—delivering innovation, reliability, and exponential results.</p>
    </div>

    <!-- Bento Grid Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Large Card - 2/3 width -->
      <article class="lg:col-span-2 group relative overflow-hidden bg-white border-neutral-200 border rounded-2xl p-6">
        <div class="flex items-start justify-between mb-4">
          <h3 class="text-neutral-900 text-xl sm:text-2xl font-bricolage font-medium tracking-tighter" style="">
            Real-Time Performance Analytics</h3>
          <span class="text-lg font-semibold text-emerald-600 font-sans">99.2%</span>
        </div>
        <p class="text-sm text-neutral-600 mb-6 font-sans">Monitor system performance, user engagement, and business
          metrics with our advanced analytics dashboard.</p>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div
            class="relative h-[180px] rounded-xl bg-gradient-to-br from-blue-50 to-indigo-100 ring-1 ring-blue-200 overflow-hidden">
            <div class="absolute inset-0 grid grid-cols-8 opacity-10">
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class="border-r border-blue-300"></div>
              <div class=""></div>
            </div>

            <div class="absolute left-4 top-4 flex -space-x-2">
              <img class="h-8 w-8 ring-2 ring-white object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/184099c3-3f6c-4f6f-a05a-830150bf75c1_320w.jpg" alt="team member 1">
              <img class="h-8 w-8 ring-2 ring-white object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/292b814a-2c70-4f95-a74d-5a101fc0b698_320w.jpg" alt="team member 2">
              <img class="h-8 w-8 ring-2 ring-white object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9e675575-668c-4087-8408-fa06dd33c5f0_320w.jpg" alt="team member 3">
            </div>
            <div class="absolute left-4 bottom-4">
              <span class="inline-flex items-center gap-2 text-[11px] text-blue-800 bg-white/90 rounded-full px-3 py-1.5 ring-1 ring-blue-200 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                Performance Insights
              </span>
            </div>
          </div>

          <div class="space-y-3">
            <div
              class="flex items-center justify-between rounded-xl bg-gradient-to-r from-emerald-50 to-emerald-100 ring-1 ring-emerald-200 px-4 py-3">
              <div class="flex items-center gap-3">
                <span class="h-3 w-3 rounded-full bg-emerald-500"></span>
                <span class="text-sm text-emerald-800 font-medium font-sans">System Health Check</span>
              </div>
              <span class="text-[11px] text-emerald-600 font-sans">Active</span>
            </div>
            <div
              class="flex items-center justify-between rounded-xl bg-gradient-to-r from-orange-50 to-orange-100 ring-1 ring-orange-200 px-4 py-3">
              <div class="flex items-center gap-3">
                <span class="h-3 w-3 rounded-full bg-orange-500"></span>
                <span class="text-sm text-orange-800 font-medium font-sans">Load Balancing</span>
              </div>
              <span class="text-[11px] text-orange-600 font-sans">Optimizing</span>
            </div>
            <div
              class="flex items-center justify-between rounded-xl bg-gradient-to-r from-purple-50 to-purple-100 ring-1 ring-purple-200 px-4 py-3">
              <div class="flex items-center gap-3">
                <span class="h-3 w-3 rounded-full bg-purple-500"></span>
                <div class="flex flex-col">
                  <span class="text-sm text-purple-800 font-medium font-sans">Data Processing</span>
                  <span class="text-[10px] text-purple-600 font-sans">Real-time stream analysis active</span>
                </div>
              </div>
              <span class="text-[11px] text-purple-600 font-sans">Live</span>
            </div>
          </div>
        </div>

        <div class="flex items-center gap-3">
          <span class="inline-flex items-center gap-2 text-[11px] text-neutral-700 bg-neutral-100 rounded-full px-3 py-1 ring-1 ring-neutral-200 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-3.5 h-3.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
            Powered by AI
          </span>
          <span class="inline-flex items-center gap-2 text-[11px] text-neutral-700 bg-neutral-100 rounded-full px-3 py-1 ring-1 ring-neutral-200 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3.5 h-3.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
            Secure &amp; Compliant
          </span>
        </div>
      </article>

      <!-- Small Card - 1/3 width -->
      <article class="group relative rounded-2xl border border-neutral-200 bg-white p-6">
        <h3 class="text-neutral-900 text-lg sm:text-xl tracking-tight font-medium font-sans">Smart Automation Hub</h3>
        <p class="mt-2 text-sm text-neutral-600 font-sans">Streamline workflows and boost productivity with intelligent
          automation.</p>

        <div class="mt-6 rounded-xl bg-neutral-100 ring-1 ring-neutral-200 p-4">
          <div class="relative h-[120px]">
            <canvas id="workChart" height="240"
              style="display: block; box-sizing: border-box; height: 120px; width: 286px;" class=""
              width="572"></canvas>
          </div>
        </div>

        <div class="mt-4 flex items-center gap-2">
          <span class="inline-flex items-center gap-2 text-[11px] text-indigo-700 bg-indigo-50 rounded-full px-2 py-1 ring-1 ring-indigo-200 font-sans">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" class="lucide lucide-cpu w-3.5 h-3.5"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
            Auto-Scaling
          </span>
        </div>
      </article>

      <!-- Small Card - 1/3 width -->
      <article class="group relative rounded-2xl border border-neutral-200 bg-white p-6">
        <h3 class="text-neutral-900 text-lg sm:text-xl tracking-tight font-medium font-sans">Enterprise Integration</h3>
        <p class="mt-2 text-sm text-neutral-600 font-sans">Seamlessly connect with your existing tech stack and
          third-party services.</p>

        <div class="mt-6 space-y-3">
          <div class="flex items-center justify-between rounded-lg ring-1 ring-neutral-200 bg-neutral-50 px-3 py-2">
            <span class="text-sm text-neutral-800 font-sans">01 API Gateway Setup</span>
            <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="check"
              class="lucide lucide-check text-emerald-500">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
          </div>
          <div class="flex items-center justify-between rounded-lg ring-1 ring-neutral-200 bg-neutral-50 px-3 py-2">
            <span class="text-sm text-neutral-800 font-sans">02 Data Synchronization</span>
            <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="check"
              class="lucide lucide-check text-emerald-500">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
          </div>
          <div class="flex items-center justify-between rounded-lg ring-1 ring-orange-200 bg-orange-50 px-3 py-2">
            <span class="text-sm text-neutral-800 font-sans">03 Security Protocols</span>
            <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="clock"
              class="lucide lucide-clock text-orange-500">
              <path d="M12 6v6l4 2" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
          </div>
          <div class="flex items-center justify-between rounded-lg ring-1 ring-neutral-200 bg-neutral-50 px-3 py-2">
            <span class="text-sm text-neutral-800 font-sans">04 Performance Optimization</span>
            <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="clock"
              class="lucide lucide-clock text-neutral-400">
              <path d="M12 6v6l4 2" class=""></path>
              <circle cx="12" cy="12" r="10" class=""></circle>
            </svg>
          </div>
        </div>
      </article>

      <!-- Large Card - 2/3 width -->
      <article class="lg:col-span-2 group relative overflow-hidden bg-white border-neutral-200 border rounded-2xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-neutral-900 text-xl sm:text-2xl font-bricolage font-medium tracking-tighter" style="">Advanced
            Security &amp; Compliance</h3>
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-2 text-[11px] text-emerald-700 bg-emerald-50 rounded-full px-2 py-1 ring-1 ring-emerald-200 font-sans">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield w-3.5 h-3.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
              Enterprise Grade
            </span>
            <span class="text-lg font-semibold text-neutral-800 font-sans">SOC 2 Certified</span>
          </div>
        </div>
        <p class="text-sm text-neutral-600 mb-6 font-sans">Protect your data and maintain compliance with
          industry-leading security measures and automated governance tools.</p>

        <div class="grid grid-cols-3 gap-4">
          <div class="text-center p-4 rounded-xl bg-gradient-to-br from-red-50 to-red-100 ring-1 ring-red-200">
            <div class="inline-flex items-center justify-center w-8 h-8 bg-red-500 text-white rounded-full mb-2">
              <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="lock"
                class="lucide lucide-lock">
                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
              </svg>
            </div>
            <h4 class="font-medium text-red-800 text-sm font-sans">Encryption</h4>
            <p class="text-xs text-red-600 font-sans">End-to-end AES-256</p>
          </div>

          <div class="text-center p-4 rounded-xl bg-gradient-to-br from-green-50 to-green-100 ring-1 ring-green-200">
            <div class="inline-flex items-center justify-center w-8 h-8 bg-green-500 text-white rounded-full mb-2">
              <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="eye"
                class="lucide lucide-eye">
                <path
                  d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
                  class=""></path>
                <circle cx="12" cy="12" r="3" class=""></circle>
              </svg>
            </div>
            <h4 class="font-medium text-green-800 text-sm font-sans">Monitoring</h4>
            <p class="text-xs text-green-600 font-sans">24/7 threat detection</p>
          </div>

          <div class="text-center p-4 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 ring-1 ring-blue-200">
            <div class="inline-flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded-full mb-2">
              <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="file-check" class="lucide lucide-file-check">
                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
                <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
                <path d="m9 15 2 2 4-4" class=""></path>
              </svg>
            </div>
            <h4 class="font-medium text-blue-800 text-sm font-sans">Compliance</h4>
            <p class="text-xs text-blue-600 font-sans">GDPR, HIPAA ready</p>
          </div>
        </div>
      </article>

    </div>

    <!-- Progress Timeline -->
    <div class="mt-10">
      <div class="relative">
        <div class="h-px w-full bg-gradient-to-r from-black/0 via-neutral-300 to-black/0"></div>
        <div class="mt-6 grid grid-cols-5 text-[11px] text-neutral-600 font-geist">
          <div class="flex items-center gap-2 font-sans">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            DISCOVERY
          </div>
          <div class="flex items-center gap-2 font-sans">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            PLANNING
          </div>
          <div class="flex items-center gap-2 font-sans">
            <span class="h-1.5 w-1.5 rounded-full bg-orange-400"></span>
            DEVELOPMENT
          </div>
          <div class="flex items-center gap-2 font-sans">
            <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
            TESTING
          </div>
          <div class="flex items-center gap-2 font-sans">
            <span class="h-1.5 w-1.5 rounded-full bg-neutral-300"></span>
            DEPLOYMENT
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script>
    try {
      const ctx = document.getElementById('workChart');
      if (ctx) {
        new Chart(ctx, {
          type: 'line',
          data: {
            labels: Array.from({ length: 12 }, (_, i) => i + 1),
            datasets: [{
              data: [65,75,80,85,90,88,95,92,98,94,96,100],
              backgroundColor: 'rgba(99, 102, 241, 0.1)',
              borderColor: 'rgba(99, 102, 241, 0.8)',
              borderWidth: 2,
              fill: true,
              tension: 0.4,
              pointRadius: 0,
              pointHoverRadius: 6
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              x: { display: false, grid: { display: false } },
              y: { display: false, grid: { display: false }, suggestedMin: 60, suggestedMax: 105 }
            },
            plugins: {
              legend: { display: false },
              tooltip: { enabled: false }
            }
          }
        });
      }
    } catch (e) { console.log('Chart init error', e); }
  </script>
</section>