Metrics 6

import Image from "next/image";

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

import type { Surface } from "../_types/common";
import type { MetricsContent } from "../_types/metrics";
import { AnimatedNumber } from "./animated-number";
import { defaultMetrics6Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** Full-width header above a four-across hairline numeral grid. */
export default function Metrics6({
  content = defaultMetrics6Content,
  surface = "muted",
}: {
  content?: MetricsContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <SectionHeader
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        {/* Cells sit on a `gap-px` parent whose background is the rule
            colour, so each one repaints the band's own surface. */}
        <dl className="mt-10 grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border lg:grid-cols-4">
          {content.stats.map((stat) => (
            <div
              className={cn("px-6 py-8 lg:px-7", surfaceClass[surface])}
              key={stat.label}
            >
              <dd className="font-display text-4xl text-primary lg:text-5xl">
                <AnimatedNumber
                  decimals={stat.decimals ?? 0}
                  prefix={stat.prefix ?? ""}
                  suffix={stat.suffix ?? ""}
                  value={stat.value}
                />
              </dd>
              <dt className="mt-3 text-muted-foreground text-sm leading-snug">
                {stat.label}
              </dt>
            </div>
          ))}
        </dl>

        {content.logos && content.logos.items.length > 0 && (
          <div className="mt-12 flex flex-col items-center gap-6 text-center">
            <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
              {content.logos.label}
            </p>
            <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
              {content.logos.items.map((logo, index) => (
                <Image
                  alt={logo.alt}
                  className="h-5 w-auto opacity-40 grayscale transition-opacity hover:opacity-70 dark:invert"
                  height={24}
                  // biome-ignore lint/suspicious/noArrayIndexKey: logos share alt text
                  key={`${logo.src}-${index}`}
                  src={logo.src}
                  width={100}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}