/* global React */
function Founder() {
  const { t } = window.useT();
  return (
    <section className="vsc-founder" id="kennys" data-screen-label="Founder story">
      <div className="vsc-wrap">
        <div className="vsc-founder-inner">
          <div className="vsc-founder-img">
            <img src="assets/kennys-1.webp" alt="Kennys Rodríguez, founder and cosmetologist of Victoria Skincare" />
            <div className="sig">
              Kennys
              <small>{t("founder.sig")}</small>
            </div>
          </div>
          <div className="vsc-founder-text">
            <div className="vsc-eyebrow">{t("founder.eyebrow")}</div>
            <h2>
              {t("founder.h2.a")}<br/>
              <em>{t("founder.h2.b")}</em>
            </h2>
            <p>{t("founder.p1")}</p>
            <p>{t("founder.p2")}</p>
            <ul className="vsc-founder-list">
              <li>{t("founder.list.1")}</li>
              <li>{t("founder.list.2")}</li>
              <li>{t("founder.list.3")}</li>
              <li>{t("founder.list.4")}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Founder = Founder;