Features Index

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

export interface FeaturesIndexProps {
  label?: string;
  title?: string;
  items?: { title: string; text: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { title: "Layouts by studios", text: "48 templates drawn by working designers, not a marketing team." },
  { title: "Real typography", text: "Upload your own fonts, set optical sizes, kerning and hanging punctuation." },
  { title: "Fast by default", text: "Static pages on a global edge network. Median load: 0.6 seconds." },
  { title: "Image pipeline", text: "AVIF, responsive sizes and art direction without thinking about it." },
  { title: "Client proofing", text: "Share password-protected case studies and collect comments on pixels." },
  { title: "Your domain", text: "Custom domain, SSL and redirects included on every paid plan." },
];

/** Features as a numbered index: a label + headline in the left columns, and a two-column ruled list on the right where each item is “01 — Title” with a short description. */
export function FeaturesIndex({
  label = "(02) Features",
  title = "Everything a studio site needs. Nothing it doesn’t.",
  items = DEFAULT_ITEMS,
  className,
}: FeaturesIndexProps) {
  return (
    <section aria-labelledby="mc-fi-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-12 border-t border-da-border-strong pt-8 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
          <h2 id="mc-fi-title" className="mt-4 font-da-display text-[clamp(2rem,4vw,3rem)] leading-[1] font-medium tracking-da-display">
            {title}
          </h2>
        </div>
        <ol className="grid gap-x-10 sm:grid-cols-2 lg:col-span-7 lg:col-start-6">
          {items.map((it, i) => (
            <li key={it.title} className="border-b border-da-border py-6">
              <h3 className="flex items-baseline gap-3 text-lg font-medium">
                <span className="font-da-mono text-xs text-da-muted-fg">{String(i + 1).padStart(2, "0")}</span>
                {it.title}
              </h3>
              <p className="mt-2 pl-8 text-da-muted-fg">{it.text}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

export default FeaturesIndex;