/* eslint-disable */
/* global React, Reveal, useInView, prefersReducedMotion */

function DynoGraph() {
  const [chartRef, inView] = useInView({ threshold: 0.3 });
  const draw = inView || prefersReducedMotion;

  // Chart geometry
  const W = 720, H = 380;
  const padL = 56, padR = 72, padT = 24, padB = 48;
  const plotW = W - padL - padR;
  const plotH = H - padT - padB;
  const rpmMin = 2400, rpmMax = 7300;
  const xAt = (rpm) => padL + ((rpm - rpmMin) / (rpmMax - rpmMin)) * plotW;
  const yAt = (val, max) => padT + plotH - (val / max) * plotH;

  // Actual dyno data — Platinum S15, "Medium Boost Setting 2"
  // 14-Sep-2023 · Operator: Spencer · E85 · Turbo G35-1050
  // Peak Power 537.9 kW @ 7,064 RPM · Peak Torque 820 Nm @ 5,572 RPM
  const powerMax = 560;
  const torqueMax = 900;

  const powerPts = [
    [2400, 130], [2600, 140], [2800, 150], [3000, 158], [3200, 168],
    [3400, 178], [3600, 190], [3800, 202], [4000, 216], [4200, 232],
    [4400, 252], [4600, 282], [4800, 312], [5000, 340], [5200, 362],
    [5400, 378], [5600, 390], [5800, 414], [6000, 434], [6200, 454],
    [6400, 472], [6600, 490], [6800, 512], [7000, 532], [7064, 538],
    [7160, 528], [7250, 510],
  ];
  const torquePts = [
    [2400, 442], [2600, 426], [2800, 422], [3000, 426], [3200, 436],
    [3400, 456], [3600, 476], [3800, 502], [4000, 530], [4200, 572],
    [4400, 614], [4600, 668], [4800, 706], [5000, 746], [5200, 778],
    [5400, 806], [5572, 820], [5800, 816], [6000, 814], [6200, 802],
    [6400, 788], [6600, 768], [6800, 740], [7000, 720], [7160, 686],
    [7250, 642],
  ];

  const toPath = (pts, max) => pts.map(([r, v], i) => `${i === 0 ? 'M' : 'L'} ${xAt(r).toFixed(1)} ${yAt(v, max).toFixed(1)}`).join(' ');
  const powerPath = toPath(powerPts, powerMax);
  const torquePath = toPath(torquePts, torqueMax);

  // Approximate path lengths for stroke-dashoffset
  const powerLen = 1600;
  const torqueLen = 1600;

  return (
    <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="dyno__grid">
          <Reveal>
            <div className="dyno__copy">
              <hr className="hr-gold" />
              <div className="eyebrow-row" style={{ marginTop: 8, marginBottom: 8 }}>
                <span className="eyebrow">Numbers</span>
              </div>
              <h2>Numbers <span className="gold">don't lie.</span></h2>
              <p>
                Every tune is verified on our in-house dyno. You leave with a printed
                graph with all the details — exactly what the car made on the day. No
                estimates, no fudged figures, no marketing graphs.
              </p>
              <p style={{ marginTop: 4 }}>
                Curious what yours is making? Drop it in for a power run — no tune
                required, just the numbers.
              </p>
              <dl className="dyno__results">
                <div className="dyno__result"><dt>Peak Power</dt><dd>537.9<span style={{ fontSize: '0.5em', color: 'var(--fg-3)', marginLeft: 6 }}>kW</span></dd></div>
                <div className="dyno__result"><dt>Peak Torque</dt><dd>820<span style={{ fontSize: '0.5em', color: 'var(--fg-3)', marginLeft: 6 }}>Nm</span></dd></div>
                <div className="dyno__result"><dt>RPM @ Power</dt><dd>7,064</dd></div>
                <div className="dyno__result"><dt>RPM @ Torque</dt><dd>5,572</dd></div>
              </dl>
            </div>
          </Reveal>

          <Reveal delay={180}>
            <div className="dyno__chart">
              <div className="dyno__chart__head">
                <span className="dyno__chart__title">Dyno Pull · 29°C · 1014 hPa · Cor'd SAE J607</span>
                <div className="dyno__legend">
                  <span className="dyno__legend__item"><span className="dyno__legend__swatch" style={{ background: 'var(--gold)' }}></span>Power (kW)</span>
                  <span className="dyno__legend__item"><span className="dyno__legend__swatch" style={{ background: '#9FB85A' }}></span>Torque (Nm)</span>
                </div>
              </div>

              <svg ref={chartRef} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet">
                {/* Grid */}
                <g opacity="0.18">
                  {[0, 0.2, 0.4, 0.6, 0.8, 1].map((f, i) => {
                    const y = padT + plotH - f * plotH;
                    return <line key={'gh' + i} x1={padL} x2={W - padR} y1={y} y2={y} stroke="var(--line)" strokeWidth="1" />;
                  })}
                  {[3000, 4000, 5000, 6000, 7000].map((r) => (
                    <line key={'gv' + r} x1={xAt(r)} x2={xAt(r)} y1={padT} y2={H - padB} stroke="var(--line)" strokeWidth="1" />
                  ))}
                </g>

                {/* Axes */}
                <line x1={padL} x2={padL} y1={padT} y2={H - padB} stroke="var(--line-strong)" strokeWidth="1" />
                <line x1={W - padR} x2={W - padR} y1={padT} y2={H - padB} stroke="var(--line-strong)" strokeWidth="1" opacity="0.6" />
                <line x1={padL} x2={W - padR} y1={H - padB} y2={H - padB} stroke="var(--line-strong)" strokeWidth="1" />

                {/* X labels (engine RPM) */}
                {[3000, 4000, 5000, 6000, 7000].map((r) => (
                  <text key={'xl' + r} x={xAt(r)} y={H - padB + 20} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--fg-3)">{(r / 1000) + 'k'}</text>
                ))}
                <text x={(padL + (W - padR)) / 2} y={H - 6} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--fg-4)" letterSpacing="2">ENGINE RPM</text>

                {/* Y left labels (kW) */}
                {[0, 100, 200, 300, 400, 500].map((v) => (
                  <text key={'yp' + v} x={padL - 10} y={yAt(v, powerMax) + 3} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="var(--fg-3)">{v}</text>
                ))}
                <text x={padL - 38} y={padT + plotH / 2} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--gold)" letterSpacing="2" transform={`rotate(-90 ${padL - 38} ${padT + plotH / 2})`}>kW</text>

                {/* Y right labels (Nm) */}
                {[0, 200, 400, 600, 800].map((v) => (
                  <text key={'yt' + v} x={W - padR + 10} y={yAt(v, torqueMax) + 3} textAnchor="start" fontFamily="JetBrains Mono" fontSize="10" fill="var(--fg-3)">{v}</text>
                ))}
                <text x={W - padR + 44} y={padT + plotH / 2} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#9FB85A" letterSpacing="2" transform={`rotate(90 ${W - padR + 44} ${padT + plotH / 2})`}>Nm</text>

                {/* Torque curve */}
                <path
                  d={torquePath}
                  stroke="#9FB85A"
                  strokeWidth="2"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeDasharray={torqueLen}
                  strokeDashoffset={draw ? 0 : torqueLen}
                  style={{ transition: 'stroke-dashoffset 2400ms cubic-bezier(0.65,0,0.35,1) 200ms' }}
                  opacity="0.85"
                />

                {/* Power curve */}
                <path
                  d={powerPath}
                  stroke="var(--gold)"
                  strokeWidth="2.5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeDasharray={powerLen}
                  strokeDashoffset={draw ? 0 : powerLen}
                  style={{ transition: 'stroke-dashoffset 2400ms cubic-bezier(0.65,0,0.35,1) 400ms' }}
                />

                {/* Peak power marker (gold) */}
                <g
                  opacity={draw ? 1 : 0}
                  style={{ transition: 'opacity 600ms 2400ms' }}
                >
                  <circle cx={xAt(7064)} cy={yAt(538, powerMax)} r="4" fill="var(--gold)" />
                  <line x1={xAt(7064)} x2={xAt(7064)} y1={yAt(538, powerMax)} y2={padT} stroke="var(--gold)" strokeWidth="1" strokeDasharray="2 3" opacity="0.5" />
                  <text x={xAt(7064) - 10} y={yAt(538, powerMax) - 8} textAnchor="end" fontFamily="JetBrains Mono" fontSize="11" fill="var(--gold)" letterSpacing="1">537.9 kW</text>
                  <text x={xAt(7064) - 10} y={yAt(538, powerMax) + 6} textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-3)" letterSpacing="1">@ 7,064 RPM</text>
                </g>

                {/* Peak torque marker (olive) */}
                <g
                  opacity={draw ? 1 : 0}
                  style={{ transition: 'opacity 600ms 2600ms' }}
                >
                  <circle cx={xAt(5572)} cy={yAt(820, torqueMax)} r="4" fill="#9FB85A" />
                  <line x1={xAt(5572)} x2={xAt(5572)} y1={yAt(820, torqueMax)} y2={H - padB} stroke="#9FB85A" strokeWidth="1" strokeDasharray="2 3" opacity="0.5" />
                  <text x={xAt(5572) + 8} y={yAt(820, torqueMax) - 6} fontFamily="JetBrains Mono" fontSize="11" fill="#9FB85A" letterSpacing="1">820 Nm</text>
                  <text x={xAt(5572) + 8} y={yAt(820, torqueMax) + 8} fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-3)" letterSpacing="1">@ 5,572 RPM</text>
                </g>
              </svg>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.DynoGraph = DynoGraph;