/* global React, ReactDOM */
// eAi.OS · Assessment quiz + results app

const { useState, useEffect, useMemo, useRef } = React;

const STORAGE_KEY = 'eaios.assess.v1';

function loadState() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) { return null; }
}
function saveState(s) {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch (e) {}
}

function axisFor(id) {
  return window.QUIZ_AXES.find(a => a.id === id);
}

function computeScores(answers) {
  const byAxis = {};
  for (const a of window.QUIZ_AXES) byAxis[a.id] = [];
  window.QUIZ_QUESTIONS.forEach((q, i) => {
    const v = answers[i];
    if (v) byAxis[q.axis].push(v);
  });
  const scores = {};
  for (const a of window.QUIZ_AXES) {
    const arr = byAxis[a.id];
    scores[a.id] = arr.length ? (arr.reduce((s, v) => s + v, 0) / arr.length) : 0;
  }
  const all = Object.values(answers).filter(Boolean);
  const overall = all.length ? all.reduce((s, v) => s + v, 0) / all.length : 0;
  return { scores, overall };
}

function dangerAxes(scores) {
  const sorted = Object.entries(scores).sort((a, b) => a[1] - b[1]);
  return new Set(sorted.slice(0, 2).map(([id]) => id));
}

// =====================================================================
// INTRO
// =====================================================================
function RadarTeaser() {
  const size = 260;
  const cx = size / 2, cy = size / 2, r = 100;
  const n = 5;
  const angleFor = (i) => -Math.PI / 2 + (i * 2 * Math.PI) / n;
  const point = (i, v) => [cx + (v / 5) * r * Math.cos(angleFor(i)), cy + (v / 5) * r * Math.sin(angleFor(i))];
  const ring = (val) => Array.from({ length: n }, (_, i) => point(i, val).join(',')).join(' ');
  // sample "you" shape for the teaser
  const youVals = [3.4, 2.8, 3.6, 2.1, 2.9];
  const youPts = youVals.map((v, i) => point(i, v).join(',')).join(' ');

  return (
    React.createElement('div', { className: 'radar-teaser' },
      React.createElement('svg', {
        viewBox: `0 0 ${size} ${size}`, className: 'radar-teaser-svg', 'aria-hidden': 'true'
      },
        [1, 2, 3, 4, 5].map(v =>
          React.createElement('polygon', {
            key: 'r' + v,
            className: 'rt-ring' + (v === 5 ? ' outer' : ''),
            points: ring(v),
          })
        ),
        Array.from({ length: n }, (_, i) => {
          const [x, y] = point(i, 5);
          return React.createElement('line', { key: 'l' + i, className: 'rt-axis', x1: cx, y1: cy, x2: x, y2: y });
        }),
        React.createElement('polygon', { className: 'rt-ref', points: ring(4) }),
        React.createElement('polygon', { className: 'rt-you', points: youPts }),
        youVals.map((v, i) => {
          const [x, y] = point(i, v);
          return React.createElement('circle', { key: 'd' + i, className: 'rt-dot', cx: x, cy: y, r: 3 });
        }),
        React.createElement('circle', { cx, cy, r: 15, fill: 'rgba(103,232,249,0.14)', stroke: 'var(--sig-kernel)', strokeWidth: 1 }),
        React.createElement('text', { x: cx, y: cy + 3.5, textAnchor: 'middle', style: { fill: 'var(--sig-kernel)', font: '500 8px var(--font-mono)', letterSpacing: '0.12em' } }, 'CP')
      ),
      React.createElement('div', { className: 'radar-teaser-cap' },
        React.createElement('span', { className: 'k' }, 'EXAMPLE RADAR'),
        React.createElement('span', null, 'Your shape will look like this, but specific to you.')
      )
    )
  );
}

