// pages/pro-me.jsx — 我的（貓人力）: mirrors me.jsx — role switcher + profile card + menu list.
const { useState: uSPP } = React;

function ProProfile({ onNav = () => {}, go = () => {} }) {
  const [role, setRole] = uSPP('pro');
  // selecting 飼主 navigates back to the owner profile
  const switchRole = (r) => { if (r === 'owner') go('me'); };
  const rows = [['user', '個人資料', 'proProfile', ''], ['scissors', '專長與價目設定', 'proSkills', ''], ['wallet', '收入（後期開放）', '', '即將推出'], ['bell', '通知設定', '', '']];
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative' } },
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      // role switcher (same as profile.jsx)
      A('div', { style: { background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rpill)', padding: 4, display: 'flex', position: 'relative', marginTop: 4 } },
        A('div', { style: { position: 'absolute', top: 4, bottom: 4, left: role === 'owner' ? 4 : '50%', width: 'calc(50% - 4px)', borderRadius: 'var(--rpill)', background: role === 'owner' ? 'var(--brand)' : 'var(--sage)', transition: 'left .28s cubic-bezier(.3,.8,.3,1),background .28s' } }),
        [['owner', '飼主', 'paw'], ['pro', '貓人力', 'shield']].map(([k, l, ic]) =>
          A('button', { key: k, className: 'ccaTap', onClick: () => switchRole(k), style: { flex: 1, zIndex: 1, border: 'none', background: 'transparent', padding: '10px', fontFamily: 'inherit', fontSize: 14, fontWeight: 800, color: role === k ? '#fff' : 'var(--ink3)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 } }, A(Icon, { name: ic, size: 17, sw: 2 }), l))),
      A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', textAlign: 'center', margin: '8px 0 16px' } }, '工作模式 · 主色為鼠尾草綠 · 可隨時切換回飼主'),
      // profile card
      A(Card, { pad: 16, style: { display: 'flex', alignItems: 'center', gap: 14 } },
        A(Avatar, { size: 56, kind: 'person', ring: true }),
        A('div', { style: { flex: 1 } },
          A('div', { style: { fontSize: 17, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6 } }, '林依婷', A(Tag, { color: 'sage', icon: 'shield' }, '已認證')),
          A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 2 } }, '到府保姆 · ★ 4.9 · 128 則評價')),
        A('button', { className: 'ccaTap', onClick: () => go('proProfile'), style: { width: 36, height: 36, borderRadius: '50%', border: '1.5px solid var(--line)', background: 'transparent', color: 'var(--ink2)' } }, A(Icon, { name: 'edit', size: 18 }))),
      // menu list
      A('div', { style: { marginTop: 16, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rlg)', overflow: 'hidden' } },
        rows.map(([ic, l, target, badge], i) => A('div', { key: i, className: 'ccaTap', onClick: () => target && go(target), style: { display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderTop: i ? '1px solid var(--line2)' : 'none' } },
          A('div', { style: { width: 32, height: 32, borderRadius: 10, background: 'var(--bgSoft)', color: 'var(--ink2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, A(Icon, { name: ic, size: 18 })),
          A('span', { style: { flex: 1, fontSize: 14, fontWeight: 600 } }, l),
          badge ? A('span', { style: { fontSize: 10.5, fontWeight: 700, color: 'var(--ink3)', background: 'var(--bgSoft)', padding: '3px 8px', borderRadius: 8 } }, badge) : A(Icon, { name: 'chevR', size: 17, color: 'var(--ink3)' }))))),
    A(BottomNavPro, { active: 'me', onNav }));
}

Object.assign(window, { ProProfile });