Features Numbered

import { cn } from "@/lib/utils";

export interface FeaturesNumberedItem {
  title: string;
  description: string;
  /** Short proof point shown on the right, e.g. "−6h / week". */
  stat?: string;
}

export interface FeaturesNumberedProps {
  kicker?: string;
  title?: string;
  items?: FeaturesNumberedItem[];
  className?: string;
}

const HOVER_TONES = ["hover:bg-da-primary hover:text-da-primary-fg", "hover:bg-da-accent hover:text-da-accent-fg", "hover:bg-da-secondary hover:text-da-secondary-fg"];

export function FeaturesNumbered({
  kicker = "[ 02 ] How it works",
  title = "Four steps. Zero copy-pasting.",
  items = [
    { title: "Connect your repo", description: "Install the GitHub, GitLab or Bitbucket app. Shipyard reads PR titles, labels and descriptions — nothing else.", stat: "2 min" },
    { title: "Label as you ship", description: "feature, fix, improvement, breaking. Keep your workflow; we group and deduplicate entries automatically.", stat: "0 new tools" },
    { title: "Review the draft", description: "AI turns 40 commit messages into three sentences. Edit inline, add a GIF, schedule or publish.", stat: "−6h / week" },
    { title: "Publish everywhere", description: "Hosted changelog, in-app widget, email digest and Slack — all from one release.", stat: "4 channels" },
  ],
  className,
}: FeaturesNumberedProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="features-numbered-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id="features-numbered-title" className="mt-3 max-w-3xl font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>
        <ol className="da-stroke-t mt-12">
          {items.map((item, i) => (
            <li
              key={item.title}
              className={cn(
                "da-stroke-b da-transition group grid gap-4 px-2 py-8 sm:grid-cols-[6rem_1fr_auto] sm:items-center sm:gap-8 sm:px-4",
                HOVER_TONES[i % HOVER_TONES.length],
              )}
            >
              <span aria-hidden className="font-da-display text-6xl leading-none tracking-da-display opacity-25 transition-opacity duration-(--da-duration) group-hover:opacity-100">
                {String(i + 1).padStart(2, "0")}
              </span>
              <div>
                <h3 className="font-da-display text-2xl tracking-da-display uppercase">{item.title}</h3>
                <p className="mt-2 max-w-2xl opacity-80">{item.description}</p>
              </div>
              {item.stat && (
                <span className="da-stroke justify-self-start bg-da-surface px-3 py-1.5 font-da-mono text-sm font-bold text-da-surface-fg sm:justify-self-end">
                  {item.stat}
                </span>
              )}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default FeaturesNumbered;