// Hero animated SVG background — globe + crane + Q ring + cable
// Spec v3: viewBox="-80 0 1920 1080", q-prefixed classes, full-bleed coverage.
function HeroBgSVG() {
  return (
    <svg
      className="hero-bg"
      style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}
      viewBox="40 -240 1920 1080"
      preserveAspectRatio="xMidYMid slice"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true">
      <defs>
        <style>{`
          @keyframes qdraw   { to { stroke-dashoffset: 0; } }
          @keyframes qfadeIn { from{opacity:0} to{opacity:1} }
          @keyframes qBreathe {
            0%,100% { opacity:0.72; filter:drop-shadow(0 0 5px rgba(249,115,22,0.55)); }
            50%     { opacity:1.00; filter:drop-shadow(0 0 18px rgba(249,115,22,1.0)); }
          }
          @keyframes qBreatheOuter { 0%,100%{opacity:0.07} 50%{opacity:0.20} }
          @keyframes qGlobeGlow    { 0%,100%{opacity:0.04} 50%{opacity:0.12} }
          @keyframes qp1 { 0%,100%{opacity:0.55} 50%{opacity:1}   }
          @keyframes qp2 { 0%,100%{opacity:0.35} 50%{opacity:0.9} }
          @keyframes qp3 { 0%,100%{opacity:0.65} 50%{opacity:1}   }
          @keyframes qblink { 0%,48%,100%{opacity:0.85} 50%,98%{opacity:0.15} }

          .qg-arc        { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.4s cubic-bezier(.25,.1,.25,1) .2s forwards; }
          .qlattice      { opacity:0; animation:qfadeIn 1.4s ease 1.0s forwards; }
          .qca           { opacity:0; animation:qfadeIn 1.2s ease 1.8s forwards, qp1 3.4s ease-in-out 3.0s infinite; }
          .qcb           { opacity:0; animation:qfadeIn 1.2s ease 1.8s forwards, qp2 4.2s ease-in-out 3.5s infinite; }
          .qcc           { opacity:0; animation:qfadeIn 1.2s ease 1.8s forwards, qp3 2.8s ease-in-out 2.8s infinite; }
          .qconn         { opacity:0; animation:qfadeIn 1.2s ease 1.8s forwards; }
          .qtower-side   { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.8s cubic-bezier(.4,0,.2,1) .2s forwards; }
          .qtower-detail { opacity:0; animation:qfadeIn 0.9s ease 1.7s forwards; }
          .qtower-foot   { opacity:0; animation:qfadeIn 0.6s ease 1.8s forwards; }
          .qjib-main     { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.0s cubic-bezier(.4,0,.2,1) .4s forwards; }
          .qjib-counter  { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 0.7s cubic-bezier(.4,0,.2,1) .4s forwards; }
          .qjib-cable    { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.0s cubic-bezier(.4,0,.2,1) .6s forwards; }
          .qjib-detail   { opacity:0; animation:qfadeIn 0.9s ease 2.0s forwards; }
          .qcweight      { opacity:0; animation:qfadeIn 0.5s ease 1.0s forwards; }
          .qcabin        { opacity:0; animation:qfadeIn 0.6s ease 1.6s forwards; }
          .qhook-line    { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 0.5s ease-out 2.2s forwards; }
          .qhook-body    { opacity:0; animation:qfadeIn 0.5s ease 2.6s forwards; }
          .qq-o { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.8s cubic-bezier(.4,0,.2,1) 0.2s forwards, qBreatheOuter 9s ease-in-out 2.0s infinite; }
          .qq-m { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.8s cubic-bezier(.4,0,.2,1) 0.2s forwards; }
          .qq-c { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.8s cubic-bezier(.4,0,.2,1) 0.2s forwards, qBreathe 9s ease-in-out 2.0s infinite; }
          .qq-f { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.8s cubic-bezier(.4,0,.2,1) 0.2s forwards; }
          .qt-o { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.2s cubic-bezier(.4,0,.2,1) 1.6s forwards, qBreatheOuter 9s ease-in-out 3.8s infinite; }
          .qt-m { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.2s cubic-bezier(.4,0,.2,1) 1.6s forwards; }
          .qt-c { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.2s cubic-bezier(.4,0,.2,1) 1.6s forwards, qBreathe 9s ease-in-out 3.8s infinite; }
          .qt-f { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 2.2s cubic-bezier(.4,0,.2,1) 1.6s forwards; }
          .qr-o { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.1s ease-out 3.8s forwards, qBreatheOuter 9s ease-in-out 4.9s infinite; }
          .qr-c { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.1s ease-out 3.8s forwards, qBreathe 9s ease-in-out 4.9s infinite; }
          .qr-f { stroke-dasharray:1000;stroke-dashoffset:1000; animation:qdraw 1.1s ease-out 3.8s forwards; }
          .qlate  { opacity:0; animation:qfadeIn 0.6s ease 3.2s forwards; }
          .qlater { opacity:0; animation:qfadeIn 1.2s ease 3.7s forwards; }
        `}</style>
        <filter id="qfg" x="-60%" y="-60%" width="220%" height="220%">
          <feGaussianBlur stdDeviation="14" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
        <filter id="qgm" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="5.5" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
        <filter id="qgs" x="-12%" y="-12%" width="124%" height="124%">
          <feGaussianBlur stdDeviation="2.1" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
        <radialGradient id="qbg" cx="12%" cy="100%" r="72%">
          <stop offset="0%" stopColor="#1E0900" />
          <stop offset="40%" stopColor="#0A0300" />
          <stop offset="100%" stopColor="#000000" />
        </radialGradient>
        <clipPath id="qgc"><circle cx="225" cy="1080" r="604" /></clipPath>
        <path id="qpp1" d="M395,600 C430,575 475,558 527,540" fill="none" />
        <path id="qpp2" d="M299,578 C350,560 394,554 440,548" fill="none" />
      </defs>

      {/* Sfondo */}
      <rect x="-200" y="-400" width="2200" height="1600" fill="url(#qbg)" />

      {/* Alone globo */}
      <circle cx="225" cy="1080" r="604" fill="rgba(249,115,22,0.05)" filter="url(#qfg)" style={{ animation: 'qGlobeGlow 6s ease-in-out 2s infinite' }} />

      {/* GLOBO */}
      <circle cx="225" cy="1080" r="604" fill="none" stroke="#F97316" strokeWidth="28" strokeOpacity="0.07" filter="url(#qfg)" pathLength="1000" className="qg-arc" />
      <circle cx="225" cy="1080" r="604" fill="none" stroke="#F97316" strokeWidth="2.8" strokeOpacity="0.68" filter="url(#qgm)" pathLength="1000" className="qg-arc" />
      <circle cx="225" cy="1080" r="604" fill="none" stroke="#FFE8D0" strokeWidth="0.8" strokeOpacity="0.32" pathLength="1000" className="qg-arc" />

      {/* Lattice globo */}
      <g className="qlattice" clipPath="url(#qgc)" fill="none" stroke="#F97316">
        <ellipse cx="225" cy="1080" rx="604" ry="91"  strokeWidth="0.90" strokeOpacity="0.27" transform="rotate(-11 225 1080)" />
        <ellipse cx="225" cy="1080" rx="604" ry="225" strokeWidth="0.85" strokeOpacity="0.23" transform="rotate(-11 225 1080)" />
        <ellipse cx="225" cy="1080" rx="604" ry="375" strokeWidth="0.80" strokeOpacity="0.20" transform="rotate(-11 225 1080)" />
        <ellipse cx="225" cy="1080" rx="604" ry="499" strokeWidth="0.75" strokeOpacity="0.17" transform="rotate(-11 225 1080)" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="0.72" strokeOpacity="0.21" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="0.72" strokeOpacity="0.21" transform="rotate(40 225 1080)" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="0.72" strokeOpacity="0.21" transform="rotate(80 225 1080)" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="0.72" strokeOpacity="0.21" transform="rotate(120 225 1080)" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="0.70" strokeOpacity="0.19" transform="rotate(160 225 1080)" />
        <ellipse cx="225" cy="1080" rx="59"  ry="604" strokeWidth="1.0"  strokeOpacity="0.35">
          <animateTransform attributeName="transform" type="rotate" from="0 225 1080" to="360 225 1080" dur="120s" repeatCount="indefinite" />
        </ellipse>
      </g>

      {/* Città sul globo */}
      <g clipPath="url(#qgc)">
        <g className="qconn" fill="none" stroke="#F97316" strokeOpacity="0.28">
          <line x1="440" y1="548" x2="395" y2="600" strokeWidth="0.7" />
          <line x1="440" y1="548" x2="299" y2="578" strokeWidth="0.6" />
          <line x1="440" y1="548" x2="527" y2="540" strokeWidth="0.5" />
          <line x1="527" y1="540" x2="583" y2="555" strokeWidth="0.5" />
          <line x1="395" y1="600" x2="260" y2="638" strokeWidth="0.6" />
          <line x1="299" y1="578" x2="239" y2="613" strokeWidth="0.5" />
        </g>
        <circle cx="440" cy="548" r="4.2" fill="#F97316" filter="url(#qgm)" className="qca" />
        <circle cx="527" cy="540" r="2.5" fill="#F97316" filter="url(#qgm)" className="qcb" />
        <circle cx="395" cy="600" r="3.1" fill="#F97316" filter="url(#qgm)" className="qcc" />
        <circle cx="299" cy="578" r="2.5" fill="#F97316" className="qcb" />
        <circle cx="583" cy="555" r="2.1" fill="#F97316" className="qca" />
        <circle cx="489" cy="624" r="2.8" fill="#FFE8D0" filter="url(#qgm)" className="qcc" />
        <circle cx="260" cy="638" r="2.5" fill="#F97316" filter="url(#qgm)" className="qca" />
        <circle r="3.9" fill="#FFE8D0" filter="url(#qgs)" opacity="0.9">
          <animateMotion dur="3.8s" repeatCount="indefinite" begin="3.0s"><mpath href="#qpp1" /></animateMotion>
        </circle>
        <circle r="2.5" fill="#F97316" filter="url(#qgs)" opacity="0.8">
          <animateMotion dur="3.8s" repeatCount="indefinite" begin="5.0s"><mpath href="#qpp2" /></animateMotion>
        </circle>
      </g>

      {/* GRU */}
      <g fill="none" stroke="#F97316" strokeLinecap="round" strokeLinejoin="round">
        <line x1="499" y1="295" x2="499" y2="554" strokeWidth="2.1" strokeOpacity="0.90" pathLength="1000" className="qtower-side" />
        <line x1="548" y1="295" x2="548" y2="554" strokeWidth="2.1" strokeOpacity="0.90" pathLength="1000" className="qtower-side" />
        <path className="qtower-detail" strokeWidth="1.05" strokeOpacity="0.60" d="M499,295 L548,327 M548,327 L499,360 M499,360 L548,392 M548,392 L499,424 M499,424 L548,457 M548,457 L499,489 M499,489 L548,521 M548,521 L499,554" />
        <path className="qtower-detail" strokeWidth="0.70" strokeOpacity="0.44" d="M499,327 L548,327 M499,360 L548,360 M499,392 L548,392 M499,424 L548,424 M499,457 L548,457 M499,489 L548,489 M499,521 L548,521" />
        <g className="qtower-foot">
          <line x1="475" y1="554" x2="572" y2="554" strokeWidth="2.8" strokeOpacity="0.88" />
          <line x1="478" y1="537" x2="499" y2="554" strokeWidth="1.4" strokeOpacity="0.65" />
          <line x1="569" y1="537" x2="548" y2="554" strokeWidth="1.4" strokeOpacity="0.65" />
        </g>
        <g className="qcabin">
          <rect x="489" y="277" width="70" height="25" stroke="#F97316" strokeWidth="1.5" strokeOpacity="0.88" />
          <line x1="489" y1="289" x2="559" y2="289" stroke="#F97316" strokeWidth="0.8" strokeOpacity="0.55" />
          <rect x="499" y="281" width="17" height="13" stroke="#F97316" strokeWidth="1.0" strokeOpacity="0.70" />
          <circle cx="559" cy="277" r="4.2" stroke="#F97316" strokeWidth="1.4" strokeOpacity="0.85" style={{ animation: 'qblink 2.6s ease-in-out 7s infinite' }} />
        </g>
        {/* JIB destro */}
        <line x1="523" y1="285" x2="1780" y2="289" strokeWidth="1.9" strokeOpacity="0.86" pathLength="1000" className="qjib-main" />
        <line x1="523" y1="320" x2="1780" y2="325" strokeWidth="1.7" strokeOpacity="0.76" pathLength="1000" className="qjib-main" />
        {/* Contro-jib sinistro */}
        <line x1="523" y1="285" x2="337" y2="289" strokeWidth="1.7" strokeOpacity="0.74" pathLength="1000" className="qjib-counter" />
        <line x1="523" y1="320" x2="337" y2="320" strokeWidth="1.4" strokeOpacity="0.58" pathLength="1000" className="qjib-counter" />
        {/* Cavi portanti */}
        <line x1="523" y1="281" x2="1780" y2="289" strokeWidth="1.3" strokeOpacity="0.46" pathLength="1000" className="qjib-cable" />
        <line x1="523" y1="281" x2="337"  y2="289" strokeWidth="1.3" strokeOpacity="0.46" pathLength="1000" className="qjib-cable" />
        {/* Traliccio jib */}
        <path className="qjib-detail" strokeWidth="0.98" strokeOpacity="0.54" d="M523,285 L588,325 M588,285 L652,325 M652,285 L717,325 M717,285 L782,325 M782,285 L847,325 M847,285 L911,325 M911,285 L976,325 M976,285 L1041,325 M1041,285 L1105,325 M1105,285 L1170,325 M1170,285 L1234,325 M1234,285 L1299,325 M1299,285 L1363,325 M1363,285 L1428,325 M1428,285 L1492,325 M1492,285 L1557,325 M1557,285 L1621,325 M1621,285 L1686,325 M1686,285 L1751,325 M1751,285 L1780,325" />
        <path className="qjib-detail" strokeWidth="0.63" strokeOpacity="0.38" d="M588,285 L588,325 M652,285 L652,325 M717,285 L717,325 M782,285 L782,325 M847,285 L847,325 M911,285 L911,325 M976,285 L976,325 M1041,285 L1041,325 M1105,285 L1105,325 M1170,285 L1170,325 M1234,285 L1234,325 M1299,285 L1299,325 M1363,285 L1363,325 M1428,285 L1428,325 M1492,285 L1492,325 M1557,285 L1557,325 M1621,285 L1621,325 M1686,285 L1686,325 M1751,285 L1751,325" />
        {/* Traliccio contro-jib */}
        <path className="qjib-detail" strokeWidth="0.98" strokeOpacity="0.48" d="M523,285 L458,325 M458,285 L393,325 M393,285 L337,325" />
        <path className="qjib-detail" strokeWidth="0.63" strokeOpacity="0.36" d="M458,285 L458,325 M393,285 L393,325" />
        {/* Contrappeso */}
        <rect x="312" y="289" width="34" height="25" stroke="#F97316" strokeWidth="1.8" strokeOpacity="0.85" className="qcweight" />
        {/* Fune verticale jib → carrucola */}
        <line x1="1738" y1="325" x2="1738" y2="489" strokeWidth="1.7" strokeOpacity="0.86" pathLength="1000" className="qhook-line" />
        {/* Carrucola + gancio */}
        <g className="qhook-body">
          <circle cx="1738" cy="509" r="22" stroke="#F97316" strokeWidth="2.5" strokeOpacity="0.92" />
          <circle cx="1738" cy="509" r="7"  stroke="#F97316" strokeWidth="1.4" strokeOpacity="0.72" />
          <path d="M1728,531 Q1718,562 1738,571 Q1758,562 1748,531" stroke="#F97316" strokeWidth="2.5" strokeLinecap="round" strokeOpacity="0.92" />
        </g>
      </g>

      {/* Q DI QUOTAN */}
      <circle cx="408" cy="344" r="211" fill="none" stroke="#F97316" strokeWidth="34" strokeOpacity="0.08" filter="url(#qfg)" pathLength="1000" className="qq-o" />
      <circle cx="408" cy="344" r="211" fill="none" stroke="#F97316" strokeWidth="15" strokeOpacity="0.38" filter="url(#qgm)" pathLength="1000" className="qq-m" />
      <circle cx="408" cy="344" r="211" fill="none" stroke="#F97316" strokeWidth="5.6" strokeOpacity="0.95" filter="url(#qgs)" pathLength="1000" className="qq-c" />
      <circle cx="408" cy="344" r="211" fill="none" stroke="#FFE8D0" strokeWidth="1.7" strokeOpacity="0.72" pathLength="1000" className="qq-f" />

      {/* CODA Q -> CARRUCOLA */}
      <path d="M557,494 C731,529 1200,510 1738,509" fill="none" stroke="#F97316" strokeWidth="25" strokeOpacity="0.07" strokeLinecap="round" filter="url(#qfg)" pathLength="1000" className="qt-o" />
      <path d="M557,494 C731,529 1200,510 1738,509" fill="none" stroke="#F97316" strokeWidth="11" strokeOpacity="0.36" strokeLinecap="round" filter="url(#qgm)" pathLength="1000" className="qt-m" />
      <path d="M557,494 C731,529 1200,510 1738,509" fill="none" stroke="#F97316" strokeWidth="4.9" strokeOpacity="0.93" strokeLinecap="round" filter="url(#qgs)" pathLength="1000" className="qt-c" />
      <path d="M557,494 C731,529 1200,510 1738,509" fill="none" stroke="#FFE8D0" strokeWidth="1.5" strokeOpacity="0.68" strokeLinecap="round" pathLength="1000" className="qt-f" />

      {/* FUNE verticale */}
      <line x1="1738" y1="571" x2="1738" y2="1167" stroke="#F97316" strokeWidth="22" strokeOpacity="0.06" strokeLinecap="round" filter="url(#qfg)" pathLength="1000" className="qr-o" />
      <line x1="1738" y1="571" x2="1738" y2="1167" stroke="#F97316" strokeWidth="4.5" strokeOpacity="0.90" strokeLinecap="round" filter="url(#qgs)" pathLength="1000" className="qr-c" />
      <line x1="1738" y1="571" x2="1738" y2="1167" stroke="#FFE8D0" strokeWidth="1.5" strokeOpacity="0.62" pathLength="1000" className="qr-f" />

      {/* Hot point cima Q */}
      <circle cx="408" cy="133" r="7.7" fill="#FFE0C0" filter="url(#qgm)" className="qlate" />

      {/* Scintille lungo la coda */}
      <g className="qlater">
        <circle cx="703"  cy="522" r="2.0" fill="#F97316"  opacity="0.65" filter="url(#qgs)" />
        <circle cx="980"  cy="513" r="1.4" fill="#FFE8D0"  opacity="0.50" />
        <circle cx="1250" cy="510" r="2.1" fill="#F97316"  opacity="0.60" filter="url(#qgs)" />
        <circle cx="1480" cy="509" r="1.3" fill="#F97316"  opacity="0.45" />
        <circle cx="1630" cy="509" r="1.7" fill="#FFE8D0"  opacity="0.40" />
      </g>
    </svg>
  );
}

window.HeroBgSVG = HeroBgSVG;