"use client";

import Image from "next/image";
import styles from "./AboutUsSection.module.css";
import { aboutUsData } from "./AboutUsData";

export default function AboutUsSection() {
  const { title, paragraphs, members } = aboutUsData;

  return (
    <section className={styles.section} aria-labelledby="about-us-heading">
      <div className={styles.inner}>
        <h2 id="about-us-heading" className={styles.heading}>
          {title}
        </h2>

        <div className={styles.team}>
          {members.map((member) => (
            <article key={member.name} className={styles.card}>
              <div className={styles.imageWrap}>
                <Image
                  src={member.imageSrc}
                  alt={member.imageAlt}
                  fill
                  className={styles.image}
                  sizes="(max-width: 767px) 42vw, 180px"
                />
              </div>

              <p className={styles.name}>{member.name}</p>
            </article>
          ))}
        </div>

        <div className={styles.textBlock}>
          {paragraphs.map((paragraph, index) => (
            <p key={index} className={styles.text}>
              {paragraph}
            </p>
          ))}
        </div>
      </div>
    </section>
  );
}