// pages/customer-service.jsx — 聯絡客服: a plain-text contact form (title + content only). Entry from 我的 (profile).
const { useState: uSCS } = React;

function CustomerService({ onBack = () => {}, go = () => {} }) {
  const [title, setTitle] = uSCS('');
  const [body, setBody] = uSCS('');
  const [sent, setSent] = uSCS(false);
  const canSend = title.trim() && body.trim();

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)', position: 'relative' } },
    A(AppBar, { title: '聯絡客服', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', lineHeight: 1.6, margin: '0 2px 16px' } }, '遇到問題或有任何建議？留下標題與內容，客服團隊會盡快回覆你 🐱'),
      // 標題
      A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '標題', A('span', { style: { color: 'var(--err)' } }, ' *')),
      A('input', { value: title, onChange: e => setTitle(e.target.value), placeholder: '簡短描述你的問題',
        style: { width: '100%', boxSizing: 'border-box', border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--rmd)', padding: '13px 14px', fontSize: 14.5, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none', marginBottom: 16 } }),
      // 內容
      A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '內容', A('span', { style: { color: 'var(--err)' } }, ' *')),
      A('textarea', { value: body, onChange: e => setBody(e.target.value), placeholder: '請詳細說明發生的情況，方便我們協助你…', rows: 8,
        style: { width: '100%', boxSizing: 'border-box', border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--rmd)', padding: '13px 14px', fontSize: 14.5, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none', resize: 'none', lineHeight: 1.6 } })),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, disabled: !canSend, onClick: () => { setSent(true); setTimeout(() => { setSent(false); onBack(); }, 1600); }, style: { padding: '15px' } }, '送出')),
    A(HomeBar, {}),
    sent && A('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(46,31,20,.5)', zIndex: 20, backdropFilter: 'blur(2px)' } },
      A('div', { className: 'ccaPop', style: { background: 'var(--surface)', borderRadius: 22, padding: '24px 30px', textAlign: 'center', boxShadow: '0 12px 40px rgba(0,0,0,.2)' } },
        A('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--brandSoft)', color: 'var(--brandDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' } }, A(Icon, { name: 'check', size: 28, sw: 2.4 })),
        A('div', { style: { fontSize: 16, fontWeight: 800 } }, '已送出！'),
        A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 4 } }, '客服會盡快與你聯繫 🐾'))));
}

Object.assign(window, { CustomerService });