// Problema section background — Q clock with rotating hand, sonar rings, ticks
function ProblemaBg() {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

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

  return (
    <div ref={ref} style={{ position: 'absolute', inset: 0, background: '#000' }}>
      {visible && <svg
        viewBox="0 0 1366 768"
        preserveAspectRatio="xMidYMid slice"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none',
          zIndex: 0
        }}>
      <defs>
        <style dangerouslySetInnerHTML={{__html: `
          @keyframes pbgDraw { to { stroke-dashoffset: 0; } }
          @keyframes pbgFadeIn { from{opacity:0} to{opacity:1} }
          @keyframes pbgBreathe {
            0%,100% { opacity:0.52; filter:drop-shadow(0 0 6px rgba(249,115,22,0.50)); }
            50%     { opacity:1.00; filter:drop-shadow(0 0 28px rgba(249,115,22,1.00)); }
          }
          @keyframes pbgBreatheOuter {
            0%,100% { opacity:0.04; }
            50%     { opacity:0.26; }
          }
          @keyframes pbgAmbient {
            0%,100% { opacity:0.03; }
            50%     { opacity:0.14; }
          }
          @keyframes pbgScale {
            0%,100% { transform: scale(1.00); }
            50%     { transform: scale(0.94); }
          }
          @keyframes pbgTickPulse {
            0%,100% { opacity:0.12; }
            50%     { opacity:0.35; }
          }
          @keyframes pbgHandBreathe {
            0%,100% { opacity:0.48; filter:drop-shadow(0 0 4px rgba(249,115,22,0.45)); }
            50%     { opacity:0.90; filter:drop-shadow(0 0 18px rgba(249,115,22,0.90)); }
          }
          @keyframes pbgHandOuter {
            0%,100% { opacity:0.04; }
            50%     { opacity:0.16; }
          }
          @keyframes pbgPivot {
            0%,100% { opacity:0.75; filter:drop-shadow(0 0 8px rgba(249,115,22,0.65)); }
            50%     { opacity:1.00; filter:drop-shadow(0 0 22px rgba(249,115,22,1.00)); }
          }
          .pbg-q-o { stroke-dasharray:2000; stroke-dashoffset:2000;
                 animation: pbgDraw 2.4s cubic-bezier(.4,0,.2,1) 0.3s forwards,
                            pbgBreatheOuter 9s ease-in-out 2.7s infinite; }
          .pbg-q-m { stroke-dasharray:2000; stroke-dashoffset:2000;
                 animation: pbgDraw 2.4s cubic-bezier(.4,0,.2,1) 0.3s forwards; }
          .pbg-q-c { stroke-dasharray:2000; stroke-dashoffset:2000;
                 animation: pbgDraw 2.4s cubic-bezier(.4,0,.2,1) 0.3s forwards,
                            pbgBreathe 9s ease-in-out 2.7s infinite; }
          .pbg-q-f { stroke-dasharray:2000; stroke-dashoffset:2000;
                 animation: pbgDraw 2.4s cubic-bezier(.4,0,.2,1) 0.3s forwards; }
          .pbg-hand-fixed { opacity:0; animation: pbgFadeIn 1.4s ease 2.2s forwards; }
          .pbg-hand-fixed-core { animation: pbgHandBreathe 9s ease-in-out 3.6s infinite; }
          .pbg-hand-fixed-out  { animation: pbgHandOuter   9s ease-in-out 3.6s infinite; }
          .pbg-hand-rot { opacity:0; animation: pbgFadeIn 1.6s ease 2.6s forwards; }
          .pbg-hand-rot-core { animation: pbgHandBreathe 7s ease-in-out 4.2s infinite; }
          .pbg-hand-rot-out  { animation: pbgHandOuter   7s ease-in-out 4.2s infinite; }
          .pbg-ticks  { opacity:0; animation: pbgFadeIn 1.2s ease 3.0s forwards,
                                          pbgTickPulse 8s ease-in-out 4.2s infinite; }
          .pbg-hotpt  { opacity:0; animation: pbgFadeIn 0.9s ease 3.2s forwards; }
          .pbg-pivot  { opacity:0; animation: pbgFadeIn 1.0s ease 2.4s forwards,
                                          pbgPivot 5s ease-in-out 3.4s infinite; }
          .pbg-clock-group {
            transform-origin: 683px 384px;
            animation: pbgScale 13s ease-in-out 2.0s infinite;
          }
        `}}/>
        <filter id="pbg-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="pbg-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="pbg-gs" x="-12%" y="-12%" width="124%" height="124%">
          <feGaussianBlur stdDeviation="1.5" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <radialGradient id="pbg-bg" cx="13%" cy="100%" r="72%">
          <stop offset="0%"   stopColor="#1E0900"/>
          <stop offset="40%"  stopColor="#0A0300"/>
          <stop offset="100%" stopColor="#000000"/>
        </radialGradient>
      </defs>

      <rect width="1366" height="768" fill="url(#pbg-bg)"/>

      {/* Anelli sonar */}
      <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="0.8" strokeOpacity="0">
        <animate attributeName="r" values="270;500" dur="7s" begin="0s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
        <animate attributeName="stroke-opacity" values="0.12;0" dur="7s" begin="0s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
      </circle>
      <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="0.8" strokeOpacity="0">
        <animate attributeName="r" values="270;500" dur="7s" begin="2.3s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
        <animate attributeName="stroke-opacity" values="0.12;0" dur="7s" begin="2.3s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
      </circle>
      <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="0.8" strokeOpacity="0">
        <animate attributeName="r" values="270;500" dur="7s" begin="4.6s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
        <animate attributeName="stroke-opacity" values="0.12;0" dur="7s" begin="4.6s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0 0.8 1"/>
      </circle>

      {/* Particelle */}
      <circle cx="210" cy="155" r="1.4" fill="#F97316"><animate attributeName="opacity" values="0;0.18;0.06;0.22;0" dur="11s" begin="0s" repeatCount="indefinite"/></circle>
      <circle cx="1140" cy="210" r="1.0" fill="#FFE8D0"><animate attributeName="opacity" values="0;0.12;0;0.16;0" dur="14s" begin="1.8s" repeatCount="indefinite"/></circle>
      <circle cx="320" cy="580" r="1.6" fill="#F97316"><animate attributeName="opacity" values="0;0.14;0.04;0.18;0" dur="9s" begin="3.2s" repeatCount="indefinite"/></circle>
      <circle cx="1080" cy="520" r="1.2" fill="#F97316"><animate attributeName="opacity" values="0;0.10;0;0.14;0" dur="13s" begin="0.7s" repeatCount="indefinite"/></circle>
      <circle cx="900" cy="120" r="1.0" fill="#FFE8D0"><animate attributeName="opacity" values="0;0.16;0.05;0.12;0" dur="16s" begin="5.1s" repeatCount="indefinite"/></circle>
      <circle cx="155" cy="420" r="1.3" fill="#F97316"><animate attributeName="opacity" values="0;0.09;0;0.13;0" dur="12s" begin="2.5s" repeatCount="indefinite"/></circle>
      <circle cx="1220" cy="650" r="1.1" fill="#F97316"><animate attributeName="opacity" values="0;0.11;0.03;0.15;0" dur="10s" begin="7.0s" repeatCount="indefinite"/></circle>

      <g className="pbg-clock-group">
        {/* Q Ring */}
        <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="28" strokeOpacity="0.06" filter="url(#pbg-fg)" pathLength="2000" strokeDasharray="2000" strokeDashoffset="2000" className="pbg-q-o"/>
        <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="14" strokeOpacity="0.34" filter="url(#pbg-gm)" pathLength="2000" strokeDasharray="2000" strokeDashoffset="2000" className="pbg-q-m"/>
        <circle cx="683" cy="384" r="270" fill="none" stroke="#F97316" strokeWidth="5.5" strokeOpacity="0.90" filter="url(#pbg-gs)" pathLength="2000" strokeDasharray="2000" strokeDashoffset="2000" className="pbg-q-c"/>
        <circle cx="683" cy="384" r="270" fill="none" stroke="#FFE8D0" strokeWidth="1.6" strokeOpacity="0.60" pathLength="2000" strokeDasharray="2000" strokeDashoffset="2000" className="pbg-q-f"/>

        {/* Tacche ore */}
        <g className="pbg-ticks" fill="none" stroke="#F97316" strokeLinecap="round">
          <line x1="683" y1="106" x2="683" y2="89"  strokeWidth="2.2" strokeOpacity="0.40"/>
          <line x1="822" y1="143" x2="829" y2="126" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="924" y1="245" x2="936" y2="238" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="961" y1="384" x2="975" y2="384" strokeWidth="2.2" strokeOpacity="0.40"/>
          <line x1="924" y1="523" x2="936" y2="530" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="822" y1="625" x2="829" y2="638" strokeWidth="2.0" strokeOpacity="0.36"/>
          <line x1="683" y1="662" x2="683" y2="679" strokeWidth="2.2" strokeOpacity="0.40"/>
          <line x1="544" y1="625" x2="537" y2="638" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="442" y1="523" x2="430" y2="530" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="405" y1="384" x2="391" y2="384" strokeWidth="2.2" strokeOpacity="0.40"/>
          <line x1="442" y1="245" x2="430" y2="238" strokeWidth="1.3" strokeOpacity="0.22"/>
          <line x1="544" y1="143" x2="537" y2="126" strokeWidth="1.3" strokeOpacity="0.22"/>
        </g>

        {/* Coda Q */}
        <g className="pbg-hand-fixed" transform="rotate(150 683 384)">
          <line x1="683" y1="114" x2="683" y2="-40" stroke="#F97316" strokeWidth="28" strokeOpacity="0.06" strokeLinecap="round" filter="url(#pbg-fg)" className="pbg-hand-fixed-out"/>
          <line x1="683" y1="114" x2="683" y2="-40" stroke="#F97316" strokeWidth="14" strokeOpacity="0.34" strokeLinecap="round" filter="url(#pbg-gm)"/>
          <line x1="683" y1="114" x2="683" y2="-40" stroke="#F97316" strokeWidth="5.5" strokeOpacity="0.90" strokeLinecap="round" filter="url(#pbg-gs)" className="pbg-hand-fixed-core"/>
          <line x1="683" y1="114" x2="683" y2="-40" stroke="#FFE8D0" strokeWidth="1.6" strokeOpacity="0.60" strokeLinecap="round"/>
        </g>

        {/* Lancetta rotante */}
        <g className="pbg-hand-rot">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="285 683 384" to="645 683 384" dur="120s" repeatCount="indefinite"/>
            <line x1="683" y1="384" x2="683" y2="194" stroke="#F97316" strokeWidth="10" strokeLinecap="round" filter="url(#pbg-fg)" className="pbg-hand-rot-out"/>
            <line x1="683" y1="384" x2="683" y2="194" stroke="#F97316" strokeWidth="3.5" strokeOpacity="0.20" strokeLinecap="round" filter="url(#pbg-gm)"/>
            <line x1="683" y1="384" x2="683" y2="194" stroke="#F97316" strokeWidth="1.6" strokeLinecap="round" filter="url(#pbg-gs)" className="pbg-hand-rot-core"/>
            <line x1="683" y1="384" x2="683" y2="194" stroke="#FFE8D0" strokeWidth="0.7" strokeOpacity="0.42" strokeLinecap="round"/>
          </g>
        </g>

        {/* Pivot */}
        <circle cx="683" cy="384" r="14" fill="#F97316" opacity="0.07" filter="url(#pbg-fg)" className="pbg-pivot"/>
        <circle cx="683" cy="384" r="5.5" fill="#F97316" fillOpacity="0.85" filter="url(#pbg-gm)" className="pbg-pivot"/>
        <circle cx="683" cy="384" r="2.2" fill="#FFE8D0" fillOpacity="0.92" className="pbg-pivot"/>

        {/* Hot point */}
        <circle cx="683" cy="114" r="5.5" fill="#FFE0C0" filter="url(#pbg-gm)" className="pbg-hotpt" opacity="0.65"/>
      </g>
    </svg>}
    </div>
  );
}

window.ProblemaBg = ProblemaBg;
