---
// Final nJAMS-legacy wording is subject to Hendrik's trademark review before go-live
// (see docs/superpowers/specs/2026-04-24-cameleer-website-design.md §10).
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-16">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Why Cameleer</p>
      <h2 class="text-hero font-bold text-text mb-4">
        A purpose-built tool, from the team that has built integration observability before.
      </h2>
    </div>
    <div class="grid md:grid-cols-2 gap-8 md:gap-12">
      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
        <h3 class="text-xl font-bold text-text mb-4">Generic APMs do not understand Camel. Cameleer does.</h3>
        <p class="text-text-muted leading-relaxed mb-4">
          Most monitoring tools see your app as a Java process and a pile of HTTP calls. Cameleer understands that you are running a Camel app — choices, splits, multicasts, error handlers, and every other EIP pattern as first-class citizens.
        </p>
        <p class="text-text-muted leading-relaxed">
          So when you ask "why did this exchange fail?", you get an answer, not a log tail. And you can reach back into a running app to replay a message, deep-trace a correlation ID, or toggle recording — observability that does things, not just shows them.
        </p>
      </div>
      <div class="relative overflow-hidden rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
        <div
          aria-hidden="true"
          class="pointer-events-none select-none absolute -top-6 -right-4 font-mono font-bold leading-none tracking-tight text-accent/[0.04] text-[7rem] md:text-[9rem]"
        >
          03:00
        </div>
        <div class="relative">
          <div class="flex items-center gap-2.5 mb-5 font-mono text-xs">
            <span aria-hidden="true" class="relative inline-flex w-1.5 h-1.5">
              <span class="absolute inset-0 rounded-full bg-accent"></span>
              <span class="absolute inset-0 rounded-full bg-accent/60 animate-ping [animation-duration:2.4s]"></span>
            </span>
            <span class="text-accent tabular-nums tracking-wide">03:00:47.218</span>
            <span class="text-text-faint">·</span>
            <span class="text-text-faint uppercase tracking-[0.2em]">ops desk</span>
          </div>
          <h3 class="text-xl font-bold text-text mb-4">Built by people who know what 3 AM looks like.</h3>
          <p class="text-text-muted leading-relaxed mb-4">
            We spent years building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing. We know what integration teams actually need then, and what they never use.
          </p>
          <p class="text-text-muted leading-relaxed">
            Cameleer is what we would build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>