/* ============================================================
   Screens — Part 1
   Attract → Identify → Student Login → 2FA → Guest RF →
   Dues → Amount → Payment Method
   ============================================================ */

/* ============================================================
   ATTRACT — fullscreen, touch-to-start
   ============================================================ */
const ScreenAttract = () => {
  const t = useT();
  const { go, setLang } = window.AppState;
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setTick(x => x + 1), 1000);
    return () => clearInterval(i);
  }, []);

  return (
    <div className="screen" style={{ background: 'var(--mc-red)', color: '#fff', cursor: 'pointer' }} onClick={() => go('identify')}>
      <div style={{ position: 'absolute', top: 80, left: 80, display: 'flex', alignItems: 'center', gap: 24 }}>
        <MCLogo height={120} white />
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '0 80px', gap: 80, position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 1300 }}>
          <div className="t-label" style={{ color: 'rgba(255,255,255,.7)', marginBottom: 32 }}>{t.kioskName}</div>
          <h1 style={{ fontSize: 144, lineHeight: 1.02, fontWeight: 700, letterSpacing: '-0.025em', margin: 0 }}>
            {window.AppState.lang === 'el' ? 'Πληρώστε εύκολα,\nάμεσα,\nμε ασφάλεια.' : 'Pay easily,\ninstantly,\nsecurely.'}
          </h1>
        </div>

        <div style={{
          padding: '40px 64px',
          background: 'rgba(255,255,255,.16)',
          border: '3px solid rgba(255,255,255,.4)',
          borderRadius: 999,
          fontSize: 36,
          fontWeight: 600,
          letterSpacing: '0.04em',
          textTransform: 'uppercase',
          display: 'flex',
          alignItems: 'center',
          gap: 24,
          animation: tick % 2 ? 'none' : 'fadeIn 800ms'
        }}>
          <span style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff' }}/>
          {t.touchToStart}
        </div>

        <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex', gap: 16 }}>
          <button onClick={() => setLang('el')} style={{ padding: '20px 36px', borderRadius: 999, fontSize: 24, fontWeight: 600, background: window.AppState.lang === 'el' ? '#fff' : 'transparent', color: window.AppState.lang === 'el' ? 'var(--mc-red)' : '#fff', border: '2px solid rgba(255,255,255,.5)', minWidth: 140 }}>Ελληνικά</button>
          <button onClick={() => setLang('en')} style={{ padding: '20px 36px', borderRadius: 999, fontSize: 24, fontWeight: 600, background: window.AppState.lang === 'en' ? '#fff' : 'transparent', color: window.AppState.lang === 'en' ? 'var(--mc-red)' : '#fff', border: '2px solid rgba(255,255,255,.5)', minWidth: 140 }}>English</button>
        </div>
      </div>

      <div style={{ padding: '40px 80px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 18, color: 'rgba(255,255,255,.7)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}><Icon name="lock" size={20}/> {t.secured}</span>
        <span>v1.0 · MC Athens · Akadimias 42</span>
      </div>
    </div>
  );
};
window.ScreenAttract = ScreenAttract;

/* ============================================================
   IDENTIFY — pick student or guest path
   ============================================================ */
const ScreenIdentify = () => {
  const t = useT();
  const { go } = window.AppState;
  return (
    <div className="screen">
      <Header variant="brand" />
      <div className="screen-body" style={{ padding: '64px 80px 0' }}>
        <h1 className="t-h1" style={{ margin: '0 0 24px' }}>{t.welcome}</h1>
        <p className="t-body-lg t-muted" style={{ maxWidth: 1100, margin: '0 0 80px' }}>{t.welcomeSub}</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, maxWidth: 1300 }}>
          <OptionTile icon="user" title={t.optStudent} sub={t.optStudentSub} onClick={() => { window.AppState.payerType = 'student'; go('studentLogin'); }} />
          <OptionTile icon="qr" title={t.optGuest} sub={t.optGuestSub} onClick={() => { window.AppState.payerType = 'guest'; go('guestScan'); }} />
        </div>

        <div style={{ marginTop: 'auto', paddingTop: 48, paddingBottom: 32 }}>
          <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: '32px 40px', display: 'flex', alignItems: 'center', gap: 24 }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--n-200)', display: 'grid', placeItems: 'center' }}><Icon name="help" size={32}/></div>
            <div style={{ flex: 1 }}>
              <div className="t-h4" style={{ marginBottom: 4 }}>{t.help}</div>
              <div className="t-body t-muted">{t.helpDesc}</div>
            </div>
          </div>
          <SecureFooter />
        </div>
      </div>
    </div>
  );
};
window.ScreenIdentify = ScreenIdentify;

