function Boilerplate() {
  const kurz =
    'Philipp Raasch, bekannt als Der Autopreneur, war 10 Jahre bei Mercedes-Benz und ist heute ' +
    'unabhängiger Analyst der Automobilindustrie. Mit Newsletter, Podcast und YouTube erreicht er ' +
    'über 100.000 Menschen aus der Branche.';

  const lang =
    'Philipp Raasch, bekannt als Der Autopreneur, war 10 Jahre bei Mercedes-Benz, bevor er sich 2020 ' +
    'selbstständig machte. Heute analysiert er als unabhängige Stimme die Transformation der ' +
    'Automobilindustrie: den Wandel vom Verbrenner zum E-Auto, von der Hardware zur Software und vom ' +
    'Selbstfahren zum autonomen Fahren, dazu den neuen Wettbewerb aus China. 2024 gründete er Der ' +
    'Autopreneur, heute auf Deutsch und Englisch. Jede Woche erscheinen seine Analysen als Newsletter, Podcast und auf YouTube und ' +
    'erreichen über 100.000 Menschen bei den größten Autounternehmen der Welt. Sein Antrieb: Die ' +
    'deutsche Autoindustrie soll auch in 20 Jahren noch relevant sein.';

  function Block({ label, text }) {
    const [done, setDone] = React.useState(false);
    function copy() {
      const write = navigator.clipboard && navigator.clipboard.writeText
        ? navigator.clipboard.writeText(text)
        : Promise.reject();
      write.then(() => {
        setDone(true);
        setTimeout(() => setDone(false), 2000);
      }).catch(() => {});
    }
    return (
      <div className="boiler-block">
        <div className="boiler-head">
          <span className="boiler-label">{label}</span>
          <button className={`boiler-copy${done ? ' is-done' : ''}`} onClick={copy} type="button">
            {done ? 'Kopiert ✓' : 'Text kopieren'}
          </button>
        </div>
        <p className="boiler-text">{text}</p>
      </div>
    );
  }

  return (
    <section className="section boilerplate" id="kurzportrait">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Kurzporträt</div>
        <h2 className="section-title">Über Philipp Raasch</h2>
        <p className="section-lede">Copy-paste-ready für den Beitrag. Kurz oder ausführlich.</p>
        <Block label="Kurzvita" text={kurz} />
        <Block label="Ausführlich" text={lang} />
      </div>
    </section>
  );
}
window.Boilerplate = Boilerplate;