/* global React */
function Features() {
  const t = window.theme;
  return (
    <section id="features" data-screen-label="03 Features" style={{
      position: 'relative', overflow: 'hidden',
      background: t.offWhite,
      padding: '120px 40px',
    }}>
      {/* Soft gradient wash */}
      <div aria-hidden style={{
        position: 'absolute', top: '-10%', right: '-10%', width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(208,197,255,0.35) 0%, rgba(255,207,255,0.2) 40%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', bottom: '-10%', left: '-10%', width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(144,213,255,0.3) 0%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 700,
            color: t.deepBlue, letterSpacing: '0.14em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>Core Features · 核心特色</div>
          <h2 style={{
            fontFamily: t.fontDisplay, fontSize: 56, fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-0.03em', color: t.charcoal,
            margin: 0, textWrap: 'balance', maxWidth: 820, marginInline: 'auto',
          }}>
            為 Mac 注音用戶，<br />
            重新設計的<span style={{
              background: t.gradEnergetic,
              WebkitBackgroundClip: 'text', backgroundClip: 'text',
              color: 'transparent', WebkitTextFillColor: 'transparent',
            }}>每個細節</span>。
          </h2>
        </div>

        {/* Feature 1 — large: 中英混打 */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'center',
          background: '#fff', borderRadius: 28, padding: 48,
          boxShadow: '0 20px 60px rgba(45,45,61,0.08)',
          marginBottom: 20, position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 5,
            background: t.gradEnergetic,
          }} />
          <div>
            <div style={{
              display: 'inline-block',
              fontFamily: t.fontDisplay, fontSize: 11, fontWeight: 700,
              background: 'rgba(74,159,255,0.1)', color: t.deepBlue,
              padding: '5px 12px', borderRadius: 999,
              letterSpacing: '0.1em', marginBottom: 20,
            }}>01 · SMART</div>
            <h3 style={{
              fontFamily: t.fontDisplay, fontSize: 40, fontWeight: 700,
              lineHeight: 1.1, letterSpacing: '-0.02em', color: t.charcoal,
              margin: 0, marginBottom: 16,
            }}>中英混打，無須切換</h3>
            <p style={{
              fontFamily: t.fontBody, fontSize: 16, lineHeight: 1.7,
              color: t.darkGray, margin: 0, marginBottom: 12,
            }}>
              輸入法會自動辨認你正在打的是中文還是英文。打注音鍵出中字、打英文字母直接出英文。
            </p>
            <p style={{
              fontFamily: t.fontBody, fontSize: 16, lineHeight: 1.7,
              color: t.darkGray, margin: 0,
            }}>
              一整天再也不用伸手去按 <code style={{ fontFamily: t.fontMono, fontSize: '0.88em', background: t.offWhite, padding: '3px 8px', borderRadius: 6, color: t.charcoal }}>Caps Lock</code>。
            </p>
          </div>
          {/* Demo visual */}
          <MixTypingDemo />
        </div>

        {/* Feature grid — 2×2 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <FeatureCard
            num="02"
            tag="FAST"
            tagColor="#FF9FE5"
            title="英文邊打邊預測"
            body="內建 22 萬詞英文字典，即時聯想候選。Tab 補全、空白選字——打字速度跟母語者一樣。"
            visual={<EnglishPredictDemo />}
          />
          <FeatureCard
            num="03"
            tag="GUARD"
            tagColor="#5AC8A8"
            title="喵喵守門員"
            body="貓咪跳上鍵盤亂踩？偵測到異常高速連續輸入時，ZingIME 會自動鎖定鍵盤、跳出解鎖滑桿，保護你正在編輯的文件不被毀掉。"
            visual={<MeowGuardDemo />}
          />
          <FeatureCard
            num="04"
            tag="SMART"
            tagColor="#4A9FFF"
            title="聰明輸入"
            body="打「今天」直接出完整日期、打「公里」選出 ㎞、把 1234 轉成「壹仟貳佰參拾肆」或羅馬數字——常用的麻煩輸入，一步到位。"
            visual={<SmartInputDemo />}
          />
          <FeatureCard
            num="05"
            tag="PLAYFUL"
            tagColor="#FFB380"
            title="注音符號輸出（精靈文）"
            body="切換到注音符號輸出模式，打字就直接出注音符號（精靈文）。想打「ㄐㄧㄣ ㄊㄧㄢ ㄏㄠˇ ㄌㄟˋ」跟朋友玩梗，不用一個個複製貼上。"
            visual={<JinglingDemo />}
          />
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ num, tag, tagColor, title, body, visual }) {
  const t = window.theme;
  return (
    <div style={{
      background: '#fff', borderRadius: 24, padding: 36,
      boxShadow: '0 10px 30px rgba(45,45,61,0.06)',
      display: 'flex', flexDirection: 'column', gap: 28,
      minHeight: 440,
    }}>
      <div>
        <div style={{
          display: 'inline-block',
          fontFamily: t.fontDisplay, fontSize: 11, fontWeight: 700,
          background: `${tagColor}22`, color: tagColor,
          padding: '5px 12px', borderRadius: 999,
          letterSpacing: '0.1em', marginBottom: 18,
        }}>{num} · {tag}</div>
        <h3 style={{
          fontFamily: t.fontDisplay, fontSize: 28, fontWeight: 700,
          lineHeight: 1.15, letterSpacing: '-0.02em', color: t.charcoal,
          margin: 0, marginBottom: 12,
        }}>{title}</h3>
        <p style={{
          fontFamily: t.fontBody, fontSize: 15, lineHeight: 1.65,
          color: t.darkGray, margin: 0,
        }}>{body}</p>
      </div>
      <div style={{ marginTop: 'auto' }}>{visual}</div>
    </div>
  );
}

// Little live demos

function MixTypingDemo() {
  const t = window.theme;
  const [step, setStep] = React.useState(0);
  const steps = [
    { input: 'ㄨㄛˇ ㄔ', output: '我吃', caret: '', mode: 'zh' },
    { input: 'ㄨㄛˇ ㄔ ice', output: '我吃 ice', caret: '|', mode: 'switch' },
    { input: 'ㄨㄛˇ ㄔ ice cream', output: '我吃 ice cream', caret: '', mode: 'en' },
  ];
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % steps.length), 1600);
    return () => clearInterval(id);
  }, []);
  const cur = steps[step];
  return (
    <div style={{
      background: '#0E0E1A', borderRadius: 18, padding: '24px 28px',
      boxShadow: '0 20px 40px rgba(45,45,61,0.25), 0 0 60px rgba(155,127,255,0.18)',
      border: '1px solid rgba(255,255,255,0.06)',
      minHeight: 180,
    }}>
      <div style={{
        fontFamily: t.fontMono, fontSize: 11, color: '#5A5A6E',
        letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>ZingIME · Input</span>
        <span style={{
          padding: '3px 10px', borderRadius: 999,
          background: cur.mode === 'en' ? 'rgba(255,159,229,0.15)' : cur.mode === 'switch' ? 'rgba(155,127,255,0.15)' : 'rgba(74,159,255,0.15)',
          color: cur.mode === 'en' ? '#FF9FE5' : cur.mode === 'switch' ? '#D0C5FF' : '#90D5FF',
          fontSize: 10,
        }}>{cur.mode === 'en' ? 'EN' : cur.mode === 'switch' ? 'AUTO' : 'ZH'}</span>
      </div>
      <div style={{
        fontFamily: t.fontMono, fontSize: 15,
        color: t.lavender, marginBottom: 16, minHeight: 22,
      }}>
        {cur.input}
        <span style={{
          display: 'inline-block', width: 2, height: 17, marginLeft: 3, verticalAlign: -3,
          background: t.skyBlue, animation: 'zing-blink 1s infinite',
        }} />
      </div>
      <div style={{
        fontFamily: t.fontBody, fontSize: 22, color: '#fff',
        lineHeight: 1.3, fontWeight: 500,
        background: 'rgba(255,255,255,0.03)', borderRadius: 10,
        padding: '14px 18px', minHeight: 54,
      }}>
        {cur.output}
      </div>
      <style>{`@keyframes zing-blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
}

function EnglishPredictDemo() {
  const t = window.theme;
  // Phases:
  // 0: typing 'b'   1: 'be'   2: 'bea'   3: 'beau' (suggestions show)
  // 4: tab pressed (highlight Tab pill)   5: completed 'beautiful'
  // 6: hold completed   then loop
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const timings = [380, 380, 380, 600, 380, 900, 700];
    const id = setTimeout(() => setPhase(p => (p + 1) % 7), timings[phase]);
    return () => clearTimeout(id);
  }, [phase]);

  const partials = ['b', 'be', 'bea', 'beau', 'beau', 'beautiful', 'beautiful'];
  const typed = partials[phase];
  const showSuggestions = phase >= 3 && phase <= 4;
  const tabPressed = phase === 4;
  const completed = phase >= 5;
  const suggestions = ['beautiful', 'beauty', 'beauteous', 'beautify'];

  return (
    <div style={{
      background: '#0E0E1A', borderRadius: 14, padding: '16px 18px',
      border: '1px solid rgba(255,255,255,0.06)',
      minHeight: 120,
    }}>
      <div style={{
        fontFamily: t.fontMono, fontSize: 16, color: '#fff', marginBottom: 12,
        display: 'flex', alignItems: 'center', flexWrap: 'wrap',
      }}>
        {completed ? (
          <span style={{
            background: 'linear-gradient(90deg,#4A9FFF,#FF9FE5)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            color: 'transparent', WebkitTextFillColor: 'transparent',
            fontWeight: 600,
          }}>beautiful</span>
        ) : (
          <>
            <span>{typed}</span>
            {/* ghost completion */}
            {showSuggestions && (
              <span style={{ color: 'rgba(255,255,255,0.28)' }}>
                {'beautiful'.slice(typed.length)}
              </span>
            )}
          </>
        )}
        <span style={{
          display: 'inline-block', width: 2, height: 16, marginLeft: 2, verticalAlign: -2,
          background: '#FF9FE5', animation: 'zing-blink 1s infinite',
        }} />
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center', minHeight: 30 }}>
        {showSuggestions ? (
          <>
            <span style={{
              fontFamily: t.fontMono, fontSize: 10,
              padding: '4px 8px', borderRadius: 6,
              background: tabPressed ? '#FF9FE5' : 'rgba(255,255,255,0.12)',
              color: tabPressed ? '#0E0E1A' : 'rgba(255,255,255,0.7)',
              fontWeight: 600,
              transition: 'all 0.15s',
              boxShadow: tabPressed ? '0 0 16px rgba(255,159,229,0.6)' : 'none',
              transform: tabPressed ? 'scale(0.94)' : 'scale(1)',
            }}>Tab ⇥</span>
            {suggestions.map((s, i) => (
              <div key={i} style={{
                fontFamily: t.fontMono, fontSize: 12,
                padding: '6px 10px', borderRadius: 8,
                background: i === 0
                  ? 'linear-gradient(90deg,#4A9FFF,#9B7FFF)'
                  : 'rgba(255,255,255,0.06)',
                color: '#fff',
              }}>{s}</div>
            ))}
          </>
        ) : completed ? (
          <span style={{
            fontFamily: t.fontMono, fontSize: 11,
            color: 'rgba(255,255,255,0.5)', letterSpacing: '0.06em',
          }}>✓ COMPLETED</span>
        ) : (
          <span style={{
            fontFamily: t.fontMono, fontSize: 11,
            color: 'rgba(255,255,255,0.3)',
          }}>—</span>
        )}
      </div>
    </div>
  );
}

