---
import TopographicBg from '../TopographicBg.astro';

interface Callout {
  title: string;
  body: string;
}

const callouts: Callout[] = [
  {
    title: 'Cross-service correlation.',
    body: 'Every exchange carries its correlation ID forward. One click jumps to what the downstream route did with the same message — 610 ms later.',
  },
  {
    title: 'Runtime detail, not guesswork.',
    body: 'Circuit breaker tripped. Fallback path ran. The request tried to reach backend:80. The kind of pieces a 3 AM page actually needs — already captured.',
  },
  {
    title: 'The whole story of a failure.',
    body: 'Exception class, message, stack trace, headers, payload — all pinned to the exchange. No log-grepping tour. No SSH into the pod.',
  },
];
---
<section class="relative overflow-hidden border-b border-border bg-bg">
  <TopographicBg opacity={0.14} lines={7} />
  <div class="relative max-w-content mx-auto px-6 py-24 md:py-32">
    <div class="max-w-3xl mb-14 md:mb-20">
      <p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">When it breaks</p>
      <h2 class="text-hero font-bold text-text mb-5">
        When something breaks, the answer is already waiting.
      </h2>
      <p class="text-lg text-text-muted leading-relaxed">
        Follow a single exchange from ingestion to failure. See the route it took, the fallback that ran, the stack trace, the correlated downstream work — in one place. Without writing a line of tracing code.
      </p>
    </div>

    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
      <figure class="lg:col-span-8 relative">
        <div class="showcase-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
          <img
            src="/product/error-detail.png"
            alt="Cameleer Mission Control — complex fulfillment route with circuit breaker, fallback, correlated audit route, and full error context"
            width="1920"
            height="945"
            loading="lazy"
            decoding="async"
            class="block w-full h-auto"
          />
          <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
        </div>
        <div aria-hidden="true" class="showcase-shot-glow"></div>
        <figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
      </figure>

      <ul class="lg:col-span-4 space-y-7 lg:pt-4">
        {callouts.map((c, i) => (
          <li class="relative pl-10">
            <span
              class="absolute left-0 top-0 inline-flex items-center justify-center w-7 h-7 rounded-full border border-accent/40 bg-accent/10 text-accent font-mono text-xs"
              aria-hidden="true"
            >
              {String(i + 1).padStart(2, '0')}
            </span>
            <h3 class="text-text font-semibold mb-1.5">{c.title}</h3>
            <p class="text-text-muted leading-relaxed">{c.body}</p>
          </li>
        ))}
      </ul>
    </div>
  </div>
</section>

<style>
  .showcase-shot {
    box-shadow:
      0 1px 0 rgba(240, 180, 41, 0.08) inset,
      0 40px 80px -30px rgba(0, 0, 0, 0.7),
      0 15px 35px -15px rgba(0, 0, 0, 0.5);
  }
  .showcase-shot-glow {
    position: absolute;
    inset: -5% -8% -5% -8%;
    background: radial-gradient(
      55% 55% at 45% 50%,
      rgba(92, 200, 255, 0.10),
      rgba(240, 180, 41, 0.08) 40%,
      transparent 75%
    );
    filter: blur(50px);
    z-index: -1;
  }
</style>