/* ============================================================
   STUDENT LOGIN
   ============================================================ */
const ScreenStudentLogin = () => {
  const t = useT();
  const { go, back } = window.AppState;
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [focus, setFocus] = React.useState('u');
  const [showP, setShowP] = React.useState(false);

  const onKey = (k) => {
    if (focus === 'u') setU(x => (x + k).slice(0, 32));
    else setP(x => (x + k).slice(0, 32));
  };
  const onDel = () => focus === 'u' ? setU(x => x.slice(0,-1)) : setP(x => x.slice(0,-1));
  const onClr = () => focus === 'u' ? setU('') : setP('');
  const submit = () => { if (u.length >= 3 && p.length >= 3) go('twoFA'); };

  const fieldCls = (active) => ({
    background: active ? 'var(--n-0)' : 'var(--n-50)',
    border: active ? '3px solid var(--mc-ink)' : '3px solid var(--n-200)',
    borderRadius: 16,
    padding: '24px 28px',
    minHeight: 100,
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    fontSize: 32,
    fontFamily: 'var(--font-mono)',
    fontWeight: 500,
  });

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={0} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.studentLogin}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1100 }}>{t.studentLoginSub}</p>

        <div style={{ display: 'flex', gap: 80, alignItems: 'flex-start', flex: 1 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <div className="t-label" style={{ marginBottom: 12 }}>{t.username}</div>
              <div style={fieldCls(focus === 'u')} onClick={() => setFocus('u')}>
                <Icon name="user" size={28} color="var(--n-500)" />
                <span style={{ marginLeft: 16, color: u ? 'var(--mc-ink)' : 'var(--n-400)' }}>{u || 'student.name'}</span>
                {focus === 'u' && <span className="code-caret" style={{ marginLeft: 4, height: 32 }}/>}
              </div>
            </div>
            <div>
              <div className="t-label" style={{ marginBottom: 12 }}>{t.password}</div>
              <div style={fieldCls(focus === 'p')} onClick={() => setFocus('p')}>
                <Icon name="lock" size={28} color="var(--n-500)" />
                <span style={{ marginLeft: 16, color: p ? 'var(--mc-ink)' : 'var(--n-400)', flex: 1 }}>
                  {p ? (showP ? p : '•'.repeat(p.length)) : '••••••••'}
                </span>
                <button onClick={(e) => { e.stopPropagation(); setShowP(s => !s); }} style={{ padding: 8 }}><Icon name="eye-off" size={24} color="var(--n-500)"/></button>
              </div>
            </div>

            <div style={{ background: 'var(--info-bg)', borderRadius: 16, padding: 24, display: 'flex', gap: 16, marginTop: 16 }}>
              <Icon name="info" size={28} color="var(--info)"/>
              <div className="t-body" style={{ color: 'var(--info)' }}>
                {window.AppState.lang === 'el' ? 'Χρησιμοποιήστε τα ίδια στοιχεία που χρησιμοποιείτε στο Classter portal.' : 'Use the same credentials as your Classter portal.'}
              </div>
            </div>

            <button className="btn btn--primary btn--full" style={{ marginTop: 32 }} onClick={submit} disabled={u.length < 3 || p.length < 3}>
              <span style={{ flex: 1, textAlign: 'left' }}>{t.signIn}</span>
              <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
            </button>
          </div>

          <div style={{ width: 720 }}>
            <Keypad
              onKey={onKey}
              onDelete={onDel}
              onClear={onClr}
              onSubmit={submit}
              submitLabel={t.signIn}
              canSubmit={u.length >= 3 && p.length >= 3}
            />
            <div style={{ marginTop: 24, textAlign: 'center', color: 'var(--n-500)' }} className="t-body">
              {window.AppState.lang === 'el' ? 'Πληκτρολογήστε αριθμούς. Για γράμματα χρησιμοποιήστε το πληκτρολόγιο της οθόνης.' : 'Type numbers here. For letters use the on-screen keyboard.'}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.ScreenStudentLogin = ScreenStudentLogin;

/* ============================================================
   TWO-FACTOR (MS Authenticator)
   ============================================================ */
const ScreenTwoFA = () => {
  const t = useT();
  const { go, back } = window.AppState;
  const [code, setCode] = React.useState('');
  const submit = () => { if (code.length === 6) go('dues'); };

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={1} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.twoFA}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1200 }}>{t.twoFASub}</p>

        <div style={{ display: 'flex', gap: 80, alignItems: 'flex-start', flex: 1 }}>
          <div style={{ flex: 1 }}>
            <div className="t-label" style={{ marginBottom: 16 }}>{t.code6}</div>
            <div style={{ display: 'flex', gap: 16 }}>
              {Array.from({ length: 6 }).map((_, i) => (
                <div key={i} style={{
                  flex: 1, height: 144, borderRadius: 24,
                  background: code[i] ? 'var(--n-0)' : 'var(--n-50)',
                  border: code.length === i ? '3px solid var(--mc-ink)' : '3px solid var(--n-200)',
                  display: 'grid', placeItems: 'center',
                  fontSize: 64, fontWeight: 700, fontFamily: 'var(--font-mono)'
                }}>
                  {code[i] || ''}
                </div>
              ))}
            </div>

            <button onClick={() => setCode('')} className="btn-sm" style={{ marginTop: 32 }}><Icon name="refresh" size={20}/> {t.resend}</button>

            <div style={{ marginTop: 56, padding: 32, background: 'var(--n-50)', borderRadius: 16, display: 'flex', gap: 24, alignItems: 'center' }}>
              <Icon name="shield-check" size={48} color="var(--success)" />
              <div>
                <div className="t-h4">Microsoft Authenticator</div>
                <div className="t-body t-muted">{window.AppState.lang === 'el' ? 'Ελέγξτε ειδοποιήσεις στην εφαρμογή σας.' : 'Check the notifications in your app.'}</div>
              </div>
            </div>
          </div>

          <div style={{ width: 720 }}>
            <Keypad
              onKey={(k) => setCode(c => (c + k).slice(0, 6))}
              onDelete={() => setCode(c => c.slice(0, -1))}
              onClear={() => setCode('')}
              onSubmit={submit}
              submitLabel={t.continue}
              canSubmit={code.length === 6}
            />
          </div>
        </div>
      </div>
    </div>
  );
};
window.ScreenTwoFA = ScreenTwoFA;