function JinglingDemo() {
  const t = window.theme;
  const [flipped, setFlipped] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => setFlipped(f => !f), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ display: 'grid', gap: 8 }}>
      <div style={{
        background: '#0E0E1A', borderRadius: 12, padding: '14px 16px',
        fontFamily: t.fontBody, fontSize: 17, color: '#fff',
        border: '1px solid rgba(255,255,255,0.06)',
      }}>今天好累</div>
      <div style={{
        textAlign: 'center', fontFamily: t.fontMono, fontSize: 10,
        color: t.mediumGray, letterSpacing: '0.1em',
      }}>注音符號輸出模式</div>
      <div style={{
        background: 'linear-gradient(135deg, rgba(74,159,255,0.1), rgba(255,159,229,0.1))',
        borderRadius: 12, padding: '14px 16px',
        fontFamily: t.fontBody, fontSize: 17,
        border: '1px solid rgba(155,127,255,0.3)',
        transition: 'all 0.4s',
        opacity: flipped ? 1 : 0.6,
        transform: flipped ? 'scale(1)' : 'scale(0.98)',
        background: flipped
          ? 'linear-gradient(135deg, rgba(74,159,255,0.18), rgba(255,159,229,0.18))'
          : 'rgba(14,14,26,0.04)',
        color: t.charcoal,
      }}>
        <span style={{
          background: t.gradEnergetic,
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          color: 'transparent', WebkitTextFillColor: 'transparent',
          fontWeight: 600,
        }}>ㄐㄧㄣ ㄊㄧㄢ ㄏㄠˇ ㄌㄟˋ</span>
      </div>
    </div>
  );
}

