/* global React */
function QA() {
  const t = window.theme;
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: '我是 macOS 注音老用戶，需要重學嗎？',
      a: '完全不用。ZingIME 支援標準注音鍵盤配置（ㄅㄆㄇㄈ...），你原本怎麼打、現在就怎麼打。只是打英文時不用再按 Caps Lock 切換。'
    },
    {
      q: '中英混打是怎麼判斷的？會不會打錯字？',
      a: '預設先顯示英文預測；當你按下聲調鍵（ˇ ˋ ˊ ˙ 或空白）就切換成中文。換句話說，切換權一直在你手上——想要英文就按 Tab 接受預測、想要中文就按聲調鍵，不是靠系統猜。'
    },
    {
      q: '支援哪些 macOS 版本？Intel Mac 可以嗎？',
      a: '需要 macOS 14.7 以上。支援 Apple Silicon（M 系列）原生、以及 Intel Mac。安裝檔是 Universal Binary。'
    },
    {
      q: '會不會收集我打的字？隱私安全嗎？',
      a: '你打的所有字全部在本機處理，不會上傳任何雲端。詞頻學習資料儲存在你的 Mac 上（可隨時清除）。我們通過 Apple Notarization，程式碼經過官方安全審核。'
    },
    {
      q: '可以跟其他注音輸入法（新酷音、小麥等）同時安裝嗎？',
      a: '可以。ZingIME 在 macOS 系統偏好設定中是獨立的輸入法，可與其他輸入法共存，使用 ⌃ Space 或選單列切換。'
    },
    {
      q: '買斷版可以裝在幾台 Mac？',
      a: '一組序號對應一台 Mac。如果你有多台 Mac 想使用，需要分別購買序號。'
    },
    {
      q: '如果不滿意可以退款嗎？',
      a: '14 天內無條件退款。來信 hello@zingime.com 告訴我們就好，不需要理由。'
    },
    {
      q: '有 Windows、iOS、Android 版本嗎？',
      a: 'ZingIME 是專為 macOS 設計的輸入法，深度整合 macOS 的輸入法框架，目前沒有其他平台的計畫——我們想把 Mac 上的體驗做到最好。'
    },
  ];
  return (
    <section id="qa" data-screen-label="07 Q&A" style={{
      background: t.offWhite, padding: '120px 40px', position: 'relative',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 700,
            color: t.rosePink, letterSpacing: '0.14em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>Q&A · 常見問題</div>
          <h2 style={{
            fontFamily: t.fontDisplay, fontSize: 48, fontWeight: 700,
            lineHeight: 1.1, letterSpacing: '-0.03em', color: t.charcoal,
            margin: 0, textWrap: 'balance',
          }}>想的到的問題，我們都有答案。</h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) => {
            const active = open === i;
            return (
              <div key={i} onClick={() => setOpen(active ? -1 : i)} style={{
                background: '#fff', borderRadius: 16,
                border: active ? '1px solid rgba(155,127,255,0.3)' : '1px solid transparent',
                boxShadow: active ? '0 8px 28px rgba(155,127,255,0.15)' : '0 2px 6px rgba(45,45,61,0.05)',
                padding: '20px 24px', cursor: 'pointer',
                transition: 'all 0.25s',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 20,
                }}>
                  <div style={{
                    fontFamily: t.fontDisplay, fontSize: 17, fontWeight: 600,
                    color: t.charcoal, lineHeight: 1.4,
                  }}>{it.q}</div>
                  <div style={{
                    width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                    background: active ? t.gradEnergetic : t.offWhite,
                    color: active ? '#fff' : t.darkGray,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 500,
                    transition: 'all 0.25s',
                    transform: active ? 'rotate(45deg)' : 'rotate(0)',
                  }}>+</div>
                </div>
                <div style={{
                  maxHeight: active ? 200 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.3s, margin 0.25s',
                  marginTop: active ? 12 : 0,
                }}>
                  <div style={{
                    fontFamily: t.fontBody, fontSize: 15, lineHeight: 1.7,
                    color: t.darkGray, maxWidth: 680,
                  }}>{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 48, textAlign: 'center',
          fontFamily: t.fontBody, fontSize: 14, color: t.darkGray,
        }}>
          還有問題？寫信給我們：<a href="mailto:hello@zingime.com" style={{
            color: t.deepBlue, textDecoration: 'none', fontWeight: 600,
          }}>hello@zingime.com</a>
        </div>
      </div>
    </section>
  );
}
window.QA = QA;