Features 01

import {
  ActivityIcon,
  BellRingIcon,
  GaugeIcon,
  RotateCcwIcon,
  ShieldCheckIcon,
  TimerIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"

const features = [
  {
    icon: ActivityIcon,
    title: "Run history",
    description:
      "Every run is stored with its arguments, logs and return value for 30 days. Search by job ID, queue or customer.",
  },
  {
    icon: RotateCcwIcon,
    title: "Retries with backoff",
    description:
      "Set limits per queue. Tracewell backs off exponentially and gives up early when a run keeps failing for the same reason.",
  },
  {
    icon: BellRingIcon,
    title: "Alerts with an owner",
    description:
      "Each queue belongs to a team. Failures page that team directly instead of a shared channel nobody reads.",
  },
  {
    icon: TimerIcon,
    title: "Cron monitors",
    description:
      "Your 2am ledger export checks in when it finishes. If it runs late or stays silent, you hear about it at 2:05.",
  },
  {
    icon: GaugeIcon,
    title: "Queue depth",
    description:
      "Track backlog and wait time per queue, and add workers before a slow email queue starts delaying receipts.",
  },
  {
    icon: ShieldCheckIcon,
    title: "Redaction on your side",
    description:
      "Card numbers, tokens and email addresses are stripped from payloads on your servers before anything reaches ours.",
  },
]

export default function Features01() {
  return (
    <section className="py-24 md:py-32">
      <div className="px-4 sm:px-6 max-w-6xl mx-auto w-full">
        <div className="gap-6 lg:grid-cols-[1fr_auto] lg:items-end grid grid-cols-1">
          <div className="max-w-2xl">
            <p className="text-sm text-muted-foreground">Platform</p>
            <h2 className="mt-3 text-4xl leading-tight font-semibold tracking-tight md:text-[2.5rem] text-balance">
              Know a job failed before a customer emails you.
            </h2>
          </div>
          <div className="max-w-sm gap-6 lg:pb-1 flex flex-col items-start">
            <p className="text-base text-pretty text-muted-foreground">
              One SDK call per worker. Tracewell picks up the queues you already
              run and starts reporting within a minute.
            </p>
            <Button asChild variant="outline" size="sm">
              <a href="#">See how setup works</a>
            </Button>
          </div>
        </div>

        <div className="mt-16 gap-4 sm:grid-cols-2 lg:grid-cols-3 grid grid-cols-1">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="group gap-6 p-6 flex flex-col rounded-3xl bg-card shadow-[inset_0_1px_0_var(--highlight)] ring-1 ring-foreground/8 transition-shadow hover:ring-foreground/12"
            >
              <span className="size-10 group-hover:-translate-y-0.5 flex items-center justify-center rounded-xl bg-muted text-foreground transition-transform motion-reduce:transition-none">
                <feature.icon className="size-5" strokeWidth={1.75} />
              </span>
              <div className="gap-1.5 flex flex-col">
                <h3 className="text-base font-medium tracking-tight">
                  {feature.title}
                </h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}