/* v2 BeforeAfter — "Per què ara": 67% bosc català sense IOF */

const V2BeforeAfter = () => {
  const wrap = React.useRef(null);
  const [pos, setPos] = React.useState(50);
  const dragging = React.useRef(false);

  const updateFromClientX = (clientX) => {
    if (!wrap.current) return;
    const rect = wrap.current.getBoundingClientRect();
    const p = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(4, Math.min(96, p)));
  };

  React.useEffect(() => {
    const onMove = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      updateFromClientX(x);
    };
    const onUp = () => { dragging.current = false; document.body.style.cursor = ""; };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove, { passive: true });
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchend", onUp);
    };
  }, []);

  const start = (e) => {
    dragging.current = true;
    document.body.style.cursor = "ew-resize";
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    updateFromClientX(x);
  };

  return (
    <section id="context" className="v2-section v2-section--tight">
      <div className="v2-container">
        <div className="reveal" style={{ maxWidth: 900, marginBottom: 56 }}>
          <V2Eyebrow>El bosc català, en xifres</V2Eyebrow>
          <h2>El 67% del bosc català <em>no té IOF vigent</em>.<br/>Algun dia caldrà gestionar-lo.</h2>
          <p className="v2-section__lede">
            500.000 hectàrees treballen amb un instrument d'ordenació forestal. 1,39
            milions ho fan sense. Cada any la diferència s'eixampla, les bases
            reguladores canvien i un sol enginyer porta entre 20 i 50 finques al
            mateix temps.
          </p>
        </div>

        <div
          className="v2-ba reveal"
          ref={wrap}
          style={{ "--ba-pos": `${pos}%` }}
          onMouseDown={start}
          onTouchStart={start}
        >
          <div className="v2-ba__side v2-ba__side--before v2-ba__before">
            <img src={V2_PHOTOS.forestAutumn} alt="Bosc sense IOF vigent"/>
          </div>
          <div className="v2-ba__side v2-ba__side--after v2-ba__after">
            <img src={V2_PHOTOS.forestAerial} alt="Bosc amb gestió planificada"/>
          </div>

          <span className="v2-ba__label v2-ba__label--before">
            <span className="v-dot" /> Sense IOF · 67%
          </span>
          <span className="v2-ba__label v2-ba__label--after">
            Amb pla de gestió · 33% <span className="v-dot" />
          </span>

          <div className="v2-ba__stats">
            <div className="v2-ba__stat">
              <div className="v2-ba__stat-val v2-ba__stat-val--warn">1,39 M</div>
              <div className="v2-ba__stat-lbl">ha sense IOF</div>
            </div>
            <div className="v2-ba__stat">
              <div className="v2-ba__stat-val v2-ba__stat-val--warn">~1.000</div>
              <div className="v2-ba__stat-lbl">enginyers a CAT</div>
            </div>
            <div className="v2-ba__stat">
              <div className="v2-ba__stat-val v2-ba__stat-val--ok">4.400</div>
              <div className="v2-ba__stat-lbl">IOF vigents</div>
            </div>
            <div className="v2-ba__stat">
              <div className="v2-ba__stat-val v2-ba__stat-val--ok">500.000 ha</div>
              <div className="v2-ba__stat-lbl">gestió planif.</div>
            </div>
          </div>

          <div className="v2-ba__handle" />
        </div>

        <div className="v2-ba-meta">
          <div className="v2-ba-meta__card v2-ba-meta__card--warn">
            <div className="v2-ba-meta__head">
              <span className="v2-ba-meta__head-dot" />
              <span className="v2-ba-meta__title">Sense IOF vigent</span>
            </div>
            <p className="v2-ba-meta__copy">
              1,39 milions d'hectàrees de bosc català sense instrument d'ordenació
              forestal. Cap historial, cap planificació d'actuacions, cap accés a
              ajuts SIDER. Un mercat que algun dia caldrà gestionar, peça per peça,
              finca per finca.
            </p>
          </div>
          <div className="v2-ba-meta__card v2-ba-meta__card--ok">
            <div className="v2-ba-meta__head">
              <span className="v2-ba-meta__head-dot" />
              <span className="v2-ba-meta__title">Amb pla de gestió</span>
            </div>
            <p className="v2-ba-meta__copy">
              500.000 hectàrees amb IOF o PTGMF vigent. Plans amb 15-20 anys de
              vigència, actuacions planificades any per any i convocatòries d'ajuts
              obertes contínuament. Tota aquesta feina avui es gestiona amb Word,
              Excel i carpetes de documents.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

window.V2BeforeAfter = V2BeforeAfter;