// TODO: replace the placeholders with real team photos.
const team = [
  { name: "[Name]", role: "Gründer, Entwicklung" },
  { name: "[Name]", role: "Gründer, Design und SEO" },
]

export function AboutSection() {
  return (
    <section
      id="ueber-uns"
      aria-labelledby="ueber-uns-title"
      data-theme="light"
      className="py-section"
    >
      <div className="container-site">
        <p className="font-mono text-label text-fg-muted">(Über uns)</p>
        <h2 id="ueber-uns-title" className="mt-6 text-mega type-poster">
          Zwei Freunde.
          <br />
          <span className="text-outline">Ein Anspruch.</span>
        </h2>

        <div className="mt-20 grid gap-12 lg:grid-cols-12">
          <ul className="grid grid-cols-2 gap-4 sm:gap-6 lg:col-span-7">
            {team.map((person, index) => (
              <li key={index} className={index === 1 ? "mt-16 md:mt-32" : undefined}>
                <figure className="group flex flex-col gap-3" data-cursor="Hallo!">
                  <div className="clip-reveal relative grid aspect-3/4 place-items-center overflow-hidden rounded-glass bg-ink-900 font-mono text-label text-ink-400">
                    <span className="transition-[scale] duration-1000 ease-out-expo group-hover:scale-110">
                      Foto folgt
                    </span>
                  </div>
                  <figcaption className="flex justify-between font-mono text-label">
                    <span>{person.name}</span>
                    <span className="text-fg-muted">{person.role}</span>
                  </figcaption>
                </figure>
              </li>
            ))}
          </ul>

          <div className="flex flex-col justify-end gap-6 lg:col-span-4 lg:col-start-9">
            <p className="text-statement type-poster">
              Du redest mit denen, die bauen.
            </p>
            <p className="type-body text-fg-muted">
              since3 ist eine kleine Agentur aus Steinfurt. Wir arbeiten auf
              Augenhöhe, sagen ehrlich, was sinnvoll ist, und bauen Technik, die
              schnell lädt, für alle funktioniert und Arbeit abnimmt, statt neue zu
              machen.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}