// ════════════════════════════════════════════════════════════════════
//  InvestorQuiz — UI layer (launcher section + fullscreen overlay +
//  result). Depends on globals from InvestorQuiz.jsx:
//  Glyph, QUIZ_QUESTIONS, QUIZ_ARCHETYPES, gradeQuiz.
// ════════════════════════════════════════════════════════════════════

const _INK = '#2C2C2A', _CREAM = '#F4F1EC', _GOLD = '#B8922A', _GOLDL = '#D4AF6A', _MUTE = '#8A8A85';

const eyebrowStyle = { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: _MUTE };

// ─── Single-select list card (Trade screenshot 2) ───────────────────
const QuizListCard = ({ opt, selected, onClick }) =>
  React.createElement('button', {
    onClick, 'data-hover': '',
    style: {
      display: 'flex', alignItems: 'center', gap: 22, width: '100%', textAlign: 'left',
      padding: '20px 22px', cursor: 'pointer', background: selected ? 'rgba(184,146,42,0.07)' : 'transparent',
      border: `1px solid ${selected ? _GOLD : 'rgba(44,44,42,0.16)'}`,
      transition: 'border-color 240ms, background 240ms', position: 'relative',
    },
  },
    React.createElement('div', { style: { flexShrink: 0, width: 40, height: 40, display: 'grid', placeItems: 'center' } },
      React.createElement(Glyph, { name: opt.icon, size: 32, color: selected ? _GOLD : _INK, opacity: selected ? 0.9 : 0.55 })
    ),
    React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 21, fontWeight: 300, color: _INK, lineHeight: 1.25, flex: 1 } }, opt.t),
    React.createElement('div', {
      style: {
        flexShrink: 0, width: 16, height: 16, borderRadius: '50%',
        border: `1px solid ${selected ? _GOLD : 'rgba(44,44,42,0.3)'}`,
        display: 'grid', placeItems: 'center', transition: 'border-color 240ms',
      },
    }, selected && React.createElement('div', { style: { width: 8, height: 8, borderRadius: '50%', background: _GOLD } }))
  );

// ─── Multi-select tile (Trade screenshot 1) ─────────────────────────
const QuizTile = ({ opt, selected, onClick }) =>
  React.createElement('button', {
    onClick, 'data-hover': '',
    style: {
      position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', gap: 16, padding: '30px 18px 24px', cursor: 'pointer',
      background: selected ? 'rgba(184,146,42,0.07)' : 'transparent',
      border: `1px solid ${selected ? _GOLD : 'rgba(44,44,42,0.16)'}`,
      transition: 'border-color 240ms, background 240ms',
    },
  },
    React.createElement('div', {
      style: {
        position: 'absolute', top: 12, right: 12, width: 15, height: 15, borderRadius: '50%',
        border: `1px solid ${selected ? _GOLD : 'rgba(44,44,42,0.28)'}`, display: 'grid', placeItems: 'center',
      },
    }, selected && React.createElement('div', { style: { width: 7, height: 7, borderRadius: '50%', background: _GOLD } })),
    React.createElement(Glyph, { name: opt.icon, size: 38, color: selected ? _GOLD : _INK, opacity: selected ? 0.9 : 0.5 }),
    React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, letterSpacing: '0.06em', color: _INK, textAlign: 'center', lineHeight: 1.5 } }, opt.t)
  );

