<!DOCTYPE html>
<html lang="en" id="home">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
  <title>OneUptime | Metrics - Performance Insights & Real-time Monitoring</title>
  <meta name="description"
    content="Monitor application and infrastructure metrics in real-time. Track performance, identify bottlenecks, and optimize your systems with OneUptime Metrics.">
  <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

<body>
  <%- include('nav') -%>

  <main id="main-content">
    <!-- Hero Section -->
    <div class="relative isolate overflow-hidden bg-white" id="metrics-hero-section">
      <!-- Subtle grid pattern background -->
      <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

      <!-- Grid glow effect that follows cursor - purple color -->
      <div id="metrics-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(147, 51, 234, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(147, 51, 234, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>

      <div class="py-20 sm:py-28 lg:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <div class="mx-auto max-w-3xl text-center">
            <!-- Minimal badge -->
            <p class="text-sm font-medium text-purple-600 mb-4">OpenTelemetry & Prometheus Native</p>

            <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
              Real-time performance insights
            </h1>
            <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
              Collect, visualize, and analyze metrics from any source. Monitor application performance and infrastructure health at any scale.
            </p>

            <div class="mt-10 flex items-center justify-center gap-x-6">
              <a href="/accounts/register"
                class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
                Get started
              </a>
              <a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
                Request demo <span aria-hidden="true">&rarr;</span>
              </a>
            </div>

            <!-- Subtle feature list -->
            <div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
              <span>Custom dashboards</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Anomaly detection</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>PromQL compatible</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Smart alerting</span>
            </div>
          </div>

          <!-- Clean hero image -->
          <div class="mt-16 sm:mt-20">
            <div class="relative mx-auto max-w-5xl">
              <div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
                <img src="/img/metrics.png" alt="OneUptime Metrics dashboard" width="2432" height="1442"
                  class="rounded-lg shadow-lg">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%- include('logo-roll') -%>

    <!-- How It Works Section -->
    <div class="relative bg-gray-50 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <p class="text-sm font-medium text-purple-600 uppercase tracking-wide mb-3">How It Works</p>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Start collecting metrics in minutes
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Get full visibility into your infrastructure and applications with our simple setup process.
          </p>
        </div>

        <div class="mx-auto max-w-5xl">
          <!-- Connecting line for desktop -->
          <div class="hidden lg:block relative">
            <div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-purple-200"></div>
          </div>

          <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Step 1 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-purple-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-purple-600 ring-2 ring-purple-600">1</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Add SDK</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Install our OpenTelemetry SDK or use your existing Prometheus setup.</p>
            </div>

            <!-- Step 2 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-purple-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-purple-600 ring-2 ring-purple-600">2</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Configure</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Point your metrics to OneUptime with a simple endpoint URL.</p>
            </div>

            <!-- Step 3 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-purple-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-purple-600 ring-2 ring-purple-600">3</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Build Dashboards</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Create custom dashboards with PromQL or import Grafana dashboards.</p>
            </div>

            <!-- Step 4 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-purple-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-purple-600 ring-2 ring-purple-600">4</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Set Alerts</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Configure threshold and anomaly-based alerts for proactive monitoring.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Why OneUptime Section -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">

      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <!-- Section header -->
        <div class="mx-auto max-w-2xl text-center mb-20">
          <div class="inline-flex items-center gap-2 rounded-full bg-purple-50 px-4 py-1.5 text-sm font-medium text-purple-700 ring-1 ring-inset ring-purple-600/20 mb-6">
            <svg class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            <span class="text-sm font-medium text-purple-700">Why OneUptime Metrics</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
            Complete metrics observability at any scale
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            From infrastructure to application metrics, OneUptime provides comprehensive visibility into your entire stack with the power of PromQL and OpenTelemetry.
          </p>
        </div>

        <!-- Feature blocks -->
        <div class="space-y-24">

          <!-- Feature 1: Ingest from Any Source -->
          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <div class="relative">
              <div class="flex items-center gap-4 mb-6">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                  <svg class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 9V5.25A2.25 2.25 0 0110.5 3h6a2.25 2.25 0 012.25 2.25v13.5A2.25 2.25 0 0116.5 21h-6a2.25 2.25 0 01-2.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-purple-600 uppercase tracking-wide">Any Source</span>
              </div>
              <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Ingest metrics from any source</h3>
              <p class="mt-4 text-lg text-gray-600">Native OpenTelemetry and Prometheus support lets you ingest metrics from any application, server, or container. Drop in our SDK or use your existing instrumentation.</p>
              <ul class="mt-6 space-y-3">
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-purple-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  OpenTelemetry & Prometheus native
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-purple-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  StatsD, Graphite, and custom sources
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-purple-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Infrastructure & application metrics
                </li>
              </ul>
              <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
                Get started
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </a>
            </div>
            <div class="mt-12 lg:mt-0">
              <div class="relative">
                <!-- Subtle background -->
                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                <!-- Grid of Metric Source Cards -->
                <div class="relative max-w-md mx-auto">
                  <div class="grid grid-cols-3 gap-3">
                    <!-- Prometheus -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">Prometheus</div>
                      <div class="text-gray-400 text-[10px]">Native</div>
                    </div>

                    <!-- OpenTelemetry -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 9V5.25A2.25 2.25 0 0110.5 3h6a2.25 2.25 0 012.25 2.25v13.5A2.25 2.25 0 0116.5 21h-6a2.25 2.25 0 01-2.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">OTel</div>
                      <div class="text-gray-400 text-[10px]">SDK</div>
                    </div>

                    <!-- StatsD -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">StatsD</div>
                      <div class="text-gray-400 text-[10px]">UDP</div>
                    </div>

                    <!-- Graphite -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">Graphite</div>
                      <div class="text-gray-400 text-[10px]">Carbon</div>
                    </div>

                    <!-- InfluxDB -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">InfluxDB</div>
                      <div class="text-gray-400 text-[10px]">Line Protocol</div>
                    </div>

                    <!-- Custom -->
                    <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                      <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
                        <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                      </div>
                      <div class="text-gray-700 text-xs font-medium">Custom</div>
                      <div class="text-gray-400 text-[10px]">REST API</div>
                    </div>
                  </div>

                  <!-- Footer label -->
                  <div class="mt-4 text-center text-xs text-gray-400">
                    + AWS CloudWatch, Datadog, and more integrations
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 2: PromQL & Custom Queries -->
          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <div class="order-2 lg:order-1 mt-12 lg:mt-0">
              <div class="relative">
                <!-- Subtle background -->
                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                <!-- Query Builder Browser Window -->
                <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                  <!-- Browser header -->
                  <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                    <div class="flex gap-1.5">
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    </div>
                    <div class="flex-1 text-center">
                      <span class="text-xs text-gray-400">Query Builder</span>
                    </div>
                  </div>

                  <!-- Content area -->
                  <div class="p-4">
                    <!-- Query input -->
                    <div class="mb-4">
                      <label class="text-xs text-gray-500 mb-1.5 block">PromQL Query</label>
                      <div class="bg-gray-900 rounded-lg p-3 font-mono text-sm">
                        <span class="text-emerald-400">sum</span><span class="text-gray-300">(</span><span class="text-amber-400">rate</span><span class="text-gray-300">(</span><span class="text-sky-400">http_requests_total</span><span class="text-gray-300">{</span><span class="text-purple-400">status</span><span class="text-gray-300">=~</span><span class="text-orange-300">"5.."</span><span class="text-gray-300">}[</span><span class="text-emerald-300">5m</span><span class="text-gray-300">]))</span> <span class="text-emerald-400">by</span> <span class="text-gray-300">(</span><span class="text-purple-400">service</span><span class="text-gray-300">)</span>
                      </div>
                    </div>

                    <!-- Time range selector -->
                    <div class="flex items-center gap-2 mb-4">
                      <div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 border border-gray-200">
                        <div class="text-[10px] text-gray-400 mb-0.5">Time Range</div>
                        <div class="text-xs text-gray-700 font-medium">Last 24 hours</div>
                      </div>
                      <div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 border border-gray-200">
                        <div class="text-[10px] text-gray-400 mb-0.5">Step</div>
                        <div class="text-xs text-gray-700 font-medium">1 minute</div>
                      </div>
                      <button class="bg-emerald-600 text-white px-3 py-2.5 rounded-lg text-xs font-medium flex items-center gap-1">
                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Run
                      </button>
                    </div>

                    <!-- Results preview -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                      <div class="bg-gray-50 px-3 py-2 border-b border-gray-200 flex items-center justify-between">
                        <span class="text-xs text-gray-600 font-medium">Results</span>
                        <span class="text-[10px] text-gray-400">3 series</span>
                      </div>
                      <div class="p-3 space-y-2">
                        <div class="flex items-center justify-between text-xs">
                          <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            <span class="text-gray-600 font-mono">api-gateway</span>
                          </div>
                          <span class="text-gray-900 font-medium">142.3 req/s</span>
                        </div>
                        <div class="flex items-center justify-between text-xs">
                          <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-sky-500"></span>
                            <span class="text-gray-600 font-mono">auth-service</span>
                          </div>
                          <span class="text-gray-900 font-medium">89.7 req/s</span>
                        </div>
                        <div class="flex items-center justify-between text-xs">
                          <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-purple-500"></span>
                            <span class="text-gray-600 font-mono">user-service</span>
                          </div>
                          <span class="text-gray-900 font-medium">56.1 req/s</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-1 lg:order-2">
              <div class="flex items-center gap-4 mb-6">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                  <svg class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-purple-600 uppercase tracking-wide">Powerful Queries</span>
              </div>
              <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Query with PromQL or SQL</h3>
              <p class="mt-4 text-lg text-gray-600">Use the query language you already know. Full PromQL compatibility means you can bring your existing dashboards and alerts. Or use SQL for complex analysis.</p>
              <ul class="mt-6 space-y-3">
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  100% PromQL compatible
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Import Grafana dashboards
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Sub-50ms query latency
                </li>
              </ul>
              <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
                Get started
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </a>
            </div>
          </div>

          <!-- Feature 3: Custom Dashboards -->
          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <div class="relative">
              <div class="flex items-center gap-4 mb-6">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                  <svg class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-purple-600 uppercase tracking-wide">Dashboards</span>
              </div>
              <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Build custom dashboards</h3>
              <p class="mt-4 text-lg text-gray-600">Create beautiful, interactive dashboards with drag-and-drop widgets. Share with your team or embed in your own applications.</p>
              <ul class="mt-6 space-y-3">
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Drag-and-drop widget builder
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Real-time auto-refresh
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Public and private sharing
                </li>
              </ul>
              <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
                Get started
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </a>
            </div>
            <div class="mt-12 lg:mt-0">
              <div class="relative">
                <!-- Subtle background -->
                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                <!-- Dashboard Widgets Mockup -->
                <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                  <!-- Browser header -->
                  <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                    <div class="flex gap-1.5">
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    </div>
                    <div class="flex-1 text-center">
                      <span class="text-xs text-gray-400">Production Dashboard</span>
                    </div>
                  </div>

                  <!-- Dashboard content -->
                  <div class="p-4">
                    <!-- Stats row -->
                    <div class="grid grid-cols-3 gap-2 mb-4">
                      <div class="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
                        <div class="text-[10px] text-emerald-600 mb-1">Requests/sec</div>
                        <div class="text-lg font-semibold text-emerald-700">2.4k</div>
                        <div class="flex items-center gap-1 text-[10px] text-emerald-600">
                          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                          </svg>
                          +12%
                        </div>
                      </div>
                      <div class="bg-sky-50 rounded-lg p-3 border border-sky-100">
                        <div class="text-[10px] text-sky-600 mb-1">Latency P99</div>
                        <div class="text-lg font-semibold text-sky-700">45ms</div>
                        <div class="flex items-center gap-1 text-[10px] text-sky-600">
                          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                          </svg>
                          -8ms
                        </div>
                      </div>
                      <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
                        <div class="text-[10px] text-amber-600 mb-1">Error Rate</div>
                        <div class="text-lg font-semibold text-amber-700">0.02%</div>
                        <div class="flex items-center gap-1 text-[10px] text-emerald-600">
                          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                          </svg>
                          OK
                        </div>
                      </div>
                    </div>

                    <!-- Chart area -->
                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-200 mb-3">
                      <div class="flex items-center justify-between mb-3">
                        <span class="text-xs text-gray-600 font-medium">Request Throughput</span>
                        <span class="text-[10px] text-gray-400">Last 1 hour</span>
                      </div>
                      <!-- SVG Chart -->
                      <svg viewBox="0 0 200 60" class="w-full h-16">
                        <defs>
                          <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.3"/>
                            <stop offset="100%" style="stop-color:#10b981;stop-opacity:0"/>
                          </linearGradient>
                        </defs>
                        <path d="M0,45 L15,40 L30,42 L45,35 L60,30 L75,32 L90,25 L105,20 L120,22 L135,18 L150,15 L165,12 L180,10 L195,8 L200,8 L200,60 L0,60 Z" fill="url(#chartGradient)"/>
                        <path d="M0,45 L15,40 L30,42 L45,35 L60,30 L75,32 L90,25 L105,20 L120,22 L135,18 L150,15 L165,12 L180,10 L195,8" fill="none" stroke="#10b981" stroke-width="2"/>
                      </svg>
                    </div>

                    <!-- Services list -->
                    <div class="space-y-2">
                      <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                        <div class="flex items-center gap-2">
                          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                          <span class="text-gray-700 text-xs">api-server</span>
                        </div>
                        <span class="text-gray-400 text-[10px]">CPU 23%</span>
                      </div>
                      <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                        <div class="flex items-center gap-2">
                          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                          <span class="text-gray-700 text-xs">postgres</span>
                        </div>
                        <span class="text-gray-400 text-[10px]">Mem 67%</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 4: Smart Alerting -->
          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <div class="order-2 lg:order-1 mt-12 lg:mt-0">
              <div class="relative">
                <!-- Subtle background -->
                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                <!-- Alert Configuration Mockup -->
                <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                  <!-- Browser header -->
                  <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                    <div class="flex gap-1.5">
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    </div>
                    <div class="flex-1 text-center">
                      <span class="text-xs text-gray-400">Alert Configuration</span>
                    </div>
                  </div>

                  <!-- Content area -->
                  <div class="p-4">
                    <!-- Alert header -->
                    <div class="flex items-center justify-between mb-4">
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                          <svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                          </svg>
                        </div>
                        <div>
                          <div class="text-gray-800 text-sm font-medium">CPU Usage Alert</div>
                          <div class="text-gray-400 text-xs">Production Servers</div>
                        </div>
                      </div>
                      <span class="flex items-center gap-1 px-2 py-1 bg-emerald-50 rounded text-xs text-emerald-600 border border-emerald-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        Active
                      </span>
                    </div>

                    <!-- Threshold visualization -->
                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-200 mb-4">
                      <div class="text-[10px] text-gray-500 mb-2">Threshold Configuration</div>
                      <div class="relative h-12">
                        <!-- Background bar -->
                        <div class="absolute inset-y-0 left-0 right-0 bg-gray-200 rounded-full"></div>
                        <!-- Warning zone -->
                        <div class="absolute inset-y-0 left-[70%] right-[10%] bg-amber-300 rounded-l-full"></div>
                        <!-- Critical zone -->
                        <div class="absolute inset-y-0 left-[90%] right-0 bg-red-400 rounded-r-full"></div>
                        <!-- Current value indicator -->
                        <div class="absolute top-1/2 left-[65%] -translate-y-1/2 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white shadow-md"></div>
                        <!-- Labels -->
                        <div class="absolute -bottom-5 left-[70%] text-[9px] text-amber-600 font-medium">70%</div>
                        <div class="absolute -bottom-5 left-[90%] text-[9px] text-red-600 font-medium">90%</div>
                        <div class="absolute -top-5 left-[65%] text-[9px] text-emerald-600 font-medium">Current: 65%</div>
                      </div>
                    </div>

                    <!-- Alert conditions -->
                    <div class="space-y-2 mb-4">
                      <div class="flex items-center justify-between p-2.5 bg-amber-50 rounded-lg border border-amber-200">
                        <div class="flex items-center gap-2">
                          <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                          </svg>
                          <span class="text-amber-700 text-xs font-medium">Warning</span>
                        </div>
                        <span class="text-amber-600 text-xs font-mono">&gt; 70% for 5m</span>
                      </div>
                      <div class="flex items-center justify-between p-2.5 bg-red-50 rounded-lg border border-red-200">
                        <div class="flex items-center gap-2">
                          <svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                          </svg>
                          <span class="text-red-700 text-xs font-medium">Critical</span>
                        </div>
                        <span class="text-red-600 text-xs font-mono">&gt; 90% for 2m</span>
                      </div>
                    </div>

                    <!-- Notification channels -->
                    <div class="border-t border-gray-100 pt-3">
                      <div class="text-[10px] text-gray-500 mb-2">Notify via</div>
                      <div class="flex items-center gap-2">
                        <span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
                          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"/>
                          </svg>
                          Slack
                        </span>
                        <span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
                          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                          </svg>
                          Email
                        </span>
                        <span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
                          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                          </svg>
                          PagerDuty
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-1 lg:order-2">
              <div class="flex items-center gap-4 mb-6">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                  <svg class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-purple-600 uppercase tracking-wide">Smart Alerting</span>
              </div>
              <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Intelligent alerting with anomaly detection</h3>
              <p class="mt-4 text-lg text-gray-600">Set up alerts based on thresholds, anomalies, or custom PromQL queries. Get notified through any channel before issues impact users.</p>
              <ul class="mt-6 space-y-3">
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  ML-powered anomaly detection
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Threshold and PromQL alerts
                </li>
                <li class="flex items-center gap-3 text-gray-600">
                  <svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  Multi-channel notifications
                </li>
              </ul>
              <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
                Get started
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </a>
            </div>
          </div>

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

    <!-- More Features Section -->
    <div class="relative bg-white py-24 sm:py-32 overflow-hidden">

      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <!-- Section header -->
        <div class="mx-auto max-w-2xl text-center">
          <div class="inline-flex items-center gap-2 rounded-full bg-purple-50 px-4 py-1.5 text-sm font-medium text-purple-700 ring-1 ring-inset ring-purple-600/20 mb-6">
            <svg class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            <span class="text-sm font-medium text-purple-700">Advanced capabilities</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Advanced features, built for you
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            From custom retention to data export, we've built every feature you need for complete metrics observability.
          </p>
        </div>

        <!-- Feature cards grid -->
        <div class="mx-auto mt-16 max-w-7xl">
          <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">

            <!-- Card 1: Custom Retention -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-purple-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
                  <svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Custom Retention</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Configure data retention per metric type. Keep critical data longer while optimizing storage costs for less important metrics.</p>
              </div>
            </div>

            <!-- Card 2: High Cardinality -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
                  <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">High Cardinality</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Handle millions of unique label combinations without performance degradation. Built for modern microservices at scale.</p>
              </div>
            </div>

            <!-- Card 3: Traces & Logs Correlation -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
                  <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Traces & Logs Correlation</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Jump from a metric spike to the exact traces and logs that explain it. Full correlation across all your telemetry data.</p>
              </div>
            </div>

            <!-- Card 4: Integrations -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
                  <svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">5000+ Integrations</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Connect with your existing tools. Receive alerts in Slack, PagerDuty, or any webhook. Build custom integrations with our API.</p>
              </div>
            </div>

            <!-- Card 5: Compliance -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                  <svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Enterprise Compliance</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">SOC 2/3, ISO, GDPR, HIPAA compliant. Data residency in US or EU. All the boxes ticked so you're ready from Day 1.</p>
              </div>
            </div>

            <!-- Card 6: Data Export -->
            <div class="group relative">
              <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
                  <svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Data Export</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Export metrics to BigQuery, S3, or your data warehouse. You own your data with complete portability and no lock-in.</p>
              </div>
            </div>

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

    <!-- Team Notifications Section -->
    <div class="relative overflow-hidden bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <!-- Content -->
          <div class="relative">
            <p class="text-sm font-medium text-purple-600 uppercase tracking-wide mb-3">Team Notifications</p>
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              Alerts delivered where your team already works
            </h2>
            <p class="mt-4 text-lg text-gray-600 leading-relaxed">
              Get instant metric notifications in Slack and Microsoft Teams. Acknowledge threshold alerts and investigate anomalies without leaving your chat app.
            </p>

            <!-- Integration cards -->
            <div class="mt-10 space-y-3">
              <!-- Slack -->
              <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                    <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
                    <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
                    <path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
                    <path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <h3 class="text-sm font-semibold text-gray-900">Slack</h3>
                  <p class="text-sm text-gray-500">Interactive metric alert actions</p>
                </div>
              </div>

              <!-- Microsoft Teams -->
              <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                    <path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
                    <circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
                    <path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
                    <circle cx="10" cy="3" r="3" fill="#7B83EB"/>
                    <path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                  </svg>
                </div>
                <div class="flex-1">
                  <h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
                  <p class="text-sm text-gray-500">Native adaptive cards integration</p>
                </div>
              </div>
            </div>

            <!-- Features list -->
            <div class="mt-8 grid grid-cols-2 gap-4">
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Real-time delivery
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Threshold alerts
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Rich formatting
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Action buttons
              </div>
            </div>
          </div>

          <!-- Slack Demo -->
          <div class="mt-12 lg:mt-0 relative">
            <!-- Decorative gradient background -->
            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

            <div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
              <!-- Slack Window Header -->
              <div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
                <div class="flex items-center gap-2">
                  <div class="flex gap-1.5">
                    <div class="w-3 h-3 rounded-full bg-[#ff5f57]"></div>
                    <div class="w-3 h-3 rounded-full bg-[#febc2e]"></div>
                    <div class="w-3 h-3 rounded-full bg-[#28c840]"></div>
                  </div>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="h-4 w-4 text-white/60" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
                  </svg>
                  <span class="text-white/60 text-sm font-medium">#metrics-alerts</span>
                </div>
                <div class="w-16"></div>
              </div>

              <!-- Slack Messages Area -->
              <div class="p-4 space-y-4 min-h-[320px]" id="metrics-slack-messages">
                <!-- Main Alert Message -->
                <div class="flex gap-3" style="animation: fadeSlideIn 0.5s ease-out forwards;">
                  <div class="h-10 w-10 rounded-lg bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center flex-shrink-0 shadow-lg">
                    <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-baseline gap-2">
                      <span class="font-bold text-white text-sm">OneUptime Metrics</span>
                      <span class="text-xs text-white/40">1:23 PM</span>
                    </div>
                    <!-- Alert Card -->
                    <div class="mt-2 rounded-lg bg-[#0f1114] border border-white/10 overflow-hidden">
                      <div class="p-3 border-l-4 border-red-500">
                        <div class="flex items-center gap-2 mb-2">
                          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 ring-1 ring-red-500/30">CRITICAL</span>
                          <span class="text-white/40 text-xs">Threshold Exceeded</span>
                        </div>
                        <p class="text-white font-semibold">CPU Usage exceeded 95%</p>
                        <div class="mt-2 flex items-center gap-4 text-xs text-white/50">
                          <span class="flex items-center gap-1">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                            </svg>
                            api-server-prod-01
                          </span>
                          <span class="flex items-center gap-1">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                            </svg>
                            Current: 97.2%
                          </span>
                        </div>
                        <!-- Action Buttons -->
                        <div class="mt-3 flex gap-2">
                          <button id="metrics-acknowledge-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors border border-white/10">
                            Acknowledge
                          </button>
                          <button id="metrics-investigate-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-purple-600 text-white hover:bg-purple-700 transition-colors">
                            Investigate
                          </button>
                          <button id="metrics-resolve-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors border border-white/10">
                            Resolve
                          </button>
                        </div>
                      </div>
                    </div>
                    <!-- Reactions -->
                    <div class="mt-2 flex items-center gap-1">
                      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/5 text-xs border border-white/10 hover:bg-white/10 cursor-pointer transition-colors">
                        <span>👀</span>
                        <span class="text-white/60">3</span>
                      </span>
                      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/5 text-xs border border-white/10 hover:bg-white/10 cursor-pointer transition-colors">
                        <span>🚨</span>
                        <span class="text-white/60">2</span>
                      </span>
                    </div>
                  </div>
                </div>

                <!-- Thread Replies Container -->
                <div id="metrics-thread-container" class="ml-12 space-y-3 hidden">
                  <!-- Thread replies will be dynamically added here -->
                </div>
              </div>

              <!-- Message Input Area -->
              <div class="px-4 py-3 border-t border-white/5">
                <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#0f1114] border border-white/10">
                  <svg class="h-5 w-5 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  <span class="text-white/30 text-sm">Message #metrics-alerts</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%- include('./Partials/enterprise-ready') -%>
    <%- include('features-table') -%>
    <%- include('cta') -%>
  </main>

  <%- include('footer') -%>
  <%- include('./Partials/video-script') -%>

  <style>
    @keyframes fadeSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(0.3);
      }
      50% {
        transform: scale(1.05);
      }
      70% {
        transform: scale(0.9);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
  </style>

  <script>
    // Grid glow effect for metrics hero section
    (function() {
      const heroSection = document.getElementById('metrics-hero-section');
      const gridGlow = document.getElementById('metrics-grid-glow');

      if (heroSection && gridGlow) {
        heroSection.addEventListener('mousemove', (e) => {
          const rect = heroSection.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / rect.width) * 100;
          const y = ((e.clientY - rect.top) / rect.height) * 100;

          gridGlow.style.setProperty('--mouse-x', x + '%');
          gridGlow.style.setProperty('--mouse-y', y + '%');
          gridGlow.style.opacity = '1';
        });

        heroSection.addEventListener('mouseleave', () => {
          gridGlow.style.opacity = '0';
        });
      }
    })();

    // Slack demo interactivity for metrics page
    (function() {
      const threadContainer = document.getElementById('metrics-thread-container');
      const acknowledgeBtn = document.getElementById('metrics-acknowledge-btn');
      const investigateBtn = document.getElementById('metrics-investigate-btn');
      const resolveBtn = document.getElementById('metrics-resolve-btn');

      const teamAvatars = [
        { name: 'Sarah Chen', color: 'from-blue-500 to-cyan-500', initial: 'S' },
        { name: 'Mike Rodriguez', color: 'from-green-500 to-emerald-500', initial: 'M' },
        { name: 'Alex Kim', color: 'from-orange-500 to-amber-500', initial: 'A' }
      ];

      let currentAvatarIndex = 0;
      let repliesAdded = 0;

      function getNextAvatar() {
        const avatar = teamAvatars[currentAvatarIndex];
        currentAvatarIndex = (currentAvatarIndex + 1) % teamAvatars.length;
        return avatar;
      }

      function addThreadReply(message, isAction = false) {
        if (repliesAdded >= 3) return;

        threadContainer.classList.remove('hidden');
        const avatar = getNextAvatar();

        const replyHtml = `
          <div class="flex gap-3 p-2 rounded-lg bg-purple-500/10 border border-purple-500/20" style="animation: bounceIn 0.4s ease-out forwards;">
            <div class="h-8 w-8 rounded-lg bg-gradient-to-br ${avatar.color} flex items-center justify-center flex-shrink-0 text-white text-xs font-bold shadow-lg">
              ${avatar.initial}
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-baseline gap-2">
                <span class="font-semibold text-white text-sm">${avatar.name}</span>
                <span class="text-xs text-white/40">just now</span>
              </div>
              <p class="text-sm text-white/80 mt-0.5">${message}</p>
            </div>
          </div>
        `;

        threadContainer.insertAdjacentHTML('beforeend', replyHtml);
        repliesAdded++;
      }

      if (acknowledgeBtn) {
        acknowledgeBtn.addEventListener('click', () => {
          acknowledgeBtn.disabled = true;
          acknowledgeBtn.classList.add('opacity-50');
          addThreadReply('Acknowledged the CPU alert. Checking server metrics now. 📊');
        });
      }

      if (investigateBtn) {
        investigateBtn.addEventListener('click', () => {
          investigateBtn.disabled = true;
          investigateBtn.classList.add('opacity-50');
          addThreadReply('Investigating root cause. Looks like a memory-intensive process is causing the spike. 🔍');
        });
      }

      if (resolveBtn) {
        resolveBtn.addEventListener('click', () => {
          resolveBtn.disabled = true;
          resolveBtn.classList.add('opacity-50');
          addThreadReply('Resolved! Restarted the process and CPU is back to normal levels. ✅');
        });
      }
    })();
  </script>
</body>

</html>
