// components/paywall.jsx — subscription paywall. Shown after login when the user tries to use the
// AI service without an active subscription. Renders inside the phone frame. Props: onSubscribe, onClose.

function SubscribeSheet({ onSubscribe = () => {}, onClose = () => {} }) {
  const benefits = [
    ['message', '無限次 AI 對話', '想問什麼、想約什麼，隨時跟寵答說'],
    ['drop', '主動健康提醒', '體重、血檢、用藥，AI 幫你盯著'],
    ['paw', '優先媒合保姆', '尖峰時段也優先排到有空的人'],
  ];
  return A('div', { style: { position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } },
    A('div', { onClick: onClose, style: { position: 'absolute', inset: 0, background: 'rgba(46,31,20,.5)', backdropFilter: 'blur(2px)' } }),
    A('div', { className: 'ccaPop', style: { position: 'relative', background: 'var(--surface)', borderRadius: '26px 26px 0 0', padding: '10px 22px 24px', boxShadow: '0 -12px 44px rgba(0,0,0,.22)' } },
      A('div', { style: { width: 38, height: 4, borderRadius: 2, background: 'var(--line)', margin: '0 auto 16px' } }),
      A('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: 12 } },
        A('div', { style: { position: 'relative' } },
          A(Avatar, { size: 60, kind: 'ai' }),
          A('div', { style: { position: 'absolute', bottom: -3, right: -6, background: 'var(--butter)', color: '#7A5310', fontSize: 9.5, fontWeight: 900, padding: '3px 7px', borderRadius: 8, border: '2px solid var(--surface)', letterSpacing: 0.3 } }, 'PRO'))),
      A('h2', { style: { fontSize: 19, fontWeight: 800, textAlign: 'center', margin: '0 0 6px', letterSpacing: -0.3 } }, '解鎖寵答 AI 助理'),
      A('p', { style: { fontSize: 13, color: 'var(--ink3)', textAlign: 'center', lineHeight: 1.6, margin: '0 auto 18px', maxWidth: 260 } }, '訂閱寵答 Premium，就能無限使用 AI 對話、找人、記錄 🐱'),
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 13, marginBottom: 18 } },
        benefits.map(([ic, t, sub]) => A('div', { key: t, style: { display: 'flex', gap: 11, alignItems: 'center' } },
          A('div', { style: { width: 34, height: 34, borderRadius: 10, background: 'var(--butterSoft)', color: '#9A6B12', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: ic, size: 18, sw: 1.9 })),
          A('div', { style: { flex: 1 } },
            A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, t),
            A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 1 } }, sub))))),
      A('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '12px', borderRadius: 16, background: 'var(--butterSoft)', marginBottom: 14 } },
        A('span', { className: 'num', style: { fontSize: 26, fontWeight: 900, color: '#7A5310', letterSpacing: -0.5 } }, 'NT$99'),
        A('span', { style: { fontSize: 13, color: '#9A6B12', fontWeight: 700 } }, '/ 月'),
        A('span', { style: { fontSize: 11.5, color: '#9A6B12', marginLeft: 6 } }, '前 7 天免費')),
      A(Btn, { full: true, onClick: onSubscribe, style: { padding: '15px' } }, '開始 7 天免費試用'),
      A('button', { className: 'ccaTap', onClick: onClose, style: { width: '100%', border: 'none', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, padding: '14px 4px 4px' } }, '稍後再說'),
      A('p', { style: { fontSize: 11, color: 'var(--ink3)', textAlign: 'center', margin: '8px 0 0' } }, '試用結束前會提醒你，可隨時在設定取消')));
}

Object.assign(window, { SubscribeSheet });