/* global React */
function Pricing({ onBuy }) {
  const t = window.theme;
  const tiers = [
    {
      id: 'trial',
      name: '免費試用',
      sub: '14 天完整功能',
      price: 'NT$0',
      per: '首次下載',
      features: [
        '完整功能無限制',
        '中英混打、英文預測、精靈文',
        'macOS Universal Binary',
        '14 天後自動切回受限模式',
      ],
      cta: '立即免費試用',
      featured: false,
    },
    {
      id: 'buyout',
      name: '買斷版',
      sub: '一次付費，永久使用',
      price: 'NT$690',
      per: '一次付清 · 免訂閱',
      features: [
        '終身授權，永久更新',
        '完整中英混打、預測、精靈文',
        '最多 3 台 Mac 裝置',
        '免費大版本更新（v2、v3…）',
        'Email 優先客服支援',
      ],
      cta: '立即購買',
      featured: true,
      tag: '最多人選',
    },
    {
      id: 'edu',
      name: '學生 / 教育',
      sub: '憑學生 email 驗證',
      price: 'NT$390',
      per: '一次付清',
      features: [
        '買斷版全部功能',
        '學生身份驗證後可購買',
        '最多 2 台 Mac 裝置',
        '畢業後仍可繼續使用',
      ],
      cta: '申請教育價',
      featured: false,
    },
  ];

  return (
    <section id="pricing" data-screen-label="06 Pricing" style={{
      background: '#fff', padding: '120px 40px', position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: '0%', left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 400,
        background: 'radial-gradient(ellipse, rgba(208,197,255,0.2) 0%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 700,
            color: t.deepBlue, letterSpacing: '0.14em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>Pricing · 定價</div>
          <h2 style={{
            fontFamily: t.fontDisplay, fontSize: 56, fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-0.03em', color: t.charcoal,
            margin: 0, marginBottom: 14, textWrap: 'balance',
          }}>試用 14 天。<br />喜歡就買斷——<span style={{
            background: t.gradEnergetic,
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            color: 'transparent', WebkitTextFillColor: 'transparent',
          }}>不訂閱。</span></h2>
          <p style={{
            fontFamily: t.fontBody, fontSize: 17, color: t.darkGray,
            margin: 0, maxWidth: 560, marginInline: 'auto',
          }}>我們相信工具軟體就該一次付清、永久使用。沒有月費、沒有續約提醒。</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {tiers.map(tier => (
            <div key={tier.id} style={{
              background: tier.featured
                ? 'linear-gradient(180deg, #15151F 0%, #1E1E2C 100%)'
                : '#fff',
              color: tier.featured ? '#fff' : t.charcoal,
              borderRadius: 24, padding: 32,
              border: tier.featured ? 'none' : `1px solid ${t.lightGray}`,
              boxShadow: tier.featured
                ? '0 30px 80px rgba(45,45,61,0.3), 0 0 60px rgba(155,127,255,0.25)'
                : '0 4px 12px rgba(45,45,61,0.04)',
              transform: tier.featured ? 'translateY(-16px)' : 'none',
              position: 'relative', overflow: 'hidden',
            }}>
              {tier.featured && (
                <div aria-hidden style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 4,
                  background: t.gradEnergetic,
                }} />
              )}
              {tier.tag && (
                <div style={{
                  position: 'absolute', top: 18, right: 18,
                  fontFamily: t.fontDisplay, fontSize: 11, fontWeight: 700,
                  background: t.gradEnergetic, color: '#fff',
                  padding: '4px 11px', borderRadius: 999,
                  letterSpacing: '0.08em',
                }}>{tier.tag}</div>
              )}
              <div style={{
                fontFamily: t.fontDisplay, fontSize: 22, fontWeight: 700,
                margin: 0, marginBottom: 6,
              }}>{tier.name}</div>
              <div style={{
                fontFamily: t.fontBody, fontSize: 13,
                color: tier.featured ? '#9B9BAF' : t.darkGray,
                marginBottom: 24,
              }}>{tier.sub}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                <span style={{
                  fontFamily: t.fontDisplay, fontSize: 48, fontWeight: 700,
                  letterSpacing: '-0.03em', lineHeight: 1,
                }}>{tier.price}</span>
              </div>
              <div style={{
                fontFamily: t.fontBody, fontSize: 12,
                color: tier.featured ? '#9B9BAF' : t.mediumGray,
                marginBottom: 28,
              }}>{tier.per}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, marginBottom: 28 }}>
                {tier.features.map((f, i) => (
                  <li key={i} style={{
                    display: 'flex', gap: 10, padding: '7px 0',
                    fontSize: 14, fontFamily: t.fontBody, lineHeight: 1.5,
                  }}>
                    <span style={{
                      color: tier.featured ? t.skyBlue : t.deepBlue, flexShrink: 0,
                    }}>✓</span>
                    <span style={{ color: tier.featured ? '#D0D0E0' : t.darkGray }}>{f}</span>
                  </li>
                ))}
              </ul>
              <button onClick={() => onBuy && onBuy(tier.id)} style={{
                width: '100%', fontFamily: t.fontDisplay, fontSize: 15, fontWeight: 600,
                background: tier.featured ? t.gradEnergetic : 'transparent',
                color: tier.featured ? '#fff' : t.charcoal,
                border: tier.featured ? 'none' : `1.5px solid ${t.charcoal}`,
                borderRadius: 999, padding: '13px 20px', cursor: 'pointer',
                boxShadow: tier.featured ? '0 8px 24px rgba(155,127,255,0.4)' : 'none',
              }}>{tier.cta}</button>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, textAlign: 'center',
          fontFamily: t.fontBody, fontSize: 13, color: t.mediumGray,
        }}>
          30 天退款保證 · 支援 Apple Pay / 信用卡 / LINE Pay · 全部價格為含稅新台幣
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;