// Monjez — Application funnel views: shell, intro, step, result, thank-you.
const { useState: useStateV, useRef: useRefV, useEffect: useEffectV } = React;

const LETTERS_V = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

// ---------- Embedded shell (renders the funnel inside a box on the landing) ----------
function ApplyEmbedShell({ T, phase, progress, sectionLabel, sectionIndex, children }) {
  return (
    <div style={{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-strong)', background: 'radial-gradient(130% 130% at 50% 0%, rgba(37,99,235,0.10), transparent 60%), var(--graphite)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
      {phase === 'form' && (
        <React.Fragment>
          <div style={{ height: 3, background: 'var(--graphite-400)' }}>
            <div style={{ height: '100%', width: `${Math.round(progress * 100)}%`, background: 'linear-gradient(90deg,var(--electric-blue),var(--teal-signal))', transition: 'width .45s cubic-bezier(.4,0,.2,1)' }} />
          </div>
          <div style={{ padding: '10px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-muted)', letterSpacing: '0.04em', borderBottom: '1px solid var(--border-subtle)' }}>
            <span style={{ color: 'var(--blue-400)' }}>{sectionLabel}</span>
            <span dir="ltr">{String(sectionIndex).padStart(2, '0')} / 06</span>
          </div>
        </React.Fragment>
      )}
      <div style={{ padding: 'clamp(22px,3.5vw,38px)', display: 'flex', flexDirection: 'column' }}>{children}</div>
    </div>
  );
}

// ---------- Shell (logo, lang toggle, progress) ----------
function ApplyShell({ lang, setLang, T, phase, progress, sectionLabel, sectionIndex, children }) {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      {/* ambient glow */}
      <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', background:
        'radial-gradient(60% 45% at 50% -8%, rgba(37,99,235,0.22), transparent 60%), radial-gradient(40% 40% at 100% 100%, rgba(20,184,166,0.10), transparent 60%)' }} />
      {/* top bar */}
      <header style={{ position: 'sticky', top: 0, zIndex: 30, backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', background: 'rgba(11,16,32,0.7)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', padding: '0 20px', height: 60, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href="Monjez Landing.html" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="assets/logo-mark.svg" width="26" height="26" alt="Monjez" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--cloud-white)' }}>{T.brand}</span>
          </a>
          <button onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')} aria-label="Switch language"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 13px', cursor: 'pointer', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-strong)', background: 'var(--white-04)', color: 'var(--cloud-white)', fontSize: 13, fontWeight: 600 }}>
            <window.IconGlobe size={15} stroke="var(--slate-gray)" />{T.toggle}
          </button>
        </div>
        {/* progress */}
        <div style={{ height: 3, background: 'var(--graphite-400)' }}>
          <div style={{ height: '100%', width: `${Math.round(progress * 100)}%`, background: 'linear-gradient(90deg,var(--electric-blue),var(--teal-signal))', transition: 'width .45s cubic-bezier(.4,0,.2,1)' }} />
        </div>
        {phase === 'form' && (
          <div style={{ maxWidth: 760, margin: '0 auto', padding: '8px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-muted)', letterSpacing: '0.04em' }}>
            <span style={{ color: 'var(--blue-400)' }}>{sectionLabel}</span>
            <span dir="ltr">{String(sectionIndex).padStart(2, '0')} / 06</span>
          </div>
        )}
      </header>

      <main style={{ position: 'relative', zIndex: 1, flex: 1, width: '100%', maxWidth: 760, margin: '0 auto', padding: '0 20px', display: 'flex', flexDirection: 'column' }}>
        {children}
      </main>

      <footer style={{ position: 'relative', zIndex: 1, maxWidth: 760, margin: '0 auto', width: '100%', padding: '20px', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-muted)', fontSize: 12 }}>
        <window.IconShield size={14} stroke="var(--text-muted)" />{T.ui.secure}
      </footer>
    </div>
  );
}

// ---------- Intro ----------
function Intro({ T, onStart, resume }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '56px 0', animation: 'mjaFade .5s ease' }}>
      <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--blue-400)', background: 'var(--blue-soft)', color: 'var(--blue-400)', fontSize: 12.5, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 24 }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--blue-400)' }} />{T.introKicker}
      </div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(34px,6vw,56px)', lineHeight: 1.08, letterSpacing: '-0.03em', margin: 0, color: 'var(--cloud-white)', textWrap: 'balance' }}>{T.introTitle}</h1>
      <p style={{ fontSize: 'clamp(16px,2.2vw,19px)', lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: 540, margin: '20px 0 0' }}>{T.introSub}</p>
      <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', margin: '32px 0 34px' }}>
        {T.introMeta.map((m, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: 'var(--cloud-white)' }}>
            <window.IconCheckCircle size={17} stroke="var(--teal-signal)" />{m}
          </div>
        ))}
      </div>
      <div>
        <button onClick={onStart} className="mja-cta"
          style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 28px', cursor: 'pointer', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--accent)', color: '#fff', fontSize: 16, fontWeight: 600, fontFamily: 'var(--font-body)', boxShadow: '0 10px 34px rgba(37,99,235,0.4)' }}>
          {resume ? (T.dir === 'rtl' ? 'أكمل تقديمك' : 'Resume application') : T.introStart}
          <window.IconArrowRight size={19} />
        </button>
      </div>
    </div>
  );
}

// ---------- Step ----------
function StepView({ T, step, stepIdx, total, answers, contact, setContact, pickSingle, setText, err, onNext, onBack }) {
  const content = step.type === 'contact' ? T.contact : T.q[step.key];
  const selected = answers[step.key];
  return (
    <div key={step.key} style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '36px 0 28px', animation: 'mjaSlide .4s ease' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--blue-400)' }}>{String(stepIdx + 1).padStart(2, '0')}</span>
        <span style={{ width: 26, height: 1, background: 'var(--border-strong)' }} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)' }}>{T.ui.of} {String(total).padStart(2, '0')}</span>
      </div>

      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(24px,3.6vw,34px)', lineHeight: 1.2, letterSpacing: '-0.02em', margin: 0, color: 'var(--cloud-white)', textWrap: 'balance' }}>{content.q}</h2>
      {content.sub ? <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '12px 0 0', maxWidth: 580 }}>{content.sub}</p> : null}

      <div style={{ marginTop: 26, flex: 1 }}>
        {step.type === 'contact' && <ContactFields T={T} contact={contact} setContact={setContact} />}
        {step.type === 'single' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {content.options.map((opt, i) => {
              const on = selected && selected.idx === i;
              return (
                <button key={i} onClick={() => pickSingle(i, opt)} className="mja-opt"
                  style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 17px', cursor: 'pointer', textAlign: 'start', borderRadius: 'var(--radius-md)', border: '1px solid ' + (on ? 'var(--blue-400)' : 'var(--border-strong)'), background: on ? 'var(--blue-soft)' : 'var(--surface-sunken)', transition: 'border-color .15s, background .15s' }}>
                  <span style={{ width: 30, height: 30, flexShrink: 0, borderRadius: 8, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-display)', background: on ? 'var(--accent)' : 'var(--graphite-400)', color: on ? '#fff' : 'var(--slate-gray)', border: '1px solid ' + (on ? 'transparent' : 'var(--border-subtle)') }}>{LETTERS_V[i]}</span>
                  <span style={{ fontSize: 16, color: on ? 'var(--cloud-white)' : 'var(--text-secondary)', fontWeight: on ? 600 : 400, flex: 1 }}>{opt}</span>
                  {on && <window.IconCheck size={19} stroke="var(--blue-400)" />}
                </button>
              );
            })}
          </div>
        )}
        {step.type === 'longtext' && (
          <textarea value={(selected && selected.text) || ''} onChange={(e) => setText(e.target.value)}
            placeholder={T.ui.typeHere} rows={5} className="mja-area"
            style={{ width: '100%', boxSizing: 'border-box', resize: 'vertical', minHeight: 132, padding: '16px 18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)', background: 'var(--surface-sunken)', color: 'var(--cloud-white)', fontSize: 16, lineHeight: 1.6, fontFamily: 'var(--font-body)', outline: 'none' }} />
        )}
      </div>

      {err ? <div style={{ color: 'var(--danger)', fontSize: 13.5, marginTop: 14, display: 'flex', alignItems: 'center', gap: 7 }}><window.IconX size={15} stroke="var(--danger)" />{err}</div> : null}

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 26, paddingTop: 20, borderTop: '1px solid var(--border-subtle)' }}>
        {stepIdx > 0 ? (
          <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--slate-gray)', fontSize: 14.5, fontWeight: 500 }}>
            <span className="mj-ar" style={{ display: 'inline-flex' }}><window.IconArrowRight size={16} stroke="var(--slate-gray)" style={{ transform: 'rotate(180deg)' }} /></span>{T.ui.back}
          </button>
        ) : <span />}
        {(step.type === 'contact' || step.type === 'longtext') && (
          <button onClick={onNext} className="mja-cta"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '13px 24px', cursor: 'pointer', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--accent)', color: '#fff', fontSize: 15.5, fontWeight: 600, fontFamily: 'var(--font-body)', boxShadow: '0 8px 24px rgba(37,99,235,0.32)' }}>
            {stepIdx === total - 1 ? T.ui.finish : T.ui.next}<window.IconArrowRight size={18} />
          </button>
        )}
        {step.type === 'single' && <span style={{ fontSize: 12.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{T.ui.selectHint}</span>}
      </div>
    </div>
  );
}

