// CRA2 — The interview. The site asks; the visitor answers in chips.
// State persists in localStorage so a refresh keeps your place.

const CRA4_QUESTIONS = [
  {
    id: 'role',
    q: <>First things first. <em>Which seat</em> do you sit in?</>,
    chips: ['CEO / business leader', 'Transformation lead', 'Consultant', 'Investor', 'Something else']
  },
  {
    id: 'stuck',
    q: <>Where does work <em>get stuck</em> in your organization?</>,
    chips: ['Handoffs between teams', 'Approvals and rework', 'Nobody knows who owns what', 'Honestly, we can\u2019t see it']
  },
  {
    id: 'ai',
    q: <>And what has AI <em>actually delivered</em> so far?</>,
    chips: ['Pockets of success', 'Pilots that never scaled', 'A lot of licenses', 'We\u2019re just getting started']
  }
];

const CRA4_SYNTHESIS = {
  default: (a) => <>That matches what we hear in almost every working session. The capacity you want is already inside your organization. It is trapped in friction, misaligned work, and tasks that no longer need to exist. <span className="hl">Let us show you what finding it looks like.</span></>
};

function Interview() {
  const [answers, setAnswers] = React.useState({});

  const step = CRA4_QUESTIONS.findIndex((q) => !(q.id in answers));
  const finished = step === -1;

  function answer(qid, chip) {
    setAnswers((prev) => ({ ...prev, [qid]: chip }));
  }
  function restart() {
    setAnswers({});
  }
  function goToSim() {
    const el = document.getElementById('meridian');
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 40;
      window.scrollTo({ top: top, behavior: 'smooth' });
    }
  }

  const past = CRA4_QUESTIONS.filter((q) => q.id in answers);

  return (
    <div className="interview wrap">
      <div className="interview-kicker">Tokaro · Simulate · <em style={{ fontStyle: 'italic', textTransform: 'none' }}>an illustrative example</em></div>

      {past.length > 0 && (
        <div className="transcript">
          {past.map((q) => (
            <div className="transcript-row" key={q.id}>
              {q.id === 'role' ? 'Which seat do you sit in?' : q.id === 'stuck' ? 'Where does work get stuck?' : 'What has AI delivered so far?'}
              {' '}<span className="t-a">&nbsp;&rarr;&nbsp; {answers[q.id]}</span>
            </div>
          ))}
        </div>
      )}

      {!finished ? (
        <div className="q-enter" key={CRA4_QUESTIONS[step].id}>
          <h1 className="q-text">{CRA4_QUESTIONS[step].q}</h1>
          <div className="chips">
            {CRA4_QUESTIONS[step].chips.map((c) => (
              <button className="chip" key={c} onClick={() => answer(CRA4_QUESTIONS[step].id, c)}>{c}</button>
            ))}
          </div>
          {step === 0 && (
            <p className="skip-line"><button className="restart" onClick={goToSim}>Skip the questions, show me the simulation</button></p>
          )}
        </div>
      ) : (
        <div className="q-enter">
          <p className="synthesis">{CRA4_SYNTHESIS.default(answers)}</p>
          <div className="interview-actions">
            <button className="btn btn-accent" onClick={goToSim}>Meet Meridian Supply Co. &darr;</button>
            <button className="restart" onClick={restart}>Start over</button>
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('interview-root')).render(<Interview />);