Minimal Team with Bios

import {
  Feature,
  FeatureDescription,
  FeatureGroup,
  FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Who answers when you write",
  body: "A small team, so the person who replies is usually the person who built the feature.",
} as const

const PEOPLE = [
  {
    name: "Anouk Brenner",
    role: "Co-founder, Product",
    bio: "Plans the roadmap and reads every feature request.",
  },
  {
    name: "Rafael Ortega",
    role: "Co-founder, Engineering",
    bio: "Keeps the sync engine fast and the pager quiet.",
  },
  {
    name: "Sun-hee Park",
    role: "Design",
    bio: "Draws every screen twice before anyone builds it.",
  },
  {
    name: "Elias Quill",
    role: "Support",
    bio: "Answers most messages within the hour, in four languages.",
  },
] as const

export default function MinimalTeam02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns variant="intro">
          <SectionHeader>
            <SectionTitleGroup>
              <Heading>{COPY.title}</Heading>
            </SectionTitleGroup>
            <SectionDescription>{COPY.body}</SectionDescription>
          </SectionHeader>
          <FeatureGroup cols={2}>
            {PEOPLE.map((person) => (
              <Feature key={person.name}>
                <FeatureTitle>{person.name}</FeatureTitle>
                <p className="text-sm text-muted-foreground">{person.role}</p>
                <FeatureDescription>{person.bio}</FeatureDescription>
              </Feature>
            ))}
          </FeatureGroup>
        </SectionColumns>
      </SectionContent>
    </Section>
  )
}