/* ============================================================
   GUEST SCAN — RF code
   ============================================================ */
const ScreenGuestScan = () => {
  const t = useT();
  const { go, back } = window.AppState;
  const [manual, setManual] = React.useState(false);
  const [rf, setRf] = React.useState('');
  const [scanning, setScanning] = React.useState(true);
  const [error, setError] = React.useState(false);

  // Simulate auto-scan: 3.5s after entering, an RF appears (unless user toggles to manual)
  React.useEffect(() => {
    if (manual) return;
    const t1 = setTimeout(() => {
      setScanning(false);
      setRf('RF18 5390 0000 4321 0987 65432');
      setTimeout(() => go('dues'), 1200);
    }, 3500);
    return () => clearTimeout(t1);
  }, [manual]);

  const submitManual = () => {
    if (rf.length < 23) { setError(true); return; }
    if (rf.startsWith('99')) { go('invalidRF'); return; }
    go('dues');
  };

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={0} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.guestScan}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1200 }}>{t.guestScanSub}</p>

        {!manual ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, gap: 56 }}>
            <ScanTarget icon="qr" />
            <div className="t-h4" style={{ color: scanning ? 'var(--n-600)' : 'var(--success)', display: 'inline-flex', gap: 16, alignItems: 'center' }}>
              {scanning ? (<><span className="pulse-dots"><span/><span/><span/></span> {window.AppState.lang === 'el' ? 'Σάρωση…' : 'Scanning…'}</>) : (<><Icon name="check" size={32}/> {t.rfFound} <span className="t-mono" style={{ fontSize: 24 }}>{rf}</span></>)}
            </div>
            <button className="btn-sm" onClick={() => setManual(true)} style={{ minHeight: 80, padding: '20px 36px', fontSize: 22 }}>
              <Icon name="menu" size={24}/> {t.enterManually}
            </button>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch', flex: 1, maxWidth: 1100, alignSelf: 'center', width: '100%' }}>
            <div className="t-label" style={{ marginBottom: 16 }}>{t.rfPlaceholder}</div>
            <div className={`code-display ${error ? 'has-error' : ''}`} style={{ marginBottom: 32 }}>
              {rf || <span style={{ color: 'var(--n-400)' }}>RF__ ____ ____ ____ ____ _____</span>}
              {!error && <span className="code-caret"/>}
            </div>
            {error && <div style={{ color: 'var(--error)', display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }} className="t-body"><Icon name="alert" size={20}/> {window.AppState.lang === 'el' ? 'Συμπληρώστε όλα τα ψηφία.' : 'Please complete all digits.'}</div>}
            <div style={{ alignSelf: 'center' }}>
              <Keypad
                onKey={(k) => { setError(false); setRf(r => (r + k).slice(0, 27)); }}
                onDelete={() => setRf(r => r.slice(0, -1))}
                onClear={() => setRf('')}
                onSubmit={submitManual}
                submitLabel={t.continue}
                canSubmit={rf.length >= 23}
              />
            </div>
            <button className="btn-sm" onClick={() => setManual(false)} style={{ marginTop: 32, alignSelf: 'center' }}><Icon name="qr" size={20}/> {window.AppState.lang === 'el' ? 'Επιστροφή σε σάρωση' : 'Back to scan'}</button>
            <div className="t-caption" style={{ marginTop: 24, textAlign: 'center' }}>
              {window.AppState.lang === 'el' ? 'Συμβουλή: για την demo πληκτρολογήστε «99» στην αρχή για άκυρο RF.' : 'Demo tip: type "99" first for invalid RF.'}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