function Intro({ onBegin, hasInProgress, onResume, answeredCount, total }) {
  const pct = total ? Math.round((answeredCount / total) * 100) : 0;
  // Sample question: pick a representative question (governance is most resonant)
  const sampleQ = window.QUIZ_QUESTIONS.find(q => q.axis === 'governance') || window.QUIZ_QUESTIONS[0];
  const sampleAxis = axisFor(sampleQ.axis);
  // Count questions per axis
  const countsByAxis = {};
  window.QUIZ_QUESTIONS.forEach(q => { countsByAxis[q.axis] = (countsByAxis[q.axis] || 0) + 1; });

  return (
    React.createElement('section', { className: 'assess-intro', 'data-screen-label': 'Intro' },
      React.createElement('div', { className: 'assess-intro-bg' }),
      React.createElement('div', { className: 'assess-intro-bloom' }),

      // HERO
      React.createElement('div', { className: 'assess-intro-inner' },
        React.createElement('div', { className: 'intro-l' },
          React.createElement('div', { className: 'intro-eyebrow' },
            React.createElement('span', { className: 'dot' }),
            'Maturity assessment · 20 questions · ~8 minutes'
          ),
          React.createElement('h1', null,
            'Where will your AI program ',
            React.createElement('span', { className: 'em' }, 'actually break?')
          ),
          React.createElement('p', { className: 'lead' },
            'Most enterprises score themselves at L3. Most actually live at 2.1. This 8-minute diagnostic plots your eAi.OS radar across the five layer axes, with the Control Plane at the center, then generates a 90-day plan from your two lowest gaps.'
          ),
          React.createElement('ul', { className: 'intro-reassure' },
            React.createElement('li', null, React.createElement('span', { className: 'tk' }, '✓'), 'See your full results without signing up'),
            React.createElement('li', null, React.createElement('span', { className: 'tk' }, '✓'), 'Auto-saves in your browser as you go'),
            React.createElement('li', null, React.createElement('span', { className: 'tk' }, '✓'), 'PDF report is email-gated and optional')
          ),
          React.createElement('div', { className: 'intro-cta' },
            hasInProgress
              ? React.createElement(React.Fragment, null,
                  React.createElement('button', { className: 'btn btn-primary btn-lg', onClick: onResume },
                    `Resume (${pct}% done) `, React.createElement('span', { className: 'arrow' }, '→')),
                  React.createElement('button', { className: 'btn btn-ghost', onClick: onBegin }, 'Start fresh')
                )
              : React.createElement('button', { className: 'btn btn-primary btn-lg', onClick: onBegin },
                  'Begin the assessment ', React.createElement('span', { className: 'arrow' }, '→'))
          ),
          React.createElement('div', { className: 'intro-cta-meta' },
            React.createElement('span', null, 'Mouse or keyboard'),
            React.createElement('span', { className: 'sep' }, '·'),
            React.createElement('span', null, 'Stop anytime; your place is saved'),
            React.createElement('span', { className: 'sep' }, '·'),
            React.createElement('span', null, 'No login')
          )
        ),

        React.createElement('div', { className: 'intro-r' },
          React.createElement(RadarTeaser, null),
          React.createElement('div', { className: 'assess-intro-meta' },
            React.createElement('div', { className: 'row' }, React.createElement('span', null, 'AXES'), React.createElement('span', { className: 'v' }, '5 + CP')),
            React.createElement('div', { className: 'row' }, React.createElement('span', null, 'QUESTIONS'), React.createElement('span', { className: 'v' }, '20')),
            React.createElement('div', { className: 'row' }, React.createElement('span', null, 'TIME'), React.createElement('span', { className: 'v' }, '~8 MIN')),
            React.createElement('div', { className: 'row' }, React.createElement('span', null, 'OUTPUT'), React.createElement('span', { className: 'v' }, 'RADAR + 90-DAY PLAN'))
          )
        )
      ),

      // WHAT'S TESTED — 5 AXES + CONTROL PLANE
      React.createElement('div', { className: 'intro-section' },
        React.createElement('div', { className: 'intro-section-head' },
          React.createElement('span', { className: 'k' }, 'WHAT YOU’LL BE SCORED ON'),
          React.createElement('span', { className: 'sub' }, '5 axes · one per layer, plus the Control Plane at the center')
        ),
        React.createElement('div', { className: 'intro-axes' },
          window.QUIZ_AXES.map(axis =>
            React.createElement('div', { key: axis.id, className: `axis-chip signal-${axis.signal}` },
              React.createElement('span', { className: `signal-dot ${axis.signal}` }),
              React.createElement('div', { className: 'ac-layer' }, axis.layer),
              React.createElement('div', { className: 'ac-name' }, axis.label),
              React.createElement('div', { className: 'ac-count' }, `${countsByAxis[axis.id]} question${countsByAxis[axis.id] === 1 ? '' : 's'}`)
            )
          )
        )
      ),

      // SAMPLE QUESTION
      React.createElement('div', { className: 'intro-section' },
        React.createElement('div', { className: 'intro-section-head' },
          React.createElement('span', { className: 'k' }, 'WHAT A QUESTION LOOKS LIKE'),
          React.createElement('span', { className: 'sub' }, `Sample · ${sampleAxis.layer} ${sampleAxis.label}`)
        ),
        React.createElement('div', { className: 'sample-q' },
          React.createElement('div', { className: 'sample-q-axis' },
            React.createElement('span', { className: `signal-dot ${sampleAxis.signal}` }),
            `${sampleAxis.layer} · ${sampleAxis.label}`
          ),
          React.createElement('div', { className: 'sample-q-text' },
            '“', sampleQ.text, '”'
          ),
          React.createElement('div', { className: 'sample-q-scale' },
            window.QUIZ_SCALE.map(s =>
              React.createElement('div', { key: s.value, className: 'sample-scale-btn' },
                React.createElement('div', { className: 'n' }, `0${s.value}`),
                React.createElement('div', { className: 'l' }, s.label),
                React.createElement('div', { className: 'h' }, s.helper)
              )
            )
          ),
          React.createElement('div', { className: 'sample-q-foot' },
            React.createElement('span', { className: 'tk' }, 'ℹ'),
            'Score 1 = never true today. Score 5 = enterprise-wide and audited. Honest scoring is the only way the radar means anything.'
          )
        )
      ),

      // WHAT YOU'LL GET — refined cards
      React.createElement('div', { className: 'intro-section' },
        React.createElement('div', { className: 'intro-section-head' },
          React.createElement('span', { className: 'k' }, 'WHAT YOU’LL GET'),
          React.createElement('span', { className: 'sub' }, 'Three deliverables, immediately')
        ),
        React.createElement('div', { className: 'intro-cards' },
          React.createElement('div', { className: 'intro-card' },
            React.createElement('div', { className: 'num' }, '01'),
            React.createElement('h3', null, 'Live animated radar'),
            React.createElement('p', null, 'Your shape across the five layer axes, with the Control Plane scored at the center, drawn against a Level 4 reference so you see exactly where you bend.')
          ),
          React.createElement('div', { className: 'intro-card' },
            React.createElement('div', { className: 'num' }, '02'),
            React.createElement('h3', null, 'Per-axis insights'),
            React.createElement('p', null, 'Six cards explaining what each score reveals, and the two danger gaps to fix first.')
          ),
          React.createElement('div', { className: 'intro-card' },
            React.createElement('div', { className: 'num' }, '03'),
            React.createElement('h3', null, 'Personalized 90-day plan'),
            React.createElement('p', null, 'Three phases generated from your specific gaps, with named actions you can hand to a steering committee.')
          )
        )
      ),

      // FOOT CTA
      React.createElement('div', { className: 'intro-foot-cta' },
        React.createElement('div', { className: 'foot-l' },
          React.createElement('h3', null,
            hasInProgress
              ? 'Pick up where you left off.'
              : 'Eight minutes. Honest answers. A clear next step.'
          ),
          React.createElement('p', null, 'Responses stay in your browser. You decide if and when to share them.')
        ),
        hasInProgress
          ? React.createElement('button', { className: 'btn btn-primary btn-lg', onClick: onResume },
              `Resume (${pct}%) `, React.createElement('span', { className: 'arrow' }, '→'))
          : React.createElement('button', { className: 'btn btn-primary btn-lg', onClick: onBegin },
              'Begin the assessment ', React.createElement('span', { className: 'arrow' }, '→'))
      )
    )
  );
}

