About Office Locations

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "Our offices",
  body: "Four studios, each with a front desk that answers the phone. Visits are by appointment; write to the studio first and someone will meet you at the door.",
} as const

const OFFICES = [
  { name: "Lisbon", address: ["14 Lantern Row", "1200-118 Lisbon"] },
  { name: "Melbourne", address: ["212 Comet Lane", "Fitzroy VIC 3065"] },
  { name: "Montréal", address: ["88 Rue des Orbites", "Montréal, QC H2T 1S1"] },
  { name: "Oslo", address: ["5 Nordlys Gate", "0182 Oslo"] },
] as const

export default function About08() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <FeatureGroup cols={4}>
          {OFFICES.map((office) => (
            <Feature key={office.name} variant="outline">
              <FeatureTitle>{office.name}</FeatureTitle>
              <FeatureDescription render={<address />}>
                {office.address.map((line) => (
                  <p key={line}>{line}</p>
                ))}
              </FeatureDescription>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}