Features List

import { BellRing, CalendarClock, GitBranch, Lock, MessageSquare, Radio, Sparkles, Webhook, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesListItem {
  icon: LucideIcon;
  title: string;
  description: string;
}

export interface FeaturesListProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: FeaturesListItem[];
  className?: string;
}

const DEFAULT_ITEMS: FeaturesListItem[] = [
  {
    icon: BellRing,
    title: "Smart alert grouping",
    description: "Related alerts collapse into one incident, so a flapping check pages you once — not forty times.",
  },
  { icon: CalendarClock, title: "Fair rotations", description: "Follow-the-sun schedules, overrides and swaps with a load report that keeps nights balanced." },
  {
    icon: MessageSquare,
    title: "Slack-native war rooms",
    description: "Every incident gets a channel, a commander, a timeline and a checklist in under five seconds.",
  },
  {
    icon: Radio,
    title: "Self-updating status pages",
    description: "Components flip to degraded when monitors fire and back to operational when they recover.",
  },
  { icon: Sparkles, title: "AI postmortems", description: "A first draft built from the timeline, chat and deploys — ready to review the next morning." },
  { icon: GitBranch, title: "Config as code", description: "Manage policies in Git with the Terraform provider or tracewise.yaml, reviewed like any change." },
  { icon: Webhook, title: "60+ integrations", description: "Datadog, Grafana, Sentry, AWS CloudWatch, GitHub, Jira, Linear, Zoom and more." },
  { icon: Lock, title: "Enterprise security", description: "SSO/SAML, SCIM, audit logs, data residency in the EU or US, SOC 2 Type II." },
];

/** Dense 2/4-column feature list: small icon, title and one-liner per item, hairline separated. */
export function FeaturesList({
  eyebrow = "Everything included",
  title = "The whole incident lifecycle, in one quiet tool",
  description = "No add-ons, no per-feature pricing. Every plan gets the full platform.",
  items = DEFAULT_ITEMS,
  className,
}: FeaturesListProps) {
  return (
    <section aria-labelledby="features-list-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="features-list-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-[17px] text-da-muted-fg">{description}</p>
        </div>
        <ul className="mt-14 grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
          {items.map((it) => (
            <li key={it.title} className="border-t border-da-border pt-5">
              <it.icon aria-hidden className="size-5 text-da-accent-fg" strokeWidth={1.75} />
              <h3 className="mt-4 text-[15px] font-medium">{it.title}</h3>
              <p className="mt-1.5 text-sm leading-relaxed text-da-muted-fg">{it.description}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesList;