// IVE Mobile — How-to wizard (shown once after onboarding)
const { IVE_C: WZ } = window;
const { useTh, Eye, Hair, Pill } = window;

const WIZARD_KEY = 'ive_wizard_dismissed';

const WIZARD_STEPS = [
  {
    n: '01',
    title: 'Two axes, not one verdict',
    body: 'Every claim carries two independent scores — Evidence Basis (what the data says) and Social Consensus (what credentialed experts agree on). A claim can be solid on one axis and contested on the other.',
  },
  {
    n: '02',
    title: 'Scores decay over time',
    body: 'Truth has a half-life. Each domain has a decay rate — a medical claim re-checks every 180 days; a physics constant almost never. Decayed scores are flagged before they mislead you.',
  },
  {
    n: '03',
    title: 'Follow what matters to you',
    body: 'Save any claim to your watchlist. You\'ll be notified when its score changes or it crosses a decay threshold — before the headlines catch up.',
  },
  {
    n: '04',
    title: 'Submit what you want checked',
    body: 'Drop a claim or a link into Submit. IVE routes it to credentialed verifiers in the right domain. Turnaround is typically 48–72 hours.',
  },
  {
    n: '05',
    title: 'Three content types, not one bucket',
    body: 'IVE distinguishes fact (verifiable against evidence), fiction (narrative or creative), and opinion (belief-based). A claim marked opinion isn\'t wrong — it just can\'t be verified the same way a scientific or historical claim can.',
  },
];

function HowToWizard({ onDismiss }) {
  const th = useTh();

  const dismiss = (permanent) => {
    if (permanent) localStorage.setItem(WIZARD_KEY, '1');
    onDismiss();
  };

  return (
    <div
      onClick={() => dismiss(false)}
      style={{
        position: 'fixed', inset: 0, zIndex: 150,
        background: 'rgba(19, 21, 14, 0.55)',
        display: 'flex', alignItems: 'flex-end',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%',
          background: th.bg,
          maxHeight: '84vh',
          display: 'flex', flexDirection: 'column',
          borderTop: `2px solid var(--ive-ochre)`,
        }}
      >
        {/* Header */}
        <div style={{ flexShrink: 0, padding: '20px 24px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <Eye>How IVE works</Eye>
              <div className="ive-serif" style={{ fontSize: 26, fontWeight: 300, letterSpacing: '-0.02em', color: th.ink, marginTop: 8, lineHeight: 1.1 }}>
                A quick orientation.
              </div>
            </div>
            <button
              onClick={() => dismiss(false)}
              style={{
                all: 'unset', cursor: 'pointer', marginTop: 2,
                width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
              aria-label="Close"
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <line x1="1" y1="1" x2="13" y2="13" stroke={th.ink3} strokeWidth="1.5" strokeLinecap="round"/>
                <line x1="13" y1="1" x2="1" y2="13" stroke={th.ink3} strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </button>
          </div>
        </div>
        <Hair style={{ margin: '16px 0 0' }} />

        {/* Scrollable steps */}
        <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          {WIZARD_STEPS.map(({ n, title, body }) => (
            <div
              key={n}
              style={{
                padding: '18px 24px',
                borderBottom: `1px solid ${th.rule}`,
                display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14,
              }}
            >
              <div className="ive-mono" style={{ fontSize: 11, color: WZ.ochreDeep, paddingTop: 3 }}>{n}</div>
              <div>
                <div className="ive-serif" style={{ fontSize: 17, fontWeight: 400, color: th.ink }}>{title}</div>
                <div className="ive-serif" style={{ fontSize: 13, fontWeight: 300, color: th.ink2, lineHeight: 1.55, marginTop: 6, textWrap: 'pretty' }}>{body}</div>
              </div>
            </div>
          ))}
          <div style={{ height: 4 }} />
        </div>

        {/* Footer actions */}
        <div style={{
          flexShrink: 0,
          padding: 'calc(env(safe-area-inset-bottom, 0px) + 20px) 24px 24px',
          borderTop: `1px solid ${th.rule}`,
        }}>
          <Pill solid onClick={() => dismiss(false)} style={{ width: '100%', boxSizing: 'border-box', marginBottom: 14 }}>
            Got it
          </Pill>
          <button
            onClick={() => dismiss(true)}
            style={{
              all: 'unset', cursor: 'pointer',
              display: 'block', width: '100%', textAlign: 'center',
              fontFamily: 'var(--ive-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
              color: th.ink3, padding: '8px 0',
            }}
          >
            Do not show me this again
          </button>
        </div>
      </div>
    </div>
  );
}

function useWizard() {
  const [show, setShow] = React.useState(() => !localStorage.getItem(WIZARD_KEY));
  const dismiss = React.useCallback(() => setShow(false), []);
  const reset = React.useCallback(() => { localStorage.removeItem(WIZARD_KEY); setShow(true); }, []);
  return [show, dismiss, reset];
}

Object.assign(window, { HowToWizard, useWizard, WIZARD_KEY });