// Slides 1-3: Title, POC plan, Architecture

const Slide01_Title = () => (
  <SlideFrame bg={COLORS.paper} padded={false}>
    {/* Subtle grid watermark */}
    <div
      style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: `linear-gradient(${COLORS.rule} 1px, transparent 1px), linear-gradient(90deg, ${COLORS.rule} 1px, transparent 1px)`,
        backgroundSize: '80px 80px',
        opacity: 0.5,
      }}
    />
    {/* Thin accent bar on right */}
    <div
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        width: 12,
        background: COLORS.accent,
      }}
    />

    <div
      dir="rtl"
      style={{
        position: 'relative',
        height: '100%',
        boxSizing: 'border-box',
        padding: `80px 100px 80px`,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        color: COLORS.ink,
        fontFamily: FONTS.sans,
      }}
    >
      {/* Top: brand mark */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <div
          style={{
            width: 56,
            height: 56,
            borderRadius: 12,
            background: COLORS.accent,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontFamily: FONTS.mono,
            fontWeight: 700,
            fontSize: 28,
            color: '#ffffff',
          }}
        >
          OG
        </div>
        <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, letterSpacing: '0.12em', color: COLORS.inkMute }}>
          OPENGRADE · סקירת POC
        </div>
      </div>

      {/* Center: title */}
      <div>
        <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.small, color: COLORS.accent, letterSpacing: '0.08em', marginBottom: 32 }}>
          OpenGrade
        </div>
        <h1
          style={{
            fontSize: 108,
            fontWeight: 700,
            lineHeight: 1.02,
            letterSpacing: '-0.02em',
            margin: 0,
            color: COLORS.ink,
            textWrap: 'balance',
            maxWidth: 1500,
          }}
        >
          פלטפורמת ציון
          <br />
          אמון פיננסי
        </h1>
        <div
          style={{
            marginTop: 36,
            fontSize: TYPE_SCALE.subtitle,
            color: COLORS.inkSoft,
            fontWeight: 300,
            maxWidth: 1200,
          }}
        >
          Financial trust scoring built on Israeli Open Finance API
        </div>
      </div>

      {/* Bottom: team + supervisor */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 60 }}>
        <div>
          <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, color: COLORS.inkMute, letterSpacing: '0.08em', marginBottom: 12 }}>
            צוות הפרויקט
          </div>
          <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 500, lineHeight: 1.4 }}>
            Amit Zamir · May Gurevich
            <br />
            Noa Elmakies · Hai Tal
          </div>
        </div>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontFamily: FONTS.mono, fontSize: TYPE_SCALE.micro, color: COLORS.inkMute, letterSpacing: '0.08em', marginBottom: 12 }}>
            מנחה
          </div>
          <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 500 }}>
            Ari Ben Ephraim
          </div>
        </div>
      </div>
    </div>
  </SlideFrame>
);

// ————————————————————————————————————————————————————
// Slide 2: POC Plan — what we set out to build
// ————————————————————————————————————————————————————
const Slide02_Plan = () => (
  <SlideFrame>
    <CornerMark />
    <Eyebrow>01 · תוכנית ה-POC</Eyebrow>
    <Title>מה רצינו לבנות</Title>

    <div
      style={{
        marginTop: SPACING.sectionGap,
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 72,
      }}
    >
      {/* Left: the pitch */}
      <div>
        <div
          style={{
            fontSize: TYPE_SCALE.subtitle,
            lineHeight: 1.35,
            color: COLORS.ink,
            fontWeight: 400,
            textWrap: 'pretty',
          }}
        >
          פלטפורמת <b style={{ color: COLORS.accent }}>ציון אמון פיננסי</b> מבוססת{' '}
          <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>Open Finance</span>,{' '}
          <span dir="ltr" style={{ unicodeBidi: 'isolate' }}>PSD2 APIs</span> של הבנקים בישראל.
        </div>

        <div
          style={{
            marginTop: 56,
            paddingTop: 40,
            borderTop: `1px solid ${COLORS.rule}`,
            display: 'grid',
            gap: SPACING.itemGap,
          }}
        >
          {[
            ['שקיפות', 'הנבדק רואה מה נבדק ומה שותף'],
            ['מינימום נתונים', 'רק מה שצריך לחישוב הציון'],
            ['ביקורתיות', <><span dir="ltr" style={{ unicodeBidi: 'isolate' }}>audit trail</span> בלתי-ניתן-לשינוי</>],
          ].map(([k, v], idx) => (
            <div key={idx} style={{ display: 'flex', gap: 24, alignItems: 'baseline' }}>
              <div
                style={{
                  fontFamily: FONTS.mono,
                  fontSize: TYPE_SCALE.micro,
                  color: COLORS.accent,
                  minWidth: 160,
                  letterSpacing: '0.04em',
                }}
              >
                {k}
              </div>
              <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.ink, fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right: the flow */}
      <div
        style={{
          background: COLORS.surface,
          border: `1px solid ${COLORS.rule}`,
          borderRadius: 4,
          padding: 44,
        }}
      >
        <div
          style={{
            fontFamily: FONTS.mono,
            fontSize: TYPE_SCALE.micro,
            color: COLORS.inkMute,
            letterSpacing: '0.08em',
            marginBottom: 32,
          }}
        >
          הזרימה המרכזית
        </div>
        <div style={{ display: 'grid', gap: 22 }}>
          {[
            ['לקוח', 'יוצר בדיקה'],
            ['נבדק', 'מאמת זהות מול הבנק'],
            ['מנוע', 'מייצר ציון אמון'],
            ['תוצאה', 'בזמן אמת, לשני הצדדים'],
          ].map(([who, what], i, arr) => (
            <div key={who}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
                <div
                  style={{
                    fontFamily: FONTS.mono,
                    fontSize: TYPE_SCALE.micro,
                    color: COLORS.inkMute,
                    width: 24,
                  }}
                >
                  0{i + 1}
                </div>
                <div style={{ fontSize: TYPE_SCALE.body, fontWeight: 600, color: COLORS.ink, minWidth: 120 }}>
                  {who}
                </div>
                <div style={{ fontSize: TYPE_SCALE.body, color: COLORS.inkSoft }}>
                  {what}
                </div>
              </div>
              {i < arr.length - 1 && (
                <div style={{ marginRight: 30, marginTop: 8, height: 14, borderRight: `1px dashed ${COLORS.rule}` }} />
              )}
            </div>
          ))}
        </div>

        <div
          style={{
            marginTop: 36,
            paddingTop: 24,
            borderTop: `1px solid ${COLORS.ruleSoft}`,
            fontSize: TYPE_SCALE.micro,
            color: COLORS.inkMute,
            fontFamily: FONTS.mono,
            letterSpacing: '0.04em',
          }}
        >
          אפס אחסון PII · GDPR compliant by design
        </div>
      </div>
    </div>
  </SlideFrame>
);

// ————————————————————————————————————————————————————
// Slide 3: Architecture — tech stack
// ————————————————————————————————————————————————————
const Slide03_Architecture = () => {
  const stack = [
    {
      layer: 'Frontend',
      items: ['React 18', 'Vite', 'TypeScript', 'shadcn/ui', 'Tailwind CSS'],
    },
    {
      layer: 'Backend',
      items: ['Node.js', 'Express', 'TypeScript', 'Prisma ORM'],
    },
    {
      layer: 'Data',
      items: ['PostgreSQL 15', 'Redis (cache · rate limit)'],
    },
    {
      layer: 'Auth',
      items: ['BetterAuth', 'Session-based'],
    },
    {
      layer: 'Bank Data',
      items: ['Open Finance API', 'Production (not sandbox)'],
    },
    {
      layer: 'Real-time',
      items: ['Server-Sent Events (SSE)', 'Gmail SMTP'],
    },
    {
      layer: 'Deploy',
      items: ['Docker Compose', 'College server', 'GitHub Actions CI/CD'],
    },
    {
      layer: 'Codebase',
      items: ['Monorepo', 'client/ · server/ · shared/'],
    },
  ];

  return (
    <SlideFrame>
      <CornerMark />
      <Eyebrow>02 · Architecture</Eyebrow>
      <Title>ארכיטקטורה</Title>

      <div
        style={{
          marginTop: SPACING.sectionGap,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 20,
        }}
      >
        {stack.map(({ layer, items }) => (
          <div
            key={layer}
            style={{
              background: COLORS.surface,
              border: `1px solid ${COLORS.rule}`,
              borderRadius: 4,
              padding: 28,
              minHeight: 220,
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <div
              style={{
                fontFamily: FONTS.mono,
                fontSize: TYPE_SCALE.micro,
                color: COLORS.accent,
                letterSpacing: '0.08em',
                textTransform: 'uppercase',
                marginBottom: 16,
                direction: 'ltr',
                textAlign: 'right',
              }}
            >
              {layer}
            </div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: 10,
                direction: 'ltr',
                textAlign: 'right',
                fontFamily: FONTS.sans,
              }}
            >
              {items.map((it) => (
                <div key={it} style={{ fontSize: TYPE_SCALE.small, color: COLORS.ink, fontWeight: 500 }}>
                  {it}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
};

Object.assign(window, { Slide01_Title, Slide02_Plan, Slide03_Architecture });