// Section 09 — Emotional story close
const StorySection = () => {
  return (
    <section className="screen bg-dark" data-screen-label="09 Historia">
      <div className="wrap-narrow" style={{ textAlign: 'center' }}>
        <div className="eyebrow reveal" style={{ justifyContent: 'center' }}>Dlaczego to robimy</div>

        <p className="story-quote reveal reveal-d1">
          Najprzyjemniejszą częścią tej roboty są telefony od&nbsp;mieszkańców. Dzwonią, żeby
          podziękować, że <span style={{ color: 'var(--orange)' }}>wreszcie</span> mają pod&nbsp;dostatkiem
          ciepłej wody.
        </p>

        <p className="story-attr reveal reveal-d2">
          — Z rozmów po uruchomieniu, Malczewskiego 13
        </p>

        <div className="reveal reveal-d3" style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, maxWidth: 800, margin: '80px auto 0' }}>
          <div>
            <div className="serif" style={{ fontSize: 56, color: 'var(--orange)', lineHeight: 1 }}>∞</div>
            <p style={{ fontSize: 13, color: 'rgba(245,233,212,0.7)', marginTop: 8, lineHeight: 1.5 }}>Ciepła woda bez „czekaj, aż się zagrzeje"</p>
          </div>
          <div>
            <div className="serif" style={{ fontSize: 56, color: 'var(--orange)', lineHeight: 1 }}>0</div>
            <p style={{ fontSize: 13, color: 'rgba(245,233,212,0.7)', marginTop: 8, lineHeight: 1.5 }}>Piecyków gazowych w&nbsp;mieszkaniach po&nbsp;modernizacji</p>
          </div>
          <div>
            <div className="serif" style={{ fontSize: 56, color: 'var(--orange)', lineHeight: 1 }}>1</div>
            <p style={{ fontSize: 13, color: 'rgba(245,233,212,0.7)', marginTop: 8, lineHeight: 1.5 }}>Jeden punkt kontaktowy — zarządca</p>
          </div>
        </div>
      </div>
    </section>
  );
};
window.StorySection = StorySection;