// Members section
function MembersSection() {
  return (
    <section className="members" id="members" style={{ backgroundColor: "#0f4eb0" }}>
      <div className="container">
        <div className="sec-head">
          <span className="sec-num">03 / MEMBERS</span>
          <div>
            <div className="sec-eyebrow" style={{ color: "rgb(255, 255, 255)" }}>Our Team</div>
            <h2 className="sec-title" style={{ color: "rgb(255, 255, 255)" }}>
              メンバー紹介
            </h2>
            <p className="sec-lede" style={{ color: "#ffffff", whiteSpace: "pre-line" }}>
              営業、AI、SaaS、異なる現場で積み上げてきた「意思・経験・関係性」が、{"\n"}Who-nextの原動力です。
            </p>
          </div>
        </div>

        <div className="members-grid">
          {SITE.members.map((m, i) => (
            <article className="member" key={i}>
              <div className="portrait">
                <span className="label">
                  PORTRAIT<br />
                  {m.nameEn.toUpperCase()}
                </span>
              </div>
              <div className="role">{m.role}</div>
              <div className="role-jp">{m.roleJp}</div>
              <h3>{m.name}</h3>
              <div className="name-en">{m.nameEn}</div>
              <p>{m.body}</p>
              <div className="tags">
                {m.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MembersSection = MembersSection;