import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import { TEAM_MEMBERS } from "@/lib/constants";

export default function TeamGrid() {
  return (
    <section className="py-20 lg:py-24" aria-labelledby="team-heading">
      <Container>
        <SectionHeading
          title="Unser Team"
          subtitle="Die Menschen hinter TeleNetSystems. Persönlich erreichbar, fachlich versiert."
        />
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4" id="team-heading">
          {TEAM_MEMBERS.map((member) => (
            <div key={member.name} className="text-center">
              <div className="mx-auto aspect-square w-full max-w-[200px] overflow-hidden rounded-2xl bg-neutral-100">
                <img
                  src={member.image}
                  alt={`${member.name}${member.role ? `, ${member.role}` : ""}`}
                  className="h-full w-full object-cover"
                  loading="lazy"
                  width={200}
                  height={200}
                />
              </div>
              <h3 className="mt-4 text-sm font-semibold text-neutral-900">
                {member.name}
              </h3>
              {member.role && (
                <p className="mt-1 text-xs text-neutral-500">{member.role}</p>
              )}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}
