// Section 02 — Alarm counter (CO deaths in Poland)
const AlarmSection = () => {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          // animate from 0 to ~60
          const target = 61;
          const start = performance.now();
          const duration = 1800;
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setCount(Math.round(target * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          obs.disconnect();
        }
      },
      { threshold: 0.4 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={ref} className="screen bg-alarm" data-screen-label="02 Alarm" id="alarm">
      <div className="wrap">
        <div className="alarm-grid">
          <div>
            <div className="eyebrow reveal" style={{ color: '#fff' }}>Dlaczego w ogóle o tym mówimy</div>
            <div className="alarm-counter reveal reveal-d1">
              ~{count}
              <span className="unit">osób rocznie umiera w Polsce<br/>z powodu zaczadzenia</span>
            </div>
            <p className="mono reveal reveal-d2" style={{ marginTop: 24, fontSize: 11, color: 'rgba(255,255,255,0.65)', letterSpacing: '0.08em' }}>
              ŹRÓDŁO: KOMENDA GŁÓWNA PSP — SEZON GRZEWCZY 2023/2024
            </p>
          </div>
          <div>
            <h3 className="mid-title reveal" style={{ color: '#fff', marginBottom: 28 }}>
              Większość przypadków dotyczy&nbsp;domów z&nbsp;piecykami gazowymi w&nbsp;mieszkaniach.
            </h3>
            <ul className="alarm-points reveal reveal-d2">
              <li>
                <span className="n">01</span>
                <span>Tysiące hospitalizacji rocznie z powodu tlenku węgla</span>
              </li>
              <li>
                <span className="n">02</span>
                <span>Najczęstsza przyczyna: niesprawna wentylacja i stary piecyk</span>
              </li>
              <li>
                <span className="n">03</span>
                <span>Zarządca odpowiada za stan techniczny urządzeń w lokalach</span>
              </li>
              <li>
                <span className="n">04</span>
                <span>Rozwiązanie jest jedno: wyprowadzić gaz z&nbsp;mieszkań</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};
window.AlarmSection = AlarmSection;