<section class="relative overflow-hidden bg-slate-900">
  <!-- Elegant background -->
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(99,102,241,0.15),transparent)]"></div>
  <div class="absolute top-0 right-0 w-1/2 h-1/2 bg-[radial-gradient(ellipse_50%_50%_at_100%_0%,rgba(139,92,246,0.1),transparent)]"></div>
  <div class="absolute bottom-0 left-0 w-1/2 h-1/2 bg-[radial-gradient(ellipse_50%_50%_at_0%_100%,rgba(59,130,246,0.1),transparent)]"></div>
  <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff06_1px,transparent_1px),linear-gradient(to_bottom,#ffffff06_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-50"></div>

  <div class="relative mx-auto max-w-6xl px-6 py-24 sm:py-32 lg:px-8">
    <!-- Header -->
    <div class="mx-auto max-w-3xl text-center">
      <div class="inline-flex items-center gap-2.5 rounded-full border border-violet-500/40 bg-gradient-to-r from-violet-500/15 via-indigo-500/15 to-blue-500/15 px-5 py-2 mb-8 shadow-lg shadow-violet-500/10 backdrop-blur-sm">
        <div class="relative flex items-center justify-center">
          <div class="absolute inset-0 bg-gradient-to-r from-violet-400 to-indigo-400 rounded-full blur-sm opacity-60 animate-pulse"></div>
          <svg class="relative h-4 w-4 text-violet-300" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
          </svg>
        </div>
        <span class="text-sm font-semibold bg-gradient-to-r from-violet-200 via-indigo-200 to-blue-200 bg-clip-text text-transparent">AI Reliability Agent</span>
      </div>

      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-white">
        From detection to fix.<br>
        <span class="bg-gradient-to-r from-blue-400 via-indigo-400 to-violet-400 bg-clip-text text-transparent">Automatically.</span>
      </h2>

      <p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">
        OneUptime continuously monitors your logs, traces, and metrics. When issues arise, it analyzes the root cause, generates a fix, and opens a pull request for your review.
      </p>
    </div>

    <!-- How it works -->
    <div class="mx-auto mt-20 max-w-4xl">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="relative group">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          <div class="relative bg-slate-800/50 backdrop-blur-sm rounded-2xl p-8 border border-slate-700/50 hover:border-slate-600 transition-all duration-300">
            <div class="absolute -top-4 left-8">
              <div class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold shadow-lg shadow-blue-500/30">
                1
              </div>
            </div>
            <h3 class="text-lg font-semibold text-white mt-4 mb-2">Connect</h3>
            <p class="text-sm text-slate-400 leading-relaxed">Link your GitHub or GitLab repository. OneUptime auto-instruments your code with OpenTelemetry.</p>
          </div>
        </div>

        <div class="relative group">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-violet-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          <div class="relative bg-slate-800/50 backdrop-blur-sm rounded-2xl p-8 border border-slate-700/50 hover:border-slate-600 transition-all duration-300">
            <div class="absolute -top-4 left-8">
              <div class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-sm font-bold shadow-lg shadow-indigo-500/30">
                2
              </div>
            </div>
            <h3 class="text-lg font-semibold text-white mt-4 mb-2">Detect</h3>
            <p class="text-sm text-slate-400 leading-relaxed">AI monitors your logs, traces, and metrics around the clock, identifying errors and performance issues.</p>
          </div>
        </div>

        <div class="relative group">
          <div class="absolute inset-0 bg-gradient-to-br from-violet-500/20 to-purple-500/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          <div class="relative bg-slate-800/50 backdrop-blur-sm rounded-2xl p-8 border border-slate-700/50 hover:border-slate-600 transition-all duration-300">
            <div class="absolute -top-4 left-8">
              <div class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 text-white text-sm font-bold shadow-lg shadow-violet-500/30">
                3
              </div>
            </div>
            <h3 class="text-lg font-semibold text-white mt-4 mb-2">Fix</h3>
            <p class="text-sm text-slate-400 leading-relaxed">AI generates a fix, opens a pull request, and provides a detailed explanation for your review.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Screenshot -->
    <div class="mx-auto mt-20 max-w-5xl">
      <div class="relative">
        <div class="absolute -inset-4 bg-gradient-to-r from-blue-500/30 via-indigo-500/30 to-violet-500/30 rounded-3xl blur-2xl opacity-60"></div>
        <div class="relative rounded-2xl border border-slate-700 bg-slate-800 p-2 shadow-2xl">
          <img class="relative rounded-xl w-full" src="/img/ai-agent.png" alt="OneUptime AI Agent showing an AI-generated pull request with code fixes">
        </div>
      </div>
    </div>

    <!-- Features grid -->
    <div class="mx-auto mt-28 max-w-5xl">
      <div class="text-center mb-14">
        <h3 class="text-2xl sm:text-3xl font-semibold text-white">Everything you need to ship faster</h3>
        <p class="mt-3 text-slate-400">Powerful features that work together seamlessly</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-blue-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 group-hover:border-blue-500/30 transition-colors">
            <svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
            </svg>
          </div>
          <h4 class="text-white font-semibold mb-2">Auto-instrument</h4>
          <p class="text-sm text-slate-400 leading-relaxed">Add tracing, metrics, and logging with one click. No SDK setup required.</p>
        </div>

        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-amber-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center mb-4 group-hover:bg-amber-500/20 group-hover:border-amber-500/30 transition-colors">
            <svg class="h-6 w-6 text-amber-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
          </div>
          <h4 class="text-white font-semibold mb-2">Fix exceptions</h4>
          <p class="text-sm text-slate-400 leading-relaxed">AI catches errors in production and generates fixes before users notice.</p>
        </div>

        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-emerald-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-4 group-hover:bg-emerald-500/20 group-hover:border-emerald-500/30 transition-colors">
            <svg class="h-6 w-6 text-emerald-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
            </svg>
          </div>
          <h4 class="text-white font-semibold mb-2">Optimize performance</h4>
          <p class="text-sm text-slate-400 leading-relaxed">Identifies slow traces and submits optimized code automatically.</p>
        </div>

        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-violet-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center mb-4 group-hover:bg-violet-500/20 group-hover:border-violet-500/30 transition-colors">
            <svg class="h-6 w-6 text-violet-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
            </svg>
          </div>
          <h4 class="text-white font-semibold mb-2">Fix flaky tests</h4>
          <p class="text-sm text-slate-400 leading-relaxed">Detects and fixes intermittent test failures in your CI/CD pipeline.</p>
        </div>

        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-cyan-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center mb-4 group-hover:bg-cyan-500/20 group-hover:border-cyan-500/30 transition-colors">
            <svg class="h-6 w-6 text-cyan-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
            </svg>
          </div>
          <h4 class="text-white font-semibold mb-2">Optimize queries</h4>
          <p class="text-sm text-slate-400 leading-relaxed">Finds slow database queries and suggests indexes or rewrites.</p>
        </div>

        <div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:bg-slate-800 hover:border-rose-500/30 hover:-translate-y-1 transition-all duration-300">
          <div class="w-12 h-12 rounded-xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center mb-4 group-hover:bg-rose-500/20 group-hover:border-rose-500/30 transition-colors">
            <svg class="h-6 w-6 text-rose-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" 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>
          <h4 class="text-white font-semibold mb-2">Security patches</h4>
          <p class="text-sm text-slate-400 leading-relaxed">Detects vulnerable dependencies and creates PRs with safe upgrades.</p>
        </div>
      </div>
    </div>

    <!-- Enterprise section -->
    <div class="mx-auto mt-28 max-w-5xl">
      <div class="relative rounded-3xl overflow-hidden">
        <div class="absolute inset-0 bg-slate-800/80"></div>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(99,102,241,0.1),transparent)]"></div>
        <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff04_1px,transparent_1px),linear-gradient(to_bottom,#ffffff04_1px,transparent_1px)] bg-[size:2rem_2rem]"></div>

        <div class="relative p-8 sm:p-12">
          <div class="text-center mb-10">
            <span class="inline-flex items-center gap-2 text-xs font-semibold tracking-wider uppercase text-indigo-400 mb-3">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
              Enterprise Ready
            </span>
            <h3 class="text-2xl sm:text-3xl font-semibold text-white">Built for enterprise security</h3>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div class="flex gap-4 p-5 rounded-2xl bg-slate-700/30 border border-slate-600/30 hover:bg-slate-700/50 hover:border-slate-500/30 transition-all duration-300">
              <div class="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
                <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
                </svg>
              </div>
              <div>
                <h4 class="text-white font-semibold mb-1">Bring your own LLM</h4>
                <p class="text-sm text-slate-400">Use Claude, GPT-4, Llama, or self-host. Your code stays in your infrastructure.</p>
              </div>
            </div>

            <div class="flex gap-4 p-5 rounded-2xl bg-slate-700/30 border border-slate-600/30 hover:bg-slate-700/50 hover:border-slate-500/30 transition-all duration-300">
              <div class="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-500/20">
                <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                </svg>
              </div>
              <div>
                <h4 class="text-white font-semibold mb-1">Zero data retention</h4>
                <p class="text-sm text-slate-400">We never store, view, or train on your code. SOC 2 Type II compliant.</p>
              </div>
            </div>

            <div class="flex gap-4 p-5 rounded-2xl bg-slate-700/30 border border-slate-600/30 hover:bg-slate-700/50 hover:border-slate-500/30 transition-all duration-300">
              <div class="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-500/20">
                <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
                </svg>
              </div>
              <div>
                <h4 class="text-white font-semibold mb-1">Self-hosted option</h4>
                <p class="text-sm text-slate-400">Deploy OneUptime entirely within your own cloud or on-premises infrastructure.</p>
              </div>
            </div>

            <div class="flex gap-4 p-5 rounded-2xl bg-slate-700/30 border border-slate-600/30 hover:bg-slate-700/50 hover:border-slate-500/30 transition-all duration-300">
              <div class="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg shadow-amber-500/20">
                <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" 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>
              <div>
                <h4 class="text-white font-semibold mb-1">SSO &amp; RBAC</h4>
                <p class="text-sm text-slate-400">Enterprise SSO with SAML/OIDC. Fine-grained role-based access controls.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- CTA -->
    <div class="mx-auto mt-20 text-center">
      <a href="/enterprise/demo" class="group inline-flex items-center gap-2 rounded-xl bg-white px-8 py-4 text-sm font-semibold text-slate-900 shadow-lg hover:bg-slate-100 hover:-translate-y-0.5 transition-all duration-300">
        See it in action
        <svg class="h-4 w-4 group-hover:translate-x-0.5 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
        </svg>
      </a>
      <p class="mt-4 text-sm text-slate-500">No credit card required</p>
    </div>
  </div>
</section>
