Minimal Divided Testimonials

import { Heading } from "@/components/editorial/heading"
import {
  Quote,
  QuoteAuthor,
  QuoteAuthorName,
  QuoteAuthorRole,
  QuoteFigure,
  QuoteGroup,
} from "@/components/editorial/quote"
import {
  Section,
  SectionContent,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

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

const QUOTES = [
  {
    quote:
      "We stopped asking who owns what. It is written on the plan, next to the date.",
    name: "Anouk Brenner",
    role: "Product Manager, Starling Close",
  },
  {
    quote:
      "The handoff note replaced a meeting we had every Thursday for two years.",
    name: "Rafael Ortega",
    role: "Engineering Manager, Eclipse Avenue",
  },
  {
    quote:
      "Reviews finally end. Comments close when the change ships, and nothing lingers.",
    name: "Sun-hee Park",
    role: "Design Lead, Nordlys Gate",
  },
] as const

// divided draws a line between the quotes: side by side once the section
// is wide, stacked before that.
export default function MinimalTestimonials03() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
      </SectionHeader>
      <SectionContent>
        <QuoteGroup cols={3} variant="divided">
          {QUOTES.map((item) => (
            <QuoteFigure key={item.name}>
              <Quote>
                <p>{item.quote}</p>
              </Quote>
              <QuoteAuthor>
                <QuoteAuthorName>{item.name}</QuoteAuthorName>
                <QuoteAuthorRole>{item.role}</QuoteAuthorRole>
              </QuoteAuthor>
            </QuoteFigure>
          ))}
        </QuoteGroup>
      </SectionContent>
    </Section>
  )
}