// Section 04 — Before / After apartment slider
const BeforeAfter = () => {
  const [split, setSplit] = React.useState(50);
  const stageRef = React.useRef(null);
  const draggingRef = React.useRef(false);

  const setFromClientX = (clientX) => {
    const r = stageRef.current.getBoundingClientRect();
    const pct = Math.max(4, Math.min(96, ((clientX - r.left) / r.width) * 100));
    setSplit(pct);
  };

  React.useEffect(() => {
    const onMove = (e) => {
      if (!draggingRef.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      setFromClientX(x);
    };
    const onUp = () => { draggingRef.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  const startDrag = (e) => {
    draggingRef.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    setFromClientX(x);
  };

  const Scene = ({ isAfter }) => (
    <div className="ba-scene">
      <div className="apt">
        <div className="wall-stripe" />
        {!isAfter && (
          <>
            <div className="piecyk-flue" />
            <div className="piecyk">
              <div className="vent" />
              <div className="dial" />
              <div className="label">GAZ</div>
            </div>
            <div className="danger-co">CO · ZAGROŻENIE</div>
            <div className="co-particles">
              <span /><span /><span /><span />
            </div>
          </>
        )}
        {isAfter && (
          <>
            <div className="calm-tag">Mieszkanie bez gazu</div>
            <div className="after-note">
              <strong>Bez piecyka. Bez komina. Bez ryzyka.</strong><br/>
              Ciepła woda z&nbsp;kranu — tak jak w&nbsp;bloku z&nbsp;ciepłowni miejskiej.
            </div>
          </>
        )}
        <div className="sink">
          <div className="tap">
            <div className="water" />
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <section className="screen bg-cream2" data-screen-label="04 Przed/Po">
      <div className="wrap">
        <div className="eyebrow reveal">Przesuń suwak</div>
        <h2 className="big-title reveal reveal-d1" style={{ marginBottom: 16, maxWidth: 1000 }}>
          Jedno mieszkanie.<br/>
          <span className="italic">Dwie</span> rzeczywistości.
        </h2>
        <p className="lede reveal reveal-d2" style={{ marginBottom: 40 }}>
          Po lewej — typowa kuchnia z&nbsp;piecykiem gazowym. Po prawej —
          to&nbsp;samo mieszkanie po modernizacji instalacji.
        </p>

        <div
          ref={stageRef}
          className="ba-stage reveal reveal-d3"
          onMouseDown={startDrag}
          onTouchStart={startDrag}
          style={{ '--split': split + '%' }}
        >
          <div className="ba-label before">Dziś — piecyk w każdej kuchni</div>
          <div className="ba-label after">Po modernizacji — gaz znika</div>
          <div className="ba-pane before"><Scene isAfter={false} /></div>
          <div className="ba-pane after"><Scene isAfter={true} /></div>
          <div className="ba-handle">
            <div className="knob">
              <span className="arrow l" />
              <span className="arrow r" />
            </div>
          </div>
        </div>
        <p className="ba-hint reveal reveal-d4">← PRZECIĄGNIJ SUWAK W LEWO I W PRAWO →</p>
      </div>
    </section>
  );
};
window.BeforeAfter = BeforeAfter;