// Slides 4-5: Infrastructure, Features
// (Scoring engine is now split across slide-06-algorithm.jsx)

// ————————————————————————————————————————————————————
// Slide 4: Infrastructure Built
// ————————————————————————————————————————————————————
const Slide04_Infra = () => {
  const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;
  const items = [
    { k: 'Monorepo', v: <>{L('client / server / shared')} · {L('shared TypeScript types')}</> },
    { k: 'Databases', v: <>{L('PostgreSQL')} ו-{L('Redis')} דרך {L('Docker Compose')}</> },
    { k: 'CI/CD', v: <>{L('GitHub Actions')} עם {L('SSH deploy')} לשרת המכללה</> },
    { k: 'SSL', v: L('opengrade.cs.colman.ac.il') },
    { k: 'Deploys', v: L('Zero-downtime rolling · health checks · automatic rollback') },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>03 · מה בוצע</Eyebrow>
      <Title>תשתיות</Title>

      <div
        style={{
          marginTop: SPACING.sectionGap,
          borderTop: `1px solid ${COLORS.ink}`,
        }}
      >
        {items.map(({ k, v }, i) => (
          <div
            key={k}
            style={{
              display: 'grid',
              gridTemplateColumns: '320px 1fr auto',
              alignItems: 'baseline',
              padding: '26px 0',
              borderBottom: `1px solid ${COLORS.rule}`,
              gap: 40,
            }}
          >
            <div
              style={{
                fontFamily: FONTS.mono,
                fontSize: TYPE_SCALE.small,
                color: COLORS.accent,
                letterSpacing: '0.04em',
                direction: 'ltr',
                textAlign: 'right',
              }}
            >
              {k}
            </div>
            <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 500 }}>{v}</div>
            <div
              style={{
                fontFamily: FONTS.mono,
                fontSize: TYPE_SCALE.micro,
                color: COLORS.inkMute,
              }}
            >
              0{i + 1}
            </div>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
};

// ————————————————————————————————————————————————————
// Slide 5: Features Implemented
// ————————————————————————————————————————————————————
const Slide05_Features = () => {
  const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;
  const groups = [
    {
      title: 'אימות וזהות',
      items: [
        'הרשמה, התחברות, איפוס סיסמה',
        'מערכת טוקנים וניהול יתרות',
        L('Onboarding wizard'),
      ],
    },
    {
      title: 'זרימת בדיקה',
      items: [
        'יצירת בדיקה + הזמנה במייל',
        <>הסכמת נבדק - {L('OTP')} + הצהרה משפטית</>,
        <>{L('Open Finance iframe')} - נתוני בנק אמיתיים</>,
      ],
    },
    {
      title: 'ציון ותוצאות',
      items: [
        'מנוע סקורינג 7 גורמים',
        <>בדיקות קבוצתיות עם {L('dedup')} של העברות פנים-חשבוניות</>,
        <>דף פירוט ציון עם {L('traffic light')}</>,
      ],
    },
    {
      title: 'חוויית משתמש',
      items: [
        <>עדכוני דשבורד בזמן אמת ({L('SSE')})</>,
        L('Dark / Light mode'),
        L('Mobile responsive'),
      ],
    },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>04 · מה בוצע</Eyebrow>
      <Title>יכולות</Title>

      <div
        style={{
          marginTop: SPACING.sectionGap,
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 48,
        }}
      >
        {groups.map(({ title, items }) => (
          <div key={title}>
            <div
              style={{
                fontSize: TYPE_SCALE.subtitle,
                fontWeight: 600,
                color: COLORS.ink,
                marginBottom: 8,
              }}
            >
              {title}
            </div>
            <div
              style={{
                width: 72,
                height: 3,
                background: COLORS.accent,
                marginBottom: 20,
              }}
            />
            <div style={{ display: 'grid', gap: 14 }}>
              {items.map((it, idx) => (
                <div
                  key={idx}
                  style={{
                    fontSize: TYPE_SCALE.body,
                    color: COLORS.inkSoft,
                    display: 'flex',
                    gap: 16,
                    alignItems: 'baseline',
                  }}
                >
                  <span style={{ color: COLORS.accent, fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small }}>
                    ✓
                  </span>
                  <span>{it}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
};

Object.assign(window, { Slide04_Infra, Slide05_Features });