/* global React */
function Download({ onBuy }) {
  const t = window.theme;
  return (
    <section id="download" data-screen-label="08 Download" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0A0A14',
      padding: '120px 40px',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,127,255,0.3) 0%, rgba(74,159,255,0.2) 30%, rgba(255,159,229,0.15) 55%, transparent 75%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(155,127,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(155,127,255,0.05) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{
          position: 'relative', width: 180, height: 180, margin: '0 auto 20px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(circle, rgba(255,159,229,0.5) 0%, rgba(208,197,255,0.4) 35%, rgba(144,213,255,0.3) 55%, transparent 75%)',
            filter: 'blur(30px)',
            animation: 'zing-orb 7s ease-in-out infinite',
          }} />
          <img src="assets/keycap.png" alt="" style={{
            position: 'relative', height: 160,
            filter: 'drop-shadow(0 20px 50px rgba(155,127,255,0.5)) drop-shadow(0 0 80px rgba(255,159,229,0.35))',
            animation: 'zing-float 8s ease-in-out infinite',
          }} />
        </div>
        <h2 style={{
          fontFamily: t.fontDisplay, fontSize: 64, fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-0.035em', color: '#fff',
          margin: 0, marginBottom: 20, textWrap: 'balance',
        }}>
          準備好讓打字，<br />
          <span style={{
            background: t.gradSpectrum,
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            color: 'transparent', WebkitTextFillColor: 'transparent',
          }}>變得閃閃發光</span>了嗎？
        </h2>
        <p style={{
          fontFamily: t.fontBody, fontSize: 18, lineHeight: 1.65,
          color: '#B8B8C8', margin: '0 auto 40px', maxWidth: 560,
        }}>所有運算都在你的 Mac 本機完成，不上傳任何雲端。</p>

        <div style={{
          display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap',
          marginBottom: 32,
        }}>
          <button style={{
            fontFamily: t.fontDisplay, fontSize: 17, fontWeight: 600,
            background: '#fff', color: t.charcoal, border: 0,
            borderRadius: 999, padding: '18px 32px', cursor: 'pointer',
            boxShadow: '0 12px 40px rgba(255,255,255,0.15)',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.1-.5-2.1-.52-3.26 0-1.46.64-2.21.48-3.07-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.78 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.1zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
            </svg>
            下載 macOS 版
            <span style={{
              fontFamily: t.fontMono, fontSize: 11,
              background: t.offWhite, padding: '3px 8px', borderRadius: 6,
              color: t.darkGray, fontWeight: 500,
            }}>v1.0</span>
          </button>
        </div>

        <div style={{
          display: 'flex', gap: 28, justifyContent: 'center', flexWrap: 'wrap',
          fontFamily: t.fontBody, fontSize: 13, color: '#8080A0',
        }}>
          <span>✓ macOS 14.7+ · Apple Silicon 原生</span>
          <span>✓ Notarized by Apple</span>
          <span>✓ 100% 本機處理，不上傳雲端</span>
        </div>
      </div>
    </section>
  );
}
window.Download = Download;