---
import Layout from '../components/Layout.astro';
import Footer from '../components/Footer.astro';
import Waitlist from '../components/Waitlist.astro';
import CTA from '../components/CTA.astro';
---

<Layout title="dd0c/alert — Alert Intelligence & Correlation" description="Correlate alerts from PagerDuty, Datadog, OpsGenie, and Grafana into incidents. Reduce alert fatigue by 80%. BigPanda alternative for small teams. HMAC-verified webhooks.">
  <section class="pt-32 pb-20 px-6">
    <div class="max-w-4xl mx-auto">
      <div class="mb-8">
        <span class="font-mono text-sm text-dd0c-primary">dd0c/alert</span>
        <h1 class="text-4xl sm:text-5xl font-bold mt-2">Alert fatigue is a bug, not a feature</h1>
        <p class="mt-6 text-lg text-dd0c-muted leading-relaxed max-w-2xl">
          Ingest webhooks from PagerDuty, Datadog, OpsGenie, and Grafana. Group related alerts into incidents using time-window correlation. Stop waking up three times for the same outage.
        </p>
      </div>

      <div class="mt-10 flex gap-4">
        <a href="#waitlist" class="px-6 py-3 rounded-lg bg-dd0c-primary hover:bg-dd0c-primary-light text-white font-medium transition">Start free →</a>
        <a href="https://docs.dd0c.dev/alert" class="px-6 py-3 rounded-lg border border-dd0c-border hover:border-dd0c-muted text-dd0c-muted hover:text-dd0c-text transition">Read docs</a>
      </div>

      <div class="mt-16 grid md:grid-cols-2 gap-6">
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">🔗</div>
          <h3 class="font-semibold mb-2">Multi-source correlation</h3>
          <p class="text-sm text-dd0c-muted">HMAC-verified webhooks from 4 providers. Canonical alert schema normalizes everything into one format.</p>
        </div>
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">⏱️</div>
          <h3 class="font-semibold mb-2">Time-window grouping</h3>
          <p class="text-sm text-dd0c-muted">5-minute correlation windows. Late alerts attach to existing incidents. Very late alerts create new ones.</p>
        </div>
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">📉</div>
          <h3 class="font-semibold mb-2">80% noise reduction</h3>
          <p class="text-sm text-dd0c-muted">20 alerts from the same root cause become 1 incident. Your on-call engineer sees one notification, not twenty.</p>
        </div>
        <div class="rounded-xl border border-dd0c-border bg-dd0c-surface p-6">
          <div class="text-2xl mb-3">📧</div>
          <h3 class="font-semibold mb-2">Slack, email, webhook</h3>
          <p class="text-sm text-dd0c-muted">Severity-gated notifications. Critical goes to Slack + email. Low goes to a dashboard. You decide.</p>
        </div>
      </div>
    </div>
  </section>
  <CTA />
  <Footer />
  <Waitlist />
</Layout>
