/* global React */
function Hero({ onDownload, onTry, intensity = 1 }) {
  const t = window.theme;
  const glowScale = intensity;
  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      position: 'relative', overflow: 'hidden',
      background: 'radial-gradient(ellipse 120% 80% at 50% 30%, #1A1A2E 0%, #0E0E1A 60%, #08080F 100%)',
      padding: '56px 40px 120px',
      minHeight: 780, fontWeight: "400"
    }}>
      {/* Grid texture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(155,127,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(155,127,255,0.04) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%)',
        pointerEvents: 'none'
      }} />

      {/* Iridescent glow blobs */}
      <div aria-hidden style={{
        position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 900,
        background: `radial-gradient(circle, rgba(155,127,255,${0.32 * glowScale}) 0%, rgba(144,213,255,${0.22 * glowScale}) 30%, transparent 65%)`,
        filter: `blur(${60 * glowScale}px)`, pointerEvents: 'none'
      }} />
      <div aria-hidden style={{
        position: 'absolute', bottom: '-20%', right: '-10%',
        width: 700, height: 700,
        background: `radial-gradient(circle, rgba(255,159,229,${0.22 * glowScale}) 0%, rgba(255,179,128,${0.14 * glowScale}) 40%, transparent 70%)`,
        filter: `blur(${70 * glowScale}px)`, pointerEvents: 'none'
      }} />
      <div aria-hidden style={{
        position: 'absolute', top: '30%', left: '-10%',
        width: 500, height: 500,
        background: `radial-gradient(circle, rgba(74,159,255,${0.24 * glowScale}) 0%, transparent 70%)`,
        filter: `blur(${80 * glowScale}px)`, pointerEvents: 'none'
      }} />

      <div style={{
        maxWidth: 1200, margin: '0 auto', position: 'relative',
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 40, alignItems: 'center',
        minHeight: 620
      }}>
        {/* Left: copy */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 600,
            color: '#D0C5FF',
            background: 'rgba(155,127,255,0.12)',
            border: '1px solid rgba(155,127,255,0.28)',
            padding: '7px 14px', borderRadius: 999, marginBottom: 28,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            backdropFilter: 'blur(20px)'
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#FF9FE5', boxShadow: '0 0 8px #FF9FE5' }} />
            v1.0 · 專為 macOS 注音用戶打造
          </div>

          <h1 style={{
            fontFamily: t.fontDisplay, fontSize: 84, fontWeight: 700,
            lineHeight: 0.98, letterSpacing: '-0.035em', color: '#fff',
            margin: 0, marginBottom: 28,
            textWrap: 'balance'
          }}>
            中英混打，<br />
            <span style={{
              background: 'linear-gradient(90deg,#90D5FF 0%,#D0C5FF 25%,#FFCFFF 50%,#FFD8B0 75%,#FFFDD0 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text',
              color: 'transparent', WebkitTextFillColor: 'transparent',
              filter: 'drop-shadow(0 0 40px rgba(208,197,255,0.4))'
            }}>無須切換。</span>
          </h1>

          <p style={{
            fontFamily: t.fontBody, fontSize: 19, lineHeight: 1.65,
            color: '#B8B8C8', maxWidth: 520, margin: 0, marginBottom: 40
          }}>
            晶晶輸入法是一款為 macOS 注音用戶打造的新世代輸入法。
            <br />
            告別 <span style={{
              display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start',
              fontFamily: t.fontBody, fontWeight: 600,
              color: '#fff',

              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 8,

              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25)',
              verticalAlign: '-2px',
              lineHeight: 1,
              minWidth: 52, padding: "10px 60px 15px 10px", fontSize: "14px", background: "linear-gradient(rgb(42, 42, 56) 0%, rgb(26, 26, 36) 100%) center center", textAlign: "left"
            }}>
              <span style={{
                width: 5, height: 5, borderRadius: 999,

                boxShadow: '0 0 6px rgba(255,159,229,0.8)',
                marginBottom: 8, background: "rgb(19, 230, 54)"
              }} />
              <span style={{ fontSize: '1.4em', letterSpacing: '0.02em' }}>中/英</span>
            </span> 的反覆切換，用一種自然的節奏打中文、打英文、打精靈文。
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <button onClick={onDownload} style={{
              fontFamily: t.fontDisplay, fontSize: 16, fontWeight: 600,
              background: t.gradEnergetic, color: '#fff', border: 0,
              borderRadius: 999, padding: '16px 28px', cursor: 'pointer',
              boxShadow: '0 10px 40px rgba(155,127,255,0.5), 0 4px 12px rgba(74,159,255,0.3)',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              transition: 'transform 0.15s, box-shadow 0.15s'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 14px 50px rgba(155,127,255,0.6), 0 6px 16px rgba(74,159,255,0.35)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 10px 40px rgba(155,127,255,0.5), 0 4px 12px rgba(74,159,255,0.3)';}}>
              
              <AppleIcon size={18} />
              下載 macOS 版
            </button>
            <button onClick={onTry} style={{
              fontFamily: t.fontDisplay, fontSize: 16, fontWeight: 600,
              background: 'rgba(255,255,255,0.06)',
              color: '#fff',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 999, padding: '15px 24px', cursor: 'pointer',
              backdropFilter: 'blur(20px)',
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              ↓ 試試看功能
            </button>
          </div>

          <div style={{
            marginTop: 44, display: 'flex', gap: 28, fontSize: 13,
            color: '#8080A0', fontFamily: t.fontBody, flexWrap: 'wrap'
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ color: '#90D5FF' }}>✓</span> macOS 14.7 以上
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ color: '#FF9FE5' }}>✓</span> Apple Silicon 原生
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ color: '#FFD8B0' }}>✓</span> 100% 本機運算，不上傳雲端
            </span>
          </div>
        </div>

        {/* Right: floating keycap */}
        <div style={{ position: 'relative', height: 560, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Prism rays */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: 'conic-gradient(from 180deg at 50% 55%, transparent 0deg, rgba(144,213,255,0.15) 30deg, rgba(208,197,255,0.18) 90deg, rgba(255,207,255,0.15) 150deg, transparent 180deg, rgba(255,179,128,0.12) 240deg, rgba(255,253,208,0.1) 300deg, transparent 360deg)',
            borderRadius: '50%',
            filter: 'blur(40px)',
            animation: 'zing-spin 24s linear infinite',
            opacity: 0.6 * intensity
          }} />
          {/* Dynamic glow orb behind keycap (replaces baked-in halo) */}
          <div aria-hidden style={{
            position: 'absolute', top: '50%', left: '50%',
            width: '78%', height: '78%',
            transform: 'translate(-50%, -50%)',
            background: `radial-gradient(circle at 45% 45%,
              rgba(255,159,229,${0.5 * intensity}) 0%,
              rgba(208,197,255,${0.42 * intensity}) 22%,
              rgba(144,213,255,${0.32 * intensity}) 42%,
              rgba(255,179,128,${0.22 * intensity}) 60%,
              transparent 75%)`,
            filter: `blur(${36 * intensity}px)`,
            animation: 'zing-orb 7s ease-in-out infinite',
            pointerEvents: 'none'
          }} />
          {/* Keycap */}
          <img src="assets/keycap.png" alt="ZingIME 水晶鍵帽" style={{
            position: 'relative', width: '72%', maxWidth: 420,
            filter: `drop-shadow(0 20px 50px rgba(155,127,255,${0.5 * intensity})) drop-shadow(0 0 80px rgba(255,159,229,${0.35 * intensity}))`,
            animation: 'zing-float 8s ease-in-out infinite'
          }} />
          {/* Reflection */}
          <div aria-hidden style={{
            position: 'absolute', bottom: '14%', left: '50%', transform: 'translateX(-50%)',
            width: '55%', height: 40,
            background: 'radial-gradient(ellipse, rgba(255,159,229,0.35) 0%, rgba(155,127,255,0.22) 40%, transparent 70%)',
            filter: 'blur(20px)',
            animation: 'zing-pulse 6s ease-in-out infinite'
          }} />
        </div>
      </div>

      {/* Stats strip */}
      <div style={{
        maxWidth: 1200, margin: '80px auto 0', position: 'relative',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        padding: '28px 0',
        borderTop: '1px solid rgba(255,255,255,0.08)',
        borderBottom: '1px solid rgba(255,255,255,0.08)'
      }}>
        {[
        { num: '本機', label: '完全本地運算 · 不上傳雲端' },
        { num: '0', label: '需要按 Caps Lock 的次數' },
        { num: '40萬+', label: '精選詞庫與英文字典' },
        { num: '100%', label: 'Apple Silicon 原生' }].
        map((s, i) =>
        <div key={i} style={{
          padding: '0 24px',
          borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.08)' : 'none'
        }}>
            <div style={{
            fontFamily: t.fontDisplay, fontSize: 36, fontWeight: 700,
            letterSpacing: '-0.03em', color: '#fff', lineHeight: 1,
            marginBottom: 6
          }}>{s.num}</div>
            <div style={{
            fontFamily: t.fontBody, fontSize: 13, color: '#8080A0'
          }}>{s.label}</div>
          </div>
        )}
      </div>

      <style>{`
        @keyframes zing-float {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-14px) rotate(-1deg); }
        }
        @keyframes zing-spin { to { transform: rotate(360deg); } }
        @keyframes zing-pulse {
          0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
          50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
        }
        @keyframes zing-orb {
          0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
          33%      { transform: translate(-48%, -52%) scale(1.08) rotate(4deg); }
          66%      { transform: translate(-52%, -48%) scale(0.95) rotate(-4deg); }
        }
      `}</style>
    </section>);

}

function AppleIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} 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>);

}

window.Hero = Hero;