// Slide 9: Updated Project Schedule (תוכנית פרויקט · לוח זמנים מעודכן)
// Built: completed milestones · In progress · Upcoming with dates

const Slide09_Schedule = () => {
  const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;

  const phases = [
    {
      status: 'done',
      title: 'הקמת תשתית',
      items: [<>{L('Monorepo')} · {L('CI/CD')} · {L('Postgres + Redis')}</>, <>{L('SSL')} ו-{L('production deploy')}</>],
    },
    {
      status: 'done',
      title: 'אימות וזרימת בדיקה',
      items: ['הרשמה, התחברות, ניהול טוקנים', <>הסכמת נבדק · {L('OTP')} · {L('Open Finance iframe')}</>],
    },
    {
      status: 'done',
      title: 'מנוע סקורינג',
      items: ['7 גורמים · ציון · רמזור', 'בדיקות קבוצתיות · עדכון בזמן אמת'],
    },
    {
      status: 'now',
      title: 'סקירת POC',
      items: ['מצגת זו', 'הדגמה חיה'],
    },
    {
      status: 'next',
      title: <>אינטגרציית {L('Stripe')}</>,
      items: ['רכישת טוקנים אמיתית', <>משימת {L('onboarding')} לחוזרים ממילואים</>],
    },
    {
      status: 'next',
      title: L('Provider API'),
      items: [<>{L('API keys · webhooks · branding')}</>, <>שילוב {L('embedded')} בעסקים אחרים</>],
    },
    {
      status: 'next',
      title: 'כיול סקורינג',
      items: [<>{L('Refinement')} עם נתוני {L('production')}</>, 'פאנל ניהול פנימי'],
    },
    {
      status: 'next',
      title: 'הגשת פרויקט',
      items: [<>הקשחת אבטחה · {L('pentest')}</>, 'תיעוד סופי + הגנה'],
    },
  ];

  const statusMap = {
    done: { label: '✓ בוצע', color: COLORS.accent, bg: COLORS.accentSoft, dot: COLORS.accent },
    now: { label: '● עכשיו', color: COLORS.ink, bg: COLORS.surface, dot: COLORS.ink },
    next: { label: '○ הבא', color: COLORS.inkMute, bg: COLORS.paper, dot: COLORS.rule },
  };

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>09 · לוח זמנים מעודכן</Eyebrow>
      <Title>תוכנית פרויקט</Title>

      <div style={{ marginTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {phases.map((p, i) => {
            const s = statusMap[p.status];
            return (
              <div
                key={i}
                style={{
                  background: s.bg,
                  border: `1px solid ${p.status === 'now' ? s.color : COLORS.rule}`,
                  borderRight: `4px solid ${s.dot}`,
                  borderRadius: 4,
                  padding: 22,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 12,
                  minHeight: 240,
                }}
              >
                <div
                  style={{
                    fontFamily: FONTS.mono,
                    fontSize: 24,
                    color: s.color,
                    fontWeight: 600,
                    letterSpacing: '0.02em',
                  }}
                >
                  {s.label}
                </div>
                <div
                  style={{
                    fontSize: 28,
                    fontWeight: 700,
                    color: COLORS.ink,
                    lineHeight: 1.15,
                  }}
                >
                  {p.title}
                </div>
                <div style={{ display: 'grid', gap: 6, marginTop: 'auto' }}>
                  {p.items.map((it, j) => (
                    <div key={j} style={{ fontSize: 24, color: COLORS.inkSoft, lineHeight: 1.3 }}>
                      · {it}
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </SlideFrame>
  );
};

Object.assign(window, { Slide09_Schedule });