// Survey Builder — add questions, publish settings, thank-you editor

function Builder({ survey, onBack, onSave, onOpenPublic, onOpenResponses }) {
  const [s, setS] = React.useState(survey);
  const [tab, setTab] = React.useState('build'); // build | publish | thanks
  const [selectedId, setSelectedId] = React.useState(s.questions[0]?.id);
  const [addOpen, setAddOpen] = React.useState(false);

  const update = (patch) => setS(prev => ({ ...prev, ...patch }));
  const updateQ = (id, patch) => setS(prev => ({
    ...prev, questions: prev.questions.map(q => q.id === id ? { ...q, ...patch } : q),
  }));
  const removeQ = (id) => setS(prev => ({
    ...prev, questions: prev.questions.filter(q => q.id !== id),
  }));
  const duplicateQ = (id) => setS(prev => {
    const q = prev.questions.find(q => q.id === id);
    const copy = { ...q, id: 'q' + Date.now(), title: q.title };
    const idx = prev.questions.findIndex(x => x.id === id);
    const out = [...prev.questions];
    out.splice(idx + 1, 0, copy);
    return { ...prev, questions: out };
  });
  const addQ = (type) => {
    const nq = {
      id: 'q' + Date.now(), type, required: false,
      title: 'Untitled question',
      help: '',
      options: (type === 'single' || type === 'multi' || type === 'dropdown') ? ['Option 1', 'Option 2'] : undefined,
      scaleMin: type === 'scale' ? 1 : undefined,
      scaleMax: type === 'scale' ? 5 : undefined,
      scaleLowLabel: type === 'scale' ? 'Low' : undefined,
      scaleHighLabel: type === 'scale' ? 'High' : undefined,
    };
    setS(prev => ({ ...prev, questions: [...prev.questions, nq] }));
    setSelectedId(nq.id);
    setAddOpen(false);
  };
  const moveQ = (id, dir) => setS(prev => {
    const idx = prev.questions.findIndex(q => q.id === id);
    if (idx === -1) return prev;
    const nextIdx = idx + dir;
    if (nextIdx < 0 || nextIdx >= prev.questions.length) return prev;
    const out = [...prev.questions];
    [out[idx], out[nextIdx]] = [out[nextIdx], out[idx]];
    return { ...prev, questions: out };
  });

  const selected = s.questions.find(q => q.id === selectedId) || s.questions[0];

  return (
    <div style={{ minHeight: '100%', background: 'var(--paper)' }}>
      <AdminTopbar active="surveys" onLogout={() => {}} />

      {/* sub header */}
      <div style={{
        borderBottom: '1px solid var(--line)', background: 'var(--paper)',
        position: 'sticky', top: 69, zIndex: 9,
      }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', padding: '16px 40px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'nowrap' }}>
          <button className="btn btn-text" onClick={onBack} style={{ color: 'var(--muted)' }}>
            {Icon.back(14)} Surveys
          </button>
          <span style={{ color: 'var(--line-2)' }}>/</span>
          <input
            className="input-bare"
            value={s.title}
            onChange={e => update({ title: e.target.value })}
            style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400, maxWidth: 520 }}
          />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 8 }}>
            <span className="dot" style={{ background: s.status === 'live' ? 'var(--red)' : 'var(--muted-2)' }}/>
            <span style={{ fontSize: 12, color: 'var(--muted)', textTransform: 'capitalize' }}>{s.status}</span>
            {s.status !== 'draft' && (
              <button
                className="btn btn-text"
                onClick={() => onSave({ ...s, status: s.status === 'live' ? 'closed' : 'live' })}
                style={{ fontSize: 11, color: 'var(--red)', padding: '2px 6px' }}
                title={s.status === 'live' ? 'Close this survey' : 'Re-open this survey'}
              >
                {s.status === 'live' ? 'Close' : 'Re-open'}
              </button>
            )}
          </div>

          <div style={{ flex: 1 }} />

          <div style={{ display: 'flex', gap: 2, padding: 3, border: '1px solid var(--line)', borderRadius: 2, flexShrink: 0 }}>
            {[['build', 'Build'], ['publish', 'Publish'], ['thanks', 'Thank you']].map(([id, label]) => (
              <button key={id} onClick={() => setTab(id)} style={{
                border: 'none', background: tab === id ? 'var(--ink)' : 'transparent',
                color: tab === id ? 'var(--paper)' : 'var(--ink)',
                padding: '7px 14px', borderRadius: 2, cursor: 'pointer',
                fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 500,
                whiteSpace: 'nowrap',
              }}>{label}</button>
            ))}
          </div>

          {s.status === 'live' && (
            <button className="btn btn-ghost" onClick={onOpenPublic}>{Icon.eye(14)} Open public link</button>
          )}
          {onOpenResponses && (
            <button className="btn btn-ghost" onClick={onOpenResponses}>
              Responses
            </button>
          )}
          <button className="btn btn-ghost" onClick={() => onSave({ ...s, status: 'draft' })}>Save draft</button>
          <button className="btn btn-red" onClick={() => onSave({ ...s, status: 'live' })}>
            {s.status === 'live' ? 'Save changes' : 'Save & publish'}
          </button>
        </div>
      </div>

      {tab === 'build' && (
        <BuildTab
          s={s} selected={selected} setSelectedId={setSelectedId}
          updateQ={updateQ} removeQ={removeQ} duplicateQ={duplicateQ}
          moveQ={moveQ}
          addOpen={addOpen} setAddOpen={setAddOpen} addQ={addQ}
        />
      )}
      {tab === 'publish' && <PublishTab s={s} update={update} />}
      {tab === 'thanks' && <ThanksTab s={s} update={update} />}
    </div>
  );
}

