/* LearningSystem.jsx — 4-step horizontal flow + dashboard preview teaser
   Reuses card + elev-3 + dashed border tokens.
   Rationale: spec §2.6. Highlights the SRIKI trust asset:
   "Kakao note within 30 min" (PDF §시나리오 C). */

const SIcon = ({ d, size = 22, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
       style={style}>{d}</svg>
);

const STEP_ICONS = {
  class:     <><path d="M2 7l10-4 10 4-10 4z"/><path d="M5 9v6c0 1 3 3 7 3s7-2 7-3V9"/></>,
  app:       <><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></>,
  /* Parent dashboard — 4-quadrant grid (KPI tiles metaphor) */
  dashboard: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
  /* Parent report — reuses the former 학습지 document icon (lines on page) */
  report:    <><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></>,
};

const LearningSystem = ({ onPreview }) => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const isKo = lang === 'ko';
  const steps = [
    { icon: 'class',     label: 'sys.s1.label', body: 'sys.s1.body' },
    { icon: 'app',       label: 'sys.s2.label', body: 'sys.s2.body' },
    { icon: 'dashboard', label: 'sys.s3.label', body: 'sys.s3.body' },
    { icon: 'report',    label: 'sys.s4.label', body: 'sys.s4.body' },
  ];

  return (
    <section id="system" className="section" style={{ background: '#F8FAFC' }}>
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('sys.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.6vw, 38px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: 820, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('sys.h2')}</h2>

        {/* Flow — 4 step cards with chevron arrows between (desktop) */}
        <div className="flow" style={{
          display: 'flex', alignItems: 'stretch',
          marginTop: 48, gap: 0,
        }}>
          {steps.map((s, i) => {
            const isPunchline = i === steps.length - 1; // step 4 = "30분 안에 카톡"
            return (
              <React.Fragment key={s.label}>
                <div className="flow-card" style={{
                  flex: 1, minWidth: 0,
                  background: '#FFFFFF',
                  border: '1px solid #E2E8F0',
                  borderRadius: 14,
                  padding: '20px 22px',
                  display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 14,
                  position: 'relative',
                  boxShadow: isPunchline
                    ? '0 1px 2px rgba(15,23,42,0.04), 0 16px 36px -18px rgba(109,40,217,0.28)'
                    : '0 1px 2px rgba(15,23,42,0.04)',
                  /* Step 4 punchline: left accent bar ties back to "30분 안에 도착" */
                  ...(isPunchline && {
                    borderLeft: '3px solid #6D28D9',
                  }),
                }}>
                  {/* Left column — STEP eyebrow + label + body */}
                  <div style={{
                    flex: 1, minWidth: 0,
                    display: 'flex', flexDirection: 'column', gap: 6,
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                      color: isPunchline ? '#6D28D9' : '#94A3B8',
                      textTransform: 'uppercase', letterSpacing: '0.10em',
                    }}>STEP {String(i + 1).padStart(2, '0')}</span>
                    <div style={{
                      fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                      fontSize: 18, fontWeight: 700, letterSpacing: '-0.22px',
                      color: '#0B1727', lineHeight: 1.25,
                    }}>{t(s.label)}</div>
                    <div style={{
                      fontSize: 13, fontWeight: 500,
                      color: '#475569', lineHeight: 1.6,
                    }}>{t(s.body)}</div>
                  </div>

                  {/* Right — icon vertically centered (alignItems on parent) */}
                  <SIcon size={26} d={STEP_ICONS[s.icon]}
                    style={{ color: isPunchline ? '#6D28D9' : '#0B1727', flexShrink: 0 }} />
                </div>

                {/* Chevron arrow between cards (desktop only) */}
                {i < steps.length - 1 && (
                  <span aria-hidden="true" className="flow-chevron" style={{
                    alignSelf: 'center', flexShrink: 0,
                    width: 28, color: '#C4B5FD',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" strokeWidth="2.5"
                      strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="9 18 15 12 9 6"/>
                    </svg>
                  </span>
                )}
              </React.Fragment>
            );
          })}
        </div>

        {/* Preview teaser */}
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
          alignItems: 'center',
        }} className="preview-row">
          <div>
            <div className="label-ko" style={{ marginBottom: 14 }}>{t('sys.preview.eyebrow')}</div>
            <div className="sriki-sub-h2" style={{
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 'clamp(14px, 4.6vw, 28px)', fontWeight: 700, letterSpacing: '-0.3px',
              color: '#0B1727', lineHeight: 1.30,
              whiteSpace: 'nowrap',
            }}>{t('sys.preview.title')}</div>
            <p style={{
              fontSize: 15, fontWeight: 400,
              color: '#475569', lineHeight: 1.70, marginTop: 14,
            }}>
              {t('sys.preview.body')}
            </p>
            <div style={{ marginTop: 22 }}>
              <Button variant="secondary" size="md" onClick={onPreview}>{t('sys.preview')} →</Button>
            </div>
          </div>

          {/* Real parent dashboard screenshot — auto-captured via
              C:/tmp/cap-parent-dashboard.cjs from sriki-parent/index.html.
              Replaces the previous hand-mocked faux dashboard. */}
          <div style={{
            position: 'relative',
            borderRadius: 14,
            overflow: 'hidden',
            border: '1px solid #E2E8F0',
            background: '#fff',
            boxShadow:
              '0 1px 2px rgba(15,23,42,0.04),' +
              '0 24px 56px -24px rgba(15,23,42,0.20)',
            lineHeight: 0,
          }}>
            <img
              src="assets/parent-dashboard.png?v=20260529"
              alt={isKo ? '스리키 학부모 대시보드 — 학습일수·정답률·용돈 승인·결제까지 한 화면' : 'SRIKI parent dashboard — attendance, accuracy, allowance approvals, and billing in one screen'}
              loading="lazy"
              style={{
                display: 'block',
                width: '100%', height: 'auto',
              }}
            />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .flow {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
          }
          .flow-chevron { display: none !important; }
          .preview-row { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 480px) {
          .flow { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.LearningSystem = LearningSystem;