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

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

<head>
  <title>OneUptime | Exception Tracking - Catch, Fix, and Prevent Bugs</title>
  <meta name="description"
    content="Track exceptions and errors across your entire stack. Get full stack traces, intelligent grouping, AI-powered root cause analysis, and instant alerts. Fix bugs before users notice.">
  <%- 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="exceptions-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 - orange color -->
      <div id="exceptions-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(249, 115, 22, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(249, 115, 22, 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-orange-600 mb-4">Powered by OpenTelemetry</p>

            <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
              Catch bugs before users notice
            </h1>
            <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
              Track exceptions across your entire stack. Get full stack traces, intelligent error grouping, and AI-powered root cause analysis to fix issues faster.
            </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>Full stack traces</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Intelligent grouping</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>AI root cause analysis</span>
              <span class="hidden sm:inline text-gray-300">|</span>
              <span>Real-time alerts</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/apm-3.png" alt="OneUptime Exception tracking dashboard" width="2432" height="1442"
                  class="rounded-lg shadow-lg">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <!-- How It Works -->
    <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-orange-600 uppercase tracking-wide mb-3">How It Works</p>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            From error to resolution
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Automatically capture, analyze, and resolve errors with full context and AI assistance.
          </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-orange-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-orange-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="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="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-600 ring-2 ring-orange-600">1</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Capture Error</h3>
              <p class="text-sm text-gray-600 leading-relaxed">OpenTelemetry automatically captures exceptions with full context.</p>
            </div>

            <!-- Step 2 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </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-orange-600 ring-2 ring-orange-600">2</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Analyze & Group</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Intelligent deduplication groups similar errors together.</p>
            </div>

            <!-- Step 3 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </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-orange-600 ring-2 ring-orange-600">3</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">AI Analysis</h3>
              <p class="text-sm text-gray-600 leading-relaxed">AI identifies root cause and suggests fixes automatically.</p>
            </div>

            <!-- Step 4 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 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-orange-600 ring-2 ring-orange-600">4</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Resolve & Learn</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Track resolution and prevent regressions with alerts.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Why OneUptime 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">
        <!-- Section Header -->
        <div class="mx-auto max-w-2xl text-center mb-20">
          <div class="inline-flex items-center gap-2 rounded-full bg-orange-50 px-4 py-1.5 text-sm font-medium text-orange-700 ring-1 ring-inset ring-orange-600/20 mb-6">
            <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="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>
            Why OneUptime
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
            Exception tracking built for modern teams
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            Catch, track, and resolve errors before your users notice them. Get complete visibility into every exception across your entire stack.
          </p>
        </div>

        <!-- Feature Blocks -->
        <div class="space-y-24 lg:space-y-32">
          <!-- Feature 1: Full Stack Traces -->
          <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-orange-50 ring-1 ring-orange-200">
                  <svg class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-orange-600 uppercase tracking-wide">Stack Traces</span>
              </div>
              <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">See exactly where and why errors occur</h3>
              <p class="text-lg text-gray-600 mb-6">
                Get complete stack traces with source code context. Navigate directly to the line of code that caused the error, with surrounding context and variable values.
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Source maps support - decode minified JavaScript and TypeScript</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Context variables - see local variables and function arguments</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Multi-language support - JavaScript, Python, Go, Java, Ruby, .NET</span>
                </li>
              </ul>
            </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>

                <!-- Stack Trace Viewer -->
                <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-900 px-4 py-2.5 flex items-center gap-3">
                    <div class="flex gap-1.5">
                      <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                      <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                    </div>
                    <div class="flex-1 text-center">
                      <span class="text-gray-400 text-xs font-mono">Stack Trace</span>
                    </div>
                  </div>

                  <!-- Stack trace content -->
                  <div class="p-4 bg-gray-50">
                    <!-- Error header -->
                    <div class="flex items-center gap-2 mb-3 p-2 bg-red-50 rounded-lg border border-red-200">
                      <svg class="w-4 h-4 text-red-500 flex-shrink-0" 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-red-700 text-xs font-medium">TypeError: Cannot read property 'id' of undefined</span>
                    </div>

                    <!-- Stack frames -->
                    <div class="space-y-1 font-mono text-xs">
                      <!-- Frame 1 - highlighted -->
                      <div class="p-2 bg-rose-100 rounded border-l-2 border-rose-500">
                        <div class="flex items-center gap-2">
                          <span class="text-rose-600 font-medium">at</span>
                          <span class="text-gray-800">getUser</span>
                          <span class="text-gray-400">(</span>
                          <span class="text-rose-600">user.service.ts:42</span>
                          <span class="text-gray-400">)</span>
                        </div>
                        <!-- Code preview -->
                        <div class="mt-2 p-2 bg-white rounded text-[10px] border border-gray-200">
                          <div class="text-gray-400">41 |  const user = await db.findUser(id);</div>
                          <div class="text-rose-600 bg-rose-50 -mx-2 px-2">42 |  return user.id; // Error here</div>
                          <div class="text-gray-400">43 |}</div>
                        </div>
                      </div>

                      <!-- Frame 2 -->
                      <div class="p-2 bg-white rounded border border-gray-100">
                        <div class="flex items-center gap-2">
                          <span class="text-gray-500">at</span>
                          <span class="text-gray-700">handleRequest</span>
                          <span class="text-gray-400">(api.controller.ts:128)</span>
                        </div>
                      </div>

                      <!-- Frame 3 -->
                      <div class="p-2 bg-white rounded border border-gray-100">
                        <div class="flex items-center gap-2">
                          <span class="text-gray-500">at</span>
                          <span class="text-gray-700">processMiddleware</span>
                          <span class="text-gray-400">(middleware.ts:56)</span>
                        </div>
                      </div>

                      <!-- Frame 4 -->
                      <div class="p-2 bg-white rounded border border-gray-100 opacity-60">
                        <div class="flex items-center gap-2">
                          <span class="text-gray-500">at</span>
                          <span class="text-gray-700">Layer.handle</span>
                          <span class="text-gray-400">(express/router.js:174)</span>
                        </div>
                      </div>
                    </div>

                    <!-- Footer -->
                    <div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-xs text-gray-400">
                      <span>Node.js v18.17.0</span>
                      <span class="text-rose-500 font-medium">4 frames</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

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

              <!-- Error Grouping Dashboard -->
              <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-gray-500 text-xs">Error Groups</span>
                  </div>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Header with stats -->
                  <div class="flex items-center justify-between mb-4">
                    <div class="text-sm font-medium text-gray-700">Grouped Errors</div>
                    <div class="flex items-center gap-2 text-xs text-gray-500">
                      <span class="text-rose-600 font-medium">3 unique</span>
                      <span class="text-gray-300">|</span>
                      <span>847 total</span>
                    </div>
                  </div>

                  <!-- Error groups list -->
                  <div class="space-y-2">
                    <!-- Error group 1 -->
                    <div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
                      <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                          <div class="flex items-center gap-2 mb-1">
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-rose-100 text-rose-700">TypeError</span>
                            <span class="text-[10px] text-gray-400">user.service.ts</span>
                          </div>
                          <div class="text-xs text-gray-700 font-medium truncate">Cannot read property 'id' of undefined</div>
                          <div class="text-[10px] text-gray-400 mt-1">First seen 2h ago</div>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                          <span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-rose-500 text-white">423</span>
                          <span class="text-[10px] text-gray-400">12 users</span>
                        </div>
                      </div>
                    </div>

                    <!-- Error group 2 -->
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                      <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                          <div class="flex items-center gap-2 mb-1">
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700">NetworkError</span>
                            <span class="text-[10px] text-gray-400">api.client.ts</span>
                          </div>
                          <div class="text-xs text-gray-700 font-medium truncate">Request timeout after 30000ms</div>
                          <div class="text-[10px] text-gray-400 mt-1">First seen 1d ago</div>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                          <span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-gray-400 text-white">312</span>
                          <span class="text-[10px] text-gray-400">8 users</span>
                        </div>
                      </div>
                    </div>

                    <!-- Error group 3 -->
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                      <div class="flex items-start justify-between">
                        <div class="flex-1 min-w-0">
                          <div class="flex items-center gap-2 mb-1">
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700">ReferenceError</span>
                            <span class="text-[10px] text-gray-400">checkout.ts</span>
                          </div>
                          <div class="text-xs text-gray-700 font-medium truncate">cart is not defined</div>
                          <div class="text-[10px] text-gray-400 mt-1">First seen 3d ago</div>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                          <span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-gray-400 text-white">112</span>
                          <span class="text-[10px] text-gray-400">5 users</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Footer -->
                  <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
                    <span>Fingerprint-based grouping</span>
                    <span class="text-rose-500 font-medium">View all</span>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <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-orange-50 ring-1 ring-orange-200">
                  <svg class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-orange-600 uppercase tracking-wide">Intelligent Grouping</span>
              </div>
              <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Focus on unique issues, not noise</h3>
              <p class="text-lg text-gray-600 mb-6">
                Our intelligent deduplication algorithm groups similar errors together, even when stack traces differ slightly. See the true impact of each unique issue.
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Fingerprint-based grouping - identify same error across contexts</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Impact metrics - see affected users and sessions</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Custom grouping rules - define your own error grouping</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- Feature 3: AI-Powered Analysis -->
          <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-orange-50 ring-1 ring-orange-200">
                  <svg class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-orange-600 uppercase tracking-wide">AI-Powered</span>
              </div>
              <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Get AI-generated root cause analysis</h3>
              <p class="text-lg text-gray-600 mb-6">
                Our AI analyzes error patterns, stack traces, and surrounding context to identify the root cause and suggest fixes. Spend less time debugging and more time building.
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Automated root cause - AI identifies the underlying cause</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Fix suggestions - get code suggestions to resolve errors</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Auto-fix with PRs - AI Agent creates pull requests</span>
                </li>
              </ul>
              <div class="mt-8">
                <a href="/product/ai-agent" class="inline-flex items-center gap-2 text-orange-600 font-semibold hover:text-orange-700 transition-colors">
                  Learn about AI Agent
                  <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 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>

              <!-- AI Analysis Card -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-3 flex items-center gap-3">
                  <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                  </div>
                  <div>
                    <div class="text-white font-medium text-sm">AI Root Cause Analysis</div>
                    <div class="text-white/70 text-xs">Powered by OneUptime AI</div>
                  </div>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Error being analyzed -->
                  <div class="mb-4 p-2 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 flex-shrink-0" 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-red-700 text-xs font-medium">TypeError: Cannot read property 'id'</span>
                    </div>
                  </div>

                  <!-- Analysis sections -->
                  <div class="space-y-3">
                    <!-- Root Cause -->
                    <div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
                      <div class="flex items-center gap-2 mb-2">
                        <svg class="w-4 h-4 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <span class="text-xs font-semibold text-rose-700">Root Cause</span>
                      </div>
                      <p class="text-xs text-gray-700 leading-relaxed">The <code class="bg-rose-100 px-1 rounded text-rose-700">findUser()</code> function returns null when user is not found, but the code assumes it always returns a user object.</p>
                    </div>

                    <!-- Suggested Fix -->
                    <div class="p-3 bg-emerald-50 rounded-lg border border-emerald-200">
                      <div class="flex items-center gap-2 mb-2">
                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span class="text-xs font-semibold text-emerald-700">Suggested Fix</span>
                      </div>
                      <div class="bg-white rounded p-2 font-mono text-[10px] border border-emerald-100">
                        <div class="text-gray-500">// Add null check before accessing</div>
                        <div class="text-gray-700">if (!user) throw new UserNotFoundError();</div>
                        <div class="text-gray-700">return user.id;</div>
                      </div>
                    </div>

                    <!-- Impact -->
                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg border border-gray-200">
                      <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-rose-500"></span>
                        <span class="text-xs text-gray-600">Impact: High</span>
                      </div>
                      <span class="text-xs text-gray-500">423 occurrences</span>
                    </div>
                  </div>

                  <!-- Action button -->
                  <div class="mt-4 flex items-center gap-2">
                    <button class="flex-1 px-3 py-2 bg-rose-500 text-white text-xs font-medium rounded-lg hover:bg-rose-600 transition-colors">
                      Create Fix PR
                    </button>
                    <button class="px-3 py-2 bg-gray-100 text-gray-700 text-xs font-medium rounded-lg hover:bg-gray-200 transition-colors">
                      View Details
                    </button>
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>

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

              <!-- Release Tracking Dashboard -->
              <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-gray-500 text-xs">Releases</span>
                  </div>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Header -->
                  <div class="flex items-center justify-between mb-4">
                    <div class="text-sm font-medium text-gray-700">Release History</div>
                    <span class="text-xs text-gray-400">Last 7 days</span>
                  </div>

                  <!-- Release cards -->
                  <div class="space-y-3">
                    <!-- Release 1 - Current with error spike -->
                    <div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
                      <div class="flex items-start justify-between mb-2">
                        <div class="flex items-center gap-2">
                          <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-rose-500 text-white">Current</span>
                          <span class="text-xs font-mono text-gray-700 font-medium">v2.4.1</span>
                        </div>
                        <span class="text-[10px] text-gray-400">2h ago</span>
                      </div>
                      <div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
                        <svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span>john@company.com</span>
                      </div>
                      <div class="flex items-center gap-2 p-2 bg-white rounded border border-rose-200">
                        <svg class="w-4 h-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                        </svg>
                        <span class="text-xs text-rose-600 font-medium">+423 new errors since deploy</span>
                      </div>
                    </div>

                    <!-- Release 2 - Stable -->
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                      <div class="flex items-start justify-between mb-2">
                        <div class="flex items-center gap-2">
                          <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-emerald-100 text-emerald-700">Stable</span>
                          <span class="text-xs font-mono text-gray-700 font-medium">v2.4.0</span>
                        </div>
                        <span class="text-[10px] text-gray-400">3d ago</span>
                      </div>
                      <div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
                        <svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span>jane@company.com</span>
                      </div>
                      <div class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
                        <svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span class="text-xs text-emerald-600 font-medium">0 new errors during release</span>
                      </div>
                    </div>

                    <!-- Release 3 - Fixed -->
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                      <div class="flex items-start justify-between mb-2">
                        <div class="flex items-center gap-2">
                          <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-gray-200 text-gray-600">Fixed</span>
                          <span class="text-xs font-mono text-gray-700 font-medium">v2.3.9</span>
                        </div>
                        <span class="text-[10px] text-gray-400">5d ago</span>
                      </div>
                      <div class="flex items-center gap-2 text-xs text-gray-500">
                        <svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>Resolved 2 regressions</span>
                      </div>
                    </div>
                  </div>

                  <!-- Footer -->
                  <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
                    <span>Auto-tracked from CI/CD</span>
                    <span class="text-rose-500 font-medium">Rollback?</span>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <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-orange-50 ring-1 ring-orange-200">
                  <svg class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                  </svg>
                </div>
                <span class="text-sm font-semibold text-orange-600 uppercase tracking-wide">Release Tracking</span>
              </div>
              <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Know which release broke things</h3>
              <p class="text-lg text-gray-600 mb-6">
                Track errors by release version and correlate with deployments. Quickly identify regressions and roll back problematic releases with confidence.
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Version correlation - see which version introduced each error</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Regression detection - detect when fixed errors resurface</span>
                </li>
                <li class="flex items-start gap-3">
                  <svg class="h-5 w-5 text-orange-500 mt-0.5 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>
                  <span class="text-gray-600">Deploy markers - see deployments overlaid on error trends</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Grid 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">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <div class="inline-flex items-center gap-2 rounded-full bg-orange-50 px-4 py-1.5 text-sm font-medium text-orange-700 ring-1 ring-inset ring-orange-600/20 mb-6">
            <svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            <span class="text-sm font-medium text-orange-700">More Features</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Comprehensive error tracking features
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            Comprehensive exception tracking built for modern engineering teams.
          </p>
        </div>

        <div class="mx-auto max-w-7xl">
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <!-- Feature 1 -->
            <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-orange-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200">
                  <svg class="h-6 w-6 text-orange-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>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Real-time Alerts</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Get notified instantly via Slack, email, PagerDuty, or webhooks when new errors occur or rates spike.</p>
              </div>
            </div>

            <!-- Feature 2 -->
            <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-red-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-red-50 ring-1 ring-red-200">
                  <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">User Context</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">See which users are affected by errors. Track error impact by user segment, plan, or any custom attribute.</p>
              </div>
            </div>

            <!-- Feature 3 -->
            <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="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Session Replay</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">See exactly what the user did before the error. Replay sessions to understand the full context.</p>
              </div>
            </div>

            <!-- Feature 4 -->
            <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-orange-200 hover:shadow-lg">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200">
                  <svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
                  </svg>
                </div>
                <h3 class="mt-6 text-xl font-semibold text-gray-900">Error Trends</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Visualize error rates over time. Spot trends and anomalies before they become critical issues.</p>
              </div>
            </div>

            <!-- Feature 5 -->
            <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-red-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="1.5" 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">OpenTelemetry Native</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Built on open standards. Use OpenTelemetry SDKs to capture exceptions with full trace context.</p>
              </div>
            </div>

            <!-- Feature 6 -->
            <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-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="1.5" 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">Issue Tracker Integration</h3>
                <p class="mt-4 text-gray-600 leading-relaxed">Create Jira, Linear, or GitHub issues directly from errors. Two-way sync keeps everything updated.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- OpenTelemetry Section -->
    <div class="relative bg-gray-900 py-24 sm:py-32 overflow-hidden">
      <div class="relative mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur border border-white/20 mb-6">
            <svg class="h-4 w-4 text-orange-400" 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>
            <span class="text-sm font-medium text-white">OpenTelemetry Native</span>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
            Built on open standards
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-300">
            Use OpenTelemetry to capture exceptions with full distributed trace context. No proprietary agents or vendor lock-in.
          </p>
        </div>

        <div class="mx-auto max-w-4xl">
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
                  <svg class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">Any Language</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">JavaScript, Python, Go, Java, .NET, Ruby, PHP, and more</p>
              </div>
            </div>

            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-red-50 ring-1 ring-red-200 mb-6">
                  <svg class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">Trace Context</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">Exceptions linked to distributed traces automatically</p>
              </div>
            </div>

            <div class="group relative">
              <div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
                  <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-white">No Lock-in</h3>
                <p class="mt-3 text-gray-300 leading-relaxed">Own your data with open standards</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-orange-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 error notifications in Slack and Microsoft Teams. Assign, resolve, and track exceptions without context switching.
            </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 error actions in threads</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>
                Regression 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="relative" id="exceptions-slack-demo">
            <!-- Decorative background elements -->
            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

            <!-- Slack Window -->
            <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
              <!-- 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-3">
                  <div class="flex gap-2">
                    <div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
                    <div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
                    <div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
                  </div>
                </div>
                <div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
                  <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                  </svg>
                  <span class="text-white text-sm font-semibold">errors</span>
                  <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                  </svg>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-7 h-7 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
                    <span class="text-white text-xs font-bold">E</span>
                  </div>
                </div>
              </div>

              <!-- Messages area -->
              <div class="bg-[#1a1d21] px-4 py-4" id="exceptions-slack-messages">
                <!-- Original exception message -->
                <div class="group relative">
                  <div class="flex items-start gap-3">
                    <img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
                    <div class="flex-1 min-w-0">
                      <div class="flex items-center gap-2">
                        <span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
                        <span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
                        <span class="text-gray-500 text-xs">9:15 AM</span>
                      </div>

                      <!-- Exception card -->
                      <div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
                        <div class="h-1 bg-gradient-to-r from-orange-500 to-red-500"></div>
                        <div class="p-4">
                          <div class="flex items-start justify-between">
                            <div>
                              <div class="flex items-center gap-2">
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-orange-500/20 text-orange-400 text-xs font-medium">
                                  <span class="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse"></span>
                                  New Error
                                </span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
                                  47 occurrences
                                </span>
                              </div>
                              <h4 class="text-white font-semibold mt-2 font-mono text-sm">TypeError: Cannot read property 'id'</h4>
                              <p class="text-gray-400 text-sm mt-1">checkout-service/handlers/cart.js:142</p>
                            </div>
                          </div>
                          <div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
                            <div class="flex items-center gap-1.5 text-xs text-gray-500">
                              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                              </svg>
                              checkout-service
                            </div>
                            <div class="flex items-center gap-1.5 text-xs text-gray-500">
                              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                              </svg>
                              First seen 5m ago
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Action buttons -->
                      <div class="mt-3 flex flex-wrap gap-2" id="exceptions-slack-buttons">
                        <button onclick="exceptionsMarkSeen()" id="exceptions-btn-seen" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                          </svg>
                          Mark as Seen
                        </button>
                        <button onclick="exceptionsAssign()" id="exceptions-btn-assign" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                          </svg>
                          Assign to Me
                        </button>
                        <button onclick="exceptionsResolve()" id="exceptions-btn-resolve" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                          </svg>
                          Resolve
                        </button>
                      </div>

                      <!-- Reactions -->
                      <div class="mt-3 flex items-center gap-2" id="exceptions-slack-reactions">
                        <div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
                          <span>👀</span>
                          <span class="text-gray-300">2</span>
                        </div>
                      </div>

                      <!-- Thread replies container -->
                      <div id="exceptions-slack-thread" class="mt-4 space-y-3"></div>

                      <!-- Thread count indicator -->
                      <div id="exceptions-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
                        <div class="flex -space-x-1" id="exceptions-thread-avatars"></div>
                        <span id="exceptions-thread-count"></span>
                        <span class="text-gray-500">Last reply 1m ago</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Message input -->
              <div class="bg-[#1a1d21] px-4 pb-4">
                <div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
                  <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                  </svg>
                  <span class="text-gray-500 text-sm">Message #errors</span>
                  <div class="ml-auto flex items-center gap-2">
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <script>
        (function() {
          let exceptionsSeenClicked = false;
          let exceptionsAssignClicked = false;
          let exceptionsResolveClicked = false;
          let exceptionsReplyCount = 0;
          const exceptionsAvatars = [];

          function updateExceptionsThreadIndicator() {
            const indicator = document.getElementById('exceptions-thread-indicator');
            const countEl = document.getElementById('exceptions-thread-count');
            const avatarsEl = document.getElementById('exceptions-thread-avatars');

            if (exceptionsReplyCount > 0) {
              indicator.classList.remove('hidden');
              indicator.classList.add('flex');
              countEl.textContent = exceptionsReplyCount + (exceptionsReplyCount === 1 ? ' reply' : ' replies');
              avatarsEl.innerHTML = exceptionsAvatars.slice(-3).map(a =>
                a.isBot
                  ? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
                  : `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
                      <span class="text-white text-[8px] font-bold">${a.initial}</span>
                    </div>`
              ).join('');
            }
          }

          function addExceptionsReaction(emoji) {
            const reactions = document.getElementById('exceptions-slack-reactions');
            const newReaction = document.createElement('div');
            newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors animate-bounce-in';
            newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
            newReaction.style.animation = 'bounceIn 0.3s ease-out';
            reactions.appendChild(newReaction);
          }

          function addExceptionsThreadReply(avatar, name, time, message, isBot) {
            const thread = document.getElementById('exceptions-slack-thread');
            const reply = document.createElement('div');
            reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-orange-500/30';
            reply.style.animation = 'fadeSlideIn 0.3s ease-out';

            const avatarClass = avatar;
            const initial = name.charAt(0);

            if (!isBot) {
              exceptionsAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
            } else {
              exceptionsAvatars.push({ bg: '', initial: 'O', isBot: true });
            }
            exceptionsReplyCount++;
            updateExceptionsThreadIndicator();

            const avatarHtml = isBot
              ? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
              : `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;

            reply.innerHTML = `
              ${avatarHtml}
              <div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
                <div class="flex items-center gap-2">
                  <span class="font-semibold text-white text-sm">${name}</span>
                  ${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
                  <span class="text-gray-500 text-[11px]">${time}</span>
                </div>
                <p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
              </div>
            `;
            thread.appendChild(reply);
          }

          window.exceptionsMarkSeen = function() {
            if (exceptionsSeenClicked) return;
            exceptionsSeenClicked = true;

            const btn = document.getElementById('exceptions-btn-seen');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Marking...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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><span>Seen</span>';
              btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
              btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');

              addExceptionsReaction('👍');
              addExceptionsThreadReply('from-orange-400 to-orange-600', 'OneUptime AI', '9:15 AM', '🔍 <strong class="text-white">Root cause analysis:</strong><br/><span class="text-gray-400">Null cart object passed to handleCheckout() at line 142.<br/>Suggested fix: Add null check before accessing cart.id</span>', true);
            }, 800);
          };

          window.exceptionsAssign = function() {
            if (exceptionsAssignClicked) return;
            exceptionsAssignClicked = true;

            const btn = document.getElementById('exceptions-btn-assign');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Assigning...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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><span>Assigned</span>';
              btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
              btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');

              addExceptionsReaction('🙋');
              addExceptionsThreadReply('from-purple-400 to-purple-600', 'Maya Patel', '9:17 AM', 'Taking this one! Looks like a missing validation in the cart flow. I\'ll have a fix ready shortly.', false);

              setTimeout(() => {
                addExceptionsThreadReply('from-green-400 to-green-600', 'OneUptime', '9:17 AM', '👤 Error assigned to <strong class="text-white">Maya Patel</strong>', true);
              }, 1000);
            }, 800);
          };

          window.exceptionsResolve = function() {
            if (exceptionsResolveClicked) return;
            exceptionsResolveClicked = true;

            const btn = document.getElementById('exceptions-btn-resolve');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Resolving...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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><span>Resolved</span>';
              btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
              btn.classList.add('bg-green-600/20', 'border', 'border-green-500/50', 'text-green-400');

              addExceptionsReaction('🎉');
              addExceptionsThreadReply('from-purple-400 to-purple-600', 'Maya Patel', '9:32 AM', 'Fix deployed! Added null check and validation for cart object. PR #2847 merged.', false);

              setTimeout(() => {
                addExceptionsThreadReply('from-green-400 to-green-600', 'OneUptime', '9:32 AM', '✅ Error resolved by <strong class="text-white">Maya Patel</strong><br/><span class="text-gray-400">Time to resolve: 17 minutes • No new occurrences</span>', true);
              }, 1000);
            }, 800);
          };
        })();
        </script>
      </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.8); }
      50% { transform: scale(1.1); }
      100% { opacity: 1; transform: scale(1); }
    }
  </style>

  <script>
    // Grid glow effect for exceptions hero section
    (function() {
      const heroSection = document.getElementById('exceptions-hero-section');
      const gridGlow = document.getElementById('exceptions-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';
        });
      }
    })();
  </script>
</body>

</html>
