// FOLGORE — Mechanical hero animation
// Pure SVG/CSS: animated pistons, gears, control cables, oscilloscope readout.
// Black canvas, white linework. Editorial industrial.

const { useEffect, useRef } = React;

function MechanicalHero({ enabled = true }){
  const wrapRef = useRef(null);

  useEffect(() => {
    // Mouse parallax for the whole rig
    const onMove = (e) => {
      if (!wrapRef.current) return;
      const x = (e.clientX / window.innerWidth - 0.5) * 14;
      const y = (e.clientY / window.innerHeight - 0.5) * 10;
      wrapRef.current.style.setProperty('--px', x + 'px');
      wrapRef.current.style.setProperty('--py', y + 'px');
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  if (!enabled){
    // Static fallback — still on-brand
    return (
      <div className="hero-static">
        <div className="hero-static-grid"></div>
      </div>
    );
  }

  return (
    <div className="mech-hero" ref={wrapRef}>
      <style>{`
        .mech-hero{
          position: absolute; inset: 0;
          overflow: hidden;
          background: var(--ink);
          --px: 0px; --py: 0px;
        }
        /* Subtle scanline + grid */
        .mech-hero::before{
          content:""; position:absolute; inset:0;
          background-image:
            linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          opacity: .55;
          pointer-events:none;
        }
        .mech-hero::after{
          content:""; position:absolute; inset:-2px;
          background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
          mix-blend-mode: overlay;
          animation: mech-flicker 6s linear infinite;
          pointer-events: none;
        }
        @keyframes mech-flicker{
          0%,100%{ opacity: .8; }
          47%{ opacity: .85; }
          48%{ opacity: .55; }
          50%{ opacity: .9; }
          51%{ opacity: .75; }
        }
        .mech-svg{
          position: absolute; inset: 0; width: 100%; height: 100%;
          transform: translate3d(var(--px), var(--py), 0);
          transition: transform .18s cubic-bezier(.2,0,.2,1);
        }
        /* Animation primitives */
        @keyframes spin-cw{ to{ transform: rotate(360deg);} }
        @keyframes spin-ccw{ to{ transform: rotate(-360deg);} }
        @keyframes piston-stroke{
          0%, 100% { transform: translateX(0); }
          50%      { transform: translateX(46px); }
        }
        @keyframes piston-stroke-r{
          0%, 100% { transform: translateX(0); }
          50%      { transform: translateX(-46px); }
        }
        @keyframes valve-pulse{
          0%,100%{ transform: translateY(0); }
          50%{ transform: translateY(8px); }
        }
        @keyframes signal-sweep{
          0%{ stroke-dashoffset: 0; }
          100%{ stroke-dashoffset: -1200; }
        }
        @keyframes value-tick{
          0%,100%{ opacity: 1; }
          47%,53%{ opacity: 0.4; }
        }
        @keyframes hairline-grow{
          from{ stroke-dashoffset: 1000; }
          to  { stroke-dashoffset: 0; }
        }

        /* Wire each animated group */
        .gear-lg{ transform-origin: 980px 540px; animation: spin-cw 18s linear infinite; animation-duration: calc(18s * var(--speed)); }
        .gear-md{ transform-origin: 760px 660px; animation: spin-ccw 11s linear infinite; animation-duration: calc(11s * var(--speed)); }
        .gear-sm{ transform-origin: 640px 540px; animation: spin-cw 7s linear infinite; animation-duration: calc(7s * var(--speed)); }

        .piston-l{ animation: piston-stroke 2.4s cubic-bezier(.5,0,.5,1) infinite; animation-duration: calc(2.4s * var(--speed)); }
        .piston-r{ animation: piston-stroke-r 2.4s .3s cubic-bezier(.5,0,.5,1) infinite; animation-duration: calc(2.4s * var(--speed)); }

        .valve{ animation: valve-pulse 1.6s ease-in-out infinite; animation-duration: calc(1.6s * var(--speed)); }
        .valve-2{ animation: valve-pulse 1.6s .8s ease-in-out infinite; animation-duration: calc(1.6s * var(--speed)); }

        .signal{
          stroke-dasharray: 200 1000;
          animation: signal-sweep 4s linear infinite;
          animation-duration: calc(4s * var(--speed));
        }
        .grow-line{
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: hairline-grow 1.6s .4s cubic-bezier(.2,0,.2,1) forwards;
        }

        .tick{ animation: value-tick 0.9s steps(2) infinite; animation-duration: calc(0.9s * var(--speed)); }

        text.label{ font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; fill: rgba(250,250,250,0.5); }
        text.value{ font-family: 'Inter', sans-serif; font-weight: 200; font-size: 38px; letter-spacing: -0.02em; fill: #FAFAFA; }
        text.serial{ font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: 0.18em; fill: rgba(250,250,250,0.45); }
      `}</style>

      <svg className="mech-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="cross-tex" width="6" height="6" patternUnits="userSpaceOnUse">
            <path d="M0 3 L6 3 M3 0 L3 6" stroke="rgba(250,250,250,0.06)" strokeWidth="0.5"/>
          </pattern>
          <linearGradient id="vfade" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#FAFAFA" stopOpacity="0.0"/>
            <stop offset=".5" stopColor="#FAFAFA" stopOpacity="0.18"/>
            <stop offset="1" stopColor="#FAFAFA" stopOpacity="0.0"/>
          </linearGradient>
        </defs>

        {/* Frame markings — corners */}
        <g stroke="rgba(250,250,250,0.35)" strokeWidth="1" fill="none">
          <path d="M48 48 L48 96 M48 48 L96 48"/>
          <path d="M1872 48 L1872 96 M1872 48 L1824 48"/>
          <path d="M48 1032 L48 984 M48 1032 L96 1032"/>
          <path d="M1872 1032 L1872 984 M1872 1032 L1824 1032"/>
        </g>

        {/* Crosshair behind rig */}
        <g stroke="rgba(250,250,250,0.10)" strokeWidth="1">
          <line x1="0" y1="540" x2="1920" y2="540"/>
          <line x1="960" y1="0" x2="960" y2="1080"/>
          <circle cx="960" cy="540" r="280" fill="none"/>
          <circle cx="960" cy="540" r="380" fill="none" strokeDasharray="2 6"/>
        </g>

        {/* LEFT BLOCK — piston cylinder */}
        <g>
          <rect x="180" y="420" width="380" height="160" fill="url(#cross-tex)" stroke="rgba(250,250,250,0.4)" strokeWidth="1"/>
          <text className="label" x="180" y="408">CYL · 01 / FRZ-A</text>
          <text className="serial" x="540" y="408" textAnchor="end">SN.04471</text>
          {/* Cylinder bore */}
          <rect x="200" y="470" width="320" height="60" fill="#0A0A0A" stroke="rgba(250,250,250,0.5)"/>
          {/* Piston */}
          <g className="piston-l">
            <rect x="210" y="476" width="56" height="48" fill="#FAFAFA"/>
            <rect x="266" y="490" width="220" height="20" fill="rgba(250,250,250,0.85)"/>
            <circle cx="486" cy="500" r="10" fill="#FAFAFA"/>
          </g>
          {/* Connecting rod / crank */}
          <line x1="486" y1="500" x2="640" y2="540" stroke="rgba(250,250,250,0.55)" strokeWidth="1.5"/>
          <line x1="180" y1="600" x2="560" y2="600" stroke="rgba(250,250,250,0.3)"/>
          <text className="label" x="180" y="618">STROKE 92mm</text>
          <text className="label" x="560" y="618" textAnchor="end">3200 rpm</text>
        </g>

        {/* RIGHT BLOCK — mirror piston */}
        <g>
          <rect x="1360" y="420" width="380" height="160" fill="url(#cross-tex)" stroke="rgba(250,250,250,0.4)" strokeWidth="1"/>
          <text className="label" x="1360" y="408">CYL · 02 / FRZ-B</text>
          <text className="serial" x="1740" y="408" textAnchor="end">SN.04472</text>
          <rect x="1400" y="470" width="320" height="60" fill="#0A0A0A" stroke="rgba(250,250,250,0.5)"/>
          <g className="piston-r">
            <rect x="1654" y="476" width="56" height="48" fill="#FAFAFA"/>
            <rect x="1434" y="490" width="220" height="20" fill="rgba(250,250,250,0.85)"/>
            <circle cx="1434" cy="500" r="10" fill="#FAFAFA"/>
          </g>
          <line x1="1434" y1="500" x2="1280" y2="540" stroke="rgba(250,250,250,0.55)" strokeWidth="1.5"/>
          <line x1="1360" y1="600" x2="1740" y2="600" stroke="rgba(250,250,250,0.3)"/>
          <text className="label" x="1360" y="618">STROKE 92mm</text>
          <text className="label" x="1740" y="618" textAnchor="end">3200 rpm</text>
        </g>

        {/* CENTER — gear assembly */}
        <g>
          {/* Big gear */}
          <g className="gear-lg">
            <circle cx="980" cy="540" r="200" fill="none" stroke="rgba(250,250,250,0.5)"/>
            <circle cx="980" cy="540" r="160" fill="none" stroke="rgba(250,250,250,0.25)"/>
            <circle cx="980" cy="540" r="14" fill="#FAFAFA"/>
            {/* teeth */}
            {Array.from({length: 36}).map((_, i) => {
              const a = (i * 360 / 36) * Math.PI / 180;
              const x1 = 980 + Math.cos(a) * 200;
              const y1 = 540 + Math.sin(a) * 200;
              const x2 = 980 + Math.cos(a) * 218;
              const y2 = 540 + Math.sin(a) * 218;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(250,250,250,0.6)" strokeWidth="1.2"/>;
            })}
            {/* spokes */}
            <line x1="780" y1="540" x2="1180" y2="540" stroke="rgba(250,250,250,0.3)" strokeWidth="0.8"/>
            <line x1="980" y1="340" x2="980" y2="740" stroke="rgba(250,250,250,0.3)" strokeWidth="0.8"/>
            <line x1="838" y1="398" x2="1122" y2="682" stroke="rgba(250,250,250,0.3)" strokeWidth="0.8"/>
            <line x1="1122" y1="398" x2="838" y2="682" stroke="rgba(250,250,250,0.3)" strokeWidth="0.8"/>
            {/* Reference notch — shows rotation */}
            <rect x="975" y="340" width="10" height="22" fill="#FAFAFA"/>
          </g>
          {/* Smaller gear top-left meshing */}
          <g className="gear-sm">
            <circle cx="640" cy="540" r="80" fill="none" stroke="rgba(250,250,250,0.45)"/>
            <circle cx="640" cy="540" r="58" fill="none" stroke="rgba(250,250,250,0.22)"/>
            <circle cx="640" cy="540" r="6" fill="#FAFAFA"/>
            {Array.from({length: 24}).map((_, i) => {
              const a = (i * 360 / 24) * Math.PI / 180;
              const x1 = 640 + Math.cos(a) * 80;
              const y1 = 540 + Math.sin(a) * 80;
              const x2 = 640 + Math.cos(a) * 92;
              const y2 = 540 + Math.sin(a) * 92;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(250,250,250,0.55)" strokeWidth="1"/>;
            })}
            <rect x="636" y="468" width="8" height="14" fill="#FAFAFA"/>
          </g>
          {/* Smaller gear bottom-right */}
          <g className="gear-md">
            <circle cx="1280" cy="660" r="100" fill="none" stroke="rgba(250,250,250,0.45)"/>
            <circle cx="1280" cy="660" r="74" fill="none" stroke="rgba(250,250,250,0.22)"/>
            <circle cx="1280" cy="660" r="8" fill="#FAFAFA"/>
            {Array.from({length: 28}).map((_, i) => {
              const a = (i * 360 / 28) * Math.PI / 180;
              const x1 = 1280 + Math.cos(a) * 100;
              const y1 = 660 + Math.sin(a) * 100;
              const x2 = 1280 + Math.cos(a) * 114;
              const y2 = 660 + Math.sin(a) * 114;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(250,250,250,0.55)" strokeWidth="1"/>;
            })}
            <rect x="1276" y="568" width="8" height="18" fill="#FAFAFA"/>
          </g>
        </g>

        {/* Top — control cables / signal lines */}
        <g fill="none">
          <path d="M 0 180 C 480 180, 480 240, 960 240 S 1440 300, 1920 300"
                stroke="rgba(250,250,250,0.55)" strokeWidth="1.2" />
          <path d="M 0 180 C 480 180, 480 240, 960 240 S 1440 300, 1920 300"
                stroke="#FAFAFA" strokeWidth="1.5" className="signal" />
          <path d="M 0 240 C 480 240, 480 180, 960 180 S 1440 240, 1920 240"
                stroke="rgba(250,250,250,0.25)" strokeWidth="1" />
          {/* Connector caps */}
          <rect x="0" y="174" width="14" height="12" fill="#FAFAFA"/>
          <rect x="1906" y="294" width="14" height="12" fill="#FAFAFA"/>
        </g>

        {/* Bottom — control cables */}
        <g fill="none">
          <path d="M 0 880 C 480 880, 480 820, 960 820 S 1440 760, 1920 760"
                stroke="rgba(250,250,250,0.45)" strokeWidth="1.2" />
          <path d="M 0 880 C 480 880, 480 820, 960 820 S 1440 760, 1920 760"
                stroke="#FAFAFA" strokeWidth="1.5" className="signal" style={{ animationDelay: '-2s' }}/>
          <rect x="0" y="874" width="14" height="12" fill="#FAFAFA"/>
          <rect x="1906" y="754" width="14" height="12" fill="#FAFAFA"/>
        </g>

        {/* Top-left telemetry block */}
        <g>
          <line x1="60" y1="160" x2="380" y2="160" stroke="rgba(250,250,250,0.5)" className="grow-line"/>
          <text className="label" x="60" y="148">OUTPUT · KW</text>
          <text className="value tick" x="60" y="200">3.84</text>
          <text className="label" x="180" y="200">/ NORM</text>
        </g>

        {/* Top-right telemetry */}
        <g>
          <line x1="1540" y1="160" x2="1860" y2="160" stroke="rgba(250,250,250,0.5)" className="grow-line"/>
          <text className="label" x="1860" y="148" textAnchor="end">TORQUE · NM</text>
          <text className="value tick" x="1860" y="200" textAnchor="end">412</text>
          <text className="label" x="1736" y="200" textAnchor="end">/ PEAK</text>
        </g>

        {/* Bottom-left telemetry */}
        <g>
          <line x1="60" y1="940" x2="380" y2="940" stroke="rgba(250,250,250,0.5)" className="grow-line"/>
          <text className="label" x="60" y="930">CYCLES · 24H</text>
          <text className="value tick" x="60" y="980">81 449</text>
        </g>

        {/* Bottom-right telemetry — running clock */}
        <g>
          <line x1="1540" y1="940" x2="1860" y2="940" stroke="rgba(250,250,250,0.5)" className="grow-line"/>
          <text className="label" x="1860" y="930" textAnchor="end">UPTIME · H</text>
          <text className="value tick" x="1860" y="980" textAnchor="end">14 982</text>
        </g>

        {/* Center oscilloscope strip */}
        <g>
          <rect x="660" y="800" width="600" height="60" fill="rgba(255,255,255,0.02)" stroke="rgba(250,250,250,0.18)"/>
          <text className="label" x="660" y="788">SIGNAL · CH-A</text>
          <text className="serial" x="1260" y="788" textAnchor="end">FREQ 1.40 KHZ</text>
          <path d="M 660 830
                   L 690 830 L 700 815 L 720 845 L 740 815 L 760 845 L 780 830
                   L 820 830 L 830 810 L 850 850 L 870 810 L 890 850 L 910 830
                   L 950 830 L 960 815 L 980 845 L 1000 815 L 1020 845 L 1040 830
                   L 1080 830 L 1090 810 L 1110 850 L 1130 810 L 1150 850 L 1170 830
                   L 1260 830"
                fill="none" stroke="#FAFAFA" strokeWidth="1.2"/>
        </g>

        {/* Center title-stamp area (kept low-density so headline above can sit clean) */}
      </svg>

      {/* Decorative HUD outside SVG (HTML for crisp text) */}
      <div className="hero-hud">
        <style>{`
          .hero-hud{ position:absolute; inset:0; pointer-events:none; }
          .hud-pill{
            position:absolute; left: 50%; transform: translateX(-50%);
            top: 140px;
            display:flex; gap: 28px; align-items:center;
            font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
            color: rgba(250,250,250,0.7);
          }
          .hud-pill .seg{ display:flex; gap: 8px; align-items:center; }
          .hud-pill .seg b{ color: #FAFAFA; font-weight: 500; }
          .hud-pill .div{ width: 24px; height: 1px; background: rgba(250,250,250,0.4); }
        `}</style>
        <div className="hud-pill">
          <span className="seg"><b>01</b> ENGINE OK</span>
          <span className="div"></span>
          <span className="seg"><b>02</b> CALIBRATED</span>
          <span className="div"></span>
          <span className="seg"><b>03</b> LIVE FEED</span>
        </div>
      </div>
    </div>
  );
}

window.MechanicalHero = MechanicalHero;
