// TRUVIS Landing v2 — Regulator quiz: five questions → ADGM / DIFC / CBUAE fit.
// Self-serve value exchange for cold ad traffic. Qualitative only — no capital
// figures here; the Jurisdictions comparator below holds the fact-locked tables.
const { useState: useSQz } = React;

const QUIZ_QUESTIONS = [
  {
    key: 'activity',
    q: 'What will your business do?',
    options: [
      { label: 'Payments, open finance or stored value', scores: { cbuae: 3 }, why: 'Payments, open finance and stored value are licensed onshore by the CBUAE.' },
      { label: 'Asset or fund management', scores: { adgm: 2, difc: 2 }, why: 'Fund and asset management sit in the financial free zones — ADGM or DIFC.' },
      { label: 'Advisory or arranging deals', scores: { adgm: 2, difc: 2 }, why: 'Advisory and arranging activities are free-zone licences — ADGM or DIFC.' },
      { label: 'Digital assets or crypto', scores: { adgm: 2, difc: 2 }, why: 'Both ADGM and DIFC run dedicated digital-asset frameworks.' },
      { label: 'Lending or banking-type services', scores: { cbuae: 2, adgm: 1 }, why: 'Onshore lending and banking-type services point to the CBUAE.' },
    ],
  },
  {
    key: 'customers',
    q: 'Who are your customers?',
    options: [
      { label: 'UAE retail consumers', scores: { cbuae: 3 }, why: 'Serving UAE retail consumers onshore means the CBUAE perimeter.' },
      { label: 'Professional or institutional investors', scores: { adgm: 2, difc: 2 }, why: 'Professional and institutional clients fit the ADGM and DIFC regimes.' },
      { label: 'Mostly outside the UAE', scores: { adgm: 1, difc: 1 }, why: 'International client bases usually run well from a financial free zone.' },
    ],
  },
  {
    key: 'base',
    q: 'Where do you want to be based?',
    options: [
      { label: 'Abu Dhabi', scores: { adgm: 2 }, why: 'You want an Abu Dhabi base — ADGM is the financial free zone there.' },
      { label: 'Dubai', scores: { difc: 2 }, why: 'You want a Dubai base — DIFC is the financial free zone there.' },
      { label: 'Onshore, anywhere in the UAE', scores: { cbuae: 2 }, why: 'An onshore UAE base points to a CBUAE licence.' },
      { label: 'No preference yet', scores: {}, why: null },
    ],
  },
  {
    key: 'stage',
    q: 'Is your product live with real customers?',
    options: [
      { label: 'Not yet — still building or testing', scores: {}, sandbox: true, why: null },
      { label: 'Yes — live and proven', scores: {}, why: null },
    ],
  },
  {
    key: 'timeline',
    q: 'When do you want to be licensed?',
    options: [
      { label: 'Within 6 months', scores: {}, urgent: true, why: null },
      { label: '6 to 12 months', scores: {}, why: null },
      { label: 'Still exploring', scores: {}, why: null },
    ],
  },
];

const QUIZ_RESULT_META = {
  adgm: { name: 'ADGM (FSRA)', tab: 'adgm', blurb: 'Abu Dhabi Global Market — English common law, regulated by the FSRA.' },
  difc: { name: 'DIFC (DFSA)', tab: 'difc', blurb: 'Dubai International Financial Centre — English common law, regulated by the DFSA.' },
  cbuae: { name: 'CBUAE', tab: 'cbuae', blurb: 'The Central Bank of the UAE — onshore licensing for payments, open finance and stored value.' },
};

const RegulatorQuiz = () => {
  const [step, setStep] = useSQz(0);
  const [picks, setPicks] = useSQz([]);

  const pick = (opt) => {
    const next = [...picks];
    next[step] = opt;
    setPicks(next);
    setStep(step + 1);
  };
  const back = () => setStep(Math.max(0, step - 1));
  const restart = () => { setPicks([]); setStep(0); };

  const done = step >= QUIZ_QUESTIONS.length;

  let result = null;
  if (done) {
    const totals = { adgm: 0, difc: 0, cbuae: 0 };
    picks.forEach((opt) => {
      Object.entries(opt.scores || {}).forEach(([k, v]) => { totals[k] += v; });
    });
    const ranked = Object.entries(totals).sort((a, b) => b[1] - a[1]);
    const [topKey, topScore] = ranked[0];
    const tied = ranked.filter(([, v]) => v === topScore).map(([k]) => k);
    const sandbox = picks.some((o) => o.sandbox);
    const urgent = picks.some((o) => o.urgent);
    const whys = picks.map((o) => o.why).filter(Boolean).slice(0, 3);
    result = { keys: tied.length > 1 && tied.includes('adgm') && tied.includes('difc') ? ['adgm', 'difc'] : [topKey], sandbox, urgent, whys };
  }

  return (
    <section className="section" id="quiz" data-screen-label="Quiz">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Five questions</span>
          <h2 className="section-title">Which regulator fits your business?</h2>
          <p className="section-lede">
            Answer five quick questions and get a starting point — ADGM, DIFC or CBUAE.
            It takes under a minute, and nothing is collected.
          </p>
        </div>

        <div className="reveal" style={{ maxWidth: 720, margin: '0 auto' }}>
          <div className="form-card" role="group" aria-label="Regulator fit quiz">
            {!done && (
              <>
                <p className="form-sub" style={{ marginBottom: 8 }}>
                  Question {step + 1} of {QUIZ_QUESTIONS.length}
                </p>
                <h3 style={{ margin: '0 0 20px', fontSize: 22, color: 'var(--tv-petroleum-blue)' }}>
                  {QUIZ_QUESTIONS[step].q}
                </h3>
                <div style={{ display: 'grid', gap: 10 }}>
                  {QUIZ_QUESTIONS[step].options.map((opt) => (
                    <button
                      key={opt.label}
                      type="button"
                      className="btn btn-ghost"
                      style={{ justifyContent: 'flex-start', textAlign: 'left', width: '100%' }}
                      onClick={() => pick(opt)}
                    >
                      {opt.label}
                    </button>
                  ))}
                </div>
                {step > 0 && (
                  <button type="button" onClick={back} style={{ marginTop: 16, background: 'none', border: 'none', color: 'var(--tv-petroleum-blue)', cursor: 'pointer', textDecoration: 'underline', padding: 0, fontSize: 14 }}>
                    ← Back
                  </button>
                )}
              </>
            )}

            {done && result && (
              <div aria-live="polite">
                <p className="form-sub" style={{ marginBottom: 8 }}>Your starting point</p>
                <h3 style={{ margin: '0 0 8px', fontSize: 24, color: 'var(--tv-petroleum-blue)' }}>
                  {result.keys.map((k) => QUIZ_RESULT_META[k].name).join(' or ')}
                </h3>
                {result.keys.map((k) => (
                  <p key={k} style={{ margin: '0 0 8px', color: 'var(--tv-slate, #475569)' }}>{QUIZ_RESULT_META[k].blurb}</p>
                ))}
                {result.whys.length > 0 && (
                  <ul style={{ margin: '12px 0 0', paddingLeft: 18, color: 'var(--tv-slate, #475569)' }}>
                    {result.whys.map((w) => <li key={w} style={{ marginBottom: 6 }}>{w}</li>)}
                  </ul>
                )}
                {result.sandbox && (
                  <p style={{ margin: '14px 0 0', color: 'var(--tv-slate, #475569)' }}>
                    Your product is not live yet, so a sandbox route — the ADGM RegLab or the DFSA
                    Innovation Testing Licence — may be the right first step before a full licence.
                  </p>
                )}
                <p style={{ margin: '14px 0 0', color: 'var(--tv-slate, #475569)' }}>
                  {result.urgent
                    ? 'A full licence usually takes 6–12 months, so with your timeline the first regulator conversation matters now.'
                    : 'This is a starting point, not advice. The right answer depends on details we would cover in one call.'}
                </p>
                <div className="form-submit-row" style={{ marginTop: 20, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <a className="btn btn-primary-dark" href="#contact">Book a confidential consultation</a>
                  <a className="btn btn-ghost" href={`#jurisdictions-${QUIZ_RESULT_META[result.keys[0]].tab}`}>
                    See the {result.keys.map((k) => QUIZ_RESULT_META[k].name.split(' ')[0]).join(' / ')} details
                  </a>
                </div>
                <button type="button" onClick={restart} style={{ marginTop: 16, background: 'none', border: 'none', color: 'var(--tv-petroleum-blue)', cursor: 'pointer', textDecoration: 'underline', padding: 0, fontSize: 14 }}>
                  Start again
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

window.TV_QUIZ = { RegulatorQuiz };