function ContactFields({ T, contact, setContact }) {
  const C = T.contact;
  const field = (key, label, ph, type) => (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontSize: 13.5, fontWeight: 600, color: 'var(--cloud-white)', marginBottom: 8 }}>{label}</span>
      <input type={type || 'text'} value={contact[key]} placeholder={ph}
        onChange={(e) => setContact({ ...contact, [key]: e.target.value })}
        dir={key === 'email' || key === 'phone' ? 'ltr' : undefined} className="mja-input"
        style={{ width: '100%', boxSizing: 'border-box', padding: '13px 15px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)', background: 'var(--surface-sunken)', color: 'var(--cloud-white)', fontSize: 15.5, fontFamily: 'var(--font-body)', outline: 'none' }} />
    </label>
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <div style={{ gridColumn: '1 / -1' }}>{field('name', C.name, C.namePh)}</div>
      {field('email', C.email, C.emailPh, 'email')}
      {field('phone', C.phone, C.phonePh, 'tel')}
      <div style={{ gridColumn: '1 / -1' }}>{field('company', C.company, C.companyPh)}</div>
    </div>
  );
}

// ---------- Result ----------
function Result({ T, qualified, score, onBook }) {
  const R = qualified ? T.qualified : T.early;
  const accent = qualified ? 'var(--teal-signal)' : 'var(--blue-400)';
  const soft = qualified ? 'var(--teal-soft)' : 'var(--blue-soft)';
  const internal = /[?&]internal=1/.test(location.search);
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '48px 0', animation: 'mjaFade .5s ease' }}>
      <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 9, padding: '7px 15px', borderRadius: 'var(--radius-pill)', border: `1px solid ${accent}`, background: soft, color: accent, fontSize: 12.5, fontWeight: 700, letterSpacing: '0.04em', marginBottom: 22 }}>
        {qualified ? <window.IconCheckCircle size={16} stroke={accent} /> : <window.IconSparkles size={16} stroke={accent} />}{R.kicker}
      </div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px,4.6vw,42px)', lineHeight: 1.12, letterSpacing: '-0.025em', margin: 0, color: 'var(--cloud-white)', textWrap: 'balance' }}>{R.title}</h2>
      <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '18px 0 0', maxWidth: 560 }}>{R.body}</p>

      <div style={{ borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-strong)', background: `radial-gradient(120% 140% at 0% 0%, ${soft}, transparent 55%), var(--graphite)`, padding: '22px 24px', margin: '26px 0 30px', display: 'flex', flexDirection: 'column', gap: 13 }}>
        {R.points.map((pt, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{ width: 24, height: 24, flexShrink: 0, borderRadius: '50%', display: 'grid', placeItems: 'center', background: soft, border: `1px solid ${accent}` }}>
              <window.IconCheck size={13} stroke={accent} />
            </span>
            <span style={{ fontSize: 15.5, color: 'var(--cloud-white)', lineHeight: 1.5 }}>{pt}</span>
          </div>
        ))}
      </div>

      <div>
        <button onClick={onBook} className="mja-cta"
          style={{ display: 'inline-flex', alignItems: 'center', gap: 11, padding: '17px 30px', cursor: 'pointer', border: 'none', borderRadius: 'var(--radius-md)', background: qualified ? 'var(--accent)' : 'var(--accent)', color: '#fff', fontSize: 16.5, fontWeight: 600, fontFamily: 'var(--font-body)', boxShadow: '0 12px 36px rgba(37,99,235,0.42)' }}>
          <window.IconCalendar size={20} />{R.cta}
        </button>
        <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 14 }}>{T.booking.or}</div>
      </div>

      {internal && (
        <div style={{ marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', borderTop: '1px dashed var(--border-strong)', paddingTop: 14 }}>
          internal · score {score} · {qualified ? 'QUALIFIED' : 'EARLY_STAGE'} · threshold {window.APPLY_CONFIG.qualifiedThreshold}
        </div>
      )}
    </div>
  );
}

// ---------- Thanks ----------
function Thanks({ T, onRestart }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '64px 0', animation: 'mjaFade .5s ease' }}>
      <div style={{ width: 84, height: 84, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--teal-soft)', border: '1px solid var(--teal-signal)', color: 'var(--teal-signal)', marginBottom: 26, boxShadow: '0 0 50px rgba(20,184,166,0.4)' }}>
        <window.IconCheck size={40} stroke="var(--teal-signal)" />
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--teal-signal)', marginBottom: 14 }}>{T.thanks.kicker}</div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px,4.4vw,40px)', lineHeight: 1.12, letterSpacing: '-0.025em', margin: 0, color: 'var(--cloud-white)', maxWidth: 540, textWrap: 'balance' }}>{T.thanks.title}</h2>
      <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '18px 0 30px', maxWidth: 500 }}>{T.thanks.body}</p>
      <a href="Monjez Landing.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '13px 24px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)', background: 'var(--white-04)', color: 'var(--cloud-white)', fontSize: 15, fontWeight: 600, textDecoration: 'none' }}>
        {T.thanks.back}
      </a>
    </div>
  );
}

Object.assign(window, { ApplyShell, ApplyEmbedShell, Intro, StepView, ContactFields, Result, Thanks });