// HomeHelp · Flow 2: Smart picks → Compare → Book → Confirmation

const HH_PICKS = [
  {
    n: 'Marcus Thompson',
    short: 'Marcus T.',
    why: "Done 80+ Pax wardrobes. Closest to you and free at your time.",
    short_why: 'IKEA Pax pro · free tonight',
    price: 48, eta: '45 min', dist: '0.4 mi',
    rating: 4.9, jobs: 312, tags: ['IKEA pro', 'Tools incl.'],
    specialties: 'Furniture, TV mounts, shelves',
    seed: 'marcus',
  },
  {
    n: 'Priya Shah',
    short: 'Priya S.',
    why: "Available now. Strong appliance + plumbing track record.",
    short_why: 'Available now',
    price: 55, eta: 'now', dist: '1.1 mi',
    rating: 4.8, jobs: 188, tags: ['Tools incl.'],
    specialties: 'Appliance + plumbing',
    seed: 'priya',
  },
  {
    n: 'Jordan Kim',
    short: 'Jordan K.',
    why: "Most affordable option in range. Newer to the platform but well-reviewed.",
    short_why: 'Best price · 90 min wait',
    price: 42, eta: '90 min', dist: '1.6 mi',
    rating: 4.7, jobs: 94, tags: ['Tools incl.'],
    specialties: 'Furniture, shelving',
    seed: 'jordan',
  },
];

// ═══════════════════════════════════════════════════════
// 06 · Smart picks (with 3 card style variants)
// ═══════════════════════════════════════════════════════
// cardStyle: 'photo' | 'minimal' | 'dense'
function HH_S_Picks({ tone = 'neutral', cardStyle = 'photo' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="" left="back" right={<span>Filter</span>} />

        <div style={{ padding: '4px 24px 12px' }}>
          <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.8, lineHeight: 1.15 }}>
            {copy('smart_picks_title', tone)}
          </div>
          <div style={{ fontSize: 13, color: HH.muted, marginTop: 6, lineHeight: 1.45 }}>
            {copy('smart_picks_sub', tone)}
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
            <HHPill size="sm" icon="🛋" style={{ paddingLeft: 8 }}>Furniture</HHPill>
            <HHPill size="sm">0.4 – 1.6 mi</HHPill>
            <HHPill size="sm">$42 – $55</HHPill>
            <HHPill size="sm" variant="trust">All ID verified</HHPill>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {HH_PICKS.map((p, i) => (
            <PickCard key={i} pick={p} best={i === 0} variant={cardStyle} />
          ))}

          {/* fallback CTA */}
          <div style={{ marginTop: 8, padding: 16, borderRadius: 14, border: `1px dashed ${HH.hairline}`, textAlign: 'center' }}>
            <div style={{ fontSize: 13, color: HH.muted, marginBottom: 8 }}>
              Want more options?
            </div>
            <HHBtn variant="ghost" size="sm">{copy('cta_open_bids', tone)} →</HHBtn>
          </div>
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="primary" size="lg">{copy('cta_book_now', tone)} · Marcus · $48</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

