import { Reveal } from "../ui/Reveal";
import { CountUp } from "../ui/CountUp";

type Props = {
  /** e.g. "1-6". Rendered as "1–6" with a real en dash. */
  players: string;
};

/**
 * The one number worth shouting.
 *
 * A player count buried in a fact sheet is a specification; at this size it is
 * an argument. Borrowed from the EmberWild site's co-op band — the page needs
 * one moment where the type does the talking instead of a paragraph.
 */
export function CoopBand({ players }: Props) {
  const [min, max] = players.split(/[-–]/);

  // "1-6" counts up to six; a non-numeric range ("2+", "TBA") is printed as
  // written rather than guessed at.
  const maxValue = Number(max);
  const countable = Number.isFinite(maxValue) && maxValue > Number(min);

  return (
    <section className="relative isolate overflow-hidden border-t border-border px-6 py-20 text-center sm:py-28 lg:px-10">
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-[radial-gradient(55%_80%_at_50%_50%,rgba(196,184,150,0.12),transparent_70%)]"
      />

      <Reveal direction="scale" duration={0.8}>
        <p className="flex items-center justify-center gap-[0.06em] font-display text-[clamp(4.5rem,14vw,10rem)] leading-[0.82] tracking-wider text-accent">
          <span>{min}</span>
          {max && (
            <>
              <span className="text-[0.4em] text-foreground-muted">–</span>
              {countable ? (
                <CountUp
                  value={maxValue}
                  from={Number(min)}
                  duration={1.1}
                  className="tabular-nums"
                />
              ) : (
                <span>{max}</span>
              )}
            </>
          )}
        </p>

        <h2 className="mt-8 font-display text-2xl uppercase tracking-wider sm:text-3xl">
          Better together
        </h2>

        <p className="mx-auto mt-4 max-w-[34ch] text-lg leading-relaxed text-foreground-muted">
          Solo works. Six works better. One world, shared by all of you.
        </p>
      </Reveal>
    </section>
  );
}