// Confronto section background — wheelbarrow blueprint with divider glow
function ConfrontoBg() {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const o = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); o.disconnect(); } },
      { threshold: 0.15 }
    );
    if (ref.current) o.observe(ref.current);
    return () => o.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ position: 'absolute', inset: 0 }}>
    {visible && <svg viewBox="0 0 1366 768" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
      <defs>
        <style dangerouslySetInnerHTML={{__html:`
          @keyframes cfadeIn{from{opacity:0}to{opacity:1}}
          @keyframes cGlowR{0%,100%{opacity:.55}50%{opacity:1}}
          @keyframes cDivider{0%,100%{opacity:.22;filter:drop-shadow(0 0 6px rgba(249,115,22,.45))}50%{opacity:.50;filter:drop-shadow(0 0 20px rgba(249,115,22,.9))}}
          @keyframes cBreathe{0%,100%{opacity:.55;filter:drop-shadow(0 0 5px rgba(249,115,22,.5))}50%{opacity:1;filter:drop-shadow(0 0 18px rgba(249,115,22,1))}}
          @keyframes cOut{0%,100%{opacity:.04}50%{opacity:.20}}
          @keyframes cDraw{to{stroke-dashoffset:0}}
          @keyframes cPivot{0%,100%{opacity:.75;filter:drop-shadow(0 0 8px rgba(249,115,22,.65))}50%{opacity:1;filter:drop-shadow(0 0 22px rgba(249,115,22,1))}}
          .crg{animation:cGlowR 11s ease-in-out infinite}
          .cdv{opacity:0;animation:cfadeIn 1.2s ease .2s forwards,cDivider 8s ease-in-out 1.4s infinite}
          .cbp{opacity:0;animation:cfadeIn 1.8s ease .6s forwards}
          .wh-o{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cDraw 2s cubic-bezier(.4,0,.2,1) .3s forwards,cOut 9s ease-in-out 2.3s infinite}
          .wh-m{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cDraw 2s cubic-bezier(.4,0,.2,1) .3s forwards}
          .wh-c{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cDraw 2s cubic-bezier(.4,0,.2,1) .3s forwards,cBreathe 9s ease-in-out 2.3s infinite}
          .wh-f{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cDraw 2s cubic-bezier(.4,0,.2,1) .3s forwards}
          .bd-o{stroke-dasharray:900;stroke-dashoffset:900;animation:cDraw 1.6s cubic-bezier(.4,0,.2,1) 1.6s forwards,cOut 9s ease-in-out 3.2s infinite}
          .bd-m{stroke-dasharray:900;stroke-dashoffset:900;animation:cDraw 1.6s cubic-bezier(.4,0,.2,1) 1.6s forwards}
          .bd-c{stroke-dasharray:900;stroke-dashoffset:900;animation:cDraw 1.6s cubic-bezier(.4,0,.2,1) 1.6s forwards,cBreathe 9s ease-in-out 3.2s infinite}
          .bd-f{stroke-dasharray:900;stroke-dashoffset:900;animation:cDraw 1.6s cubic-bezier(.4,0,.2,1) 1.6s forwards}
          .hd-o{stroke-dasharray:600;stroke-dashoffset:600;animation:cDraw 1.4s cubic-bezier(.4,0,.2,1) 2.8s forwards,cOut 9s ease-in-out 4.2s infinite}
          .hd-m{stroke-dasharray:600;stroke-dashoffset:600;animation:cDraw 1.4s cubic-bezier(.4,0,.2,1) 2.8s forwards}
          .hd-c{stroke-dasharray:600;stroke-dashoffset:600;animation:cDraw 1.4s cubic-bezier(.4,0,.2,1) 2.8s forwards,cBreathe 9s ease-in-out 4.2s infinite}
          .hd-f{stroke-dasharray:600;stroke-dashoffset:600;animation:cDraw 1.4s cubic-bezier(.4,0,.2,1) 2.8s forwards}
          .caxle{opacity:0;animation:cfadeIn .8s ease 2s forwards,cPivot 6s ease-in-out 2.8s infinite}
          .ctip{opacity:0;animation:cfadeIn .7s ease 4s forwards,cBreathe 7s ease-in-out 4.7s infinite}
        `}}/>
        <filter id="cbg-fg" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="10" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <filter id="cbg-gm" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <filter id="cbg-gs" x="-12%" y="-12%" width="124%" height="124%"><feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <filter id="cbg-dv" x="-300%" y="-5%" width="700%" height="110%"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <radialGradient id="cbg-rr" cx="92%" cy="52%" r="52%">
          <stop offset="0%" stopColor="#F97316" stopOpacity="0.10"/>
          <stop offset="60%" stopColor="#F97316" stopOpacity="0.03"/>
          <stop offset="100%" stopColor="#F97316" stopOpacity="0"/>
        </radialGradient>
        <radialGradient id="cbg-rl" cx="8%" cy="52%" r="40%">
          <stop offset="0%" stopColor="#F97316" stopOpacity="0.025"/>
          <stop offset="100%" stopColor="#F97316" stopOpacity="0"/>
        </radialGradient>
      </defs>

      {/* Glows */}
      <rect width="1366" height="768" fill="url(#cbg-rr)" className="crg"/>
      <rect width="1366" height="768" fill="url(#cbg-rl)"/>
      <line x1="683" y1="0" x2="683" y2="768" stroke="#F97316" strokeWidth="0.8" strokeOpacity="0.30" filter="url(#cbg-dv)" className="cdv"/>

      {/* Blueprint corners */}
      <g className="cbp" fill="none" stroke="#F97316" strokeOpacity="0.08" strokeWidth="0.6" strokeDasharray="6 9">
        <line x1="20" y1="100" x2="180" y2="100"/><line x1="90" y1="20" x2="90" y2="180"/>
        <line x1="1346" y1="100" x2="1186" y2="100"/><line x1="1276" y1="20" x2="1276" y2="180"/>
        <line x1="20" y1="668" x2="180" y2="668" strokeOpacity="0.05"/><line x1="90" y1="748" x2="90" y2="568" strokeOpacity="0.05"/>
        <line x1="1346" y1="668" x2="1186" y2="668" strokeOpacity="0.05"/><line x1="1276" y1="748" x2="1276" y2="568" strokeOpacity="0.05"/>
      </g>

      {/* RUOTA */}
      <circle cx="920" cy="182" r="62" fill="none" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" filter="url(#cbg-fg)" className="wh-o" strokeDasharray="1200" strokeDashoffset="1200"/>
      <circle cx="920" cy="182" r="62" fill="none" stroke="#F97316" strokeWidth="10" strokeOpacity="0.30" filter="url(#cbg-gm)" className="wh-m" strokeDasharray="1200" strokeDashoffset="1200"/>
      <circle cx="920" cy="182" r="62" fill="none" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.90" filter="url(#cbg-gs)" className="wh-c" strokeDasharray="1200" strokeDashoffset="1200"/>
      <circle cx="920" cy="182" r="62" fill="none" stroke="#FFE8D0" strokeWidth="1.2" strokeOpacity="0.58" className="wh-f" strokeDasharray="1200" strokeDashoffset="1200"/>

      {/* Raggi ruota */}
      <g className="bd-f" stroke="#F97316" strokeOpacity="0.22" strokeWidth="0.7" strokeDasharray="900" strokeDashoffset="900">
        <line x1="920" y1="120" x2="920" y2="244"/><line x1="858" y1="182" x2="982" y2="182"/>
        <line x1="876" y1="138" x2="964" y2="226"/><line x1="876" y1="226" x2="964" y2="138"/>
      </g>

      {/* VASCA */}
      <path d="M 920,120 L 1090,128 L 1130,15 L 860,8 Z" fill="none" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" strokeLinejoin="round" filter="url(#cbg-fg)" className="bd-o" strokeDasharray="900" strokeDashoffset="900"/>
      <path d="M 920,200 L 1090,208 L 1130,95 L 860,88 Z" fill="none" stroke="#F97316" strokeWidth="10" strokeOpacity="0.28" strokeLinejoin="round" filter="url(#cbg-gm)" className="bd-m" strokeDasharray="900" strokeDashoffset="900"/>
      <path d="M 920,200 L 1090,208 L 1130,95 L 860,88 Z" fill="none" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.88" strokeLinejoin="round" filter="url(#cbg-gs)" className="bd-c" strokeDasharray="900" strokeDashoffset="900"/>
      <path d="M 920,200 L 1090,208 L 1130,95 L 860,88 Z" fill="none" stroke="#FFE8D0" strokeWidth="1.1" strokeOpacity="0.56" strokeLinejoin="round" className="bd-f" strokeDasharray="900" strokeDashoffset="900"/>

      {/* GAMBA ANTERIORE */}
      <line x1="880" y1="115" x2="848" y2="230" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" strokeLinecap="round" filter="url(#cbg-fg)" className="bd-o" strokeDasharray="900" strokeDashoffset="900"/>
      <line x1="880" y1="195" x2="848" y2="310" stroke="#F97316" strokeWidth="10" strokeOpacity="0.28" strokeLinecap="round" filter="url(#cbg-gm)" className="bd-m" strokeDasharray="900" strokeDashoffset="900"/>
      <line x1="880" y1="195" x2="848" y2="310" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.88" strokeLinecap="round" filter="url(#cbg-gs)" className="bd-c" strokeDasharray="900" strokeDashoffset="900"/>
      <line x1="880" y1="195" x2="848" y2="310" stroke="#FFE8D0" strokeWidth="1.1" strokeOpacity="0.56" strokeLinecap="round" className="bd-f" strokeDasharray="900" strokeDashoffset="900"/>

      {/* MANICO SUPERIORE */}
      <line x1="1130" y1="12" x2="1355" y2="-25" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" strokeLinecap="round" filter="url(#cbg-fg)" className="hd-o" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="92" x2="1355" y2="55" stroke="#F97316" strokeWidth="10" strokeOpacity="0.28" strokeLinecap="round" filter="url(#cbg-gm)" className="hd-m" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="92" x2="1355" y2="55" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.90" strokeLinecap="round" filter="url(#cbg-gs)" className="hd-c" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="92" x2="1355" y2="55" stroke="#FFE8D0" strokeWidth="1.1" strokeOpacity="0.58" strokeLinecap="round" className="hd-f" strokeDasharray="600" strokeDashoffset="600"/>

      {/* MANICO INFERIORE */}
      <line x1="1130" y1="40" x2="1355" y2="4" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" strokeLinecap="round" filter="url(#cbg-fg)" className="hd-o" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="120" x2="1355" y2="84" stroke="#F97316" strokeWidth="10" strokeOpacity="0.28" strokeLinecap="round" filter="url(#cbg-gm)" className="hd-m" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="120" x2="1355" y2="84" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.90" strokeLinecap="round" filter="url(#cbg-gs)" className="hd-c" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1130" y1="120" x2="1355" y2="84" stroke="#FFE8D0" strokeWidth="1.1" strokeOpacity="0.58" strokeLinecap="round" className="hd-f" strokeDasharray="600" strokeDashoffset="600"/>

      {/* TRAVERSINO */}
      <line x1="1240" y1="-19" x2="1248" y2="10" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.55" strokeLinecap="round" filter="url(#cbg-gs)" className="hd-c" strokeDasharray="600" strokeDashoffset="600"/>
      <line x1="1240" y1="61" x2="1248" y2="90" stroke="#FFE8D0" strokeWidth="1.0" strokeOpacity="0.40" strokeLinecap="round" className="hd-f" strokeDasharray="600" strokeDashoffset="600"/>

      {/* MOZZO */}
      <circle cx="920" cy="182" r="11" fill="#F97316" opacity="0.08" filter="url(#cbg-fg)" className="caxle"/>
      <circle cx="920" cy="182" r="4.5" fill="#F97316" fillOpacity="0.82" filter="url(#cbg-gm)" className="caxle"/>
      <circle cx="920" cy="182" r="1.8" fill="#FFE8D0" fillOpacity="0.90" className="caxle"/>

      {/* HOT POINT manico */}
      <circle cx="1355" cy="-25" r="7" fill="#F97316" opacity="0.08" filter="url(#cbg-fg)" className="ctip"/>
      <circle cx="1355" cy="-25" r="3.5" fill="#F97316" fillOpacity="0.72" filter="url(#cbg-gm)" className="ctip"/>
      <circle cx="1355" cy="-25" r="1.4" fill="#FFE8D0" fillOpacity="0.88" className="ctip"/>

      {/* Particelle */}
      <circle cx="780" cy="120" r="1.0" fill="#F97316"><animate attributeName="opacity" values="0;0.12;0;0.08;0" dur="13s" begin="1s" repeatCount="indefinite"/></circle>
      <circle cx="200" cy="500" r="1.1" fill="#F97316"><animate attributeName="opacity" values="0;0.09;0.03;0.11;0" dur="15s" begin="6s" repeatCount="indefinite"/></circle>
      <circle cx="1300" cy="600" r="0.9" fill="#F97316"><animate attributeName="opacity" values="0;0.08;0;0.10;0" dur="12s" begin="2.2s" repeatCount="indefinite"/></circle>

    </svg>}
    </div>
  );
}

window.ConfrontoBg = ConfrontoBg;