// =====================================================================
// QUIZ SHELL
// =====================================================================
function Quiz({ idx, answers, onAnswer, onPrev, onNext, total, onExit }) {
  const q = window.QUIZ_QUESTIONS[idx];
  const axis = axisFor(q.axis);
  const value = answers[idx];
  const overallPct = ((idx + (value ? 1 : 0)) / total) * 100;

  // Build segments: one per axis, with completion ratio
  const segments = window.QUIZ_AXES.map(a => {
    const axisQs = window.QUIZ_QUESTIONS
      .map((qq, i) => ({ qq, i }))
      .filter(x => x.qq.axis === a.id);
    const answered = axisQs.filter(x => answers[x.i]).length;
    const isCurrent = q.axis === a.id;
    return {
      axisId: a.id,
      label: a.label,
      layer: a.layer,
      signal: a.signal,
      count: axisQs.length,
      answered,
      fill: axisQs.length ? answered / axisQs.length : 0,
      current: isCurrent,
      done: answered === axisQs.length,
    };
  });

  const axisIndex = window.QUIZ_AXES.findIndex(a => a.id === q.axis);

  // keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.target && /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) return;
      if (e.key === 'ArrowLeft') { e.preventDefault(); onPrev(); }
      else if (e.key === 'ArrowRight' || e.key === 'Enter') { e.preventDefault(); onNext(); }
      else if (['1', '2', '3', '4', '5'].includes(e.key)) {
        e.preventDefault();
        onAnswer(parseInt(e.key, 10));
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onPrev, onNext, onAnswer]);

  return (
    React.createElement('div', { className: 'quiz-stage', 'data-screen-label': `Q${idx + 1} ${axis.label}` },
      React.createElement('div', { className: 'quiz-progress' },
        React.createElement('div', { className: 'quiz-progress-inner' },
          React.createElement('div', { className: 'qp-top' },
            React.createElement('div', { className: 'qp-meta' },
              React.createElement('span', { className: 'qp-counter' },
                'Q', String(idx + 1).padStart(2, '0'), ' of ', String(total).padStart(2, '0')
              ),
              React.createElement('span', { className: 'qp-sep' }, '·'),
              React.createElement('span', { className: 'qp-axis' },
                React.createElement('span', { className: `signal-dot ${axis.signal}` }),
                `${axis.layer} ${axis.label}`,
                React.createElement('span', { className: 'qp-axis-of' }, ` · axis ${axisIndex + 1} of 6`)
              )
            ),
            React.createElement('div', { className: 'qp-tools' },
              React.createElement('span', { className: 'qp-save' },
                React.createElement('span', { className: 'tick' }), 'Auto-saved'
              ),
              React.createElement('button', { className: 'qp-exit', onClick: onExit, type: 'button' }, 'Save & exit')
            )
          ),
          React.createElement('div', { className: 'qp-segments' },
            segments.map(s =>
              React.createElement('div', {
                key: s.axisId,
                className: 'qp-seg' + (s.current ? ' current' : '') + (s.done ? ' done' : ''),
                title: `${s.layer} ${s.label} — ${s.answered}/${s.count}`,
              },
                React.createElement('div', { className: `qp-seg-fill signal-${s.signal}`, style: { width: `${s.fill * 100}%` } }),
                React.createElement('span', { className: 'qp-seg-label' }, s.layer)
              )
            )
          ),
          React.createElement('div', { className: 'qp-pct' },
            React.createElement('span', null, `${Math.round(overallPct)}% complete`),
            React.createElement('span', { className: 'qp-pct-r' }, `${total - idx - (value ? 1 : 0)} left`)
          )
        )
      ),
      React.createElement('div', { className: 'quiz-card-wrap' },
        React.createElement('div', { className: `quiz-card signal-bg-${axis.signal}` },
          React.createElement('div', { className: 'quiz-axis-rail' },
            React.createElement('span', { className: `signal-dot ${axis.signal}` }),
            React.createElement('span', { className: 'rail-layer' }, axis.layer),
            React.createElement('span', { className: 'rail-sep' }, '·'),
            React.createElement('span', { className: 'rail-name' }, axis.label)
          ),
          React.createElement('div', { className: 'quiz-question-num' }, `Question ${idx + 1}`),
          React.createElement('div', { className: 'quiz-question' }, '“', q.text, '”'),
          React.createElement('div', { className: 'quiz-scale-label' },
            'How true is this for your organization, today?'
          ),
          React.createElement('div', { className: 'quiz-scale', role: 'radiogroup', 'aria-label': 'Score' },
            window.QUIZ_SCALE.map(s =>
              React.createElement('button', {
                key: s.value,
                className: 'scale-btn' + (value === s.value ? ' selected' : ''),
                onClick: () => onAnswer(s.value),
                role: 'radio',
                'aria-checked': value === s.value,
              },
                React.createElement('span', { className: 'kbd' }, s.value),
                React.createElement('div', { className: 'num' }, `0${s.value}`),
                React.createElement('div', { className: 'label' }, s.label),
                React.createElement('div', { className: 'helper' }, s.helper)
              )
            )
          ),
          React.createElement('div', { className: 'quiz-actions' },
            React.createElement('button', {
              className: 'btn btn-ghost',
              onClick: onPrev,
              disabled: idx === 0,
              style: idx === 0 ? { opacity: 0.4, pointerEvents: 'none' } : null,
            }, '← Previous'),
            React.createElement('div', { className: 'nav-hint' },
              React.createElement('kbd', null, '1'), '–', React.createElement('kbd', null, '5'),
              ' to score · ',
              React.createElement('kbd', null, '←'), ' / ', React.createElement('kbd', null, '→'),
              ' to navigate'
            ),
            React.createElement('button', {
              className: 'btn btn-primary',
              onClick: onNext,
              disabled: !value,
              style: !value ? { opacity: 0.4, pointerEvents: 'none' } : null,
            },
              idx === total - 1 ? 'See your radar ' : 'Next ',
              React.createElement('span', { className: 'arrow' }, '→')
            )
          )
        )
      )
    )
  );
}

