const BeforeAfter = () => {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const drag = React.useRef(false);

  const move = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => { drag.current = true; move(e.clientX ?? e.touches[0].clientX); };
  const onMove = (e) => {
    if (!drag.current) return;
    move(e.clientX ?? e.touches[0].clientX);
  };
  const onUp = () => { drag.current = false; };

  React.useEffect(() => {
    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);
    };
  }, []);

  return (
    <section className="section shell">
      <div className="ba-wrap">
        <div>
          <div className="overline">Было / стало</div>
          <h2>Иногда разница —<br/>это <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--blush-2)"}}>чистая кутикула</em>.</h2>
          <p className="about-body" style={{marginTop:28}}>
            Чаще всего ко мне приходят после чужих повреждений: пропилы, отслойки, тонкая пластина.
            Восстанавливаем постепенно — 2-3 визита, и руки выглядят здоровыми сами по себе, даже без покрытия.
          </p>
          <div style={{marginTop:28, display:"flex", gap:24, alignItems:"center"}}>
            <div>
              <div className="mono" style={{color:"var(--muted)"}}>ПЕРЕТАЩИТЕ ПОЛЗУНОК</div>
              <div style={{fontFamily:"var(--serif)", fontSize:22, marginTop:4}}>чтобы сравнить</div>
            </div>
            <div style={{fontFamily:"var(--serif)", fontSize:60, color:"var(--olive)", lineHeight:1, fontStyle:"italic"}}>↔</div>
          </div>
        </div>
        <div className="ba-stage" ref={ref}
             onMouseDown={onDown} onTouchStart={onDown}
             style={{"--p": pos+"%"}}>
          <div className="ba-layer before">
            <Placeholder src="anna_before.png" bg="#D3C7B4" ink="#3C372E" label="BEFORE"/>
          </div>
          <div className="ba-layer after">
            <NailPlaceholder src="anna_after.png" bg="#E9C9C1" accent="#9A5550" label="AFTER"/>
          </div>
          <div className="ba-tag l">BEFORE</div>
          <div className="ba-tag r">AFTER</div>
          <div className="ba-handle"/>
          <div className="ba-knob">
            <Icon name="chevL" size={14}/>
            <Icon name="chevR" size={14}/>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BeforeAfter });