/* MaiAgent Partner Portal — Onboarding Journey */

const OnboardingPage = ({ t, lang, onNav }) => {
  const [status, setStatus] = React.useState(PARTNER_STATUS.status);
  const [orgInput, setOrgInput] = React.useState('');
  const [orgBound, setOrgBound] = React.useState(!!PARTNER_STATUS.orgId);

  const doneCount = Object.values(PARTNER_STATUS.training).filter(v => v === true).length;
  const totalModules = 8;
  const trainPct = Math.round((doneCount / totalModules) * 100);

  const STEPS = [
    { id: 'apply',    key: 'ob.step.apply' },
    { id: 'contract', key: 'ob.step.contract' },
    { id: 'org',      key: 'ob.step.org' },
    { id: 'training', key: 'ob.step.training' },
    { id: 'approved', key: 'ob.step.approved' },
  ];

  const stepIndex = status === 'pending_review' ? 1
    : status === 'registered' ? (orgBound ? 3 : 2)
    : 4;

  const isCertified = status === 'certified';

  const CONTRACTS = [
    {
      icon: 'file-text', iconColor: '#2563eb', iconBg: '#eff6ff',
      zh: { name: '合作意向書', desc: '確立雙方合作意向、服務範疇與基本合作框架，為後續合約奠定基礎。' },
      en: { name: 'Letter of Intent', desc: 'Establishes mutual intent, service scope, and the basic framework ahead of formal agreements.' },
      date: '2026-02-15',
    },
    {
      icon: 'lock', iconColor: '#7c3aed', iconBg: '#f5f3ff',
      zh: { name: '保密協議書（NDA）', desc: '約束雙方對機密資訊的保護義務，禁止未授權揭露或使用。' },
      en: { name: 'Non-Disclosure Agreement', desc: 'Binds both parties to protect confidential information from unauthorized disclosure or use.' },
      date: '2026-03-01',
    },
    {
      icon: 'briefcase', iconColor: '#059669', iconBg: '#ecfdf5',
      zh: { name: '通路經銷合約', desc: '正式定義經銷商的銷售權利、產品折扣條款、案件保護期規則與雙方責任義務。' },
      en: { name: 'Channel Reseller Agreement', desc: 'Formally defines reseller rights, product discount terms, deal protection rules, and mutual obligations.' },
      date: '2026-04-08',
    },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header__title">
          <div className="page-header__eyebrow">{lang === 'zh' ? '夥伴中心' : 'Partner Hub'}</div>
          <h1>{t('ob.title')}</h1>
          <div className="page-header__sub">{t('ob.sub')}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: 'var(--mai-fg-3)', fontWeight: 600 }}>DEMO:</span>
          {['pending_review', 'registered', 'certified'].map(s => (
            <button key={s} onClick={() => setStatus(s)}
              style={{ fontSize: 11, padding: '4px 10px', borderRadius: 999, border: '1px solid var(--mai-border)', background: status === s ? 'var(--mai-fg)' : 'white', color: status === s ? 'white' : 'var(--mai-fg-2)', cursor: 'pointer', fontWeight: 600 }}>
              {s}
            </button>
          ))}
        </div>
      </div>

      {/* Stepper */}
      <div style={{ background: 'white', border: '1px solid var(--mai-border)', borderRadius: 16, padding: '24px 32px', marginBottom: 12 }}>
        <Stepper steps={STEPS.map(s => t(s.key))} current={stepIndex} />
      </div>

      {/* Incentive banner — encourage training for registered partners */}
      {status === 'registered' && (
        <div style={{ background: 'linear-gradient(120deg, #131838 0%, #1B2150 60%, #1F4FFF 130%)', borderRadius: 16, padding: '20px 28px', marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '50%', background: 'radial-gradient(circle at 70% 50%, rgba(38,194,129,0.3) 0%, transparent 60%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mai-green-bright)', marginBottom: 6 }}>
              {lang === 'zh' ? '取得認證後即解鎖：' : 'Unlock after certification:'}
            </div>
            <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
              {[
                lang === 'zh' ? 'NFR 企業版 1 年免費授權' : '1-year NFR Enterprise License',
                lang === 'zh' ? '免強搭顧問服務' : 'No mandatory consulting bundle',
                lang === 'zh' ? '服務方案自訂定價（100% 利潤）' : 'Services self-priced (100% margin)',
              ].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'white', fontSize: 13, fontWeight: 600 }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: 'rgba(38,194,129,0.25)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name="check" size={12} style={{ color: 'var(--mai-green-bright)' }} />
                  </span>
                  {b}
                </div>
              ))}
            </div>
          </div>
          <Btn variant="primary" icon="book-open" onClick={() => onNav('training')} style={{ flexShrink: 0, position: 'relative', zIndex: 1 }}>{t('ob.training.go')}</Btn>
        </div>
      )}

      {/* Step cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>

        {/* Step 1 — Submit Application */}
        <StepCard index={1} done={true} label={t('ob.step.apply')} date="2026-04-01" lang={lang}>
          <div style={{ color: 'var(--mai-fg-2)', fontSize: 13.5 }}>
            {lang === 'zh'
              ? '申請表已於 2026-04-01 送出，包含公司基本資料、負責人資訊與銷售區域。'
              : 'Application submitted on 2026-04-01 with company info, representative details, and target region.'}
          </div>
        </StepCard>

        {/* Step 2 — Sign Contract */}
        <StepCard
          index={2}
          done={status !== 'pending_review'}
          current={status === 'pending_review'}
          label={t('ob.step.contract')}
          date={status !== 'pending_review' ? '2026-04-08' : null}
          lang={lang}
        >
          {status === 'pending_review' ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', background: '#FFF8EC', border: '1px solid #FDE68A', borderRadius: 10 }}>
              <Icon name="clock" size={18} style={{ color: '#B45309', flexShrink: 0 }} />
              <div>
                <div style={{ fontWeight: 600, color: '#92400E', fontSize: 13 }}>
                  {lang === 'zh' ? '審核中（預計 5 個工作天）' : 'Application under review (5 business days)'}
                </div>
                <div style={{ color: '#B45309', fontSize: 12, marginTop: 2 }}>
                  {lang === 'zh' ? '審核通過後將寄送合約，請留意 Email 通知' : 'Contracts will be sent upon approval — watch your email'}
                </div>
              </div>
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {CONTRACTS.map((c, i) => {
                const info = lang === 'zh' ? c.zh : c.en;
                return (
                  <div key={i} style={{ border: '1px solid var(--mai-border)', borderRadius: 12, padding: '16px', background: '#FAFBFF', display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ width: 34, height: 34, borderRadius: 8, background: c.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Icon name={c.icon} size={17} style={{ color: c.iconColor }} />
                      </div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--mai-fg)', lineHeight: 1.3 }}>{info.name}</div>
                    </div>
                    <p style={{ margin: 0, fontSize: 12, color: 'var(--mai-fg-3)', lineHeight: 1.6, flex: 1 }}>{info.desc}</p>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                      <div style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--mai-green)', flexShrink: 0 }} />
                      <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--mai-green-deep)' }}>{lang === 'zh' ? '已完成' : 'Completed'}</span>
                      <span style={{ fontSize: 11.5, color: 'var(--mai-fg-3)' }}>· {c.date}</span>
                    </div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <Btn variant="ghost" size="sm" icon="file-text" style={{ flex: 1, justifyContent: 'center' }}>{lang === 'zh' ? '查看' : 'View'}</Btn>
                      <Btn variant="ghost" size="sm" icon="download" style={{ flex: 1, justifyContent: 'center' }}>{lang === 'zh' ? '下載' : 'Download'}</Btn>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </StepCard>

        {/* Step 3 — Partner Org Setup */}
        <StepCard
          index={3}
          done={orgBound && status !== 'pending_review'}
          current={status === 'registered' && !orgBound}
          label={t('ob.step.org')}
          date={(orgBound && status !== 'pending_review') ? '2026-04-15' : null}
          lang={lang}
          locked={status === 'pending_review'}
        >
          <div style={{ background: '#F8F9FF', border: '1px solid #E2E7F8', borderRadius: 12, padding: '18px 20px' }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 4 }}>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--mai-fg)', marginBottom: 4 }}>{t('ob.orgid.label')}</div>
                <div style={{ fontSize: 12, color: 'var(--mai-fg-3)' }}>{t('ob.orgid.subtitle')}</div>
              </div>
              {orgBound && <Badge tone="green" dot>{t('ob.orgid.done')}</Badge>}
            </div>
            <div style={{ height: 1, background: '#E2E7F8', margin: '14px 0' }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                t('ob.orgid.step1'),
                t('ob.orgid.step2'),
                t('ob.orgid.step3'),
                t('ob.orgid.step4'),
                t('ob.orgid.step5'),
              ].map((stepText, i) => {
                const isStep5 = i === 4;
                return (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 26, height: 26, borderRadius: 999, background: '#E6EAFF', color: 'var(--mai-blue)', fontSize: 11, fontWeight: 800, display: 'grid', placeItems: 'center', flexShrink: 0, border: '1.5px solid #C7D2F5' }}>{i + 1}</div>
                    <div style={{ flex: 1, paddingTop: 4 }}>
                      <div style={{ fontSize: 13, color: 'var(--mai-fg-2)', lineHeight: 1.55 }}>{stepText}</div>
                      {isStep5 && !orgBound && (
                        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                          <input
                            className="input"
                            style={{ flex: 1, fontFamily: 'ui-monospace, monospace', fontSize: 12.5 }}
                            placeholder={t('ob.orgid.input')}
                            value={orgInput}
                            onChange={e => setOrgInput(e.target.value)}
                            onKeyDown={e => { if (e.key === 'Enter' && orgInput.trim()) setOrgBound(true); }}
                          />
                          <Btn variant="primary" size="sm" onClick={() => { if (orgInput.trim()) setOrgBound(true); }}>{t('ob.orgid.bind')}</Btn>
                        </div>
                      )}
                      {isStep5 && orgBound && (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, padding: '10px 14px', background: 'rgba(38,194,129,0.1)', border: '1px solid rgba(38,194,129,0.25)', borderRadius: 8 }}>
                          <Icon name="check-circle" size={16} style={{ color: 'var(--mai-green-deep)', flexShrink: 0 }} />
                          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--mai-green-deep)' }}>{t('ob.orgid.bound_label')}</span>
                          <code style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: 'var(--mai-fg-2)', background: 'rgba(38,194,129,0.08)', padding: '2px 8px', borderRadius: 6 }}>{PARTNER_STATUS.orgId}</code>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ marginTop: 16, padding: '10px 14px', background: '#EEF0FB', borderRadius: 8, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <Icon name="info" size={14} style={{ color: 'var(--mai-blue)', flexShrink: 0, marginTop: 1 }} />
              <div style={{ fontSize: 12, color: 'var(--mai-fg-3)', lineHeight: 1.5 }}>{t('ob.orgid.hint')}</div>
            </div>
          </div>
        </StepCard>

        {/* Step 4 — Training & Certification */}
        <StepCard
          index={4}
          done={isCertified}
          current={status === 'registered' && orgBound}
          label={t('ob.step.training')}
          date={isCertified ? '2026-05-02' : null}
          lang={lang}
          locked={status === 'pending_review'}
        >
          {isCertified ? (
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', background: 'rgba(38,194,129,0.08)', border: '1px solid rgba(38,194,129,0.2)', borderRadius: 10, marginBottom: 16 }}>
                <Icon name="award" size={20} style={{ color: 'var(--mai-green-deep)' }} />
                <div>
                  <div style={{ fontWeight: 700, color: 'var(--mai-green-deep)', fontSize: 13 }}>
                    {lang === 'zh' ? '已取得 Certified Partner 認證' : 'Certified Partner status achieved'}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--mai-fg-3)', marginTop: 2 }}>
                    {lang === 'zh' ? '測驗得分 90 分 · 2026-05-02 認證通過' : 'Exam score 90 · Certified on 2026-05-02'}
                  </div>
                </div>
              </div>
              {/* Certificate */}
              <div style={{ border: '2px solid #E2C96A', borderRadius: 16, padding: '28px 32px', background: 'linear-gradient(135deg, #FFFDF0 0%, #FFF8D6 50%, #FFFDF0 100%)', textAlign: 'center' }}>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>
                  <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'linear-gradient(135deg, #F2D769, #C49A00)', display: 'grid', placeItems: 'center' }}>
                    <Icon name="award" size={28} style={{ color: 'white' }} />
                  </div>
                </div>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.15em', textTransform: 'uppercase', color: '#A07800', marginBottom: 8 }}>MaiAgent Partner Program</div>
                <div style={{ fontSize: 21, fontWeight: 800, color: '#5C4400', marginBottom: 6 }}>
                  {lang === 'zh' ? '認證夥伴證書' : 'Certificate of Partnership'}
                </div>
                <div style={{ fontSize: 12.5, color: '#8A6C00', marginBottom: 14 }}>
                  {lang === 'zh' ? '茲證明以下企業已完成 MaiAgent 夥伴認證訓練：' : 'This certifies that the following organization has completed MaiAgent Partner Certification:'}
                </div>
                <div style={{ fontSize: 19, fontWeight: 700, color: '#3D2E00', marginBottom: 4 }}>{PARTNER.company[lang]}</div>
                <div style={{ fontSize: 13, color: '#6B5200', marginBottom: 22 }}>
                  {lang === 'zh' ? '正式成為 MaiAgent Certified Partner' : 'is recognized as a MaiAgent Certified Partner'}
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', gap: 36, marginBottom: 22 }}>
                  {[
                    { zh: '認證日期', en: 'Issue Date',   value: '2026-05-02' },
                    { zh: '有效期限', en: 'Valid Until',  value: '2027-05-01' },
                    { zh: '測驗得分', en: 'Exam Score',   value: '90 / 100' },
                  ].map((f, i) => (
                    <div key={i} style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: 10, color: '#A07800', fontWeight: 600, marginBottom: 4 }}>{lang === 'zh' ? f.zh : f.en}</div>
                      <div style={{ fontSize: 14, fontWeight: 700, color: '#5C4400' }}>{f.value}</div>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
                  <Btn variant="ghost" size="sm" icon="download">{lang === 'zh' ? '下載證書 PDF' : 'Download Certificate'}</Btn>
                  <Btn variant="ghost" size="sm" icon="share">{lang === 'zh' ? '分享' : 'Share'}</Btn>
                </div>
              </div>
            </div>
          ) : (
            <div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{ fontSize: 13, color: 'var(--mai-fg-2)', fontWeight: 600 }}>
                  {t('ob.training.progress')} <span style={{ color: 'var(--mai-fg)' }}>{doneCount}/{totalModules}</span>
                </div>
                <span style={{ fontSize: 12, color: 'var(--mai-fg-3)' }}>{trainPct}%</span>
              </div>
              <Progress value={trainPct} variant="blue" />
              <div style={{ display: 'flex', gap: 6, marginTop: 16, flexWrap: 'wrap' }}>
                {TRAINING_MODULES.map(m => (
                  <div key={m.id} style={{
                    display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 999,
                    background: PARTNER_STATUS.training[m.id] ? 'rgba(38,194,129,0.12)' : '#F4F6FF',
                    border: '1px solid ' + (PARTNER_STATUS.training[m.id] ? 'rgba(38,194,129,0.25)' : '#E2E7F8'),
                    fontSize: 11.5, fontWeight: 600,
                    color: PARTNER_STATUS.training[m.id] ? 'var(--mai-green-deep)' : 'var(--mai-fg-3)',
                  }}>
                    {PARTNER_STATUS.training[m.id] ? <Icon name="check" size={11} /> : null}
                    {m.id}
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16 }}>
                <Btn variant="primary" icon="book-open" onClick={() => onNav('training')}>{t('ob.training.go')}</Btn>
              </div>
            </div>
          )}
        </StepCard>

        {/* Step 5 — Onboarding Complete */}
        <StepCard
          index={5}
          done={isCertified}
          label={t('ob.step.approved')}
          date={isCertified ? '2026-05-10' : null}
          lang={lang}
          locked={!isCertified}
        >
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px', background: 'linear-gradient(135deg, rgba(31,79,255,0.05), rgba(38,194,129,0.05))', border: '1px solid rgba(38,194,129,0.2)', borderRadius: 12, marginBottom: 16 }}>
              <div style={{ fontSize: 28 }}>🎉</div>
              <div>
                <div style={{ fontWeight: 700, color: 'var(--mai-fg)', fontSize: 15, marginBottom: 2 }}>
                  {lang === 'zh'
                    ? `恭喜！${PARTNER.company[lang]} 正式成為 MaiAgent Certified Partner`
                    : `Congratulations! ${PARTNER.company[lang]} is now a MaiAgent Certified Partner`}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--mai-fg-3)' }}>
                  {lang === 'zh' ? '所有夥伴權益已全數解鎖，開始拓展你的 AI 業務吧！' : 'All partner benefits are now unlocked — start growing your AI business!'}
                </div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
              {[
                { icon: 'award',  color: '#C49A00', bg: '#FFFDE7', zh: 'NFR 企業版 1 年免費授權',        en: '1-year NFR Enterprise License' },
                { icon: 'shield', color: '#1F4FFF', bg: '#EEF2FF', zh: '商機報備 90 天保護期',           en: '90-day Deal Protection' },
                { icon: 'zap',    color: '#059669', bg: '#ECFDF5', zh: '服務方案自訂定價（100% 利潤）', en: 'Services Self-Priced (100% Margin)' },
              ].map((b, i) => (
                <div key={i} style={{ padding: '14px', border: '1px solid var(--mai-border)', borderRadius: 10, background: b.bg, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', textAlign: 'center' }}>
                  <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'white', display: 'grid', placeItems: 'center', boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}>
                    <Icon name={b.icon} size={19} style={{ color: b.color }} />
                  </div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--mai-fg)', lineHeight: 1.4 }}>
                    {lang === 'zh' ? b.zh : b.en}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="primary" icon="plus" onClick={() => onNav('deals')}>{lang === 'zh' ? '報備第一筆案件' : 'Register your first deal'}</Btn>
              <Btn variant="ghost" icon="users" onClick={() => onNav('customers')}>{t('nav.customers')}</Btn>
            </div>
          </div>
        </StepCard>

      </div>

      {/* Deal Registration Conditions — always visible */}
      <div style={{ marginTop: 24, background: 'white', border: '1px solid var(--mai-border)', borderRadius: 16, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--mai-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 34, height: 34, borderRadius: 8, background: '#EEF2FF', display: 'grid', placeItems: 'center' }}>
              <Icon name="shield" size={17} style={{ color: '#1F4FFF' }} />
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--mai-fg)' }}>
                {lang === 'zh' ? '案件報備（隨時可用）' : 'Deal Registration (Always Available)'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--mai-fg-3)', marginTop: 1 }}>
                {lang === 'zh' ? '認證前後條件不同，詳見以下說明' : 'Conditions differ before and after certification — see below'}
              </div>
            </div>
          </div>
          <Btn variant="primary" size="sm" icon="plus" onClick={() => onNav('deals')}>
            {lang === 'zh' ? '報備案件' : 'Register Deal'}
          </Btn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          {/* Pre-cert column */}
          <div style={{ padding: '20px', borderRight: '1px solid var(--mai-border)', background: isCertified ? 'white' : '#F8F9FF' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: isCertified ? '#CBD5E1' : 'var(--mai-blue)', flexShrink: 0 }} />
              <span style={{ fontSize: 11.5, fontWeight: 700, color: isCertified ? 'var(--mai-fg-3)' : 'var(--mai-blue)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                {lang === 'zh' ? '認證前' : 'Pre-Certification'}
              </span>
              {isCertified && (
                <span style={{ fontSize: 11, color: 'var(--mai-fg-3)', fontStyle: 'italic' }}>
                  {lang === 'zh' ? '（已適用完畢）' : '(Past)'}
                </span>
              )}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {[
                { zh: '產品方案：七折（list price × 70%）', en: 'Products: 70% of list price' },
                { zh: '服務方案：九折（list price × 90%）', en: 'Services: 90% of list price' },
                { zh: '每案必須搭售 ≥12 小時顧問服務', en: 'Each deal must bundle ≥12h consulting', warn: true },
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <Icon
                    name={item.warn ? 'alert' : 'check'}
                    size={13}
                    style={{ color: item.warn ? '#B45309' : (isCertified ? '#CBD5E1' : 'var(--mai-fg-3)'), marginTop: 2, flexShrink: 0 }}
                  />
                  <span style={{ fontSize: 12.5, color: isCertified ? 'var(--mai-fg-3)' : 'var(--mai-fg-2)', lineHeight: 1.5 }}>
                    {lang === 'zh' ? item.zh : item.en}
                  </span>
                </div>
              ))}
            </div>
          </div>
          {/* Post-cert column */}
          <div style={{ padding: '20px', background: isCertified ? '#F0FDF4' : 'white' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: isCertified ? 'var(--mai-green)' : '#CBD5E1', flexShrink: 0 }} />
              <span style={{ fontSize: 11.5, fontWeight: 700, color: isCertified ? 'var(--mai-green-deep)' : 'var(--mai-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                {lang === 'zh' ? '認證後' : 'Post-Certification'}
              </span>
              {isCertified && (
                <Badge tone="green" dot style={{ marginLeft: 4 }}>{lang === 'zh' ? '目前適用' : 'Current'}</Badge>
              )}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {[
                { zh: 'NFR 企業版授權 1 年（免費）',           en: 'NFR 1-year Enterprise license (free)' },
                { zh: '不強制搭售顧問服務',                    en: 'No mandatory consulting bundle' },
                { zh: '服務方案可自訂定價，100% 利潤歸夥伴',  en: 'Services self-priced — 100% margin to partner' },
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <Icon
                    name="check"
                    size={13}
                    style={{ color: isCertified ? 'var(--mai-green)' : '#CBD5E1', marginTop: 2, flexShrink: 0 }}
                  />
                  <span style={{ fontSize: 12.5, color: isCertified ? 'var(--mai-fg-2)' : 'var(--mai-fg-3)', lineHeight: 1.5 }}>
                    {lang === 'zh' ? item.zh : item.en}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};

const StepCard = ({ index, done, current, locked, label, date, lang, children }) => {
  const [open, setOpen] = React.useState(!locked && (current || done));
  return (
    <div style={{ background: 'white', border: '1px solid ' + (current && !done ? 'var(--mai-blue)' : 'var(--mai-border)'), borderRadius: 16, overflow: 'hidden', opacity: locked ? 0.5 : 1 }}>
      <div
        onClick={() => !locked && setOpen(o => !o)}
        style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', cursor: locked ? 'default' : 'pointer', userSelect: 'none' }}
      >
        <div style={{ width: 32, height: 32, borderRadius: 999, display: 'grid', placeItems: 'center', flexShrink: 0, background: done ? 'var(--mai-green)' : current ? 'var(--mai-fg)' : '#F1F3FA', color: done || current ? 'white' : 'var(--mai-fg-3)', fontSize: 13, fontWeight: 700, boxShadow: (current && !done) ? '0 0 0 4px rgba(14,18,48,0.08)' : 'none' }}>
          {done ? <Icon name="check" size={15} /> : index}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 14, color: locked ? 'var(--mai-fg-3)' : 'var(--mai-fg)' }}>{label}</div>
          {date && <div style={{ fontSize: 11.5, color: 'var(--mai-fg-3)', marginTop: 2 }}>{lang === 'zh' ? '完成於' : 'Completed'} {date}</div>}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {done && <Badge tone="green" dot>{lang === 'zh' ? '已完成' : 'Done'}</Badge>}
          {current && !done && <Badge tone="blue" dot>{lang === 'zh' ? '進行中' : 'In progress'}</Badge>}
          {locked && <Badge tone="gray">{lang === 'zh' ? '待解鎖' : 'Locked'}</Badge>}
          {!locked && (
            <Icon name="chevron-down" size={16} style={{ color: 'var(--mai-fg-3)', transform: open ? 'rotate(180deg)' : undefined, transition: 'transform 0.2s' }} />
          )}
        </div>
      </div>
      {open && !locked && (
        <div style={{ padding: '0 20px 20px', borderTop: '1px solid #F1F3FA' }}>
          <div style={{ paddingTop: 16 }}>{children}</div>
        </div>
      )}
    </div>
  );
};

window.OnboardingPage = OnboardingPage;