Features Specs

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

export interface FeaturesSpecsProps {
  label?: string;
  title?: string;
  groups?: { name: string; specs: { key: string; value: string }[] }[];
  className?: string;
}

const DEFAULT_GROUPS = [
  {
    name: "Performance",
    specs: [
      { key: "Median load", value: "0.6 s" },
      { key: "Lighthouse", value: "100 / 100" },
      { key: "Edge locations", value: "310" },
    ],
  },
  {
    name: "Typography",
    specs: [
      { key: "Custom fonts", value: "Unlimited" },
      { key: "Variable axes", value: "Yes" },
      { key: "OpenType features", value: "All" },
    ],
  },
  {
    name: "Images",
    specs: [
      { key: "Formats", value: "AVIF · WebP · JPEG" },
      { key: "Max upload", value: "200 MB" },
      { key: "Video", value: "Up to 4K" },
    ],
  },
  {
    name: "Publishing",
    specs: [
      { key: "Custom domain", value: "Included" },
      { key: "Password pages", value: "Included" },
      { key: "Version history", value: "90 days" },
    ],
  },
];

/** Technical spec sheet: grouped key/value definition lists in a 4-column grid, each group under a full-ink rule with a mono heading — reads like a product data sheet. */
export function FeaturesSpecs({
  label = "(03) Specifications",
  title = "The details, for people who read the details.",
  groups = DEFAULT_GROUPS,
  className,
}: FeaturesSpecsProps) {
  return (
    <section aria-labelledby="mc-fs-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
        <h2 id="mc-fs-title" className="mt-4 max-w-2xl font-da-display text-[clamp(2rem,4vw,3rem)] leading-[1] font-medium tracking-da-display">
          {title}
        </h2>
        <div className="mt-14 grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
          {groups.map((g) => (
            <section key={g.name} aria-label={g.name}>
              <h3 className="border-b border-da-border-strong pb-2 font-da-mono text-xs tracking-da-label uppercase">{g.name}</h3>
              <dl>
                {g.specs.map((s) => (
                  <div key={s.key} className="flex justify-between gap-4 border-b border-da-border py-3 text-[15px]">
                    <dt className="text-da-muted-fg">{s.key}</dt>
                    <dd className="text-right font-medium">{s.value}</dd>
                  </div>
                ))}
              </dl>
            </section>
          ))}
        </div>
      </div>
    </section>
  );
}

export default FeaturesSpecs;