// ───────── BUILD TAB ─────────
function BuildTab({ s, selected, setSelectedId, updateQ, removeQ, duplicateQ, moveQ, addOpen, setAddOpen, addQ }) {
  return (
    <div style={{
      maxWidth: 1400, margin: '0 auto', padding: '32px 40px 80px',
      display: 'grid', gridTemplateColumns: '260px 1fr 360px', gap: 32,
    }}>
      {/* LEFT: question list */}
      <div>
        <Eyebrow>Questions · {s.questions.length}</Eyebrow>
        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 2 }}>
          {s.questions.map((q, i) => (
            <button key={q.id} onClick={() => setSelectedId(q.id)} style={{
              textAlign: 'left', border: 'none', cursor: 'pointer',
              padding: '10px 12px', borderRadius: 2,
              background: q.id === selected?.id ? 'var(--paper-2)' : 'transparent',
              borderLeft: q.id === selected?.id ? '2px solid var(--red)' : '2px solid transparent',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', width: 18 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ fontSize: 13, lineHeight: 1.3, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {q.title || <em style={{ color: 'var(--muted)' }}>Untitled</em>}
              </span>
              {q.required && <span style={{ color: 'var(--red)' }}>*</span>}
            </button>
          ))}
        </div>
        <div style={{ position: 'relative', marginTop: 12 }}>
          <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setAddOpen(v => !v)}>
            {Icon.plus(14)} Add question
          </button>
          {addOpen && (
            <div style={{
              position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 6,
              background: 'var(--paper)', border: '1px solid var(--line)',
              borderRadius: 2, boxShadow: '0 12px 40px rgba(0,0,0,0.08)',
              padding: 6, zIndex: 20,
            }}>
              {QUESTION_TYPES.map(t => (
                <button key={t.id} onClick={() => addQ(t.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  width: '100%', padding: '10px 12px', border: 'none',
                  background: 'transparent', cursor: 'pointer', borderRadius: 2,
                  fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink)', textAlign: 'left',
                }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-2)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <span style={{
                    width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: 'var(--paper-2)', borderRadius: 2, fontFamily: 'var(--font-mono)', fontSize: 12,
                  }}>{t.glyph}</span>
                  {t.label}
                </button>
              ))}
            </div>
          )}
        </div>

      </div>

      {/* CENTER: editor */}
      <div>
        {selected ? (
          <QuestionEditor q={selected} updateQ={updateQ} removeQ={removeQ} duplicateQ={duplicateQ} moveQ={moveQ} index={s.questions.findIndex(x => x.id === selected.id) + 1} total={s.questions.length}/>
        ) : (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--muted)' }}>No question selected</div>
        )}
      </div>

      {/* RIGHT: inspector */}
      <div>
        {selected && <Inspector q={selected} updateQ={updateQ} />}
      </div>
    </div>
  );
}

function QuestionEditor({ q, updateQ, removeQ, duplicateQ, moveQ, index, total }) {
  return (
    <div className="fade-in" key={q.id} style={{
      background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 2, padding: 40,
      position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Eyebrow>Question {String(index).padStart(2, '0')} / {String(total).padStart(2, '0')}</Eyebrow>
          <span style={{ color: 'var(--line-2)' }}>·</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--red)' }}>
            {QUESTION_TYPES.find(t => t.id === q.type)?.label}
          </span>
        </div>
        <div style={{ display: 'flex', gap: 2 }}>
          <button className="btn btn-text" onClick={() => moveQ(q.id, -1)} title="Move up">↑</button>
          <button className="btn btn-text" onClick={() => moveQ(q.id, 1)} title="Move down">↓</button>
          <button className="btn btn-text" onClick={() => duplicateQ(q.id)} title="Duplicate">{Icon.copy(14)}</button>
          <button className="btn btn-text" onClick={() => removeQ(q.id)} title="Delete" style={{ color: 'var(--red)' }}>{Icon.trash(14)}</button>
        </div>
      </div>

      <textarea
        value={q.title}
        onChange={e => updateQ(q.id, { title: e.target.value })}
        placeholder="Ask something…"
        rows={2}
        style={{
          width: '100%', border: 0, outline: 'none', resize: 'none',
          fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 400,
          lineHeight: 1.2, background: 'transparent', color: 'var(--ink)',
          padding: 0, marginBottom: 8,
        }}
      />
      <input
        value={q.help || ''}
        onChange={e => updateQ(q.id, { help: e.target.value })}
        placeholder="Helper text (optional)"
        className="input-bare"
        style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 28 }}
      />

      <Hair />

      <div style={{ marginTop: 28 }}>
        <QuestionPreview q={q} updateQ={updateQ} editable />
      </div>
    </div>
  );
}