// =====================================================================
// RADAR CHART (SVG)
// =====================================================================
function RadarChart({ scores }) {
  const size = 540;
  const cx = size / 2, cy = size / 2;
  const radius = 200;
  const axes = window.QUIZ_AXES.filter(a => a.id !== 'control');
  const n = axes.length;

  // axis angle: start at top, go clockwise
  const angleFor = (i) => -Math.PI / 2 + (i * 2 * Math.PI) / n;

  const pointFor = (i, val /* 1..5 */) => {
    const r = (val / 5) * radius;
    const a = angleFor(i);
    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
  };

  const refLevel = 4;
  const refPoints = axes.map((_, i) => pointFor(i, refLevel)).map(p => p.join(',')).join(' ');

  const dataPoints = axes.map((a, i) => pointFor(i, scores[a.id] || 0));
  const dataPath = dataPoints.map(p => p.join(',')).join(' ');

  // grid rings 1..5
  const ringPoints = (val) => axes.map((_, i) => pointFor(i, val)).map(p => p.join(',')).join(' ');

  return (
    React.createElement('svg', {
      viewBox: `-90 -24 ${size + 180} ${size + 48}`,
      className: 'radar-svg',
      'aria-label': 'Maturity radar',
    },
      // grid
      React.createElement('g', { className: 'radar-grid' },
        [1, 2, 3, 4, 5].map(v =>
          React.createElement('polygon', {
            key: 'ring' + v,
            points: ringPoints(v),
            className: v === 5 ? 'outer' : '',
          })
        ),
        axes.map((_, i) => {
          const [x, y] = pointFor(i, 5);
          return React.createElement('line', { key: 'ax' + i, x1: cx, y1: cy, x2: x, y2: y });
        })
      ),
      // reference shape (L4)
      React.createElement('polygon', { className: 'radar-ref', points: refPoints }),
      // user shape
      React.createElement('polygon', { className: 'radar-shape draw', points: dataPath }),
      // dots
      dataPoints.map((p, i) =>
        React.createElement('circle', {
          key: 'dot' + i, className: 'radar-dot', cx: p[0], cy: p[1], r: 4,
        })
      ),
      // labels
      axes.map((axis, i) => {
        const a = angleFor(i);
        const lr = radius + 38;
        const lx = cx + lr * Math.cos(a);
        const ly = cy + lr * Math.sin(a);
        const score = scores[axis.id] || 0;
        const anchor = Math.abs(Math.cos(a)) < 0.3 ? 'middle' : (Math.cos(a) > 0 ? 'start' : 'end');
        return React.createElement('g', {
          key: 'lbl' + i, className: 'radar-axis-label',
          transform: `translate(${lx}, ${ly})`
        },
          React.createElement('text', { className: 'layer', textAnchor: anchor, dy: '-2' }, axis.short),
          React.createElement('text', { className: 'score', textAnchor: anchor, dy: '14' }, score.toFixed(1))
        );
      }),
      // Control Plane: scored at the center as a multiplier / integrity check
      React.createElement('g', { className: 'radar-cp' },
        React.createElement('circle', { cx, cy, r: 30, fill: 'none', stroke: 'rgba(103,232,249,0.30)', strokeWidth: 1 }),
        React.createElement('circle', { cx, cy, r: 22, style: { fill: 'rgba(103,232,249,0.12)', stroke: 'var(--sig-kernel)', strokeWidth: 1.5 } }),
        React.createElement('text', { x: cx, y: cy - 3, textAnchor: 'middle', style: { fill: 'var(--on-ink-3)', font: '500 8px var(--font-mono)', letterSpacing: '0.16em' } }, 'CP'),
        React.createElement('text', { x: cx, y: cy + 13, textAnchor: 'middle', style: { fill: 'var(--sig-kernel)', font: '600 16px var(--font-mono)' } }, (scores['control'] || 0).toFixed(1))
      )
    )
  );
}

// =====================================================================
// RESULTS
// =====================================================================
function Results({ answers, onRestart }) {
  const { scores, overall } = useMemo(() => computeScores(answers), [answers]);
  const tier = window.tierFor(overall);
  const danger = useMemo(() => dangerAxes(scores), [scores]);
  const dangerLabels = [...danger].map(id => axisFor(id).label);

  // 90-day plan state
  const [plan, setPlan] = useState(null);
  const [planStatus, setPlanStatus] = useState('loading'); // loading | claude | fallback
  const requestedRef = useRef(false);

  useEffect(() => {
    if (requestedRef.current) return;
    requestedRef.current = true;

    const fallback = buildFallbackPlan(scores, danger, tier);

    if (!window.claude || !window.claude.complete) {
      setPlan(fallback);
      setPlanStatus('fallback');
      return;
    }

    const prompt = buildClaudePrompt(scores, overall, tier, danger);
    let done = false;
    const timeoutId = setTimeout(() => {
      if (done) return;
      done = true;
      setPlan(fallback);
      setPlanStatus('fallback');
    }, 12000);

    window.claude.complete(prompt).then(text => {
      if (done) return;
      done = true; clearTimeout(timeoutId);
      try {
        const cleaned = (text || '').replace(/```json/gi, '').replace(/```/g, '').trim();
        const parsed = JSON.parse(cleaned);
        if (parsed && Array.isArray(parsed.phases) && parsed.phases.length === 3) {
          setPlan(parsed.phases);
          setPlanStatus('claude');
        } else {
          setPlan(fallback);
          setPlanStatus('fallback');
        }
      } catch (e) {
        setPlan(fallback);
        setPlanStatus('fallback');
      }
    }).catch(() => {
      if (done) return;
      done = true; clearTimeout(timeoutId);
      setPlan(fallback);
      setPlanStatus('fallback');
    });
  }, []);

  // email gate state
  const [emailState, setEmailState] = useState({ submitted: false, value: '' });

  const tierColor = (tid) => {
    if (tid === 'L5') return 'tier-emerald';
    if (tid === 'L4') return 'tier-cyan';
    if (tid === 'L3') return 'tier-cyan';
    if (tid === 'L2') return 'tier-orange';
    return 'tier-orange';
  };

  return (
    React.createElement('div', { className: 'results-stage', 'data-screen-label': 'Results' },

      // HERO
      React.createElement('section', { className: 'results-hero', 'data-screen-label': 'Results Hero' },
        React.createElement('div', { className: 'results-hero-bloom' }),
        React.createElement('div', { className: 'results-hero-inner' },
          React.createElement('div', { className: 'results-summary' },
            React.createElement('div', { className: 'eyebrow' },
              React.createElement('span', {
                style: { display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--signal-cyan)', boxShadow: '0 0 8px var(--signal-cyan)', marginRight: 10, transform: 'translateY(-1px)' }
              }),
              'Your radar · live result'
            ),
            React.createElement('h1', null,
              'You score ',
              React.createElement('span', { className: 'em' }, overall.toFixed(1)),
              ': ',
              tier.name,
              '.'
            ),
            React.createElement('p', { className: 'tier-line' },
              tier.summary, ' ',
              React.createElement('strong', null,
                `Two danger gaps: ${dangerLabels.join(' and ')}.`)
            ),
            React.createElement('div', { className: 'results-meta' },
              React.createElement('div', { className: 'cell' },
                React.createElement('div', { className: 'k' }, 'Overall'),
                React.createElement('div', { className: 'v' }, `${overall.toFixed(1)} / 5.0`)
              ),
              React.createElement('div', { className: 'cell' },
                React.createElement('div', { className: 'k' }, 'Tier'),
                React.createElement('div', { className: `v ${tierColor(tier.id)}` }, tier.id, ' · ', tier.name)
              ),
              React.createElement('div', { className: 'cell' },
                React.createElement('div', { className: 'k' }, 'Reference'),
                React.createElement('div', { className: 'v' }, 'L4 · 4.0')
              )
            ),
            React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' } },
              React.createElement('a', { className: 'btn btn-ghost btn-sm', href: '#plan' }, 'Jump to 90-day plan'),
              React.createElement('button', { className: 'btn btn-ghost btn-sm', onClick: onRestart }, 'Re-run assessment')
            )
          ),
          React.createElement('div', { className: 'radar-mount' },
            React.createElement(RadarChart, { scores })
          )
        )
      ),

      // PER-AXIS CARDS
      React.createElement('section', { className: 'axis-grid-section', 'data-screen-label': 'Axis Cards' },
        React.createElement('div', { className: 'wrap' },
          React.createElement('div', { className: 'section-head' },
            React.createElement('div', { className: 'label-rail' }, 'PER-AXIS · 6 SCORES'),
            React.createElement('div', null,
              React.createElement('h2', null, 'Where the radar bends, and where it breaks.'),
              React.createElement('p', { className: 'lead', style: { marginTop: 24, color: 'var(--fg-on-dark-2)' } },
                'Cards with an orange rail are your two lowest axes. Fix these first; they are the bottlenecks every other layer depends on.')
            )
          ),
          React.createElement('div', { className: 'axis-grid' },
            window.QUIZ_AXES.map(axis => {
              const s = scores[axis.id] || 0;
              const t = window.tierFor(s);
              const isDanger = danger.has(axis.id);
              const insight = window.AXIS_INSIGHT[axis.id][t.id];
              return React.createElement('div', {
                key: axis.id,
                className: 'axis-card' + (isDanger ? ' danger' : ''),
              },
                React.createElement('div', { className: 'top' },
                  React.createElement('div', { className: 'layer-tag' },
                    React.createElement('span', { className: `signal ${axis.signal}` }),
                    `${axis.layer} · ${axis.label}`
                  ),
                  React.createElement('div', { className: 'score' },
                    s.toFixed(1),
                    React.createElement('span', { className: 'max' }, ' / 5.0')
                  )
                ),
                React.createElement('h3', null, axis.label),
                React.createElement('div', { className: 'tier-pill' }, `${t.id} · ${t.name}`),
                React.createElement('div', { className: 'bar' },
                  React.createElement('div', { className: 'bar-fill', style: { width: `${(s / 5) * 100}%` } })
                ),
                React.createElement('p', { className: 'insight' }, insight)
              );
            })
          )
        )
      ),

      // 90-DAY PLAN
      React.createElement('section', { className: 'plan-section', id: 'plan', 'data-screen-label': '90-Day Plan' },
        React.createElement('div', { className: 'wrap' },
          React.createElement('div', { className: 'plan-head' },
            React.createElement('div', { className: 'label' }, '90 DAYS'),
            React.createElement('div', null,
              React.createElement('h2', null, 'Your personalized 90-day plan.'),
              React.createElement('p', { className: 'sub' },
                'Three phases. Built around your two lowest axes: ',
                React.createElement('strong', null, dangerLabels.join(' and ')),
                '. Print it, share it, run it.'),
              planStatus === 'loading'
                ? null
                : React.createElement('div', { className: 'plan-source' + (planStatus === 'fallback' ? ' is-fallback' : '') },
                    React.createElement('span', { className: 'dot' }),
                    planStatus === 'claude' ? 'Generated for your radar' : 'Library plan for your tier')
            )
          ),
          planStatus === 'loading'
            ? React.createElement('div', { className: 'plan-loading' },
                React.createElement('div', { className: 'spinner' }),
                React.createElement('span', null, 'Building your 90-day plan from your radar shape…'))
            : React.createElement('div', { className: 'plan-grid' },
                plan.map((p, i) =>
                  React.createElement('div', { className: 'plan-phase', key: i },
                    React.createElement('div', { className: 'ph-label' }, p.window || `DAY ${i * 30 + 1}–${i * 30 + 30}`),
                    React.createElement('h3', null, p.title),
                    React.createElement('ul', null,
                      (p.actions || []).map((a, j) =>
                        React.createElement('li', { key: j }, a))
                    )
                  )
                )
              )
        )
      ),

      // EMAIL GATE
      React.createElement('section', { className: 'email-gate', 'data-screen-label': 'Email Gate' },
        React.createElement('div', { className: 'wrap' },
          React.createElement('div', null,
            React.createElement('div', {
              style: { font: '500 11px/1 var(--font-mono)', letterSpacing: '0.20em', textTransform: 'uppercase', color: 'var(--signal-cyan)', marginBottom: 16 }
            }, 'PDF report · Email gated'),
            React.createElement('h2', null, 'Take the boardroom version with you.'),
            React.createElement('p', null,
              'A 12-page PDF with your radar, per-axis insights, your 90-day plan, and an executive summary you can hand to your steering committee. No newsletter spam. One report, then you decide if you want updates.'),
            React.createElement('form', {
              className: 'email-form' + (emailState.submitted ? ' success' : ''),
              onSubmit: (e) => {
                e.preventDefault();
                const fd = new FormData(e.currentTarget);
                setEmailState({ submitted: true, value: fd.get('email') || '' });
              },
            },
              React.createElement('div', { className: 'input-row', style: { display: 'flex', gap: 8, flex: 1, flexWrap: 'wrap' } },
                React.createElement('input', { type: 'email', name: 'email', placeholder: 'work@company.com', required: true, autoComplete: 'email' }),
                React.createElement('button', { type: 'submit', className: 'btn btn-primary' },
                  'Send report ', React.createElement('span', { className: 'arrow' }, '→'))
              ),
              React.createElement('div', { className: 'privacy' },
                'No spam. Single email with the PDF + a link to your radar. Privacy-first.')
            ),
            emailState.submitted &&
              React.createElement('div', { className: 'email-success', style: { display: 'block' } },
                'Sent to ', React.createElement('strong', null, emailState.value), '. Check your inbox in the next minute. (This is a demo; no email is actually delivered.)')
          ),
          React.createElement('div', { className: 'report-mock' },
            React.createElement('div', { className: 'doc-label' }, 'PDF · 12 PAGES · 2026.05'),
            React.createElement('div', { className: 'doc-title' }, 'eAi.OS Maturity Report'),
            React.createElement('ul', { className: 'doc-list' },
              React.createElement('li', null, 'Executive summary'),
              React.createElement('li', null, 'Your radar, full-bleed'),
              React.createElement('li', null, 'Per-axis insights'),
              React.createElement('li', null, '90-day plan with named owners'),
              React.createElement('li', null, 'EU AI Act + US AI Acts readiness checklist'),
              React.createElement('li', null, 'Glossary + further reading')
            ),
            React.createElement('div', { className: 'doc-meta' },
              React.createElement('span', null, 'AUTHOR · GANESH K. RAMALINGAM'),
              React.createElement('span', null, 'eAi.OS · 2026.05')
            )
          )
        )
      ),

      // CTA STRIP
      React.createElement('section', { className: 'assess-cta-strip', 'data-screen-label': 'Final CTA' },
        React.createElement('div', { className: 'wrap' },
          React.createElement('h2', null, 'Now turn the radar into a roadmap.'),
          React.createElement('div', { className: 'ctas' },
            React.createElement('a', { className: 'btn btn-primary', href: 'roadmap.html' },
              'See the 90-day roadmap ', React.createElement('span', { className: 'arrow' }, '→')),
            React.createElement('a', { className: 'btn btn-ghost', href: 'framework.html' },
              'Re-read the framework ', React.createElement('span', { className: 'arrow' }, '→'))
          )
        )
      )
    )
  );
}

// ---- Plans ----------------------------------------------------------

function buildClaudePrompt(scores, overall, tier, danger) {
  const dList = [...danger].map(id => `${axisFor(id).label} (${scores[id].toFixed(1)})`).join(', ');
  const allList = window.QUIZ_AXES
    .map(a => `${a.label}: ${(scores[a.id] || 0).toFixed(1)}`)
    .join('; ');
  return `You are an enterprise AI strategist writing a 90-day plan for an executive who just took the eAi.OS Maturity Assessment.
Their overall score is ${overall.toFixed(1)} / 5.0 (Tier: ${tier.id} ${tier.name}).
Per-axis: ${allList}.
The two lowest axes (danger gaps) are: ${dList}.

Write a 3-phase 90-day plan:
- Phase 1: Days 1–30 · diagnose & stabilize
- Phase 2: Days 31–60 · build & integrate
- Phase 3: Days 61–90 · govern & scale

Each phase should have a concise title and 4–5 specific, executive-grade actions tied to their lowest axes. Reference EU AI Act enforcement (August 2, 2026), Colorado AI Act, California AB 2013, and NIST AI RMF where governance is weak. Use direct, executive language.cutive language. No fluff.

Respond with ONLY a valid JSON object (no prose, no markdown fences) of this exact shape:
{ "phases": [
  { "window": "DAY 1–30", "title": "...", "actions": ["...", "...", "...", "..."] },
  { "window": "DAY 31–60", "title": "...", "actions": ["...", "...", "...", "..."] },
  { "window": "DAY 61–90", "title": "...", "actions": ["...", "...", "...", "..."] }
] }`;
}

