// ── Evolution: sticky scrubber + dynamic stage portrait ──
function Evolution() {
  const [active, setActive] = React.useState(4); // start on Junior
  const stage = STAGES[active];

  const meterPct = React.useMemo(() => {
    const max = STAGES[STAGES.length - 1].tokens;
    if (stage.tokens === 0) return 2;
    return Math.min(100, Math.max(2, Math.log10(stage.tokens + 1) / Math.log10(max + 1) * 100));
  }, [stage]);

  return (
    <section className="evo" id="evolution">
      <div className="wrap">
        <div className="evo-header">
          <div>
            <span className="eyebrow">PART ONE — The Familiar</span>
            <h2 className="h-section" style={{marginTop:'24px'}}>
              Twelve stages.<br/>
              <em>One growing eye.</em>
            </h2>
          </div>
          <p className="lede" style={{maxWidth:'34ch'}}>
            Toki begins as a cyan-veined egg and grows with every token you spend. Scrub the timeline. Watch it evolve.
          </p>
        </div>

        <div className="evo-stage">
          <div className="evo-portrait">
            <div className="evo-portrait-meta">
              <span className="stage-id">STAGE {String(stage.id).padStart(2,'0')} / 12</span>
              <span>{formatTokensFull(stage.tokens)} TOK</span>
            </div>
            <img key={stage.slug} src={STAGE_IMG(stage.slug)} alt={`Toki at stage ${stage.id}: ${stage.name}`} />
          </div>

          <div className="evo-info">
            <div className="evo-info-stage">FORM {String(stage.id).padStart(2,'0')} · {stage.name.toUpperCase()}</div>
            <h3 className="evo-name">
              {stage.name === 'Mythic' || stage.name === 'Legend' ? <em>{stage.name}</em> : stage.name}
            </h3>
            <p className="evo-quote">"{stage.quote}"</p>

            <div className="evo-meter">
              <div className="evo-meter-row">
                <span>Threshold</span>
                <span className="evo-meter-num">{formatTokensFull(stage.tokens)} tokens</span>
              </div>
              <div className="evo-meter-bar">
                <div className="evo-meter-fill" style={{width: `${meterPct}%`}}></div>
              </div>
              <div className="evo-meter-row">
                <span>{active === 0 ? 'BEGIN' : 'PROGRESS'}</span>
                <span>{Math.round(meterPct)}% of MYTHIC</span>
              </div>
            </div>
          </div>
        </div>

        <div className="scrubber">
          <div className="scrubber-head">
            <span>↔  SCRUB TO EVOLVE</span>
            <span>{stage.name} · {formatTokens(stage.tokens)} tokens</span>
          </div>
          <div className="scrubber-track">
            {STAGES.map((s, i) => (
              <button
                key={s.id}
                className={`scrub-tick ${i === active ? 'active' : i < active ? 'passed' : ''}`}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
              >
                <span className="scrub-num">{String(s.id).padStart(2,'0')}</span>
                <span className="scrub-name">{s.name}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Evolution = Evolution;