// IVE Mobile — Onboarding (A1 splash · A2 value props · A4 role · A5 domains)
const { IVE_C: O, DOMAINS } = window;
const { useTh, Eye, Hair, Pill, ScreenHeader } = window;
const { ApertureMark, IVEWordmark, DomainIcon } = window;

function Onboarding({ onDone, onSetRole }) {
  const th = useTh();
  const [step, setStep] = React.useState(0);
  const [role, setRole] = React.useState('reader');
  const [domains, setDomains] = React.useState(['scientific', 'journalistic']);
  const toggle = (k) => setDomains((p) => p.includes(k) ? p.filter((x) => x !== k) : [...p, k]);

  const next = () => setStep((s) => s + 1);
  const finish = () => { onSetRole(role); onDone(); };

  // A1 - Splash
  if (step === 0) {
    return (
      <Frame>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: 32, textAlign: 'center' }}>
          <ApertureMark size={132} color={th.ink} accent={O.ochre} />
          <div style={{ marginTop: 36 }}><IVEWordmark size={64} color={th.ink} /></div>
          <div className="ive-serif" style={{ fontSize: 17, fontWeight: 300, fontStyle: 'italic', color: th.ink2, marginTop: 20, lineHeight: 1.45, maxWidth: 260, textWrap: 'pretty' }}>
            We did not lose the truth. We lost the instruments for measuring it.
          </div>
        </div>
        <Footer step={0} onNext={next} label="Begin" th={th} />
      </Frame>
    );
  }

  // A2 - Value props
  if (step === 1) {
    const props = [
      ['Peer-reviewed', 'Every claim is scored by domain-credentialed verifiers, not a crowd or a black box.'],
      ['Calibrated', 'Two independent axes — evidence basis and social consensus — never a single verdict.'],
      ['Decayed', 'Scores age against the half-life of their domain. Yesterday’s truth is re-checked.'],
    ];
    return (
      <Frame>
        <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          <div style={{ paddingTop: 24 }}>
            <div style={{ padding: '0 28px' }}>
              <Eye>How IVE reads a claim</Eye>
              <div className="ive-serif" style={{ fontSize: 30, fontWeight: 300, letterSpacing: '-0.02em', color: th.ink, marginTop: 10, lineHeight: 1.1 }}>
                A second opinion,<br />on the record.
              </div>
            </div>
            <div style={{ marginTop: 32 }}>
              {props.map(([t, d], i) => (
                <div key={t} style={{ padding: '22px 28px', borderTop: `1px solid ${th.rule}`, display: 'grid', gridTemplateColumns: '34px 1fr', gap: 16 }}>
                  <div className="ive-mono" style={{ fontSize: 12, color: O.ochreDeep }}>0{i + 1}</div>
                  <div>
                    <div className="ive-serif" style={{ fontSize: 19, fontWeight: 400, color: th.ink }}>{t}</div>
                    <div className="ive-serif" style={{ fontSize: 13.5, fontWeight: 300, color: th.ink2, lineHeight: 1.5, marginTop: 5, textWrap: 'pretty' }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <Footer step={1} onNext={next} label="Continue" th={th} />
      </Frame>
    );
  }

  // A4 - Role
  if (step === 2) {
    const roles = [
      ['reader', 'Reader', 'Read claims, follow scores, submit what you want checked.'],
      ['verifier', 'Verifier', 'Score claims in your domain. Build a public reputation.'],
      ['screener', 'Screener', 'Enable IVE on a child or dependant’s device. Content is categorised as fact, fiction, or opinion — so they understand why something is flagged, not just that it is.'],
    ];
    return (
      <Frame>
        <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          <div style={{ padding: '24px 28px 0' }}>
            <Eye>Choose a track · switchable later</Eye>
            <div className="ive-serif" style={{ fontSize: 30, fontWeight: 300, letterSpacing: '-0.02em', color: th.ink, marginTop: 10, lineHeight: 1.1 }}>How will you<br />use IVE?</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 30, paddingBottom: 24 }}>
              {roles.map(([k, t, d]) => {
                const on = role === k;
                return (
                  <button key={k} onClick={() => setRole(k)} style={{
                    all: 'unset', cursor: 'pointer', border: `1px solid ${on ? O.ochre : th.rule}`, padding: 20,
                    background: on ? 'rgba(111,125,58,0.08)' : th.surface,
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div className="ive-serif" style={{ fontSize: 21, fontWeight: 400, color: th.ink }}>{t}</div>
                      <span style={{ width: 12, height: 12, borderRadius: '50%', border: `1px solid ${on ? O.ochre : th.ink3}`, background: on ? O.ochre : 'transparent' }} />
                    </div>
                    <div className="ive-serif" style={{ fontSize: 13.5, fontWeight: 300, color: th.ink2, lineHeight: 1.5, marginTop: 8, textWrap: 'pretty' }}>{d}</div>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
        <Footer step={2} onNext={next} label="Continue" th={th} />
      </Frame>
    );
  }

  // A5 - Domains
  return (
    <Frame>
      <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
        <div style={{ padding: '24px 28px 0' }}>
          <Eye>{domains.length} selected · the 7 domains</Eye>
          <div className="ive-serif" style={{ fontSize: 30, fontWeight: 300, letterSpacing: '-0.02em', color: th.ink, marginTop: 10, lineHeight: 1.1 }}>What do you<br />want checked?</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 26, paddingBottom: 24 }}>
            {Object.entries(DOMAINS).map(([k, d]) => {
              const on = domains.includes(k);
              return (
                <button key={k} onClick={() => toggle(k)} style={{
                  all: 'unset', cursor: 'pointer', border: `1px solid ${on ? O.ochre : th.rule}`, padding: '14px 14px',
                  background: on ? 'rgba(111,125,58,0.08)' : th.surface, display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <DomainIcon name={k} size={26} color={on ? O.ochreDeep : th.ink2} accent={O.ochre} />
                  <div>
                    <div className="ive-serif" style={{ fontSize: 14, color: th.ink }}>{d.label}</div>
                    <div className="ive-mono" style={{ fontSize: 8, color: th.ink3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{d.halfLife >= 36500 ? '∞' : d.halfLife + 'd'} half-life</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>
      <Footer step={3} onNext={finish} label="Enter IVE" disabled={domains.length === 0} th={th} />
    </Frame>
  );
}

function Frame({ children }) {
  const th = useTh();
  return (
    <div style={{
      position: 'fixed', inset: 0,
      display: 'flex', flexDirection: 'column',
      background: th.bg,
      paddingTop: 'env(safe-area-inset-top, 0px)',
    }}>
      {children}
    </div>
  );
}

function Footer({ step, onNext, label, disabled, th }) {
  return (
    <div style={{ flexShrink: 0, padding: '16px 28px calc(env(safe-area-inset-bottom, 0px) + 24px)', background: th.bg }}>
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginBottom: 18 }}>
        {[0, 1, 2, 3].map((i) => (
          <span key={i} style={{ width: i === step ? 18 : 6, height: 3, background: i === step ? 'var(--ive-ochre)' : th.rule, transition: 'width .2s' }} />
        ))}
      </div>
      <Pill solid onClick={disabled ? undefined : onNext} disabled={disabled} style={{ width: '100%', boxSizing: 'border-box' }}>{label}</Pill>
    </div>
  );
}

Object.assign(window, { Onboarding });