function buildFallbackPlan(scores, danger, tier) {
  const lowestAxis = [...danger][0];
  const secondAxis = [...danger][1];
  const lowName = axisFor(lowestAxis).label;
  const secondName = axisFor(secondAxis).label;
  const isGovernanceLow = danger.has('governance');

  return [
    {
      window: 'DAY 1–30',
      title: 'Diagnose and stabilize',
      actions: [
        `Stand up an executive working group on ${lowName} with a named single-threaded owner.`,
        `Inventory every AI workload (running, paused, shadow) and tag against EU AI Act high-risk and Colorado consequential-decision categories.`,
        `Baseline the radar inside your team and align it with this assessment.`,
        `Freeze net-new AI projects until they map to the five eAi.OS layers.`,
        isGovernanceLow
          ? 'Schedule the EU AI Act + Colorado + NIST AI RMF readiness review on your calendar before August 2, 2026.'
          : `Audit your data lineage: every prediction in production must be traceable in under 30 seconds.`,
      ],
    },
    {
      window: 'DAY 31–60',
      title: `Build the missing layer: ${lowName}`,
      actions: [
        `Pick one production use case where ${lowName} is the bottleneck and rebuild it on the eAi.OS pattern.`,
        `Adopt governance-as-code with CI/CD gates: no manual promotion of any model.`,
        `Establish an AI Product Triad (Product · Engineering · Domain UX) for the priority use case.`,
        `Set a single Control Plane dashboard the C-suite can read in 60 seconds.`,
        `Ship one closed-loop feedback path from production users back to retraining.`,
      ],
    },
    {
      window: 'DAY 61–90',
      title: `Govern, integrate, and scale ${secondName}`,
      actions: [
        `Onboard your second priority use case onto the same eAi.OS pattern: prove the playbook is repeatable.`,
        `Run the first internal high-risk audit dry run; close any gaps before regulators arrive.`,
        `Tie an AI scorecard to executive dashboards: revenue, cost, outcome.`,
        `Move at least one workload from L${tier.id.slice(1)} to the next tier on its weakest axis.`,
        `Publish your 12-month eAi.OS roadmap with named owners per layer and a public Control Plane SLA.`,
      ],
    },
  ];
}

