// components/auth-gate.jsx — lazy login. A bottom-sheet that only appears when the user
// triggers an auth-required action (booking, profile…). Chatting with the AI never needs it.
// Renders inside the phone frame (absolute over everything). Props: reason, onClose, onLogin.

function AuthSheet({ reason = '繼續這個操作', onClose = () => {}, onLogin = () => {} }) {
  const sso = (provider, dark, glyph) => A('button', { className: 'ccaTap', onClick: onLogin, style: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '14px', borderRadius: 'var(--rpill)',
    border: dark ? 'none' : '1.5px solid var(--line)', background: dark ? 'var(--ink)' : 'var(--surface)',
    color: dark ? '#fff' : 'var(--ink)', fontFamily: 'inherit', fontSize: 15, fontWeight: 700 } },
    glyph, `透過 ${provider} 繼續`);

  return A('div', { style: { position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } },
    // scrim
    A('div', { onClick: onClose, style: { position: 'absolute', inset: 0, background: 'rgba(46,31,20,.5)', backdropFilter: 'blur(2px)' } }),
    // sheet
    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: -2, right: -2, width: 26, height: 26, borderRadius: 13, background: 'var(--surface)', border: '2px solid var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
            A('div', { style: { width: 26, height: 26, borderRadius: 13, background: 'var(--brandSoft)', color: 'var(--brandDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, A(Icon, { name: 'shield', size: 15, sw: 2 }))))),
      A('h2', { style: { fontSize: 19, fontWeight: 800, textAlign: 'center', margin: '0 0 6px', letterSpacing: -0.3 } }, '登入後就能繼續'),
      A('p', { style: { fontSize: 13, color: 'var(--ink3)', textAlign: 'center', lineHeight: 1.6, margin: '0 auto 18px', maxWidth: 250 } },
        `${reason}需要登入。和寵答聊天不用登入，隨時都能問 🐱`),
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
        sso('Apple', true, A('svg', { width: 17, height: 17, viewBox: '0 0 24 24', fill: '#fff' }, A('path', { d: 'M16.3 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.5-.1-2.8.8-3.5.8s-1.9-.8-3.1-.8c-1.6 0-3 .9-3.8 2.4-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2-.04 1.6-.7 3-.7s1.8.7 3 .7 2-1.1 2.8-2.2c.9-1.3 1.2-2.5 1.3-2.6-.03-.01-2.5-1-2.5-3.8zM14.1 5.4c.6-.8 1.1-1.9 1-3-.9.04-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.9 1 .07 2.1-.5 2.8-1.3z' }))),
        sso('Google', false, A('svg', { width: 17, height: 17, viewBox: '0 0 24 24' }, A('path', { fill: '#4285F4', d: 'M23 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.2a5.3 5.3 0 01-2.3 3.5v2.9h3.7c2.2-2 3.4-5 3.4-8.6z' }), A('path', { fill: '#34A853', d: 'M12 24c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3C3.7 21.4 7.6 24 12 24z' }), A('path', { fill: '#FBBC05', d: 'M5.6 14.7a7.2 7.2 0 010-4.6v-3H1.8a12 12 0 000 10.6l3.8-3z' }), A('path', { fill: '#EA4335', d: 'M12 4.8c1.7 0 3.2.6 4.4 1.7l3.3-3.3C17.7 1.2 15.1 0 12 0 7.6 0 3.7 2.6 1.8 6.4l3.8 3C6.5 6.8 9 4.8 12 4.8z' })))),
      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, { AuthSheet });