// HomeHelp · Flow 3: Live tracking → Chat → Complete

// ═══════════════════════════════════════════════════════
// 10 · Live tracking (helper en route)
// ═══════════════════════════════════════════════════════
function HH_S_Tracking({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', position: 'relative', background: HH.bg }}>
        {/* full-bleed map */}
        <div style={{ position: 'absolute', inset: 0 }}>
          <HHMap h="100%" pins={1} you label="Marcus · 4 min away" style={mapStyle} />
        </div>

        {/* top floating chrome */}
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', gap: 10 }}>
          <button style={floatBtn}><BackIcon/></button>
          <div style={{
            flex: 1, height: 40, padding: '0 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            background: HH.surface, borderRadius: 20,
            border: `1px solid ${HH.hairline2}`,
            boxShadow: HH.shadow2, fontSize: 13, fontWeight: 600,
          }}>
            <div style={{ width: 8, height: 8, borderRadius: 4, background: HH.trust, animation: 'hhPulse 1.4s infinite' }} />
            <span>Arriving at 7:42 PM</span>
            <style>{'@keyframes hhPulse{0%,100%{opacity:1}50%{opacity:.4}}'}</style>
          </div>
          <button style={floatBtn}><ShareIcon/></button>
        </div>

        {/* progress steps */}
        <div style={{
          position: 'absolute', top: 70, left: 16, right: 16,
          background: HH.surface, borderRadius: 14,
          border: `1px solid ${HH.hairline2}`, boxShadow: HH.shadow1,
          padding: '12px 14px',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
            {[
              ['Confirmed', true, true],
              ['On the way', true, false],
              ['Working', false, false],
              ['Done', false, false],
            ].map(([l, done, current], i, arr) => (
              <React.Fragment key={i}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: 9,
                    background: done && !current ? HH.trust : current ? HH.accent : HH.surfaceAlt,
                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: current ? `3px solid ${HH.accentSoft}` : 'none',
                    boxSizing: 'border-box',
                  }}>
                    {done && !current && <Ico d="M20 6L9 17l-5-5" size={10} sw={3} />}
                  </div>
                  <div style={{ fontSize: 10, fontWeight: current ? 700 : 500, color: current ? HH.ink : HH.muted }}>{l}</div>
                </div>
                {i < arr.length - 1 && <div style={{ flex: 1, height: 2, background: HH.hairline, marginTop: -14 }} />}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* bottom sheet */}
        <HHSheet bottom={0} style={{ paddingBottom: 26 }}>
          <div style={{ padding: '0 20px' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <HHAvatar name="Marcus Thompson" size={56} verified />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Marcus is on the way</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>
                  <HHStars rating={4.9} size={11} /> &nbsp;4.9 · 312 jobs
                </div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 4, fontFamily: HH.fontMono }}>
                  TOYOTA COROLLA · 4PJ-829
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <button style={iconBtn}><MsgIcon/></button>
              <button style={iconBtn}><PhoneIcon/></button>
              <HHBtn variant="ink" size="md" full={false} style={{ flex: 1 }} leftIcon={<ShareIcon size={16}/>}>Share trip</HHBtn>
            </div>

            <div style={{
              marginTop: 14, padding: '10px 12px',
              background: HH.surfaceAlt, borderRadius: 10,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12,
            }}>
              <span style={{ color: HH.muted }}>IKEA Pax · 60 min · $48 fixed</span>
              <span style={{ color: HH.ink2, fontWeight: 500 }}>Details ›</span>
            </div>
          </div>
        </HHSheet>
      </div>
    </HHPhone>
  );
}

const floatBtn = {
  width: 40, height: 40, borderRadius: 20,
  background: HH.surface, color: HH.ink, border: `1px solid ${HH.hairline2}`,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer', boxShadow: HH.shadow2,
};
const iconBtn = {
  width: 48, height: 48, borderRadius: 24,
  background: HH.surfaceAlt, color: HH.ink, border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
};

// ═══════════════════════════════════════════════════════
// 11 · Chat
// ═══════════════════════════════════════════════════════
function HH_S_Chat({ tone = 'neutral' }) {
  const msgs = [
    { who: 'them', t: 'Hey Alex! On my way. Anything special I should know about getting up?', time: '7:36 PM' },
    { who: 'me',   t: 'All good — apartment buzzer works, just hit "Reyes" on 4B.', time: '7:37 PM' },
    { who: 'them', t: 'Perfect 👍 Boxes are all in the bedroom?', time: '7:38 PM' },
    { who: 'me',   t: 'Yes, all 3 of them. Floor protector down already too.' },
    { who: 'them', t: 'Awesome. ETA 4 min.' },
  ];
  const quickReplies = ['On my way home', 'Running late', 'Buzz me up'];

  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* custom topbar with avatar */}
        <div style={{
          padding: '10px 16px',
          display: 'flex', alignItems: 'center', gap: 10,
          background: HH.surface, borderBottom: `1px solid ${HH.hairline2}`,
        }}>
          <button style={{ background: 'none', border: 'none', cursor: 'pointer' }}><BackIcon/></button>
          <HHAvatar name="Marcus Thompson" size={36} verified />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Marcus T.</div>
            <div style={{ fontSize: 11, color: HH.trust, display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: HH.trust }} /> ETA 4 min
            </div>
          </div>
          <button style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <PhoneIcon/>
          </button>
        </div>

        {/* messages */}
        <div style={{ flex: 1, overflow: 'auto', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ textAlign: 'center', fontSize: 11, color: HH.muted, padding: '4px 0' }}>Today</div>

          {msgs.map((m, i) => {
            const mine = m.who === 'me';
            return (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: mine ? 'flex-end' : 'flex-start' }}>
                <div style={{
                  maxWidth: '78%', padding: '9px 13px',
                  background: mine ? HH.ink : HH.surface,
                  color: mine ? '#fff' : HH.ink,
                  borderRadius: 18,
                  borderBottomRightRadius: mine ? 4 : 18,
                  borderBottomLeftRadius: mine ? 18 : 4,
                  border: mine ? 'none' : `1px solid ${HH.hairline2}`,
                  fontSize: 14, lineHeight: 1.4,
                  boxShadow: mine ? 'none' : HH.shadow1,
                }}>{m.t}</div>
                {m.time && <div style={{ fontSize: 10, color: HH.muted, marginTop: 2, padding: '0 4px' }}>{m.time}</div>}
              </div>
            );
          })}

          {/* typing */}
          <div style={{ alignSelf: 'flex-start', padding: '10px 14px', background: HH.surface, borderRadius: 18, borderBottomLeftRadius: 4, border: `1px solid ${HH.hairline2}`, display: 'flex', gap: 4 }}>
            {[0, 1, 2].map(i => (
              <span key={i} style={{
                width: 6, height: 6, borderRadius: 3, background: HH.muted,
                animation: `hhDot 1.2s infinite ${i * 0.15}s`,
              }} />
            ))}
            <style>{'@keyframes hhDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}'}</style>
          </div>
        </div>

        {/* quick replies */}
        <div style={{ padding: '6px 14px', display: 'flex', gap: 6, overflow: 'auto' }}>
          {quickReplies.map((r, i) => (
            <span key={i} style={{
              padding: '7px 13px', borderRadius: 16,
              background: HH.surface, border: `1px solid ${HH.hairline}`,
              fontSize: 12, color: HH.ink2, whiteSpace: 'nowrap',
            }}>{r}</span>
          ))}
        </div>

        {/* composer */}
        <div style={{ padding: '10px 14px 18px', borderTop: `1px solid ${HH.hairline2}`, background: HH.surface, display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.muted, cursor: 'pointer' }}>
            <PlusIcon/>
          </button>
          <div style={{
            flex: 1, height: 40, padding: '0 14px',
            display: 'flex', alignItems: 'center', gap: 8,
            background: HH.surfaceAlt, borderRadius: 20,
            fontSize: 13, color: HH.muted,
          }}>
            <span style={{ flex: 1 }}>Message Marcus…</span>
            <span style={{ color: HH.muted }}><MicIcon/></span>
          </div>
          <button style={{ width: 40, height: 40, borderRadius: 20, background: HH.accent, color: '#fff', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <Ico d="M22 2L11 13 M22 2l-7 20-4-9-9-4 20-7z" size={18} sw={1.8} />
          </button>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 12 · Job complete · pay · rate
// ═══════════════════════════════════════════════════════
function HH_S_Complete({ tone = 'neutral' }) {
  const [rating, setRating] = React.useState(5);
  const [selectedTags, setSelectedTags] = React.useState(['On time', 'Clean work']);

  const toggleTag = (t) => setSelectedTags(s => s.includes(t) ? s.filter(x => x !== t) : [...s, t]);

  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title={copy('complete_title', tone)} left="close" />

        <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px 0' }}>
          {/* before/after photos */}
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ flex: 1 }}>
              <HHPhoto seed="pax-before" h={140} r={12} label="BEFORE" />
            </div>
            <div style={{ flex: 1 }}>
              <HHPhoto seed="pax-after" h={140} r={12} label="AFTER" />
            </div>
          </div>

          <div style={{ marginTop: 18, textAlign: 'center' }}>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.6 }}>
              $48.00 <span style={{ fontSize: 14, color: HH.muted, fontWeight: 500 }}>charged</span>
            </div>
            <div style={{ fontSize: 12, color: HH.muted, marginTop: 4 }}>
              Marcus T. · 58 min · Visa •••• 4242
            </div>
          </div>

          <HHLabel>Rate Marcus</HHLabel>
          <HHCard style={{ padding: 18, textAlign: 'center' }}>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 6 }}>
              {[1, 2, 3, 4, 5].map(n => (
                <button key={n} onClick={() => setRating(n)} style={{
                  background: 'none', border: 'none', cursor: 'pointer', padding: 4,
                  color: n <= rating ? HH.warning : HH.hairline,
                }}>
                  <StarIcon fill={n <= rating ? HH.warning : 'none'} />
                </button>
              ))}
            </div>
            <div style={{ fontSize: 13, color: HH.ink2, marginTop: 10, marginBottom: 14 }}>
              {rating === 5 ? "Amazing — they nailed it." : rating === 4 ? "Pretty good." : rating === 3 ? "It was okay." : "Could've been better."}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
              {['On time', 'Friendly', 'Clean work', 'Above & beyond', 'Tidy', 'Communicative'].map(t => {
                const on = selectedTags.includes(t);
                return (
                  <button key={t} onClick={() => toggleTag(t)} style={{
                    padding: '6px 12px', borderRadius: 14,
                    background: on ? HH.ink : HH.surface,
                    color: on ? '#fff' : HH.ink2,
                    border: `1px solid ${on ? HH.ink : HH.hairline}`,
                    fontSize: 12, fontWeight: 500, cursor: 'pointer',
                  }}>{t}</button>
                );
              })}
            </div>
          </HHCard>

          <HHLabel>Add a tip · optional</HHLabel>
          <HHCard style={{ padding: 12, display: 'flex', gap: 8 }}>
            {['$0', '$5', '$10', '$15', 'Custom'].map((t, i) => (
              <button key={i} style={{
                flex: 1, padding: '10px 0', borderRadius: 10,
                background: i === 2 ? HH.accent : HH.surfaceAlt,
                color: i === 2 ? '#fff' : HH.ink, border: 'none',
                fontSize: 13, fontWeight: 600, fontFamily: HH.fontMono, cursor: 'pointer',
              }}>{t}</button>
            ))}
          </HHCard>

          <div style={{ marginTop: 14, padding: '12px 14px', background: HH.surfaceAlt, borderRadius: 12, textAlign: 'center' }}>
            <div style={{ fontSize: 12, color: HH.muted }}>{copy('complete_thanks', tone)}</div>
          </div>

          <div style={{ height: 16 }} />
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="primary" size="lg">Submit review · tip $10</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

Object.assign(window, { HH_S_Tracking, HH_S_Chat, HH_S_Complete });