Minimal About with Stats

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import {
  Stat,
  StatGroup,
  StatLabel,
  StatValue,
} from "@/components/editorial/stats"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Our story",
} as const

const PARAGRAPHS = [
  "Orbcore began in 2019 with four people and one rule: a plan is only useful if the whole team can read it.",
  "Today the same small group answers support, writes the docs and ships every release, with customers in more than forty countries.",
] as const

const STATS = [
  { value: "3,400+", body: "Teams planning their releases in Orbcore." },
  { value: "42", body: "Countries our customers work from." },
  { value: "99.98%", body: "Uptime over the last twelve months." },
] as const

export default function MinimalAbout02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns>
          <SectionHeader>
            <SectionTitleGroup>
              <Heading>{COPY.title}</Heading>
            </SectionTitleGroup>
          </SectionHeader>
          <SectionDescription
            render={<div />}
            className="flex max-w-md flex-col gap-6"
          >
            {PARAGRAPHS.map((text) => (
              <p key={text}>{text}</p>
            ))}
          </SectionDescription>
        </SectionColumns>
        <StatGroup cols={3} className="pt-8 md:gap-12 lg:pt-16">
          {STATS.map((stat) => (
            <Stat key={stat.value}>
              <StatValue className="text-4xl/10 @2xl/section:text-5xl/12">
                {stat.value}
              </StatValue>
              <StatLabel>{stat.body}</StatLabel>
            </Stat>
          ))}
        </StatGroup>
      </SectionContent>
    </Section>
  )
}