/* Variation 5 — CINEMATIC FULL-BLEED
   Big number takes over. Question is a typographic poster.
   Vibe: Vimeo-staff-pick / film title cards. */

function Variation5({ frameW = 1280, 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, 'v5');
  const { state, setAnswer, next, back, start, finish } = wiz;
  const stepIdx = state.step;
  const isStart = !state.started;
  const isDone = state.done;
  const onLast = stepIdx === total - 1;

  return (
    <div style={v5Styles.frame(frameW, frameH)}>
      {/* Vignette */}
      <div style={v5Styles.vignette} />

      {/* Top */}
      <header style={v5Styles.header}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <span style={{ fontSize: 22, color: 'var(--accent)' }}>◐</span>
          <span className="cf-mono" style={{ color: 'var(--text-2)' }}>{t.brand}</span>
          <span className="cf-mono" style={{ color: 'var(--text-3)' }}>·</span>
          <span className="cf-mono" style={{ color: 'var(--text-3)' }}>/{lang}/{id}</span>
        </div>
        <LangSwitcher lang={lang} onChange={setLang} />
      </header>

      {/* Vertical step rail */}
      {state.started && !isDone && (
        <div style={v5Styles.rail}>
          {questions.map((_, i) => (
            <div key={i} style={{
              ...v5Styles.railTick,
              background: i <= stepIdx ? 'var(--accent)' : 'var(--ink-line)',
              transform: i === stepIdx ? 'scaleX(2.4)' : 'scaleX(1)',
            }} />
          ))}
        </div>
      )}

      <main style={v5Styles.main}>
        {isStart ? <StartV5 t={t} client={client} onStart={start} />
          : isDone ? <DoneV5 t={t} />
          : <StepV5 key={stepIdx} q={questions[stepIdx]} t={t}
              answers={state.answers} setAnswer={setAnswer}
              stepIdx={stepIdx} total={total}
              onNext={onLast ? finish : next}
              onBack={stepIdx > 0 ? back : null} />}
      </main>

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

function StartV5({ t, client, onStart }) {
  return (
    <div className="cf-step-enter" style={v5Styles.center}>
      <div className="cf-mono" style={{ color: 'var(--accent)', marginBottom: 26 }}>{t.greetingKicker}</div>
      <h1 className="cf-serif" style={v5Styles.heroH}>
        {t.greetingTitle(client.name)}
      </h1>
      <p style={v5Styles.lead}>{t.greetingLead}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 44, flexWrap: 'wrap' }}>
        <button className="cf-btn cf-btn--lg" onClick={onStart}>{t.cta} →</button>
      </div>
    </div>
  );
}

function StepV5({ q, t, answers, setAnswer, stepIdx, total, onNext, onBack }) {
  return (
    <div className="cf-step-enter" style={v5Styles.stepGrid}>
      <div style={v5Styles.bigNum}>
        <span style={{ color: 'var(--accent)' }}>{String(stepIdx + 1).padStart(2, '0')}</span>
        <span style={{ color: 'var(--text-3)' }}>/{String(total).padStart(2, '0')}</span>
      </div>
      <div>
        <div className="cf-mono" style={{ color: 'var(--accent)' }}>{q.kicker}</div>
        <h2 className="cf-serif" style={v5Styles.h2}>{q.title}</h2>
        <p style={v5Styles.lead}>{q.lead}</p>
        <div style={{ marginTop: 30 }}>{q.render(answers, setAnswer, onNext)}</div>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, alignItems: 'center' }}>
          {onBack && <button className="cf-btn cf-btn--ghost" onClick={onBack}>← {t.back}</button>}
          <button className="cf-btn" onClick={onNext}>{stepIdx === total - 1 ? t.submit : t.next} →</button>
        </div>
      </div>
    </div>
  );
}

function DoneV5({ t }) {
  return (
    <div className="cf-step-enter" style={{ ...v5Styles.center, position: 'relative' }}>
      <Confetti />
      <DoneCheckmark />
      <div className="cf-mono" style={{ color: 'var(--accent)', marginTop: 28 }}>{t.done.kicker}</div>
      <h2 className="cf-serif" style={{ ...v5Styles.heroH, fontSize: 78, marginTop: 14 }}>{t.done.title}</h2>
      <p style={v5Styles.lead}>{t.done.lead}</p>
      <p className="cf-mono" style={{ color: 'var(--text-3)', marginTop: 22 }}>{t.done.sub}</p>
    </div>
  );
}

const v5Styles = {
  frame: (w, h) => ({
    width: w, height: h,
    background: 'radial-gradient(ellipse at 30% 30%, oklch(0.24 0.02 45) 0%, var(--ink-bg) 60%)',
    color: 'var(--text)',
    fontFamily: "'Geist', system-ui, sans-serif",
    display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative',
  }),
  vignette: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%)',
  },
  header: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '28px 56px', position: 'relative', zIndex: 2,
  },
  rail: {
    position: 'absolute', top: 100, right: 56, display: 'flex', flexDirection: 'column', gap: 10,
    zIndex: 2,
  },
  railTick: { width: 24, height: 2, background: 'var(--ink-line)', transition: 'transform .3s, background .3s' },
  main: { flex: 1, padding: '20px 80px 40px', display: 'flex', alignItems: 'center', overflowY: 'auto', position: 'relative', zIndex: 1 },
  footer: {
    display: 'flex', justifyContent: 'space-between',
    padding: '20px 56px', color: 'var(--text-3)', position: 'relative', zIndex: 2,
  },
  center: { width: '100%', maxWidth: 880, margin: '0 auto', textAlign: 'center' },
  heroH: { fontSize: 84, lineHeight: 1.02, fontWeight: 400, letterSpacing: '-0.025em' },
  stepGrid: {
    display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 60,
    width: '100%', maxWidth: 1100, margin: '0 auto', alignItems: 'start',
  },
  bigNum: {
    fontFamily: 'Newsreader, Georgia, serif',
    fontSize: 200, lineHeight: 0.85, letterSpacing: '-0.04em',
    display: 'flex', flexDirection: 'column',
  },
  h2: { fontSize: 46, lineHeight: 1.08, fontWeight: 400, letterSpacing: '-0.018em', marginTop: 8 },
  lead: { fontSize: 19, lineHeight: 1.55, color: 'var(--text-2)', marginTop: 18, maxWidth: 600 },
};

window.Variation5 = Variation5;