function StoryCard({ initials, color, name, role, chapter, h, excerpt, href }) {
  return (
    <article className="y-card y-card--compact">
      <div className="y-card__person">
        <div className={"sft-avatar sft-avatar--md " + color}>{initials}</div>
        <div>
          <div className="y-card__name">{name}</div>
          <div className="y-card__role">{role}</div>
        </div>
      </div>
      <div className="y-card__chapter">{chapter}</div>
      <h3 className="y-card__h">{h}</h3>
      <p className="y-card__excerpt">{excerpt}</p>
      <a href={href} className="y-card__more">
        {window.L("Lue koko tarina","Read the full story")} <i data-lucide="arrow-right"></i>
      </a>
    </article>
  );
}

function KirjoitetutTarinat() {
  return (
    <section className="sft-section y-section-soft" style={{ paddingTop: 24 }} data-screen-label="Kirjoitetut tarinat">
      <div className="sft-section__inner">
        <div className="sft-section__head" style={{ marginBottom: 32, maxWidth: "none" }}>
          <div className="sft-eyebrow">{window.L("Kirjoitetut tarinat","Written stories")}</div>
          <h2 className="sft-section__title" style={{ fontSize: 30 }}>{window.L("Kolme tarinaa eri uravaiheista — juniorista senioriksi","Three stories from different career stages — junior to senior")}</h2>
        </div>
        <div className="y-written__grid">
          <StoryCard
            initials="JO"
            color="sft-avatar--cyan"
            name="Janne Olin"
            role={window.L("Ohjelmistosuunnittelija","Software developer")}
            chapter={window.L("Juniori · Softera 360°","Junior · Softera 360°")}
            h={window.L("Rekrykoulutuksen kautta ohjelmistosuunnittelijaksi","From a recruitment programme to software developer")}
            excerpt={window.L("Vuosia taloushallinnon tehtävissä, mutta kiinnostus ohjelmointiin pinnan alla. Tradenomista koodariksi rekrykoulutuksen ja Savonia Code Academyn kautta.","Years in finance roles, but an interest in programming under the surface. From business graduate to coder via a recruitment programme and Savonia Code Academy.")}
            href={window.langHref("tarina-janne")}
          />
          <StoryCard
            initials="AH"
            color="sft-avatar--blue"
            name="Aku Hakkarainen"
            role={window.L("Ohjelmistosuunnittelija","Software developer")}
            chapter={window.L("Medior · Softera Horizon","Mid-level · Softera Horizon")}
            h={window.L("Vapaus visioida — ja vastuu visioida","The freedom to envision — and the responsibility to")}
            excerpt={window.L("Terminaalityöntekijästä ohjelmistosuunnittelijaksi tietojenkäsittelytieteen opintojen kautta. Juniorista omat tavoitteet asettavaksi tekijäksi.","From terminal worker to software developer via computer-science studies. From junior to someone who sets their own goals.")}
            href={window.langHref("tarina-aku")}
          />
          <StoryCard
            initials="TN"
            color="sft-avatar--deep"
            name="Timo Niemeläinen"
            role={window.L("Senior ohjelmistoarkkitehti","Senior software architect")}
            chapter={window.L("Seniori · 20 vuotta talossa","Senior · 20 years at the company")}
            h={window.L("Lähes 20 vuotta samassa talossa — eikä ole tylsistynyt","Almost 20 years at the same company — and not bored")}
            excerpt={window.L("Vuonna 2006 aloittanut kehittäjä, joka vastaa tänään Softera T360°:n käyttöliittymästä, tilauskäsittelystä ja itsepalvelusta. Joustavuus piti talossa.","A developer who started in 2006 and today owns Softera T360°'s UI, order handling and self-service. Flexibility kept him here.")}
            href={window.langHref("tarina-timo")}
          />
        </div>
      </div>
    </section>
  );
}