const companies = [
  "Northwind",
  "Sailpoint",
  "Kestrel",
  "Monolith",
  "Fathom",
  "Ardent",
]

export default function LogosRow() {
  return (
    <section className="px-6 py-16">
      <p className="text-center font-mono text-xs text-muted">
        in production at
      </p>

      <div className="mx-auto mt-8 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {companies.map((company) => (
          <span
            key={company}
            className="text-lg font-semibold tracking-tight text-muted transition-colors hover:text-fg"
          >
            {company}
          </span>
        ))}
      </div>
    </section>
  )
}