// Pricing — 3-tier compare, monthly/yearly toggle
function Pricing({ lang }) {
  const isMobile = useIsMobile();
  const [billing, setBilling] = React.useState('monthly');
  const plans = [
    { k: 'free', name: 'Free', tag: lang === 'zh' ? '起步' : 'Starter', tagMuted: true, price: { monthly: '$0', yearly: '$0' }, per: lang === 'zh' ? '永久免费' : 'forever',
      feats_zh: ['3 个灵感板', '云同步', '每天 3 次 AI', '基础 Explain 流程', '本地优先, 不限记忆数'],
      feats_en: ['3 moodboards', 'Cloud sync', '3 AI calls/day', 'Basic Explain flow', 'Local-first, unlimited memories'],
      cta_zh: '开始使用', cta_en: 'Get started', ctaStyle: 'ghost' },
    { k: 'pro', name: 'Pro', tag: lang === 'zh' ? '给常用用户' : 'For power users', rec: true, price: { monthly: '$8', yearly: '$6' }, per: lang === 'zh' ? '/月' : '/month',
      feats_zh: ['不限灵感板 & 记忆数', '云同步', '每天 50 次 AI', 'Deep Think 深度解释', '自动标签 + 知识图谱', '嵌入式 Agent'],
      feats_en: ['Unlimited boards & memories', 'Cloud sync', '50 AI calls/day', 'Deep Think included', 'Auto tags + knowledge graph', 'Embedded Agent panel'],
      cta_zh: '开始 Pro', cta_en: 'Start Pro', ctaStyle: 'prim' },
    { k: 'max', name: 'Max', tag: lang === 'zh' ? '无限' : 'Unlimited', price: { monthly: '$16', yearly: '$12' }, per: lang === 'zh' ? '/月' : '/month',
      feats_zh: ['Pro 全部功能', '每天 200 次 AI', 'MCP 服务器优先支持', '优先客服', '新功能抢先体验'],
      feats_en: ['Everything in Pro', '200 AI calls/day', 'Priority MCP server access', 'Priority support', 'Early access to new features'],
      cta_zh: '升级 Max', cta_en: 'Subscribe Max', ctaStyle: 'ghost' },
  ];

  return (
    <section id="pricing" style={{ padding: isMobile ? '56px 16px' : '100px 24px', display: 'flex', justifyContent: 'center' }}>
      <div style={{ width: '100%', maxWidth: 1100 }}>
        <SectionHead lang={lang} eyebrow={t(COPY.pricing.eyebrow, lang)} title={t(COPY.pricing.title, lang)} sub={t(COPY.pricing.sub, lang)} center/>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <div style={{ display: 'inline-flex', padding: 4, borderRadius: 9999, background: 'rgba(26,107,74,0.08)' }}>
            {[['monthly', t(COPY.pricing.monthly, lang)], ['yearly', t(COPY.pricing.yearly, lang)]].map(([k, l]) => (
              <button key={k} onClick={() => setBilling(k)} style={{
                padding: '7px 16px', border: 'none', borderRadius: 9999,
                background: billing === k ? '#fff' : 'transparent',
                color: billing === k ? 'var(--accent-deep)' : 'var(--ln-fg3)',
                boxShadow: billing === k ? '0 1px 3px rgba(10,30,18,0.12)' : 'none',
                font: '600 12.5px var(--ln-font-brand)', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>{l}
                {k === 'yearly' && <span style={{ padding: '1px 7px', borderRadius: 9999, background: 'var(--accent-deep)', color: '#fff', font: '700 10px var(--ln-font-brand)' }}>−25%</span>}
              </button>
            ))}
          </div>
        </div>

        <div style={{ marginTop: isMobile ? 24 : 36, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 20 }}>
          {plans.map((p, i) => (
            <div key={p.k} style={{
              position: 'relative',
              padding: 28,
              borderRadius: 22,
              background: p.rec ? 'linear-gradient(180deg, #ffffff, #f4fbf6)' : 'rgba(255,255,255,0.8)',
              border: p.rec ? '1.5px solid rgba(26,107,74,0.35)' : '1px solid rgba(200,218,204,0.6)',
              boxShadow: p.rec ? '0 12px 40px rgba(26,107,74,0.15), inset 0 0 0 1px rgba(255,255,255,0.5)' : '0 4px 16px rgba(10,30,18,0.06), inset 0 0 0 1px rgba(255,255,255,0.5)',
              transform: p.rec ? 'translateY(-8px)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              {p.rec && (
                <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                  padding: '4px 13px', background: 'var(--accent-gradient-hero)', color: '#fff',
                  font: '700 11px var(--ln-font-brand)', letterSpacing: '0.04em', borderRadius: 9999,
                  boxShadow: '0 4px 12px rgba(26,107,74,0.3)' }}>
                  {lang === 'zh' ? '最受欢迎' : 'Most popular'}
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ font: '700 22px var(--ln-font-brand)', color: '#0f2a1d' }}>{p.name}</div>
                <span style={{ font: '600 11px var(--ln-font-brand)', padding: '3px 10px', borderRadius: 9999,
                  background: p.tagMuted ? 'rgba(145,155,150,0.12)' : 'rgba(26,107,74,0.1)',
                  color: p.tagMuted ? '#6c7a72' : 'var(--accent-deep)' }}>{p.tag}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ font: '700 36px var(--ln-font-brand)', color: '#0f2a1d', letterSpacing: '-0.02em' }}>{p.price[billing]}</span>
                <span style={{ font: '13px var(--ln-font-body)', color: 'var(--ln-fg4)' }}>{p.per}</span>
                {billing === 'yearly' && p.k !== 'free' && <span style={{ marginLeft: 4, font: '11px var(--ln-font-body)', color: 'var(--accent-deep)' }}>{lang === 'zh' ? '按年付款' : 'billed yearly'}</span>}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
                {(lang === 'zh' ? p.feats_zh : p.feats_en).map((f, j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, font: '13.5px var(--ln-font-body)', color: '#3a4640' }}>
                    <span style={{ flexShrink: 0, marginTop: 3, width: 16, height: 16, borderRadius: '50%', background: 'rgba(26,107,74,0.14)', display: 'grid', placeItems: 'center', color: 'var(--accent-deep)' }}>
                      <ICheck size={10} strokeWidth={3}/>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <button style={{
                padding: '12px 14px', borderRadius: 12, border: 'none',
                background: p.ctaStyle === 'prim' ? 'var(--accent-gradient)' : 'rgba(26,107,74,0.08)',
                color: p.ctaStyle === 'prim' ? '#fff' : 'var(--accent-deep)',
                font: '600 14px var(--ln-font-brand)',
                boxShadow: p.ctaStyle === 'prim' ? 'var(--accent-glow)' : 'none',
                border: p.ctaStyle === 'prim' ? 'none' : '1px solid rgba(26,107,74,0.25)',
                cursor: 'pointer',
              }}>{lang === 'zh' ? p.cta_zh : p.cta_en}</button>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 24, font: '12px var(--ln-font-body)', color: 'var(--ln-fg5)' }}>
          {lang === 'zh' ? '随时可以在 Customer Portal 取消, 税费可能另计.' : 'Cancel anytime from the Customer Portal. Taxes may apply.'}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });