/* Variation Mobile — real mobile layout, vertically stacked, thumb-friendly. */

function VariationMobile({ frameW = 390, frameH = 820 }) {
  const { lang, id, setLang } = useRoute();
  const t = useT(lang);
  const client = useClient(id);
  const questions = useMemo(() => makeQuestions(t), [t]);
  const total = questions.length;
  const wiz = useWizard(id, total, 'vm');
  const { state, setAnswer, next, back, start, finish, reset, unstart } = wiz;
  const stepIdx = state.step;
  const isStart = !state.started;
  const isDone = state.done;
  const onLast = stepIdx === total - 1;

  return (
    <div style={vmStyles.frame}>
      <header style={vmStyles.header}>
        <div className="cf-mono" style={{ color: 'var(--text-2)', fontSize: 12 }}>◐ {t.brand}</div>
        <LangSwitcher lang={lang} onChange={setLang} />
      </header>

      {state.started && !isDone && (
        <div className="cf-progress"><span style={{ width: `${((stepIdx+1)/total)*100}%` }} /></div>
      )}

      <main style={vmStyles.main}>
        {isStart ? (
          <div className="cf-step-enter">
            <div className="cf-mono" style={{ color: 'var(--accent)', marginBottom: 16 }}>{t.greetingKicker}</div>
            <h1 className="cf-serif" style={vmStyles.h1}>{t.greetingTitle(client.contact || client.name)}</h1>
            <p style={vmStyles.lead}>{t.greetingLead}</p>
            <button className="cf-btn cf-btn--lg" style={{ marginTop: 28, width: '100%', justifyContent: 'center' }} onClick={start}>{t.cta} →</button>
            <p className="cf-mono" style={{ color: 'var(--text-3)', marginTop: 16, textAlign: 'center', fontSize: 11 }}>{t.greetingMeta}</p>
          </div>
        ) : isDone ? (
          <div className="cf-step-enter" style={{ textAlign: 'center', position: 'relative' }}>
            <Confetti count={40} />
            <DoneCheckmark />
            <div className="cf-mono" style={{ color: 'var(--accent)', marginTop: 24 }}>{t.done.kicker}</div>
            <h2 className="cf-serif" style={{ ...vmStyles.h2, marginTop: 12 }}>{t.done.title}</h2>
            <p style={vmStyles.lead}>{t.done.lead}</p>
            <p className="cf-mono" style={{ color: 'var(--text-3)', marginTop: 18, fontSize: 11 }}>{t.done.sub}</p>
            <button className="cf-btn cf-btn--ghost" style={{ marginTop: 28 }} onClick={reset}>
              {t.locale === 'ru' ? 'Пройти заново' : t.locale === 'uk' ? 'Пройти знову' : 'Start over'}
            </button>
          </div>
        ) : (
          <div key={stepIdx} className="cf-step-enter">
            <div className="cf-mono" style={{ color: 'var(--accent)', fontSize: 12 }}>{questions[stepIdx].kicker}</div>
            <h2 className="cf-serif" style={vmStyles.h2}>{questions[stepIdx].title}</h2>
            <p style={vmStyles.lead}>{questions[stepIdx].lead}</p>
            <div style={{ marginTop: 24 }}>
              {questions[stepIdx].render(state.answers, setAnswer, onLast ? finish : next)}
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
              <button className="cf-btn cf-btn--ghost" onClick={stepIdx > 0 ? back : unstart} style={{ flex: '0 0 auto', minWidth: 48 }}>←</button>
              <button className="cf-btn" onClick={onLast ? finish : next} style={{ flex: 1, justifyContent: 'center' }}>
                {onLast ? t.submit : t.next} →
              </button>
            </div>
          </div>
        )}
      </main>

      <footer style={vmStyles.footer}>
        <span className="cf-mono">{state.started && !isDone ? t.progress(stepIdx + 1, total) : ''}</span>
        <span className="cf-mono">{t.saveNotice}</span>
      </footer>
    </div>
  );
}

const vmStyles = {
  frame: {
    width: '100%', minHeight: '100vh', background: 'var(--ink-bg)', color: 'var(--text)',
    fontFamily: "'Geist', system-ui, sans-serif",
    display: 'flex', flexDirection: 'column', position: 'relative',
  },
  header: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '16px 20px 12px', flexShrink: 0,
  },
  main: { flex: 1, padding: '16px 20px 24px', overflowY: 'auto', display: 'flex', alignItems: 'center' },
  footer: {
    display: 'flex', justifyContent: 'space-between',
    padding: '12px 20px 20px', color: 'var(--text-3)', fontSize: 11, flexShrink: 0,
  },
  h1: { fontSize: 32, lineHeight: 1.1, fontWeight: 400, letterSpacing: '-0.02em' },
  h2: { fontSize: 24, lineHeight: 1.15, fontWeight: 400, letterSpacing: '-0.015em', marginTop: 8 },
  lead: { fontSize: 15, lineHeight: 1.55, color: 'var(--text-2)', marginTop: 14 },
};

window.VariationMobile = VariationMobile;