function PickCard({ pick, best, variant = 'photo' }) {
  const accentBg = best ? HH.accentSoft : HH.surface;
  const border = best ? HH.accent : HH.hairline2;

  if (variant === 'photo') {
    return (
      <div style={{
        background: HH.surface, borderRadius: 18,
        border: `1.5px solid ${border}`,
        boxShadow: HH.shadow2,
        overflow: 'hidden', position: 'relative',
      }}>
        <div style={{ display: 'flex', gap: 0 }}>
          <HHPhoto seed={pick.seed} h={108} w={108} r={0} style={{ borderRight: `1px solid ${HH.hairline2}` }} />
          <div style={{ flex: 1, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 700, letterSpacing: -0.25 }}>{pick.short}</div>
                <div style={{ fontSize: 11.5, color: HH.muted, marginTop: 2 }}>
                  <HHStars rating={pick.rating} size={10} /> &nbsp;{pick.rating} · {pick.jobs} jobs · {pick.dist}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: HH.fontMono, fontSize: 18, fontWeight: 600, letterSpacing: -0.5 }}>${pick.price}</div>
                <div style={{ fontSize: 10, color: HH.muted, fontFamily: HH.fontMono }}>{pick.eta}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 5, marginTop: 4 }}>
              <HHPill size="sm" variant="trust" style={{ fontSize: 10 }}>✓ ID</HHPill>
              {pick.tags.slice(0, 1).map((t, i) => (
                <HHPill key={i} size="sm" style={{ fontSize: 10 }}>{t}</HHPill>
              ))}
            </div>
          </div>
        </div>
        <div style={{
          padding: '10px 14px', borderTop: `1px solid ${HH.hairline2}`,
          background: best ? accentBg : HH.surfaceAlt,
          fontSize: 12.5, color: HH.ink2, lineHeight: 1.45,
        }}>
          {pick.why}
        </div>
        {best && (
          <div style={{
            position: 'absolute', top: 10, left: 10,
            background: HH.ink, color: '#fff',
            fontSize: 10, fontWeight: 700, padding: '3px 8px', borderRadius: 4,
            fontFamily: HH.fontMono, letterSpacing: 0.4,
          }}>TOP MATCH</div>
        )}
      </div>
    );
  }

  if (variant === 'minimal') {
    return (
      <div style={{
        background: HH.surface, borderRadius: 14,
        border: `1px solid ${border}`,
        padding: '14px 16px', position: 'relative',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <HHAvatar name={pick.n} size={28} verified />
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{pick.short}</div>
              {best && <span style={{ fontSize: 9, fontWeight: 700, color: HH.accent, fontFamily: HH.fontMono, letterSpacing: 0.5 }}>· TOP MATCH</span>}
            </div>
            <div style={{ fontSize: 13, color: HH.ink2, lineHeight: 1.45, marginTop: 8 }}>
              {pick.why}
            </div>
            <div style={{ fontSize: 11, color: HH.muted, marginTop: 8, fontFamily: HH.fontMono }}>
              ★ {pick.rating} · {pick.jobs} jobs · {pick.dist} · {pick.eta}
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: HH.fontMono, fontSize: 22, fontWeight: 600, letterSpacing: -0.6 }}>${pick.price}</div>
          </div>
        </div>
      </div>
    );
  }

  // dense
  return (
    <div style={{
      background: HH.surface, borderRadius: 12,
      border: `1px solid ${border}`,
      padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, position: 'relative',
    }}>
      <HHAvatar name={pick.n} size={48} verified ring={best} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 14.5, fontWeight: 700 }}>{pick.short}</span>
          {best && <span style={{ fontSize: 9, fontWeight: 700, color: HH.accent, fontFamily: HH.fontMono, letterSpacing: 0.5 }}>TOP</span>}
        </div>
        <div style={{ fontSize: 11, color: HH.muted, marginTop: 2, fontFamily: HH.fontMono }}>
          ★{pick.rating} · {pick.jobs}j · {pick.dist} · {pick.eta}
        </div>
        <div style={{ fontSize: 12, color: HH.ink2, marginTop: 4, lineHeight: 1.35 }}>
          {pick.short_why}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div style={{ fontFamily: HH.fontMono, fontSize: 18, fontWeight: 700, letterSpacing: -0.5 }}>${pick.price}</div>
        <button style={{
          marginTop: 4, padding: '5px 12px', borderRadius: 14,
          background: best ? HH.accent : HH.ink, color: '#fff', border: 'none',
          fontSize: 11, fontWeight: 600, cursor: 'pointer',
        }}>Book</button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════
