// quiz.jsx — Interactive AI Readiness Quiz
// Six questions across four dimensions; scored to a readiness band with tailored next step.

const QUIZ = [
  {
    dim: 'Strategy',
    q: 'How clearly is AI tied to a business outcome at your company?',
    a: [
      { label: 'No clear link — exploratory only', s: 0 },
      { label: 'Discussed, not committed', s: 1 },
      { label: 'A handful of named initiatives', s: 2 },
      { label: 'Roadmap with owners and KPIs', s: 3 },
    ],
  },
  {
    dim: 'Data',
    q: 'How accessible is your operational + product data today?',
    a: [
      { label: 'Siloed, hard to access', s: 0 },
      { label: 'Some warehoused, much scattered', s: 1 },
      { label: 'Mostly unified, governed', s: 2 },
      { label: 'Real-time, well-governed', s: 3 },
    ],
  },
  {
    dim: 'Talent',
    q: 'Who is hands-on with AI inside the org?',
    a: [
      { label: 'Nobody yet', s: 0 },
      { label: 'A few curious individuals', s: 1 },
      { label: 'A working team / center of excellence', s: 2 },
      { label: 'Embedded across product & ops', s: 3 },
    ],
  },
  {
    dim: 'Deployment',
    q: 'Have you shipped AI features to real users?',
    a: [
      { label: 'No', s: 0 },
      { label: 'Internal prototypes', s: 1 },
      { label: 'Production for a subset of users', s: 2 },
      { label: 'Core part of multiple products', s: 3 },
    ],
  },
  {
    dim: 'Governance',
    q: 'Do you have a policy for responsible AI use?',
    a: [
      { label: 'Not yet', s: 0 },
      { label: 'Informal guidelines', s: 1 },
      { label: 'Documented standards', s: 2 },
      { label: 'Reviewed, audited, enforced', s: 3 },
    ],
  },
  {
    dim: 'Urgency',
    q: 'What is your timeframe for measurable AI impact?',
    a: [
      { label: 'No defined timeline', s: 0 },
      { label: '12+ months', s: 1 },
      { label: '6–12 months', s: 2 },
      { label: 'Next quarter', s: 3 },
    ],
  },
];

const BANDS = [
  {
    min: 0, max: 5,
    name: 'Exploring',
    blurb: 'You are at the start. The biggest wins right now are clarity and a small, real win to rally around.',
    rec: 'AI Strategy Sprint',
  },
  {
    min: 6, max: 10,
    name: 'Mobilizing',
    blurb: 'You have signal and energy. The job is to focus it: pick 1–2 use-cases with clear owners and ship.',
    rec: 'Readiness Assessment + Pilot',
  },
  {
    min: 11, max: 14,
    name: 'Scaling',
    blurb: 'You are past prototype. Now the leverage is in platform, governance and broadening adoption.',
    rec: 'Fractional AI Leadership',
  },
  {
    min: 15, max: 18,
    name: 'Compounding',
    blurb: 'AI is in your products and operations. The frontier is differentiation, agents, and org-wide fluency.',
    rec: 'Custom LLM / Agent Engagement',
  },
];

function ReadinessQuiz({ accent }) {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const total = QUIZ.length;
  const done = step >= total;
  const score = Object.values(answers).reduce((a, b) => a + b, 0);
  const band = BANDS.find(b => score >= b.min && score <= b.max) || BANDS[0];

  const pick = (i, s) => {
    setAnswers(prev => ({ ...prev, [i]: s }));
    setTimeout(() => setStep(step + 1), 180);
  };
  const reset = () => { setAnswers({}); setStep(0); };

  if (done) {
    const pct = Math.round((score / (total * 3)) * 100);
    return (
      <div className="quiz quiz-result">
        <div className="quiz-result-grid">
          <div className="quiz-result-left">
            <div className="eyebrow">Your readiness</div>
            <div className="quiz-band">{band.name}</div>
            <div className="quiz-score">
              <div className="quiz-meter">
                <div className="quiz-meter-fill" style={{ width: pct + '%', background: accent }} />
              </div>
              <div className="quiz-score-text">
                <span>{score}<span className="muted"> / {total * 3}</span></span>
                <span className="muted">{pct}%</span>
              </div>
            </div>
            <p className="quiz-blurb">{band.blurb}</p>
          </div>
          <div className="quiz-result-right">
            <div className="eyebrow">Suggested engagement</div>
            <div className="quiz-rec">{band.rec}</div>
            <div className="quiz-dims">
              {QUIZ.map((q, i) => (
                <div key={i} className="quiz-dim-row">
                  <span className="quiz-dim-name">{q.dim}</span>
                  <div className="quiz-dim-bar">
                    {[0,1,2,3].map(s => (
                      <span key={s} className={'pip' + (answers[i] >= s && answers[i] > 0 ? ' on' : '')}
                            style={answers[i] >= s && answers[i] > 0 ? { background: accent } : null} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div className="quiz-actions">
              <a href="#contact" className="btn btn-primary">Book a discovery call →</a>
              <button className="btn btn-ghost" onClick={reset}>Retake</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const q = QUIZ[step];
  return (
    <div className="quiz">
      <div className="quiz-head">
        <div className="quiz-progress">
          {QUIZ.map((_, i) => (
            <span key={i} className={'pip' + (i <= step ? ' on' : '')}
                  style={i <= step ? { background: accent } : null} />
          ))}
        </div>
        <div className="quiz-count">{String(step + 1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
      </div>
      <div className="quiz-dim-tag">{q.dim}</div>
      <h3 className="quiz-q">{q.q}</h3>
      <div className="quiz-answers">
        {q.a.map((opt, i) => (
          <button key={i} className="quiz-answer" onClick={() => pick(step, opt.s)}>
            <span className="quiz-answer-num">{String.fromCharCode(65 + i)}</span>
            <span className="quiz-answer-label">{opt.label}</span>
            <span className="quiz-answer-arrow">→</span>
          </button>
        ))}
      </div>
      {step > 0 && (
        <button className="quiz-back" onClick={() => setStep(step - 1)}>← Back</button>
      )}
    </div>
  );
}

Object.assign(window, { ReadinessQuiz });