// =====================================================================
// APP
// =====================================================================
function App() {
  const stored = loadState();
  const [view, setView] = useState(stored && stored.view ? stored.view : 'intro'); // intro | quiz | results
  const [idx, setIdx] = useState(stored ? stored.idx || 0 : 0);
  const [answers, setAnswers] = useState(stored ? stored.answers || {} : {});
  const total = window.QUIZ_QUESTIONS.length;

  // persist
  useEffect(() => {
    saveState({ view, idx, answers });
  }, [view, idx, answers]);

  // scroll to top on view change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' in window.scrollTo ? 'instant' : 'auto' });
  }, [view]);

  const hasInProgress = Object.keys(answers).length > 0 && view !== 'results';

  const beginFresh = () => {
    setAnswers({});
    setIdx(0);
    setView('quiz');
  };
  const resume = () => setView('quiz');
  const restart = () => beginFresh();

  const onAnswer = (val) => {
    setAnswers(prev => ({ ...prev, [idx]: val }));
    // Auto-advance after a short beat so the user sees their selection take effect.
    window.setTimeout(() => {
      if (idx < total - 1) setIdx(idx + 1);
      else setView('results');
    }, 280);
  };
  const onPrev = () => setIdx(i => Math.max(0, i - 1));
  const onNext = () => {
    if (idx < total - 1) setIdx(i => i + 1);
    else setView('results');
  };

  if (view === 'intro') {
    return React.createElement(Intro, {
      onBegin: beginFresh,
      hasInProgress,
      onResume: resume,
      answeredCount: Object.keys(answers).length,
      total,
    });
  }
  if (view === 'quiz') {
    return React.createElement(Quiz, { idx, answers, onAnswer, onPrev, onNext, total, onExit: () => setView('intro') });
  }
  return React.createElement(Results, { answers, onRestart: restart });
}

window.AssessApp = App;