Slim Dark Logo Cloud

import { Logo, LogoGroup } from "@/components/editorial/logo"
import {
  Section,
  SectionContent,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Run by finance teams at",
} as const

const LOGOS = ["Enceladus", "Tethys Labs", "Iapetus", "Dione & Co", "Hyperion"]

// The label names the list for screen readers; the row shows names only.
export default function LogoCloud02() {
  return (
    <Section size="sm" className="dark">
      <SectionContent>
        <LogoGroup
          aria-label={COPY.label}
          variant="wrap"
          className="justify-between"
        >
          {LOGOS.map((name) => (
            <Logo key={name} variant="muted" size="lg">
              {name}
            </Logo>
          ))}
        </LogoGroup>
      </SectionContent>
    </Section>
  )
}