function QuestionPreview({ q, updateQ, editable }) {
  if (q.type === 'short') {
    return <div className="input" style={{ color: 'var(--muted-2)' }}>Short answer will appear here…</div>;
  }
  if (q.type === 'long') {
    return <div className="input" style={{ color: 'var(--muted-2)', minHeight: 100 }}>Paragraph answer…</div>;
  }
  if (q.type === 'single' || q.type === 'multi') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {(q.options || []).map((o, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--line)' }}>
            <span style={{
              width: 18, height: 18, border: '1.5px solid var(--ink)',
              borderRadius: q.type === 'single' ? '50%' : 2,
            }}/>
            {editable ? (
              <input className="input-bare" value={o} style={{ fontSize: 15 }}
                onChange={e => updateQ(q.id, { options: q.options.map((x, xi) => xi === i ? e.target.value : x) })}/>
            ) : (
              <span style={{ fontSize: 15 }}>{o}</span>
            )}
            {editable && (
              <button className="btn btn-text" onClick={() => updateQ(q.id, { options: q.options.filter((_, xi) => xi !== i) })}
                style={{ color: 'var(--muted)' }}>{Icon.x(12)}</button>
            )}
          </div>
        ))}
        {q.allowOther && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--line)' }}>
            <span style={{
              width: 18, height: 18, border: '1.5px solid var(--ink)',
              borderRadius: q.type === 'single' ? '50%' : 2,
            }}/>
            <span style={{ fontSize: 15, color: 'var(--muted)', fontStyle: 'italic' }}>Other (please specify)…</span>
          </div>
        )}
        {editable && (
          <button className="btn btn-text" onClick={() => updateQ(q.id, { options: [...(q.options || []), 'New option'] })}
            style={{ color: 'var(--red)', marginTop: 6, alignSelf: 'flex-start' }}>
            {Icon.plus(12)} Add option
          </button>
        )}
      </div>
    );
  }
  if (q.type === 'dropdown') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{
          padding: '12px 16px', border: '1px solid var(--line)', borderRadius: 2,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          color: 'var(--muted-2)', fontSize: 15,
        }}>
          Choose one… {Icon.chev(14)}
        </div>
        {editable && (q.options || []).map((o, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', width: 18 }}>{String(i + 1).padStart(2, '0')}</span>
            <input className="input-bare" value={o} style={{ fontSize: 14 }}
              onChange={e => updateQ(q.id, { options: q.options.map((x, xi) => xi === i ? e.target.value : x) })}/>
            <button className="btn btn-text" onClick={() => updateQ(q.id, { options: q.options.filter((_, xi) => xi !== i) })}
              style={{ color: 'var(--muted)' }}>{Icon.x(12)}</button>
          </div>
        ))}
        {editable && (
          <button className="btn btn-text" onClick={() => updateQ(q.id, { options: [...(q.options || []), 'New option'] })}
            style={{ color: 'var(--red)', alignSelf: 'flex-start' }}>
            {Icon.plus(12)} Add option
          </button>
        )}
      </div>
    );
  }
  if (q.type === 'scale') {
    const ticks = [];
    for (let i = q.scaleMin; i <= q.scaleMax; i++) ticks.push(i);
    return (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <span style={{ fontSize: 12, color: 'var(--muted)' }}>{q.scaleLowLabel}</span>
          <span style={{ fontSize: 12, color: 'var(--muted)' }}>{q.scaleHighLabel}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {ticks.map(t => (
            <div key={t} style={{
              flex: 1, height: 52, border: '1px solid var(--line)', borderRadius: 2,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink)',
            }}>{t}</div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

function Inspector({ q, updateQ }) {
  return (
    <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 2, padding: 24 }}>
      <Eyebrow>Inspector</Eyebrow>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '20px 0 16px' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>Required</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Participants can't skip this.</div>
        </div>
        <Toggle on={q.required} onChange={v => updateQ(q.id, { required: v })}/>
      </div>
      <Hair />

      {q.type === 'scale' && (
        <div style={{ marginTop: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
            <div>
              <label className="label">Min</label>
              <input className="input" type="number" value={q.scaleMin} onChange={e => updateQ(q.id, { scaleMin: +e.target.value })}/>
            </div>
            <div>
              <label className="label">Max</label>
              <input className="input" type="number" value={q.scaleMax} onChange={e => updateQ(q.id, { scaleMax: +e.target.value })}/>
            </div>
          </div>
          <label className="label">Low label</label>
          <input className="input" style={{ marginBottom: 10 }} value={q.scaleLowLabel || ''} onChange={e => updateQ(q.id, { scaleLowLabel: e.target.value })}/>
          <label className="label">High label</label>
          <input className="input" value={q.scaleHighLabel || ''} onChange={e => updateQ(q.id, { scaleHighLabel: e.target.value })}/>
        </div>
      )}

      {(q.type === 'single' || q.type === 'multi' || q.type === 'dropdown') && (
        <>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '16px 0' }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Allow "Other"</div>
              <div style={{ fontSize: 11, color: 'var(--muted)' }}>Adds a free-text "Other" option.</div>
            </div>
            <Toggle on={!!q.allowOther} onChange={v => updateQ(q.id, { allowOther: v })}/>
          </div>
        </>
      )}
    </div>
  );
}

// ───────── PUBLISH TAB ─────────
function PublishTab({ s, update }) {
  return (
    <div style={{ maxWidth: 960, margin: '0 auto', padding: '48px 40px 80px' }}>
      <Eyebrow>Publish</Eyebrow>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 40, lineHeight: 1.1, margin: '12px 0 36px' }}>
        Where should this live?
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <label className="label">Directory slug</label>
          <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--line)', borderRadius: 2 }}>
            <span style={{
              padding: '12px 14px', background: 'var(--paper-2)',
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--muted)',
              borderRight: '1px solid var(--line)',
            }}>erobella.com/surveys/</span>
            <input
              value={s.directory}
              onChange={e => update({ directory: e.target.value.toLowerCase().replace(/\s+/g, '-') })}
              style={{
                flex: 1, border: 0, outline: 'none', padding: '12px 14px',
                fontFamily: 'var(--font-mono)', fontSize: 13, background: 'transparent',
              }}
            />
            <button className="btn btn-text" style={{ color: 'var(--muted)' }}>{Icon.copy(14)}</button>
          </div>
          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 8, fontFamily: 'var(--font-mono)' }}>
            Must be unique. Lowercase letters, numbers, hyphens.
          </div>

          <label className="label" style={{ marginTop: 24 }}>Closes at</label>
          <input className="input" value={s.closes} onChange={e => update({ closes: e.target.value })}/>

          <label className="label" style={{ marginTop: 24 }}>Response goal</label>
          <input className="input" type="number" value={s.goal} onChange={e => update({ goal: +e.target.value })}/>

          <label className="label" style={{ marginTop: 24 }}>Intro text (optional)</label>
          <textarea
            className="input"
            rows={4}
            value={s.intro || ''}
            onChange={e => update({ intro: e.target.value })}
            placeholder="Shown to participants above the first question."
            style={{ resize: 'vertical', fontFamily: 'var(--font-ui)' }}
          />

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 24, padding: 14, border: '1px solid var(--line)', borderRadius: 2 }}>
            <div style={{ paddingRight: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Anonymous survey</div>
              <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
                Show participants explicit anonymity copy and the "submit anonymously" button.
              </div>
            </div>
            <Toggle on={!!s.anonymous} onChange={v => update({ anonymous: v })}/>
          </div>
        </div>

        <div>
          <label className="label">Access</label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              ['public', 'Public link', 'Anyone with the link can respond.'],
              ['gated', 'Age-gated', 'Show our 18+ confirmation before the first question.'],
              ['invite', 'Invite-only', 'Require a unique token emailed to each participant.'],
            ].map(([id, label, desc]) => {
              const active = (s.access || 'gated') === id;
              return (
                <button key={id} onClick={() => update({ access: id })} style={{
                  textAlign: 'left', border: '1px solid ' + (active ? 'var(--ink)' : 'var(--line)'),
                  background: active ? 'var(--paper-2)' : 'transparent', borderRadius: 2,
                  padding: 16, cursor: 'pointer', marginBottom: 8,
                  display: 'flex', alignItems: 'flex-start', gap: 12,
                }}>
                  <span style={{
                    width: 16, height: 16, borderRadius: '50%', border: '1.5px solid var(--ink)',
                    marginTop: 2, position: 'relative', flexShrink: 0,
                  }}>
                    {active && <span style={{ position: 'absolute', inset: 3, borderRadius: '50%', background: 'var(--red)' }}/>}
                  </span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>{desc}</div>
                  </div>
                </button>
              );
            })}
          </div>

          <div style={{ marginTop: 24, padding: 16, background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 2 }}>
            <Eyebrow>Link preview</Eyebrow>
            <div style={{
              marginTop: 10, padding: '10px 12px', background: 'var(--paper)',
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink)', borderRadius: 2,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              {Icon.link(12)} erobella.com/surveys/{s.directory}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────── THANKS TAB ─────────
function ThanksTab({ s, update }) {
  const ty = s.thankYou || { title: 'Thank you.', body: '', cta: '', ctaUrl: '' };
  const setTY = (patch) => update({ thankYou: { ...ty, ...patch } });

  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 40px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
      <div>
        <Eyebrow>Thank-you page</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 40, lineHeight: 1.1, margin: '12px 0 28px' }}>
          The last thing they'll see.
        </h2>

        <label className="label">Headline</label>
        <input className="input" value={ty.title} onChange={e => setTY({ title: e.target.value })} style={{ marginBottom: 16 }}/>

        <label className="label">Body</label>
        <textarea className="input" rows={6} value={ty.body} onChange={e => setTY({ body: e.target.value })} style={{ resize: 'vertical', fontFamily: 'var(--font-ui)' }}/>

        <label className="label" style={{ marginTop: 16 }}>Call-to-action label (optional)</label>
        <input className="input" value={ty.cta || ''} onChange={e => setTY({ cta: e.target.value })} placeholder="e.g. Visit erobella.com"/>

        <label className="label" style={{ marginTop: 16 }}>Call-to-action URL</label>
        <input
          className="input"
          value={ty.ctaUrl || ''}
          onChange={e => setTY({ ctaUrl: e.target.value })}
          placeholder="https://erobella.com"
        />
        <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>
          Leave URL blank to render the label as plain text only.
        </div>
      </div>

      {/* live preview */}
      <div>
        <Eyebrow>Live preview</Eyebrow>
        <div style={{
          marginTop: 12, aspectRatio: '4/5', borderRadius: 2, border: '1px solid var(--line)',
          background: 'var(--paper)', padding: 48, display: 'flex', flexDirection: 'column',
          justifyContent: 'center', alignItems: 'center', textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: 24, left: 24 }}>
            <Wordmark size={16}/>
          </div>
          <div style={{ marginBottom: 24 }}>
            <Asterisk size={28}/>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 52, lineHeight: 1.05, margin: 0 }}>
            {ty.title}
          </h1>
          <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.55, maxWidth: 360, margin: '20px 0 28px' }}>
            {ty.body}
          </p>
          {ty.cta && (
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--red)' }}>
              {ty.cta} →
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Builder = Builder;
window.QuestionPreview = QuestionPreview;