window.ScreenGuestScan = ScreenGuestScan;

/* ============================================================
   DUES list
   ============================================================ */
const SAMPLE_DUES = [
  { id: 'd1', rf: 'RF18 5390 0000 4321 0987 65432', program: { el: 'BSc Πληροφορική (3ο έτος)', en: 'BSc Computer Science (Year 3)' }, annualBalance: 4250, overdue: 1450, dueDate: '15/05/2026' },
  { id: 'd2', rf: 'RF55 7821 0001 9988 7766 12340', program: { el: 'Σεμινάριο Διοίκησης Έργων', en: 'Project Management Seminar' }, annualBalance: 800, overdue: 0, dueDate: '30/06/2026' },
];

const ScreenDues = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const [sel, setSel] = React.useState(SAMPLE_DUES[0].id);

  const choose = () => {
    const d = SAMPLE_DUES.find(x => x.id === sel);
    window.AppState.selectedDue = d;
    go('amount');
  };

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={1} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.yourDues}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 56px', maxWidth: 1200 }}>{t.yourDuesSub}</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, flex: 1 }}>
          {SAMPLE_DUES.map(d => (
            <button key={d.id} className={`card selectable ${sel === d.id ? 'selected' : ''}`} style={{ padding: 40, textAlign: 'left', display: 'flex', alignItems: 'center', gap: 32, cursor: 'pointer' }} onClick={() => setSel(d.id)}>
              <div style={{ width: 96, height: 96, borderRadius: 20, background: 'var(--n-100)', display: 'grid', placeItems: 'center' }}>
                <Icon name="graduation" size={56} color="var(--mc-ink)" />
              </div>
              <div style={{ flex: 1 }}>
                <div className="t-h3" style={{ marginBottom: 12 }}>{d.program[lang]}</div>
                <div style={{ display: 'flex', gap: 32, color: 'var(--n-600)' }} className="t-body">
                  <span><span className="t-label">{t.rfCode}</span> <span className="t-mono">{d.rf.slice(0, 14)}…</span></span>
                  <span><span className="t-label">{t.dueDate}</span> {d.dueDate}</span>
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                {d.overdue > 0 && (
                  <div style={{ background: 'var(--error-bg)', color: 'var(--error)', padding: '8px 16px', borderRadius: 999, fontSize: 18, fontWeight: 600, marginBottom: 16, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="alert" size={18}/> {t.overdue} {fmtEUR(d.overdue, lang)}
                  </div>
                )}
                <div className="t-label" style={{ marginBottom: 4 }}>{t.annualBalance}</div>
                <div className="t-h2" style={{ fontFamily: 'var(--font-mono)' }}>{fmtEUR(d.annualBalance, lang)}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
      <div className="action-bar">
        <button className="btn btn--ghost" style={{ flex: '0 0 240px' }} onClick={() => go('noDues')}>{lang === 'el' ? 'Demo: χωρίς οφειλές' : 'Demo: no dues'}</button>
        <button className="btn btn--primary" style={{ flex: 1 }} onClick={choose}>
          <span style={{ flex: 1, textAlign: 'left' }}>{t.continue}</span>
          <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
        </button>
      </div>
    </div>
  );
};
window.ScreenDues = ScreenDues;

/* ============================================================
   AMOUNT selection
   ============================================================ */
const ScreenAmount = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const due = window.AppState.selectedDue || SAMPLE_DUES[0];
  const [mode, setMode] = React.useState(due.overdue > 0 ? 'overdue' : 'installment');
  const [custom, setCustom] = React.useState('');

  const installment = Math.round(due.annualBalance / 4);

  const amount = mode === 'overdue' ? due.overdue : mode === 'installment' ? installment : Number(custom) || 0;
  const valid = amount >= 10 && amount <= due.annualBalance;

  const proceed = () => {
    window.AppState.amount = amount;
    go('payMethod');
  };

  const tile = (key, title, sub, value) => (
    <button key={key} className={`option-tile ${mode === key ? 'selected' : ''}`} onClick={() => setMode(key)} style={{ flex: 1 }}>
      <div className="option-tile-icon"><Icon name={key === 'overdue' ? 'alert' : key === 'installment' ? 'clock' : 'menu'} size={48} stroke={1.8} /></div>
      <div className="option-tile-text">
        <div className="option-tile-title">{title}</div>
        <div className="option-tile-sub">{sub}</div>
      </div>
      <div style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 32, fontWeight: 600 }}>{value}</div>
    </button>
  );

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={2} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.amountTitle}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 40px', maxWidth: 1200 }}>{t.amountSub}</p>

        <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 32, marginBottom: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div className="t-label">{lang === 'el' ? 'Επιλεγμένη οφειλή' : 'Selected obligation'}</div>
            <div className="t-h4">{due.program[lang]}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="t-label">{t.annualBalance}</div>
            <div className="t-h3" style={{ fontFamily: 'var(--font-mono)' }}>{fmtEUR(due.annualBalance, lang)}</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 32 }}>
          {due.overdue > 0 && tile('overdue', t.payOverdue, lang === 'el' ? 'Εξόφληση όλου του ληξιπρόθεσμου ποσού' : 'Settle all overdue', fmtEUR(due.overdue, lang))}
          {tile('installment', t.payInstallment, lang === 'el' ? 'Πληρωμή 1/4 του ετήσιου' : 'Pay one quarter', fmtEUR(installment, lang))}
          {tile('custom', t.payCustom, t.minAmount, custom ? fmtEUR(Number(custom), lang) : '—')}
        </div>

        {mode === 'custom' && (
          <div style={{ background: 'var(--n-50)', borderRadius: 24, padding: 32, display: 'flex', gap: 56, alignItems: 'flex-start' }}>
            <div style={{ flex: 1 }}>
              <div className="t-label" style={{ marginBottom: 12 }}>{t.customAmount}</div>
              <div className="code-display" style={{ fontSize: 80, justifyContent: 'flex-start', padding: '32px 40px' }}>
                <span style={{ color: 'var(--n-400)', marginRight: 16 }}>€</span>
                <span>{custom || '0'}</span>
              </div>
              <div className="t-caption" style={{ marginTop: 16 }}>{t.minAmount} · {t.maxAmount} · {fmtEUR(due.annualBalance, lang)}</div>
            </div>
            <Keypad
              onKey={(k) => setCustom(c => (c + k).slice(0, 6).replace(/^0+/, '') || k)}
              onDelete={() => setCustom(c => c.slice(0, -1))}
              onClear={() => setCustom('')}
              onSubmit={proceed}
              submitLabel={t.continue}
              canSubmit={valid}
            />
          </div>
        )}
      </div>
      {mode !== 'custom' && (
        <div className="action-bar">
          <button className="btn btn--primary" style={{ flex: 1 }} onClick={proceed} disabled={!valid}>
            <span style={{ flex: 1, textAlign: 'left' }}>{t.continue} · {fmtEUR(amount, lang)}</span>
            <span className="btn-arrow"><Icon name="arrow-right" size={28}/></span>
          </button>
        </div>
      )}
    </div>
  );
};
window.ScreenAmount = ScreenAmount;

