Metrics 5

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 { defaultMetrics5Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** Header in a narrow column beside a hairline-ruled numeral grid, with an
 *  optional strip of partner logos underneath. */
export default function Metrics5({
  content = defaultMetrics5Content,
  surface = "default",
}: {
  content?: MetricsContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-24", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <div className="grid gap-10 lg:grid-cols-12 lg:gap-8">
          <div className="lg:col-span-4">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />
          </div>

          {/* Cells sit on a `gap-px` parent whose background is the rule
              colour, so each one repaints the band's own surface. */}
          <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border lg:col-span-8 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>
        </div>

        {content.logos && content.logos.items.length > 0 && (
          <div className="mt-16 flex flex-col items-center gap-8 border-border border-t pt-10 sm:flex-row sm:justify-between">
            <p
              className={cn(eyebrowClass, "shrink-0 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>
  );
}