// Slides 7-9: Demo flow, Security, Open Issues

// ————————————————————————————————————————————————————
// Slide 7: Demo Flow
// ————————————————————————————————————————————————————
const Slide07_DemoFlow = () => {
  const steps = [
    { actor: 'לקוח', action: 'נרשם ורוכש טוקנים' },
    { actor: 'לקוח', action: 'יוצר בדיקה חדשה' },
    { actor: 'נבדק', action: 'מקבל הזמנה במייל' },
    { actor: 'נבדק', action: 'OTP verification' },
    { actor: 'נבדק', action: 'הסכמה משפטית' },
    { actor: 'Open Finance', action: 'אימות מול הבנק (iframe)' },
    { actor: 'מערכת', action: 'שליפת נתונים פיננסיים' },
    { actor: 'מנוע', action: 'חישוב ציון' },
    { actor: 'לקוח', action: 'תוצאה בזמן אמת בדשבורד' },
    { actor: 'נבדק', action: 'סיכום רמזור במייל' },
  ];

  const actorColor = (actor) => {
    if (actor === 'לקוח') return COLORS.accent;
    if (actor === 'נבדק') return '#0d9488';
    if (actor === 'מערכת' || actor === 'מנוע') return COLORS.ink;
    return COLORS.inkMute;
  };

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>06 · Demo</Eyebrow>
      <Title>הדגמה - זרימת הבדיקה</Title>

      <div style={{ marginTop: SPACING.sectionGap }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5, 1fr)',
            gap: 16,
            rowGap: 40,
          }}
        >
          {steps.map((s, i) => {
            const color = actorColor(s.actor);
            const isLastInRow = (i + 1) % 5 === 0;
            const isLast = i === steps.length - 1;
            return (
              <div key={i} style={{ position: 'relative' }}>
                <div
                  style={{
                    background: COLORS.surface,
                    border: `1px solid ${COLORS.rule}`,
                    borderRight: `4px solid ${color}`,
                    borderRadius: 4,
                    padding: '18px 18px',
                    minHeight: 130,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                  }}
                >
                  <div
                    style={{
                      fontFamily: FONTS.mono,
                      fontSize: TYPE_SCALE.micro,
                      color: COLORS.inkMute,
                      letterSpacing: '0.08em',
                      marginBottom: 12,
                    }}
                  >
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <div>
                    <div
                      style={{
                        fontFamily: FONTS.mono,
                        fontSize: TYPE_SCALE.micro,
                        color,
                        letterSpacing: '0.04em',
                        marginBottom: 6,
                      }}
                    >
                      {s.actor}
                    </div>
                    <div style={{ fontSize: TYPE_SCALE.small, color: COLORS.ink, fontWeight: 500, lineHeight: 1.25 }}>
                      {s.action}
                    </div>
                  </div>
                </div>
                {/* Arrow connector — hidden at row ends and last item */}
                {!isLastInRow && !isLast && (
                  <div
                    style={{
                      position: 'absolute',
                      top: '50%',
                      left: -14,
                      transform: 'translateY(-50%)',
                      color: COLORS.inkMute,
                      fontSize: 24,
                      fontFamily: FONTS.mono,
                    }}
                  >
                    ←
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Legend */}
        <div
          style={{
            marginTop: 48,
            display: 'flex',
            gap: 32,
            fontSize: TYPE_SCALE.micro,
            fontFamily: FONTS.mono,
            color: COLORS.inkMute,
          }}
        >
          {[
            ['לקוח', COLORS.accent],
            ['נבדק', '#0d9488'],
            ['מערכת / מנוע', COLORS.ink],
            ['Open Finance', COLORS.inkMute],
          ].map(([label, color]) => (
            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 16, height: 3, background: color, display: 'inline-block' }} />
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </SlideFrame>
  );
};

// ————————————————————————————————————————————————————
// Slide 8: Security & Privacy
// ————————————————————————————————————————————————————
const Slide08_Security = () => {
  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>07 · Security &amp; Privacy</Eyebrow>
      <Title>אבטחה ופרטיות</Title>

      <div
        style={{
          marginTop: SPACING.sectionGap,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 56,
        }}
      >
        {/* Left: three big zeros */}
        <div>
          <div style={{ display: 'grid', gap: 32 }}>
            {[
              { big: '0', label: 'אחסון PII', note: 'רק מייל על רשומת הבדיקה' },
              { big: '0', label: 'אחסון נתונים פיננסיים', note: 'עיבוד בזיכרון בלבד, רק הציון נשמר' },
              { big: '0', label: 'גישה לפרטי בנק', note: 'Open Finance מטפל באימות, לעולם לא עובר דרכנו' },
            ].map(({ big, label, note }) => (
              <div key={label} style={{ display: 'flex', alignItems: 'baseline', gap: 28 }}>
                <div
                  style={{
                    fontSize: 128,
                    fontWeight: 700,
                    color: COLORS.accent,
                    lineHeight: 1,
                    fontFamily: FONTS.sans,
                    letterSpacing: '-0.04em',
                    minWidth: 100,
                  }}
                >
                  {big}
                </div>
                <div style={{ paddingTop: 20 }}>
                  <div style={{ fontSize: TYPE_SCALE.subtitle, fontWeight: 600, color: COLORS.ink, lineHeight: 1.1 }}>
                    {label}
                  </div>
                  <div style={{ fontSize: TYPE_SCALE.small, color: COLORS.inkMute, marginTop: 10, lineHeight: 1.35 }}>
                    {note}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: supporting properties */}
        <div
          style={{
            background: COLORS.surface,
            color: COLORS.ink,
            padding: 48,
            borderRadius: 4,
            border: `1px solid ${COLORS.rule}`,
          }}
        >
          <div
            style={{
              fontFamily: FONTS.mono,
              fontSize: TYPE_SCALE.micro,
              color: COLORS.accent,
              letterSpacing: '0.08em',
              marginBottom: 28,
            }}
          >
            שכבות נוספות
          </div>

          {(() => {
            const L = (s) => <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>{s}</span>;
            const rows = [
              { title: L('GDPR compliant by design'), note: <><span dir="ltr" style={{ unicodeBidi: 'isolate' }}>data minimization</span> מובנה בסכמת הנתונים</> },
              { title: L('Immutable audit trail'), note: 'כל פעולה בבדיקה נרשמת, לא ניתנת לשינוי' },
              { title: L('Rate limiting'), note: <>מבוסס {L('Redis')}, הגנה על endpoint-ים רגישים</> },
              { title: L('Session-based auth'), note: <>{L('BetterAuth')} · ללא חשיפת טוקני גישה ב-frontend</> },
            ];
            return (
              <div style={{ display: 'grid', gap: 24 }}>
                {rows.map(({ title, note }, i) => (
                  <div key={i} style={{ borderTop: `1px solid ${COLORS.rule}`, paddingTop: 16 }}>
                    <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 600 }}>{title}</div>
                    <div style={{ fontSize: TYPE_SCALE.small, color: COLORS.inkSoft, marginTop: 6 }}>
                      {note}
                    </div>
                  </div>
                ))}
              </div>
            );
          })()}
        </div>
      </div>
    </SlideFrame>
  );
};

// ————————————————————————————————————————————————————
// Slide 9: Open Issues
// ————————————————————————————————————————————————————
const Slide09_Issues = () => {
  const issues = [
    {
      k: <>כיול משקולות ו-<span dir="ltr" style={{ unicodeBidi: 'isolate' }}>red flagging</span></>,
      v: <>ה-<span dir="ltr" style={{ unicodeBidi: 'isolate' }}>baseline</span> וה-<span dir="ltr" style={{ unicodeBidi: 'isolate' }}>red flags</span> דורשים נתוני אמת לכיול</>,
    },
    {
      k: 'רכישת טוקנים',
      v: <>כרגע מדומה, אינטגרציית <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>Stripe</span> מתוכננת</>,
    },
    {
      k: <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>API לצד שלישי</span>,
      v: <>עדיין אין, לא ניתן לשלב <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>embedded</span> בעסקים אחרים</>,
    },
    {
      k: 'פאנל ניהול',
      v: 'לא קיים, אין כלי אדמיניסטרציה',
    },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>08 · Open Issues</Eyebrow>
      <Title>בעיות ונושאים פתוחים</Title>

      <div style={{ marginTop: SPACING.sectionGap }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 20,
          }}
        >
          {issues.map(({ k, v }, i) => (
            <div
              key={i}
              style={{
                background: COLORS.surface,
                border: `1px solid ${COLORS.rule}`,
                padding: 28,
                minHeight: 280,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                borderRadius: 4,
              }}
            >
              <div
                style={{
                  fontFamily: FONTS.mono,
                  fontSize: 56,
                  color: COLORS.accent,
                  lineHeight: 1,
                  fontWeight: 700,
                  letterSpacing: '0.04em',
                }}
              >
                {String(i + 1).padStart(2, '0')}
              </div>
              <div>
                <div
                  style={{
                    fontSize: TYPE_SCALE.body,
                    fontWeight: 700,
                    color: COLORS.ink,
                    marginBottom: 12,
                    lineHeight: 1.2,
                  }}
                >
                  {k}
                </div>
                <div style={{ fontSize: TYPE_SCALE.small, color: COLORS.inkSoft, lineHeight: 1.35 }}>
                  {v}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </SlideFrame>
  );
};

Object.assign(window, { Slide07_DemoFlow, Slide08_Security, Slide09_Issues });