/* ============================================================
   PAYMENT METHOD selection
   ============================================================ */
const ScreenPayMethod = () => {
  const t = useT();
  const lang = window.AppState.lang;
  const { go, back } = window.AppState;
  const amount = window.AppState.amount || 0;

  const choose = (m) => {
    window.AppState.method = m;
    if (m === 'card') go('cardPay');
    else if (m === 'iris') go('irisPay');
    else if (m === 'cash') go('cashPay');
    else if (m === 'mix') go('mixIntro');
  };

  return (
    <div className="screen">
      <Header variant="brand" showSteps step={3} totalSteps={5} onCancel={() => go('cancelConfirm')} />
      <div className="screen-body">
        <button className="btn-sm" onClick={back} style={{ alignSelf: 'flex-start', marginBottom: 32 }}><Icon name="arrow-left" size={20}/> {t.back}</button>
        <h2 className="t-h1" style={{ margin: '0 0 16px' }}>{t.payMethod}</h2>
        <p className="t-body-lg t-muted" style={{ margin: '0 0 40px', maxWidth: 1200 }}>{t.payMethodSub}</p>

        <div style={{ background: 'var(--mc-ink)', color: '#fff', borderRadius: 24, padding: 40, marginBottom: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div className="t-label" style={{ color: 'rgba(255,255,255,.6)' }}>{lang === 'el' ? 'Ποσό προς πληρωμή' : 'Amount to pay'}</div>
            <div style={{ fontSize: 80, fontWeight: 700, fontFamily: 'var(--font-mono)', lineHeight: 1 }}>{fmtEUR(amount, lang)}</div>
          </div>
          <Icon name="lock" size={64} color="rgba(255,255,255,.4)" />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <OptionTile icon="card" title={t.methodCard} sub={t.methodCardSub} onClick={() => choose('card')} />
          <OptionTile icon="iris" title={t.methodIris} sub={t.methodIrisSub} onClick={() => choose('iris')} />
          <OptionTile icon="cash" title={t.methodCash} sub={t.methodCashSub} onClick={() => choose('cash')} />
          <OptionTile icon="mix" title={t.methodMix} sub={t.methodMixSub} onClick={() => choose('mix')} badge={lang === 'el' ? 'Νέο' : 'New'} />
        </div>
      </div>
    </div>
  );
};
window.ScreenPayMethod = ScreenPayMethod;