Stats Band

/**
 * VibeBox Motion · Stats Band
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import type { CSSProperties } from "react";
import { Container, FillIn, headingId, REVEAL, Section, SectionHead, SlotText, type BlockProps } from "@/lib/vibebox/block-kit";
import { OdometerStat } from "@/components/vibebox/odometer-stat";
import { isFillIn } from "@/lib/vibebox/content/runtime";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * Real numbers only: each one rolls into place when the band scrolls into view (Odometer Stat)
 * and is plain text for screen readers and search. A number the client has not given is a
 * fill-in, never a guess.
 */

export type StatsBandProps = BlockProps<Content, Variant>;

export function StatsBand({ content, variant = "inline", id, tone, className }: StatsBandProps) {
  const cards = variant === "cards";
  const hasHead = Boolean(content.heading || content.eyebrow);
  return (
    <Section slug="stats-band" variant={variant} id={id} tone={tone} labelledBy={content.heading ? headingId(id) : undefined} spacing={false} className={cn("py-[clamp(48px,7vw,96px)]", className)}>
      <Container className="grid gap-10">
        {hasHead && <SectionHead eyebrow={content.eyebrow} heading={content.heading} id={id} size="h3" />}
        <dl
          className={cn(
            "grid grid-cols-2",
            content.items.length >= 3 && "lg:grid-cols-[repeat(var(--vb-stat-count),minmax(0,1fr))]",
            cards ? "gap-3 sm:gap-4" : "gap-y-8 border-y border-border py-8",
            REVEAL,
          )}
          style={{ "--vb-stat-count": content.items.length } as CSSProperties}
        >
          {content.items.map((item, index) => (
            <div
              key={index}
              className={cn(
                "flex min-w-0 flex-col-reverse justify-end gap-2",
                cards ? "rounded-xl bg-card p-5 ring-1 ring-border sm:p-6" : "px-1 sm:px-6 lg:border-l lg:border-border lg:first:border-l-0 lg:first:pl-0",
              )}
            >
              <SlotText as="dt" value={item.label} path={`items.${index}.label`} className="text-small text-muted-foreground" />
              <dd className="m-0 font-display text-[clamp(2.2rem,1.4rem+2.6vw,3.6rem)] leading-none font-semibold tracking-[-0.03em]">
                {isFillIn(item.value) ? (
                  <FillIn value={item.value} path={`items.${index}.value`} className="text-[0.4em]" />
                ) : (
                  <OdometerStat value={item.value} prefix={item.prefix} suffix={item.suffix} />
                )}
              </dd>
            </div>
          ))}
        </dl>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Stats Band
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["inline", "cards"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.stats;

export type Content = z.infer<typeof content>;