function VideoCard({ src, tag, quote, name, featured, poster }) {
  const ref = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);

  const onClick = () => {
    const v = ref.current;
    if (!v) return;
    if (v.paused) {
      v.play();
      setPlaying(true);
    } else {
      v.pause();
      setPlaying(false);
    }
  };

  return (
    <div
      className={"y-video" + (featured ? " y-video--feat" : "") + (playing ? " is-playing" : "")}
      onClick={onClick}
    >
      <video
        ref={ref}
        src={src}
        preload="metadata"
        playsInline
        controls={playing}
        poster={poster}
        onEnded={() => setPlaying(false)}
        onPause={() => setPlaying(false)}
        onPlay={() => setPlaying(true)}
      />
      <div className="y-video__scrim"></div>
      <div className="y-video__play" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
      </div>
      <div className="y-video__meta">
        <div className="y-video__tag">{tag}</div>
        <h3 className="y-video__quote">{quote}</h3>
        <div className="y-video__name">{name}</div>
      </div>
    </div>
  );
}

function Tarinat() {
  return (
    <section className="sft-section y-stories" id="tarinat" data-screen-label="Tarinat">
      <div className="sft-section__inner">
        <div className="sft-section__head y-stories__head">
          <div className="sft-eyebrow">{window.L("Tarinoita softeralaisilta","Stories from Softera people")}</div>
          <h2 className="sft-section__title">{window.L("Kolme uraa, sama paikka","Three careers, one place")}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)", margin: "8px 0 0", maxWidth: "60ch" }}>
            {window.L("Paras tapa kertoa Softerasta työpaikkana on antaa softeralaisten itse kertoa.","The best way to describe Softera as a workplace is to let our people tell it themselves.")}
          </p>
        </div>
        <div className="y-videos">
          <VideoCard
            featured
            src="video/uravideo_pitkajanteinen_tyo.mp4"
            tag={window.L("Osion johdanto · 2 min","Section intro · 2 min")}
            quote={window.L('"Softeralla tehdään pitkäjänteistä työtä."','"At Softera we work for the long term."')}
            name={window.L("Softeran tavasta tehdä työtä","On Softera's way of working")}
          />
          <VideoCard
            src="video/uravideo_sasu_tuunanen.mp4"
            tag={window.L("Henkilötarina","Personal story")}
            quote={window.L("Vastuu kasvaa porrastetusti","Responsibility grows step by step")}
            name="Sasu Tuunanen"
          />
          <VideoCard
            src="video/uravideo_sanna_nurmesniemi.mp4"
            tag={window.L("Henkilötarina","Personal story")}
            quote={window.L("Aina saa apua","Help is always there")}
            name="Sanna Nurmesniemi"
          />
        </div>
      </div>
    </section>
  );
}