import { Section } from "../ui/Section";
import { SectionHeading } from "../ui/SectionHeading";
import { ButtonLink } from "../ui/ButtonLink";
import { Reveal } from "../ui/Reveal";
import { Stagger, StaggerItem } from "../ui/Stagger";
import { Logo } from "../ui/Logo";
import { CountUp } from "../ui/CountUp";
import { STUDIO } from "@/lib/site";
import { games } from "@/lib/games";
import { TEAM } from "@/lib/studio";

/**
 * Who is behind the game.
 *
 * Two columns rather than another full-width text block: the copy on the left,
 * a brand plate on the right. The figures are counted from the real data, so
 * the home page cannot claim a team size or a catalogue the rest of the site
 * contradicts.
 */
export function StudioIntro() {
  const foundingYear = Number(STUDIO.foundingDate);

  const facts = [
    { value: TEAM.length, from: 0, label: "People" },
    {
      value: games.length,
      from: 0,
      label: games.length > 1 ? "Worlds in progress" : "World in progress",
    },
    // A year counting up from zero reads as a random number for most of the
    // animation. Rolling the last dozen keeps it legible as a date throughout.
    { value: foundingYear, from: foundingYear - 12, label: "Founded" },
  ];

  return (
    <Section divider>
      <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:gap-20">
        <Reveal>
          <SectionHeading
            eyebrow="THE STUDIO"
            title={
              <>
                A SMALL TEAM,
                <br />
                BIG HORIZONS.
              </>
            }
            lead="We build worlds where every horizon hides a story. Hand-crafted games made to be lived in, not just played through. Each one a different summit, a different climb."
          />

          {/* The three figures land one after the other, each one starting to
              count as it arrives — three counters running at once is a slot
              machine. */}
          <Stagger
            as="ul"
            step={0.12}
            className="mt-10 grid grid-cols-3 gap-6 border-t border-border pt-8"
          >
            {facts.map((fact) => (
              <StaggerItem as="li" key={fact.label}>
                <p className="font-display text-3xl tracking-wider text-accent sm:text-4xl">
                  <CountUp value={fact.value} from={fact.from} />
                </p>
                <p className="mt-2 text-[0.65rem] uppercase tracking-[0.2em] text-foreground-muted">
                  {fact.label}
                </p>
              </StaggerItem>
            ))}
          </Stagger>

          <div className="mt-10">
            <ButtonLink href="/studio" variant="outline">
              MEET THE TEAM
            </ButtonLink>
          </div>
        </Reveal>

        {/* Brand plate. Deliberately not a team photo: only one member has been
            shot so far, and a single face cannot stand in for the studio. */}
        <Reveal delay={0.1} direction="right">
          <div className="group relative isolate flex aspect-[4/3] items-center justify-center overflow-hidden rounded-2xl border border-border bg-surface transition-colors duration-500 hover:border-accent/40 lg:aspect-[4/5]">
            <div
              aria-hidden
              className="absolute inset-0 -z-10 bg-[radial-gradient(60%_60%_at_50%_45%,rgba(196,184,150,0.14),transparent_70%)]"
            />
            <Logo
              variant="wordmark"
              width={320}
              alt={STUDIO.name}
              className="h-auto w-[min(72%,320px)] transition-transform duration-700 ease-out group-hover:scale-[1.03]"
            />
          </div>
        </Reveal>
      </div>
    </Section>
  );
}