function MeowGuardDemo() {
  const t = window.theme;
  const [locked, setLocked] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => setLocked(l => !l), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      background: '#0E0E1A', borderRadius: 14, padding: '18px 18px',
      border: '1px solid rgba(255,255,255,0.06)',
      minHeight: 120, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        fontFamily: t.fontMono, fontSize: 11, color: '#5A5A6E',
        letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>ZingIME · Guard</span>
        <span style={{
          padding: '3px 10px', borderRadius: 999, fontSize: 10,
          background: locked ? 'rgba(90,200,168,0.16)' : 'rgba(255,255,255,0.08)',
          color: locked ? '#5AC8A8' : '#8080A0',
          transition: 'all 0.3s',
        }}>{locked ? '🔒 LOCKED' : '○ 監測中'}</span>
      </div>
      <div style={{
        fontFamily: t.fontBody, fontSize: 15, color: '#fff',
        marginBottom: 14, minHeight: 22,
      }}>
        {locked ? '偵測到貓咪 · 已暫停輸入' : '正常打字中…'}
      </div>
      {/* Slide-to-unlock track */}
      <div style={{
        height: 36, borderRadius: 999, position: 'relative',
        background: 'rgba(255,255,255,0.05)',
        border: '1px solid rgba(255,255,255,0.08)',
        overflow: 'hidden',
        opacity: locked ? 1 : 0.35, transition: 'opacity 0.3s',
      }}>
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'center',
          justifyContent: 'center', fontFamily: t.fontBody, fontSize: 12,
          color: '#8080A0',
        }}>▸ 滑動以解鎖</div>
        <div style={{
          position: 'absolute', top: 3, left: 3, width: 30, height: 28,
          borderRadius: 999, background: t.gradEnergetic,
          animation: locked ? 'meow-slide 2s ease-in-out infinite' : 'none',
        }} />
      </div>
      <style>{`@keyframes meow-slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(14px); } }`}</style>
    </div>
  );
}

function SmartInputDemo() {
  const t = window.theme;
  const rows = [
    { in: '今天', out: '2024 年 1 月 4 日' },
    { in: '公里', out: '㎞' },
    { in: '1234', out: '壹仟貳佰參拾肆' },
  ];
  return (
    <div style={{
      background: '#0E0E1A', borderRadius: 14, padding: '16px 18px',
      border: '1px solid rgba(255,255,255,0.06)',
      minHeight: 120, display: 'grid', gap: 10, alignContent: 'center',
    }}>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: t.fontBody, fontSize: 14,
        }}>
          <span style={{
            fontFamily: t.fontMono, color: t.lavender,
            background: 'rgba(255,255,255,0.05)',
            padding: '4px 10px', borderRadius: 8, minWidth: 56, textAlign: 'center',
          }}>{r.in}</span>
          <span style={{ color: '#5A5A6E', fontSize: 13 }}>→</span>
          <span style={{
            color: '#fff', fontWeight: 500,
            background: 'linear-gradient(90deg, rgba(74,159,255,0.12), rgba(255,159,229,0.12))',
            padding: '4px 12px', borderRadius: 8,
          }}>{r.out}</span>
        </div>
      ))}
    </div>
  );
}

window.Features = Features;