/* global React */
// PainPoints section — the problem we solve, dark theme
function PainPoints() {
  const t = window.theme;
  const pains = [
    {
      old: 'Caps Lock 切來切去',
      oldSub: '中打英→按 Caps→打英文→按 Caps→回中文。一天按 500 次。',
      newLabel: 'ZingIME',
      newText: '直接打「我愛 mac」不用切換！',
      newSub: '自動辨認英文字，不需切換，還幫你自動加上空白！'
    },
    {
      old: '英文拼字靠運氣',
      oldSub: 'macOS 內建注音打英文時完全沒有拼字建議。',
      newLabel: 'ZingIME',
      newText: '邊打邊預測英文單字',
      newSub: '22 萬詞英文字典，Tab 補全。'
    },
    {
      old: '精靈文需複製貼上',
      oldSub: '想打「ㄅㄨˋ ㄒㄧㄤˇ ㄕㄤˋ ㄅㄢ」得一個個複製注音符號。',
      newLabel: 'ZingIME',
      newText: '切換注音符號輸出模式',
      newSub: '打字直接輸出注音符號（精靈文），不用一個個複製。'
    },
  ];
  return (
    <section id="pains" data-screen-label="02 Pain Points" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0A0A14',
      padding: '120px 40px',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: '20%', left: '60%', width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(74,159,255,0.12) 0%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{
          fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 700,
          color: '#FF9FE5', letterSpacing: '0.14em', textTransform: 'uppercase',
          marginBottom: 20,
        }}>The Problem</div>
        <h2 style={{
          fontFamily: t.fontDisplay, fontSize: 56, fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-0.03em', color: '#fff',
          margin: 0, marginBottom: 64, maxWidth: 820,
          textWrap: 'balance',
        }}>
          注音在 Mac 上，<br />
          <span style={{ color: '#5A5A6E' }}>從來沒有真正好用過。</span>
        </h2>

        <div style={{ display: 'grid', gap: 20 }}>
          {pains.map((p, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 60px 1fr', alignItems: 'stretch',
              background: 'rgba(255,255,255,0.02)',
              border: '1px solid rgba(255,255,255,0.06)',
              borderRadius: 20, overflow: 'hidden',
            }}>
              {/* Old */}
              <div style={{ padding: '28px 32px' }}>
                <div style={{
                  fontFamily: t.fontMono, fontSize: 11, color: '#5A5A6E',
                  letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10,
                }}>以前 · Before</div>
                <div style={{
                  fontFamily: t.fontDisplay, fontSize: 22, fontWeight: 600,
                  color: '#9B9BAF', marginBottom: 8, textDecoration: 'line-through', textDecorationColor: 'rgba(255,107,142,0.5)',
                }}>{p.old}</div>
                <div style={{ fontFamily: t.fontBody, fontSize: 14, color: '#8080A0', lineHeight: 1.6 }}>{p.oldSub}</div>
              </div>
              {/* Arrow */}
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative',
              }}>
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" style={{
                  filter: 'drop-shadow(0 0 12px rgba(255,159,229,0.4))',
                }}>
                  <defs>
                    <linearGradient id="arrowGrad" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
                      <stop offset="0" stopColor="#4A9FFF" />
                      <stop offset="0.5" stopColor="#FF9FE5" />
                      <stop offset="1" stopColor="#FFB84A" />
                    </linearGradient>
                  </defs>
                  <path d="M4 14 L22 14 M15 7 L22 14 L15 21" stroke="url(#arrowGrad)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
              </div>
              {/* New */}
              <div style={{
                padding: '28px 32px',
                background: 'linear-gradient(135deg, rgba(74,159,255,0.08) 0%, rgba(255,159,229,0.06) 100%)',
                borderLeft: '1px solid rgba(255,255,255,0.06)',
                position: 'relative',
              }}>
                <div style={{
                  fontFamily: t.fontMono, fontSize: 11,
                  letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10,
                  background: t.gradEnergetic,
                  WebkitBackgroundClip: 'text', backgroundClip: 'text',
                  color: 'transparent', WebkitTextFillColor: 'transparent',
                  fontWeight: 700,
                }}>{p.newLabel} · After</div>
                <div style={{
                  fontFamily: t.fontDisplay, fontSize: 22, fontWeight: 600,
                  color: '#fff', marginBottom: 8,
                }}>{p.newText}</div>
                <div style={{ fontFamily: t.fontBody, fontSize: 14, color: '#B8B8C8', lineHeight: 1.6 }}>{p.newSub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.PainPoints = PainPoints;