// ─── Beyond-real-estate allocation bar ──────────────────────────────
const AllocBar = ({ label, pct, i }) =>
  React.createElement('div', { style: { marginBottom: 16 } },
    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 7 } },
      React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.08em', color: 'rgba(44,44,42,0.7)' } }, label),
      React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 18, fontWeight: 300, color: _INK } }, `${pct}%`)
    ),
    React.createElement('div', { style: { height: 2, background: 'rgba(44,44,42,0.1)', position: 'relative' } },
      React.createElement('div', {
        style: {
          position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`,
          background: i === 0 ? _GOLD : 'rgba(44,44,42,0.45)',
        },
      })
    )
  );

// ─── Minimum-investment block (how you'd actually enter) ────────────
const FinancingBlock = ({ fin }) => {
  const f = QUIZ_FINANCING[fin];
  if (!f) return null;

  const Header = React.createElement('div', { style: { marginBottom: 28 } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 } },
      React.createElement('div', { style: { width: 16, height: 1, background: _GOLDL } }),
      React.createElement('span', { style: { ...eyebrowStyle, color: _GOLDL, letterSpacing: '0.18em' } }, 'How you’d begin'),
      React.createElement('span', {
        style: { marginLeft: 4, fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.55)', border: '1px solid rgba(244,241,236,0.25)', padding: '3px 9px' },
      }, f.stage)
    ),
    React.createElement('h3', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.6vw,32px)', fontWeight: 300, color: _CREAM, lineHeight: 1.18, maxWidth: 620 } }, f.headline)
  );

  let body;
  if (f.type === 'plan') {
    body = React.createElement('div', null,
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(244,241,236,0.14)' } },
        [[f.downLabel, f.down], [f.thenLabel, f.then]].map(([l, v], i) =>
          React.createElement('div', { key: l, style: { padding: '22px 0', borderRight: i === 0 ? '1px solid rgba(244,241,236,0.12)' : 'none', paddingLeft: i === 1 ? 32 : 0 } },
            React.createElement('div', { style: { ...eyebrowStyle, fontSize: 7.5, color: 'rgba(244,241,236,0.45)', marginBottom: 10 } }, l),
            React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 46, fontWeight: 300, color: _GOLDL, lineHeight: 0.95 } }, v)
          )
        )
      ),
      React.createElement('div', { style: { borderTop: '1px solid rgba(244,241,236,0.12)', paddingTop: 18, marginTop: 4 } },
        React.createElement('div', { style: { ...eyebrowStyle, fontSize: 7.5, color: 'rgba(244,241,236,0.45)', marginBottom: 8 } }, 'The schedule'),
        React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(244,241,236,0.72)', lineHeight: 1.9, maxWidth: 640 } }, f.schedule)
      )
    );
  } else {
    body = React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(244,241,236,0.14)' } },
      f.options.map(([t, d], i) =>
        React.createElement('div', { key: t, style: { padding: '24px 0', borderRight: i === 0 ? '1px solid rgba(244,241,236,0.12)' : 'none', paddingLeft: i === 1 ? 32 : 0, paddingRight: i === 0 ? 32 : 0 } },
          React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 300, color: _GOLDL, lineHeight: 1.1, marginBottom: 12 } }, t),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(244,241,236,0.72)', lineHeight: 1.95 } }, d)
        )
      )
    );
  }

  return React.createElement('div', { style: { background: _INK, padding: 'clamp(34px,4vw,52px) clamp(28px,4vw,56px)' } }, Header, body);
};

// ─── Result screen ───────────────────────────────────────────────────
const QuizResult = ({ result, onRetake, onContact }) => {
  const a = result.archetype;
  const p = a.project;
  const Sketch = window[a.sketch];

  return React.createElement('div', { style: { maxWidth: 1180, margin: '0 auto', padding: '54px 52px 90px', animation: 'qzFade 600ms ease' } },

    // intro line
    React.createElement('div', { style: { ...eyebrowStyle, marginBottom: 40, textAlign: 'center' } }, 'Your assessment · complete'),

    // split: left profile / right project
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'start' } },

      // ── LEFT — the archetype ──
      React.createElement('div', null,
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 } },
          React.createElement('div', { style: { width: 16, height: 1, background: _GOLD } }),
          React.createElement('span', { style: { ...eyebrowStyle, color: _GOLD, letterSpacing: '0.18em' } }, 'Your investor profile')
        ),
        React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(34px,4vw,58px)', fontWeight: 300, color: _INK, lineHeight: 1.05, marginBottom: 14 } }, a.name),
        React.createElement('p', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 21, fontStyle: 'italic', color: _MUTE, lineHeight: 1.4, marginBottom: 26 } }, a.sub),
        React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10.5, fontWeight: 300, color: 'rgba(44,44,42,0.66)', lineHeight: 2, marginBottom: 30 } }, a.desc),
        React.createElement('div', { style: { display: 'flex', gap: 0, borderTop: '1px solid rgba(44,44,42,0.12)' } },
          a.traits.map(([l, v], i) =>
            React.createElement('div', { key: l, style: { flex: 1, padding: '18px 0', borderRight: i < 2 ? '1px solid rgba(44,44,42,0.1)' : 'none' } },
              React.createElement('div', { style: { ...eyebrowStyle, fontSize: 7, marginBottom: 8 } }, l),
              React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: _INK } }, v)
            )
          )
        )
      ),

      // ── RIGHT — example project + realized returns ──
      React.createElement('div', { style: { border: '1px solid rgba(44,44,42,0.18)', background: '#fff', position: 'relative' } },
        // match ribbon
        React.createElement('div', {
          style: {
            position: 'absolute', top: 18, right: -1, background: _GOLD, color: _CREAM,
            fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.14em', textTransform: 'uppercase',
            padding: '6px 14px',
          },
        }, `${result.match}% match`),

        React.createElement('div', { style: { padding: '30px 30px 26px', display: 'flex', gap: 22, alignItems: 'flex-start' } },
          React.createElement('div', { style: { flexShrink: 0, width: 86, height: 110, border: '1px solid rgba(44,44,42,0.12)', background: _CREAM, padding: 6 } },
            Sketch ? React.createElement(Sketch) : null
          ),
          React.createElement('div', { style: { paddingTop: 4 } },
            React.createElement('div', { style: { ...eyebrowStyle, marginBottom: 8 } }, 'Example project'),
            React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 32, fontWeight: 300, color: _INK, lineHeight: 1.05 } }, p.name),
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginTop: 10 } },
              React.createElement(DeveloperLogo, { name: p.developer, height: 20, compact: true }),
              React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, color: _MUTE, letterSpacing: '0.06em' } }, p.loc)
            ),
            React.createElement('span', {
              style: { display: 'inline-block', marginTop: 12, fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: _GOLD, border: '1px solid rgba(184,146,42,0.5)', padding: '3px 9px' },
            }, p.approach)
          )
        ),

        React.createElement('div', { style: { padding: '0 30px 26px' } },
          React.createElement('div', { style: { ...eyebrowStyle, fontSize: 7.5, marginBottom: 10 } }, 'Why this project fits you'),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(44,44,42,0.66)', lineHeight: 1.95 } }, p.why)
        ),

        // dark realized-returns panel — echoes the Return Calculator
        React.createElement('div', { style: { background: _INK, padding: '28px 30px 30px' } },
          React.createElement('div', { style: { ...eyebrowStyle, color: 'rgba(244,241,236,0.4)', fontSize: 7.5, marginBottom: 16 } }, 'What similar investors realized'),
          React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 6 } },
            React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 56, fontWeight: 300, color: _GOLDL, lineHeight: 0.9 } }, p.roi),
            React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, color: 'rgba(244,241,236,0.5)', lineHeight: 1.6, paddingBottom: 6 } }, `${p.annual}`)
          ),
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, color: 'rgba(244,241,236,0.4)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 18 } }, p.roiLabel),
          p.rows.map(([l, v]) =>
            React.createElement('div', { key: l, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '8px 0', borderBottom: '1px solid rgba(244,241,236,0.08)' } },
              React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.08em', color: 'rgba(244,241,236,0.5)' } }, l),
              React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: 'rgba(244,241,236,0.85)' } }, v)
            )
          ),
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 7, color: 'rgba(244,241,236,0.3)', lineHeight: 1.8, marginTop: 16, letterSpacing: '0.04em' } }, p.sample)
        )
      )
    ),

    // ── BELOW — beyond real estate ──
    React.createElement('div', { style: { marginTop: 64 } },
      React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 36 } }),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 60, alignItems: 'start' } },
        React.createElement('div', null,
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 } },
            React.createElement('div', { style: { width: 16, height: 1, background: _GOLD } }),
            React.createElement('span', { style: { ...eyebrowStyle, color: _GOLD, letterSpacing: '0.18em' } }, 'Beyond real estate')
          ),
          React.createElement('h3', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.6vw,34px)', fontWeight: 300, color: _INK, lineHeight: 1.15, marginBottom: 16 } },
            'What investors like you', React.createElement('br'), React.createElement('em', null, 'hold everywhere else.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(44,44,42,0.6)', lineHeight: 1.95 } }, a.beyond.note)
        ),
        React.createElement('div', { style: { paddingTop: 6 } },
          a.beyond.items.map(([l, v], i) => React.createElement(AllocBar, { key: l, label: l, pct: v, i }))
        )
      )
    ),

    // ── Minimum to begin (financing structure) ──
    React.createElement('div', { style: { marginTop: 40 } },
      React.createElement(FinancingBlock, { fin: a.fin })
    ),

    // ── CTAs ──
    React.createElement('div', { style: { marginTop: 56, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' } },
      React.createElement('button', { className: 'btn-primary', onClick: onContact, 'data-hover': '' },
        React.createElement('span', null, 'Carry this profile to a conversation →')
      ),
      React.createElement('button', { className: 'btn-ghost', onClick: onRetake, 'data-hover': '' }, 'Retake the assessment')
    )
  );
};

// ─── The overlay (question flow + result) ───────────────────────────
const QuizOverlay = ({ onClose, navigate, setSelectedProfile }) => {
  const [step, setStep]       = React.useState(0);   // 0..N-1, then N = result
  const [answers, setAnswers] = React.useState({});  // { eyebrow: [optId,...] }
  const total = QUIZ_QUESTIONS.length;
  const done  = step >= total;
  const advanceTimer = React.useRef(null);

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; clearTimeout(advanceTimer.current); };
  }, []);

  const q = !done ? QUIZ_QUESTIONS[step] : null;
  const picked = q ? (answers[q.eyebrow] || []) : [];

  const choose = (optId) => {
    if (q.type === 'single') {
      setAnswers((a) => ({ ...a, [q.eyebrow]: [optId] }));
      clearTimeout(advanceTimer.current);
      advanceTimer.current = setTimeout(() => setStep((s) => s + 1), 300);
    } else {
      setAnswers((a) => {
        const cur = a[q.eyebrow] || [];
        return { ...a, [q.eyebrow]: cur.includes(optId) ? cur.filter((x) => x !== optId) : [...cur, optId] };
      });
    }
  };

  const back = () => {
    clearTimeout(advanceTimer.current);
    if (step === 0) onClose();
    else setStep((s) => s - 1);
  };

  const result = done ? gradeQuiz(answers) : null;

  const goContact = () => {
    if (result) setSelectedProfile(result.archetype.profileId);
    onClose();
    navigate('contact');
  };
  const retake = () => { setAnswers({}); setStep(0); };

  const pct = done ? 100 : Math.round((step / total) * 100);

  return React.createElement('div', {
    style: {
      position: 'fixed', top: 66, left: 0, right: 0, bottom: 0, zIndex: 900, background: _CREAM,
      display: 'flex', flexDirection: 'column',
    },
  },
    // top progress bar
    React.createElement('div', { style: { height: 3, background: 'rgba(44,44,42,0.08)', flexShrink: 0 } },
      React.createElement('div', { style: { height: '100%', width: `${pct}%`, background: _GOLD, transition: 'width 420ms cubic-bezier(0.22,1,0.36,1)' } })
    ),

    // header row
    React.createElement('div', {
      style: {
        flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 36px', borderBottom: '1px solid rgba(44,44,42,0.1)',
      },
    },
      React.createElement('button', {
        onClick: back, 'data-hover': '',
        style: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: _MUTE, display: 'flex', alignItems: 'center', gap: 8 },
      }, '← ', React.createElement('span', null, done ? 'Back' : (step === 0 ? 'Close' : 'Back'))),
      React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: _MUTE } }, 'Investor Profile · Assessment'),
      React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.14em', color: _MUTE, minWidth: 90, textAlign: 'right' } },
        done ? 'Result' : `${String(step + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`
      )
    ),

    // body
    React.createElement('div', { style: { flex: 1, overflowY: 'auto' } },
      done
        ? React.createElement(QuizResult, { result, onRetake: retake, onContact: goContact })
        : React.createElement('div', {
            key: step, // re-trigger fade per question
            style: { minHeight: '100%', maxWidth: 1180, margin: '0 auto', padding: '0 52px', display: 'grid', gridTemplateColumns: '0.8fr 1fr', gap: 70, alignItems: 'center' },
          },
            // left editorial column
            React.createElement('div', { style: { animation: 'qzFade 500ms ease' } },
              React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(80px,11vw,150px)', fontWeight: 300, color: 'rgba(44,44,42,0.1)', lineHeight: 0.8 } }, String(step + 1).padStart(2, '0')),
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 22 } },
                React.createElement('div', { style: { width: 22, height: 1, background: _GOLD } }),
                React.createElement('span', { style: { ...eyebrowStyle, color: _GOLD, letterSpacing: '0.2em' } }, q.eyebrow)
              ),
              React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, color: 'rgba(44,44,42,0.35)', letterSpacing: '0.08em', marginTop: 24, lineHeight: 1.9, maxWidth: 240 } },
                'A two-minute, ten-question read of how you think about capital, time and place.')
            ),
            // right question column
            React.createElement('div', { style: { animation: 'qzFade 500ms ease', animationDelay: '60ms', paddingTop: 30, paddingBottom: 40 } },
              React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(26px,3.2vw,42px)', fontWeight: 300, color: _INK, lineHeight: 1.12, marginBottom: q.help ? 12 : 28 } }, q.q),
              q.help && React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, color: _MUTE, letterSpacing: '0.04em', marginBottom: 28, lineHeight: 1.7 } }, q.help),

              q.layout === 'grid'
                ? React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 } },
                    q.options.map((o) => React.createElement(QuizTile, { key: o.id, opt: o, selected: picked.includes(o.id), onClick: () => choose(o.id) }))
                  )
                : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
                    q.options.map((o) => React.createElement(QuizListCard, { key: o.id, opt: o, selected: picked.includes(o.id), onClick: () => choose(o.id) }))
                  ),

              q.type === 'multi' && React.createElement('div', { style: { marginTop: 34 } },
                React.createElement('button', {
                  className: 'btn-primary', 'data-hover': '',
                  disabled: picked.length === 0,
                  onClick: () => picked.length && setStep((s) => s + 1),
                  style: picked.length === 0 ? { opacity: 0.32, pointerEvents: 'none' } : {},
                }, React.createElement('span', null, step + 1 === total ? 'See my result →' : 'Continue →'))
              )
            )
          )
    )
  );
};

// ─── Launcher section (lives inline on the Investment page) ─────────
const InvestorQuiz = ({ navigate, setSelectedProfile }) => {
  const [open, setOpen] = React.useState(false);

  return React.createElement(React.Fragment, null,
    // ── inline invitation block ──
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 80px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', {
          'data-reveal': '',
          style: { background: _INK, padding: 'clamp(40px,5vw,68px) clamp(32px,5vw,64px)', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center' },
        },
          React.createElement('div', null,
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 } },
              React.createElement('div', { style: { width: 22, height: 1, background: _GOLDL } }),
              React.createElement('span', { style: { ...eyebrowStyle, color: _GOLDL, letterSpacing: '0.2em' } }, 'The Assessment')
            ),
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(28px,3.4vw,48px)', fontWeight: 300, color: _CREAM, lineHeight: 1.1, marginBottom: 20 } },
              'Ten questions.', React.createElement('br'), React.createElement('em', { style: { color: _GOLDL } }, 'One clear profile.')
            ),
            React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10.5, fontWeight: 300, color: 'rgba(244,241,236,0.6)', lineHeight: 2, maxWidth: 480 } },
              'Answer ten short questions and we will grade you into an investor profile — then show you a real project that fits, the returns investors like you actually realized in it, and how they hold their wealth beyond real estate.'
            )
          ),
          React.createElement('div', { style: { textAlign: 'center' } },
            React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(60px,8vw,104px)', fontWeight: 300, color: 'rgba(244,241,236,0.12)', lineHeight: 0.85, marginBottom: 4 } }, '10'),
            React.createElement('div', { style: { ...eyebrowStyle, color: 'rgba(244,241,236,0.4)', marginBottom: 28 } }, '≈ 2 minutes'),
            React.createElement('button', { className: 'btn-primary', 'data-hover': '', onClick: () => setOpen(true), style: { background: _GOLD } },
              React.createElement('span', null, 'Begin the assessment →')
            )
          )
        )
      )
    ),

    open && ReactDOM.createPortal(
      React.createElement(QuizOverlay, { onClose: () => setOpen(false), navigate, setSelectedProfile }),
      document.getElementById('root')
    )
  );
};

Object.assign(window, { InvestorQuiz });