// 07 · Compare side-by-side
// ═══════════════════════════════════════════════════════
function HH_S_Compare({ tone = 'neutral' }) {
  const rows = [
    ['Price', '$48', '$55', '$42'],
    ['Distance', '0.4 mi', '1.1 mi', '1.6 mi'],
    ['Rating', '★ 4.9', '★ 4.8', '★ 4.7'],
    ['Jobs done', '312', '188', '94'],
    ['ETA', '45 min', 'now', '90 min'],
    ['Pax pro', '✓', '—', '—'],
    ['Tools incl.', '✓', '✓', '✓'],
    ['Verified', '✓', '✓', '✓'],
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Compare" left="back" right={<span>Sort</span>} />

        <div style={{ padding: '4px 20px 0' }}>
          <div style={{ fontSize: 13, color: HH.muted, lineHeight: 1.5 }}>
            Side-by-side details for your three matches.
          </div>
        </div>

        <div style={{ padding: '16px 16px 0', flex: 1, overflow: 'auto' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 0,
            background: HH.surface, borderRadius: 14, border: `1px solid ${HH.hairline2}`, overflow: 'hidden',
          }}>
            {/* helper headers */}
            <div style={{ background: HH.surfaceAlt }} />
            {HH_PICKS.map((p, i) => (
              <div key={i} style={{
                padding: '12px 8px', textAlign: 'center',
                background: i === 0 ? HH.accentSoft : HH.surfaceAlt,
                borderLeft: `1px solid ${HH.hairline2}`,
              }}>
                <HHAvatar name={p.n} size={32} style={{ margin: '0 auto' }} />
                <div style={{ fontSize: 11.5, fontWeight: 700, marginTop: 6 }}>{p.n.split(' ')[0]}</div>
                {i === 0 && <div style={{ fontSize: 8.5, fontWeight: 700, color: HH.accent, fontFamily: HH.fontMono, letterSpacing: 0.5, marginTop: 2 }}>TOP MATCH</div>}
              </div>
            ))}

            {/* rows */}
            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <div style={{ padding: '10px 12px', fontSize: 12, color: HH.muted, borderTop: `1px solid ${HH.hairline2}` }}>{r[0]}</div>
                {r.slice(1).map((v, j) => (
                  <div key={j} style={{
                    padding: '10px 6px', fontSize: 12, fontWeight: i < 2 ? 600 : 500,
                    textAlign: 'center',
                    background: j === 0 ? HH.accentSoft : 'transparent',
                    borderLeft: `1px solid ${HH.hairline2}`, borderTop: `1px solid ${HH.hairline2}`,
                    fontFamily: i < 5 ? HH.fontMono : HH.fontSans, letterSpacing: i < 5 ? -0.3 : 0,
                  }}>{v}</div>
                ))}
              </React.Fragment>
            ))}
          </div>

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

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}`, display: 'flex', gap: 10 }}>
          <HHBtn variant="ghost" size="lg" full={false} style={{ flex: 1 }}>Open to all</HHBtn>
          <HHBtn variant="primary" size="lg" style={{ flex: 1.5 }}>Book Marcus · $48</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 08 · Booking — confirm + pay
// ═══════════════════════════════════════════════════════
function HH_S_Book({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Confirm booking" left="back" />

        <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px 0' }}>
          {/* helper card */}
          <HHCard style={{ padding: '16px', display: 'flex', gap: 14, alignItems: 'center' }}>
            <HHAvatar name="Marcus Thompson" size={56} verified />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: -0.3 }}>Marcus Thompson</div>
              <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>
                <HHStars rating={4.9} size={11} /> &nbsp;4.9 · 312 jobs
              </div>
              <div style={{ marginTop: 6, display: 'flex', gap: 4 }}>
                <HHPill size="sm" variant="trust" style={{ fontSize: 10 }}>✓ ID verified</HHPill>
              </div>
            </div>
          </HHCard>

          <HHLabel>Job</HHLabel>
          <HHCard style={{ padding: 16 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>IKEA Pax wardrobe assembly</div>
            <div style={{ fontSize: 13, color: HH.muted, marginTop: 6, lineHeight: 1.45 }}>
              3-door Pax, boxes already in bedroom. Need it done tonight if possible.
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 14 }}>
              {[
                [<ClockIcon/>, 'Today, 7:00 PM', 'Marcus available'],
                [<PinIcon/>, '2418 Linden Ave, 4B', 'Brooklyn, NY'],
                [<BoltIcon/>, '≈ 60 min', 'fixed price'],
              ].map(([ic, t, s], i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '8px 0', borderTop: i ? `1px dashed ${HH.hairline}` : 'none' }}>
                  <span style={{ color: HH.muted }}>{ic}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{t}</div>
                    <div style={{ fontSize: 11, color: HH.muted }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </HHCard>

          <HHLabel>Payment</HHLabel>
          <HHCard>
            <HHRow
              left={<div style={{ width: 36, height: 24, borderRadius: 4, background: 'linear-gradient(135deg, #2A4D8F, #5B86E5)' }} />}
              title="Visa ending 4242"
              sub="default · charged after the job"
              right={<ChevIcon/>}
              divider={false}
            />
          </HHCard>

          <HHLabel>Price breakdown</HHLabel>
          <HHCard style={{ padding: '14px 16px' }}>
            {[
              ['Labor (≈60 min)', '$40.00'],
              ['Tools', '$5.00'],
              ['Platform fee', '$3.00'],
            ].map(([l, v], i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between',
                padding: '8px 0', borderBottom: i < 2 ? `1px dashed ${HH.hairline}` : 'none',
                fontSize: 13, color: HH.ink2,
              }}>
                <span>{l}</span>
                <span style={{ fontFamily: HH.fontMono }}>{v}</span>
              </div>
            ))}
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              paddingTop: 10, marginTop: 6, borderTop: `1px solid ${HH.hairline}`,
              fontSize: 16, fontWeight: 700,
            }}>
              <span>You pay</span>
              <span style={{ fontFamily: HH.fontMono, letterSpacing: -0.5 }}>$48.00</span>
            </div>
          </HHCard>

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

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="primary" size="lg">Confirm and book · $48</HHBtn>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 11, color: HH.muted }}>
            Free cancellation up to 30 min before
          </div>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 09 · Confirmation (booked!)
// ═══════════════════════════════════════════════════════
function HH_S_Confirmation({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 28px 0' }}>
        <div style={{
          width: 80, height: 80, borderRadius: 40, background: HH.trustSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 16,
        }}>
          <div style={{ width: 56, height: 56, borderRadius: 28, background: HH.trust, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Ico d="M20 6L9 17l-5-5" size={28} sw={2.4} />
          </div>
        </div>

        <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.7, marginTop: 24, marginBottom: 10, textAlign: 'center' }}>
          You're booked
        </h1>
        <p style={{ fontSize: 14, color: HH.muted, textAlign: 'center', marginTop: 0, marginBottom: 24, lineHeight: 1.5 }}>
          Marcus will arrive at <b style={{ color: HH.ink }}>7:00 PM today</b>.<br/>
          We've added it to your requests.
        </p>

        <HHCard style={{ width: '100%', padding: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
          <HHAvatar name="Marcus Thompson" size={48} verified />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Marcus Thompson</div>
            <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>IKEA Pax · 60 min · $48</div>
          </div>
          <button style={{
            width: 38, height: 38, borderRadius: 19,
            background: HH.surfaceAlt, color: HH.ink, border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}><MsgIcon/></button>
        </HHCard>

        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
          <HHBtn variant="ink" size="md">Track helper</HHBtn>
          <HHBtn variant="ghost" size="md">Add to calendar</HHBtn>
        </div>

        <div style={{ marginTop: 'auto', marginBottom: 24, textAlign: 'center', fontSize: 11, color: HH.muted }}>
          Confirmation #HH-4892-31
        </div>
      </div>
    </HHPhone>
  );
}

Object.assign(window, { HH_S_Picks, PickCard, HH_S_Compare, HH_S_Book, HH_S_Confirmation, HH_PICKS });