/* global React */
/* ==========================================================
   Complexity Gradient — interactive
   --------------------------------------------------------
   Drag a slider from "trivial skill" to "gnarly skill".
   Three curves on a score chart diverge as complexity grows:
     · DIY / alt tool (gray)  — degrades sharply
     · Base bake    (blue)    — holds to medium complexity
     · Pro bake     (pink)    — holds at the top
   This replaces "Base vs Pro" feature lists. The axis is how
   hard your skill is, not what's in the box.
   ========================================================== */

const { useState: useStateGR } = React;

// Curves as functions of complexity 0..1.
// Pro outperforms Base mostly at high complexity, by design.
function diyCurve(c)  { return 0.72 - 0.55 * Math.pow(c, 1.1); }
function baseCurve(c) { return 0.81 - 0.42 * Math.pow(c, 2.2); }
function proCurve(c)  { return 0.86 - 0.12 * Math.pow(c, 2.8); }

function curveToPath(fn, w = 800, h = 300, padX = 24, padY = 24) {
  const steps = 60;
  const pts = [];
  for (let i = 0; i <= steps; i++) {
    const c = i / steps;
    const y = fn(c);
    const x = padX + c * (w - padX * 2);
    const yy = padY + (1 - y) * (h - padY * 2);
    pts.push([x, yy]);
  }
  return 'M ' + pts.map(p => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' L ');
}

const CHART_W = 800;
const CHART_H = 300;
const PAD_X = 24;
const PAD_Y = 24;

function Gradient() {
  const [c, setC] = useStateGR(0.35);

  const diy  = diyCurve(c);
  const base = baseCurve(c);
  const pro  = proCurve(c);

  const playX = PAD_X + c * (CHART_W - PAD_X * 2);

  const examples = [
    'reply to an email',
    'triage a ticket',
    'plan a jira epic',
    'route a bug by owner',
    'write a PR review',
    'RCA a P0 incident',
  ];
  const exampleIdx = Math.min(examples.length - 1, Math.floor(c * examples.length));

  return (
    <section className="xp-scene">
      <div className="xp-scene-index"><span className="n">05</span> · base vs. pro, measured</div>
      <h2 className="xp-statement" style={{ maxWidth: '24ch' }}>
        <span className="dim">Base will lift any skill you throw at it.</span><br/>
        Pro is what you want <span className="accent">when it gets tough.</span>
      </h2>
      <p className="xp-statement-body">
        Drag the slider. As the skill gets harder, the curves separate. Pro is the tier that holds its line when your skill has real branching, real tools, and real edge cases.
      </p>

      <div className="xp-gradient">
        <div className="xp-gradient-chart">
          <svg viewBox={`0 0 ${CHART_W} ${CHART_H}`} preserveAspectRatio="none">
            {/* horizontal guides */}
            {[0.2, 0.4, 0.6, 0.8].map(v => (
              <line key={v}
                x1={PAD_X} x2={CHART_W - PAD_X}
                y1={PAD_Y + (1 - v) * (CHART_H - PAD_Y * 2)}
                y2={PAD_Y + (1 - v) * (CHART_H - PAD_Y * 2)}
                stroke="var(--border)" strokeWidth="0.5" vectorEffect="non-scaling-stroke" />
            ))}
            {/* DIY */}
            <path d={curveToPath(diyCurve, CHART_W, CHART_H, PAD_X, PAD_Y)}
              fill="none" stroke="var(--text-faint)" strokeWidth="1.2"
              strokeDasharray="3 3" vectorEffect="non-scaling-stroke" />
            {/* Base */}
            <path d={curveToPath(baseCurve, CHART_W, CHART_H, PAD_X, PAD_Y)}
              fill="none" stroke="var(--blue)" strokeWidth="1.6" vectorEffect="non-scaling-stroke" />
            {/* Pro */}
            <path d={curveToPath(proCurve, CHART_W, CHART_H, PAD_X, PAD_Y)}
              fill="none" stroke="var(--pink)" strokeWidth="1.6" vectorEffect="non-scaling-stroke" />

            {/* Playhead dots — one per curve at current c */}
            {[
              { y: diy,  color: 'var(--text-dim)' },
              { y: base, color: 'var(--blue)' },
              { y: pro,  color: 'var(--pink)' },
            ].map((d, i) => (
              <circle key={i}
                cx={playX}
                cy={PAD_Y + (1 - d.y) * (CHART_H - PAD_Y * 2)}
                r="3.5" fill={d.color}
                stroke="var(--bg)" strokeWidth="1.2" vectorEffect="non-scaling-stroke" />
            ))}
          </svg>

          <div className="xp-gradient-playhead" style={{ left: `calc(${c * 100}% )`, transform: 'translateX(-50%)' }} />

          <div className="xp-gradient-axis y-top">fit 1.00</div>
          <div className="xp-gradient-axis y-bot">fit 0.00</div>
        </div>

        <input
          className="xp-gradient-slider"
          type="range" min="0" max="1" step="0.001"
          value={c}
          onChange={e => setC(parseFloat(e.target.value))}
          aria-label="skill complexity"
        />
        <div className="xp-gradient-labels">
          <span>trivial · "{examples[0]}"</span>
          <span style={{ color: 'var(--text-dim)' }}>currently: {examples[exampleIdx]}</span>
          <span>gnarly · "{examples[examples.length - 1]}"</span>
        </div>

        <div className="xp-gradient-legend">
          <div className="xp-legend-cell">
            <div className="xp-legend-head">
              <span className="xp-legend-swatch" style={{ background: 'var(--text-dim)' }} />
              <span className="xp-legend-name">Hand-tuned / alt tool</span>
            </div>
            <div className="xp-legend-score">{diy.toFixed(2)}</div>
            <div className="xp-legend-meta">Reasonable at the easy end. Falls off once the skill has real branches.</div>
          </div>
          <div className="xp-legend-cell">
            <div className="xp-legend-head">
              <span className="xp-legend-swatch" style={{ background: 'var(--blue)' }} />
              <span className="xp-legend-name">SkillsCake Base</span>
            </div>
            <div className="xp-legend-score" style={{ color: 'var(--blue)' }}>{base.toFixed(2)}</div>
            <div className="xp-legend-meta">The right tier when your skill is one scope, one decision tree, a handful of rules.</div>
          </div>
          <div className="xp-legend-cell">
            <div className="xp-legend-head">
              <span className="xp-legend-swatch" style={{ background: 'var(--pink)' }} />
              <span className="xp-legend-name">SkillsCake Pro</span>
            </div>
            <div className="xp-legend-score" style={{ color: 'var(--pink)' }}>{pro.toFixed(2)}</div>
            <div className="xp-legend-meta">Holds up where the others fall off. Branching flows, tool schemas, progressive disclosure.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Gradient = Gradient;