// Slide 06 · Algorithm — How it works + Missing data
// Two breathable slides replace the older Slide06_Scoring.

const Slide06_Algorithm = () => {
  const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;
  const factors = [
    { en: 'Income Stability',              he: 'עקביות הכנסות',         w: 28 },
    { en: 'Balance Health',                he: 'בריאות יתרה',            w: 22 },
    { en: 'Expense Discipline',            he: 'משמעת הוצאות',          w: 17 },
    { en: 'Recurring Payment Consistency', he: 'עקביות תשלומים קבועים',  w: 17 },
    { en: 'Credit Utilization',            he: 'ניצול אשראי',            w: 11 },
    { en: 'Risk Flags',                    he: 'דגלי סיכון',             w: 5  },
    { en: 'Savings Behavior',              he: 'חיסכון',                 w: null, bonus: '+5' },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>05 · אלגוריתם</Eyebrow>
      <Title>איך המנוע פועל</Title>

      <div
        style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 64,
          alignItems: 'start',
        }}
      >
        <div>
          <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, color: COLORS.accent, letterSpacing: '0.08em', marginBottom: 20 }}>
            7 גורמים · משקלות ברירת מחדל
          </div>

          <div style={{ display: 'grid', gap: 12 }}>
            {factors.map((f) => (
              <div key={f.en} style={{ display: 'grid', gridTemplateColumns: '320px 1fr 70px', alignItems: 'center', gap: 20 }}>
                <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 500, lineHeight: 1.2 }}>
                  {f.he} <span style={{ color: COLORS.inkMute, fontWeight: 400, fontSize: TYPE_SCALE.small }}>· {L(f.en)}</span>
                </div>
                <div style={{ position: 'relative', height: 12, background: COLORS.paperSoft, borderRadius: 2 }}>
                  {f.w !== null && (
                    <div style={{ position: 'absolute', insetInlineStart: 0, top: 0, bottom: 0, width: `${(f.w / 28) * 100}%`, background: COLORS.accent, borderRadius: 2 }} />
                  )}
                </div>
                <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small, fontWeight: 600, color: f.bonus ? COLORS.accent : COLORS.ink, textAlign: 'left' }}>
                  {f.bonus ? f.bonus : `${f.w}%`}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, color: COLORS.accent, letterSpacing: '0.08em', marginBottom: 28 }}>
            פלט
          </div>

          <div
            style={{
              background: COLORS.surface,
              border: `1px solid ${COLORS.rule}`,
              borderRadius: 4,
              padding: 32,
            }}
          >
            <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 600, marginBottom: 18 }}>
              ציון <span style={{ fontFamily: FONTS.mono }}>0–100</span>
            </div>

            <div style={{ display: 'grid', gap: 14, marginBottom: 24 }}>
              {[
                ['≥ 70', 'GREEN', COLORS.green],
                ['40–69', 'YELLOW', COLORS.amber],
                ['< 40', 'RED', COLORS.red],
              ].map(([range, label, color]) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 22, height: 22, borderRadius: '50%', background: color }} />
                  <span style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small, color: COLORS.ink, fontWeight: 600, minWidth: 90 }}>{L(range)}</span>
                  <span style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small, color: COLORS.inkMute }}>{L(label)}</span>
                </div>
              ))}
            </div>

            <div style={{ borderTop: `1px solid ${COLORS.rule}`, paddingTop: 18, fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small, color: COLORS.inkSoft }}>
              {L('confidence')} · {L('HIGH / MED / LOW')}
            </div>
          </div>

          <div style={{ marginTop: 20, fontSize: TYPE_SCALE.small, color: COLORS.inkMute, lineHeight: 1.4 }}>
            פירוט פר-גורם + סיכום בשפה טבעית.
          </div>
        </div>
      </div>
    </SlideFrame>
  );
};

const Slide06B_DataGaps = () => {
  const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;
  const items = [
    {
      title: 'כיול המשקלות',
      note: <>המשקלות שבחרנו {L('(28/22/17/17/11/5)')} מבוססים על מאמרים. עם תוצאות אמת נוכל לכוון אותם על דאטה במקום על הערכה.</>,
    },
    {
      title: 'אימות הגורמים',
      note: 'לבדוק ששבעת הגורמים באמת מנבאים בשוק הישראלי, להוריד מה שלא עובד ולגלות מה חסר.',
    },
    {
      title: 'כיול דגלי הסיכון',
      note: <>הטריגרים וה-{L('thresholds')} של הדגלים והעונש על כל אחד הוגדרו לפי הערכה. עם דאטה אמיתי נראה אילו דפוסים באמת מנבאים בעיות כלכליות.</>,
    },
    {
      title: 'דפוסים שלא חשבנו עליהם',
      note: 'סיגנלים בנתוני הבנק שעוד לא זיהינו, יצופו רק כשננתח מספיק תיקים אמיתיים.',
    },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>05B · אלגוריתם · כיול עם נתוני אמת</Eyebrow>
      <Title>מבוסס על מחקר - נתוני אמת ידייקו אותו</Title>

      <div style={{ marginTop: 32, fontSize: TYPE_SCALE.body, color: COLORS.inkSoft, maxWidth: 1200, lineHeight: 1.45 }}>
        בנינו את האלגוריתם על בסיס גורמים ידועים ונחקרים בתחום סיכון האשראי ויציבות כלכלית. בלי {L('dataset')} של תוצאות אמת, מי שילם ומי לא, לא יכולנו לכייל אותו על דאטה אמיתי. אלו הדברים שייפתחו עם נפח {L('production')}.
      </div>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
        {items.map(({ title, note }, i) => (
          <div
            key={i}
            style={{
              background: COLORS.surface,
              border: `1px solid ${COLORS.rule}`,
              borderRadius: 4,
              padding: 36,
              minHeight: 200,
            }}
          >
            <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, color: COLORS.accent, letterSpacing: '0.08em', marginBottom: 18, fontWeight: 600 }}>
              {String(i + 1).padStart(2, '0')}
            </div>
            <div style={{ fontSize: TYPE_SCALE.subtitle, color: COLORS.ink, fontWeight: 600, marginBottom: 14, lineHeight: 1.15 }}>
              {title}
            </div>
            <div style={{ fontSize: TYPE_SCALE.small, color: COLORS.inkMute, lineHeight: 1.4 }}>
              {note}
            </div>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
};

Object.assign(window, { Slide06_Algorithm, Slide06B_DataGaps });