/* global React */

const TEAM = [
  {
    initials: "SC",
    name: "Dr. Subodha Charles",
    role: "PhD, Univ. of Florida",
    points: [
      "Ex-Intel Strategic CAD Labs",
      "5 granted US patents",
      "Founder & CEO, Pearl Cluster (250+ staff)",
      "USD 3M+ in competitive grants",
    ],
  },
  {
    initials: "KW",
    name: "Kithmin Wickremasinghe",
    role: "Photonic IC Designer, Dream Photonics",
    points: [
      "MASc, UBC (Canada)",
      "Integrated silicon photonics",
      "Biosensing & ML for EDA",
    ],
  },
  {
    initials: "UM",
    name: "Udara Mendis",
    role: "Microelectronics + MBA, TU Hamburg",
    points: [
      "Digital design engineer, Axonne",
      "Ex-SiFive verification engineer",
      "RISC-V & open-source EDA",
    ],
  },
];

function Avatar({ initials }) {
  return (
    <span className="avatar" aria-hidden="true">
      <span className="avatar__txt mono">{initials}</span>
    </span>
  );
}

function TeamSection() {
  return (
    <section className="section" id="team">
      <div className="container">
        <div className="team__top">
          <div className="sec-head reveal">
            <Eyebrow>The team</Eyebrow>
            <h2 className="h2">Built by the people who built Sri Lanka&rsquo;s <em>first</em> public chip program.</h2>
          </div>
          <div className="team__org card reveal" data-d="1">
            <img src="assets/skillsurf-mark.png" alt="" className="team__org-mark" />
            <div>
              <img src="assets/skillsurf-horizontal.png" alt="Skill Surf" className="team__org-word" />
              <p className="team__org-blurb">
                Builders of Sri Lanka&rsquo;s first public analog IC design program &mdash;
                IEEE&nbsp;Foundation&ndash;funded, 400+ registrations, a national design contest,
                and the country&rsquo;s first public SKY130 tapeout.
              </p>
            </div>
          </div>
        </div>

        <div className="team__grid">
          {TEAM.map((m, i) => (
            <article className="card member reveal" data-d={i + 1} key={m.name}>
              <Avatar initials={m.initials} />
              <h3 className="h3 member__name">{m.name}</h3>
              <p className="member__role mono">{m.role}</p>
              <ul className="member__points">
                {m.points.map((p) => <li key={p}>{p}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TeamSection, Avatar });