/* global React */
const { useState: useStateP } = React;

function NxProfile({ lang, tweaks }) {
  const t = window.NX_COPY[lang].profile;
  const photo = tweaks.profilePhoto === "city" ? "assets/profile-city.png" : "assets/profile-studio.png";
  return (
    <section className="nx-section" id="profile">
      <div className="nx-container nx-container--wide">
        <div className="nx-section__head">
          <div className="nx-eyebrow">{t.eyebrow}</div>
          <h2 className="nx-h2">{t.sectionA.title}</h2>
        </div>
        <div className="nx-profile-hero">
          <div className="nx-profile__photo">
            <img src={photo} alt={t.name} />
          </div>
          <div>
            <div className="nx-profile__name-row">
              <h3 className="nx-h3">{t.name}</h3>
              <span className="nx-profile__role">{t.role}</span>
            </div>
            <p className="nx-profile__body">{t.sectionA.body}</p>
          </div>
        </div>
        <div className="nx-pillars">
          {t.sectionA.pillars.map((p) => (
            <div key={p.k} className="nx-pillar">
              <div className="nx-pillar__k">{p.k}</div>
              <div className="nx-pillar__v">{p.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NxProfile = NxProfile;

function NxCompetencies({ lang }) {
  const t = window.NX_COPY[lang].profile.sectionB;
  return (
    <section className="nx-section nx-section--paper">
      <div className="nx-container nx-container--wide">
        <div className="nx-section__head">
          <div className="nx-eyebrow">B · Kompetenzen</div>
          <h2 className="nx-h2">{t.title}</h2>
          <p className="nx-lead">{t.sub}</p>
        </div>
        <div className="nx-clusters">
          {t.clusters.map((c, i) => (
            <article key={c.title} className="nx-cluster">
              <div className="nx-cluster__num">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="nx-cluster__title">{c.title}</h3>
              <ul className="nx-cluster__items">
                {c.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NxCompetencies = NxCompetencies;