import { Stagger, StaggerItem } from "../ui/Stagger";

/**
 * One sentence, full width, no eyebrow, no button.
 *
 * The tonal break between the hero and the game showcase: the page stops
 * selling for a moment and simply says what the studio is for. The type is
 * fluid rather than stepped, and the band carries its own gradient so the
 * page is not one uninterrupted flat black from hero to footer.
 *
 * The two lines arrive separately, a beat apart. It is the only piece of copy
 * on the site meant to be read as speech, and the pause between them is the
 * point — the second line answers the first.
 */
export function Statement() {
  return (
    <section className="bg-[linear-gradient(180deg,#0a0a0a_0%,#151515_50%,#0a0a0a_100%)] px-6 py-24 sm:py-36 lg:px-10">
      <Stagger step={0.22} className="mx-auto max-w-6xl">
        <p className="font-display text-[clamp(1.75rem,1rem+3.2vw,4rem)] leading-[1.12] tracking-wider text-balance text-foreground-muted">
          <StaggerItem as="span" className="block">
            A game you finish is a game you leave behind.
          </StaggerItem>
          <StaggerItem as="span" className="block text-foreground">
            We build worlds worth staying in.
          </StaggerItem>
        </p>
      </Stagger>
    </section>
  );
}