// pages/provider-detail.jsx — 服務者詳情: identity header + clearly delineated sections
// (關於 / 服務價目 / 飼主評價 entry) + book CTA. 可預約時段 calendar now lives in booking-flow 選時間.
const { useState } = React;

function ProviderDetail({ onBack = () => {}, go = () => {} }) {
  const p = PROVIDERS[0];

  // consistent section header: icon chip + title (+ optional trailing element)
  const SecHead = (icon, text, right) => A('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 13 } },
    A('div', { style: { width: 28, height: 28, borderRadius: 9, background: 'var(--accentSoft)', color: 'var(--accentDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: icon, size: 16, sw: 2 })),
    A('div', { style: { fontSize: 15, fontWeight: 800, flex: 1, letterSpacing: -0.2 } }, text),
    right || null);

  // ---- section: 關於 ----
  const aboutCard = A(Card, { pad: 16 },
    SecHead('user', '關於保姆'),
    A('p', { style: { fontSize: 13.5, color: 'var(--ink2)', lineHeight: 1.65, margin: 0 } }, '照顧貓咪 6 年，自家也有 3 隻貓。擅長照顧高齡貓與餵藥，每次服務都會即時拍照回報，讓你出門也安心。'));

  // ---- section: 服務價目 ----
  const priceCard = A(Card, { pad: 16 },
    SecHead('wallet', '服務價目'),
    A('div', null,
      [['到府餵食 · 30 分', 420], ['清貓砂 + 換水', 150], ['陪玩 · 30 分', 200], ['餵藥服務', 100]].map(([n, pr], i) =>
        A('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '11px 0', borderTop: i ? '1px solid var(--line2)' : 'none' } },
          A('span', { style: { fontSize: 13.5 } }, n),
          A('span', { className: 'num', style: { fontSize: 14, fontWeight: 800, color: 'var(--accentDeep)' } }, `$${pr}`)))));

  // ---- section: 飼主評價 (entry to reviews page) ----
  const reviewsCard = A(Card, { onClick: () => go('reviews'), pad: 16 },
    SecHead('star', '飼主評價', A(Icon, { name: 'chevR', size: 18, color: 'var(--ink3)' })),
    A('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
      A('div', { className: 'num', style: { fontSize: 30, fontWeight: 900, letterSpacing: -0.5, lineHeight: 1 } }, '4.9'),
      A('div', { style: { flex: 1 } },
        A(Stars, { value: 5, size: 13 }),
        A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 3 } }, '128 則評價 · 95% 給五星')),
      A('span', { style: { fontSize: 12.5, fontWeight: 700, color: 'var(--accentDeep)' } }, '查看全部')));

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A('div', { style: { flex: 1, overflowY: 'auto' } },
      // top bar (no hero photo)
      A('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 14px 0' } },
        A('button', { className: 'ccaTap', onClick: onBack, style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'var(--surface)', boxShadow: 'inset 0 0 0 1px var(--line2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' } }, A(Icon, { name: 'chevL', size: 20 })),
        A('button', { style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'var(--surface)', boxShadow: 'inset 0 0 0 1px var(--line2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' } }, A(Icon, { name: 'heart', size: 20 }))),
      A('div', { style: { background: 'var(--bg)', position: 'relative', padding: '12px 20px 16px' } },
        // identity header
        A('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
          A('div', { style: { flex: 1 } },
            A('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
              A('h1', { style: { fontSize: 22, fontWeight: 800, margin: 0 } }, p.name)),
            A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 } },
              A(Stars, { value: 5, size: 13 }), A('span', { className: 'num', style: { fontSize: 13, fontWeight: 700 } }, '4.9'),
              A('span', { style: { fontSize: 12, color: 'var(--ink3)' } }, `· ${p.n} 則評價 · ${p.dist}`))),
          A(Avatar, { size: 60, kind: 'person', style: { borderRadius: 18 } })),
        // sections
        A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 } },
          aboutCard, priceCard, reviewsCard),
        A('div', { style: { height: 8 } }))),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px', display: 'flex', gap: 12, alignItems: 'center' } },
      A('button', { style: { width: 50, height: 50, borderRadius: 16, border: '1.5px solid var(--line)', background: 'var(--surface)', color: 'var(--accentDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'message', size: 22 })),
      A(Btn, { full: true, iconR: 'arrowR', onClick: () => go('booking'), style: { padding: '15px' } }, '立即預約')),
    A(HomeBar, {}));
}

Object.assign(window, { ProviderDetail });