// HomeHelp · mid-fi design system
// Tokens + primitives shared across all screens.

// ─────────────────── tokens ───────────────────
const HH = {
  // brand
  accent:      '#D97757',
  accentDark:  '#B85F44',
  accentSoft:  '#FBE7DC',
  trust:       '#1F6F4A',
  trustSoft:   '#E5F1EB',

  // neutrals (warm)
  bg:          '#F8F5EF',
  surface:     '#FFFFFF',
  surfaceAlt:  '#F2EEE5',
  hairline:    '#E5DFD2',
  hairline2:   '#EFEBE0',

  // ink
  ink:         '#1A1612',
  ink2:        '#3D3631',
  muted:       '#857F73',
  faint:       '#B5AFA1',

  // semantic
  danger:      '#B23A2D',
  warning:     '#C7822A',

  // type
  fontSans:    '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
  fontMono:    '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace',

  // radii
  r:  { sm: 6, md: 10, lg: 14, xl: 20, pill: 999 },

  // shadow
  shadow1: '0 1px 2px rgba(20,15,8,0.05)',
  shadow2: '0 4px 16px rgba(20,15,8,0.07), 0 1px 2px rgba(20,15,8,0.04)',
  shadow3: '0 10px 30px rgba(20,15,8,0.10), 0 2px 6px rgba(20,15,8,0.05)',
};

// ─────────────── deterministic gradient avatars ───────────────
const AVATAR_PALETTES = [
  ['#F4C28C', '#C47A4E'], // warm sand → terracotta
  ['#A8C5A4', '#5C8A70'], // sage → forest
  ['#B7B7E0', '#6B6BB0'], // periwinkle → indigo
  ['#F2A0A0', '#B85565'], // rose → mauve
  ['#E8D78A', '#A88A35'], // sand → ochre
  ['#9EC8D8', '#3F7390'], // sky → deep
  ['#D4B8E8', '#7C5AA0'], // lilac → violet
  ['#EBA98C', '#9C543A'], // peach → rust
];

function hashIdx(seed, mod) {
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  return h % mod;
}

function HHAvatar({ name = '?', size = 40, verified = false, ring = false, style = {} }) {
  const [c1, c2] = AVATAR_PALETTES[hashIdx(name, AVATAR_PALETTES.length)];
  const initials = name.split(/\s+/).map(s => s[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0, ...style }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'rgba(255,255,255,0.95)', fontWeight: 600, fontSize: size * 0.4,
        fontFamily: HH.fontSans, letterSpacing: -0.3,
        boxShadow: ring ? '0 0 0 2.5px #fff, 0 0 0 4px ' + HH.accent : 'none',
      }}>{initials}</div>
      {verified && (
        <div title="ID verified" style={{
          position: 'absolute', right: -1, bottom: -1,
          width: Math.max(14, size * 0.34), height: Math.max(14, size * 0.34),
          borderRadius: '50%',
          background: HH.trust, color: '#fff',
          fontSize: Math.max(8, size * 0.18), fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: '2px solid #fff',
        }}>✓</div>
      )}
    </div>
  );
}

// ─────────────── photo-like placeholder (used for hero/job shots) ───────────────
function HHPhoto({ seed = 'job', w = '100%', h = 160, r = 12, label, style = {} }) {
  // Deterministic gradient pair from seed
  const palettes = [
    ['#3A4A3F', '#7C8D6A'], // mossy
    ['#8B6849', '#D4A574'], // wood / brown
    ['#3F5168', '#8FA7BE'], // slate / sky
    ['#5C4A3E', '#B89678'], // earth
    ['#6E5839', '#C2A36B'], // tobacco
    ['#3F4A52', '#A8B8C2'], // steel
  ];
  const [c1, c2] = palettes[hashIdx(seed, palettes.length)];
  return (
    <div style={{
      width: w, height: h, borderRadius: r,
      background: `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`,
      position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      {/* subtle vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 60%)',
      }} />
      {/* film grain illusion */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.18,
        backgroundImage: `repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px)`,
      }} />
      {label && (
        <div style={{
          position: 'absolute', left: 10, bottom: 10,
          fontFamily: HH.fontMono, fontSize: 10, color: 'rgba(255,255,255,0.75)',
          letterSpacing: 0.6, textTransform: 'uppercase',
          padding: '3px 7px', background: 'rgba(0,0,0,0.25)', borderRadius: 4,
          backdropFilter: 'blur(4px)',
        }}>{label}</div>
      )}
    </div>
  );
}

// ─────────────── phone frame ───────────────
function HHPhone({ children, w = 360, h = 740, label, dark = false }) {
  return (
    <div style={{
      width: w, height: h,
      background: dark ? '#0F0D0A' : HH.surface,
      borderRadius: 44,
      border: `1.5px solid ${HH.ink}`,
      boxShadow: HH.shadow3,
      position: 'relative',
      overflow: 'hidden',
      fontFamily: HH.fontSans,
      color: HH.ink,
    }}>
      {/* status bar */}
      <div style={{
        height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 28px', fontSize: 13, fontWeight: 600, color: dark ? '#fff' : HH.ink,
        position: 'relative', flexShrink: 0,
      }}>
        <span>9:41</span>
        <div style={{
          position: 'absolute', left: '50%', top: 9, transform: 'translateX(-50%)',
          width: 110, height: 22, background: HH.ink, borderRadius: 14,
        }} />
        <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          {/* signal */}
          <span style={{ display: 'flex', gap: 1.5, alignItems: 'flex-end' }}>
            <span style={{ width: 3, height: 4, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 6, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 8, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 10, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
          </span>
          {/* battery */}
          <span style={{ width: 22, height: 11, border: `1px solid ${dark ? '#fff' : HH.ink}`, borderRadius: 3, padding: 1, display: 'flex' }}>
            <span style={{ flex: 1, background: dark ? '#fff' : HH.ink, borderRadius: 1.5 }} />
          </span>
        </span>
      </div>
      {/* content area */}
      <div style={{ position: 'absolute', inset: '36px 0 22px 0', overflow: 'hidden', background: dark ? '#0F0D0A' : HH.bg }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 8, transform: 'translateX(-50%)',
        width: 134, height: 5, background: dark ? '#fff' : HH.ink, borderRadius: 3,
        opacity: 0.9,
      }} />
    </div>
  );
}

// ─────────────── atoms ───────────────
function HHBtn({ children, variant = 'primary', size = 'md', full = true, leftIcon, style = {}, onClick }) {
  const sizes = {
    sm: { h: 36, fs: 13, px: 14, r: 18 },
    md: { h: 48, fs: 15, px: 18, r: 24 },
    lg: { h: 56, fs: 16, px: 22, r: 28 },
  };
  const s = sizes[size];
  const variants = {
    primary: { bg: HH.accent, fg: '#fff', bd: 'transparent' },
    ink:     { bg: HH.ink, fg: '#fff', bd: 'transparent' },
    ghost:   { bg: 'transparent', fg: HH.ink, bd: HH.hairline },
    subtle:  { bg: HH.surfaceAlt, fg: HH.ink, bd: 'transparent' },
  };
  const v = variants[variant];
  return (
    <button onClick={onClick} style={{
      height: s.h, minHeight: s.h, fontSize: s.fs, fontWeight: 600,
      padding: full ? 0 : `0 ${s.px}px`, width: full ? '100%' : 'auto',
      borderRadius: s.r, border: `1px solid ${v.bd}`,
      background: v.bg, color: v.fg, cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: HH.fontSans, letterSpacing: -0.1,
      ...style,
    }}>
      {leftIcon}
      {children}
    </button>
  );
}

function HHPill({ children, variant = 'default', size = 'md', icon, style = {} }) {
  const sizes = {
    sm: { h: 22, fs: 11, px: 8 },
    md: { h: 28, fs: 12, px: 11 },
  };
  const s = sizes[size];
  const variants = {
    default:  { bg: HH.surfaceAlt, fg: HH.ink2, bd: 'transparent' },
    active:   { bg: HH.ink, fg: '#fff', bd: 'transparent' },
    accent:   { bg: HH.accentSoft, fg: HH.accentDark, bd: 'transparent' },
    trust:    { bg: HH.trustSoft, fg: HH.trust, bd: 'transparent' },
    outline:  { bg: 'transparent', fg: HH.ink, bd: HH.hairline },
  };
  const v = variants[variant];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      height: s.h, padding: `0 ${s.px}px`, borderRadius: HH.r.pill,
      fontSize: s.fs, fontWeight: 500, letterSpacing: -0.05,
      background: v.bg, color: v.fg, border: `1px solid ${v.bd}`,
      fontFamily: HH.fontSans, whiteSpace: 'nowrap',
      ...style,
    }}>
      {icon}
      {children}
    </span>
  );
}

function HHCard({ children, style = {} }) {
  return (
    <div style={{
      background: HH.surface, borderRadius: HH.r.lg,
      border: `1px solid ${HH.hairline2}`, boxShadow: HH.shadow1,
      ...style,
    }}>{children}</div>
  );
}

// ─────────────── top bar ───────────────
function HHTopBar({ title, left = 'back', right, transparent = false }) {
  return (
    <div style={{
      padding: '14px 20px', position: 'relative',
      background: transparent ? 'transparent' : HH.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      minHeight: 48,
    }}>
      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center' }}>
        {left === 'back' && <BackIcon />}
        {left === 'close' && <CloseIcon />}
        {left === 'menu' && <MenuIcon />}
        {typeof left === 'object' && left}
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{title}</div>
      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', fontSize: 13, color: HH.muted }}>
        {right}
      </div>
    </div>
  );
}

// ─────────────── tiny inline icons ───────────────
const Ico = ({ d, size = 20, stroke = 'currentColor', sw = 1.6, fill = 'none', style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
    <path d={d} />
  </svg>
);
const BackIcon  = () => <Ico d="M15 6l-6 6 6 6" />;
const CloseIcon = () => <Ico d="M6 6l12 12M18 6L6 18" />;
const MenuIcon  = () => <Ico d="M4 7h16M4 12h16M4 17h16" />;
const SearchIcon= () => <Ico d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM20 20l-4.3-4.3" />;
const PlusIcon  = () => <Ico d="M12 5v14M5 12h14" />;
const ChevIcon  = () => <Ico d="M9 6l6 6-6 6" />;
const MsgIcon   = () => <Ico d="M21 12a8 8 0 0 1-11.8 7L4 21l1.9-5.1A8 8 0 1 1 21 12z" />;
const PhoneIcon = () => <Ico d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 13 13 0 0 0 .7 2.8 2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.4a2 2 0 0 1 2.1-.5 13 13 0 0 0 2.8.7 2 2 0 0 1 1.7 2z" />;
const CamIcon   = () => <Ico d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />;
const MicIcon   = () => <Ico d="M12 1a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z M19 10v1a7 7 0 0 1-14 0v-1 M12 18v4 M8 22h8" />;
const PinIcon   = () => <Ico d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />;
const ClockIcon = () => <Ico d="M12 6v6l4 2 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" />;
const CheckIcon = () => <Ico d="M20 6L9 17l-5-5" />;
const StarIcon  = ({ fill }) => <Ico d="M12 2l3.1 6.3 7 1-5 4.9 1.2 6.8L12 17.8 5.7 21l1.2-6.8-5-4.9 7-1z" fill={fill || 'none'} />;
const BoltIcon  = () => <Ico d="M13 2L3 14h7l-1 8 10-12h-7z" />;
const SettIcon  = () => <Ico d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .67.39 1.27 1 1.51H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />;
const HomeIcon  = () => <Ico d="M3 12L12 3l9 9 M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10" />;
const InboxIcon = () => <Ico d="M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />;
const UserIcon  = () => <Ico d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />;
const BellIcon  = () => <Ico d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.7 21a2 2 0 0 1-3.4 0" />;
const ShareIcon = () => <Ico d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8 M16 6l-4-4-4 4 M12 2v13" />;
const CardIcon  = () => <Ico d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z M1 10h22" />;
const HeartIcon = () => <Ico d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />;

// ─────────────── bottom tab bar ───────────────
function HHTabBar({ active = 0, helper = false }) {
  const tabs = helper
    ? [
        { i: <BoltIcon/>, l: 'Jobs' },
        { i: <ClockIcon/>, l: 'Schedule' },
        { i: <CardIcon/>, l: 'Earnings' },
        { i: <UserIcon/>, l: 'Profile' },
      ]
    : [
        { i: <HomeIcon/>, l: 'Home' },
        { i: <PlusIcon/>, l: 'New' },
        { i: <BoltIcon/>, l: 'Requests' },
        { i: <InboxIcon/>, l: 'Inbox' },
        { i: <UserIcon/>, l: 'Me' },
      ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      height: 64, borderTop: `1px solid ${HH.hairline}`,
      background: HH.surface,
      display: 'grid', gridTemplateColumns: `repeat(${tabs.length}, 1fr)`,
      paddingBottom: 4,
    }}>
      {tabs.map((t, i) => (
        <div key={i} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          gap: 3, color: i === active ? HH.ink : HH.faint, fontSize: 10, fontWeight: i === active ? 600 : 500,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {React.cloneElement(t.i, { size: 22, sw: i === active ? 2 : 1.6 })}
          </div>
          {t.l}
        </div>
      ))}
    </div>
  );
}

// ─────────────── stylized map ───────────────
// `style`: minimal | streets | satellite
function HHMap({ h = 220, pins = 1, you = true, label, style = 'streets', children }) {
  const styles = {
    minimal: {
      bg: '#EFEAE0',
      roads: '#F8F5EF',
      lines: 'rgba(20,15,8,0.05)',
      blocks: 'rgba(20,15,8,0.03)',
    },
    streets: {
      bg: '#E8E1D2',
      roads: '#FFFCF5',
      lines: 'rgba(20,15,8,0.08)',
      blocks: 'rgba(20,15,8,0.06)',
      parks: '#D4DEC8',
      water: '#C7D8E0',
    },
    satellite: {
      bg: '#2A2A22',
      roads: 'rgba(255,240,200,0.35)',
      lines: 'rgba(255,255,255,0.05)',
      blocks: 'rgba(255,255,255,0.04)',
      parks: '#3A4A35',
      water: '#2B3F50',
    },
  };
  const s = styles[style] || styles.streets;
  const isDark = style === 'satellite';

  return (
    <div style={{
      position: 'relative', height: h, overflow: 'hidden',
      background: s.bg,
    }}>
      {/* park */}
      {s.parks && (
        <div style={{ position: 'absolute', left: '-10%', top: '5%', width: '40%', height: '30%', background: s.parks, borderRadius: '50% 30% 40% 50%', opacity: 0.85 }} />
      )}
      {/* water */}
      {s.water && (
        <div style={{ position: 'absolute', right: '-15%', bottom: '-10%', width: '50%', height: '50%', background: s.water, borderRadius: '40% 50% 60% 30%', opacity: 0.9 }} />
      )}
      {/* satellite noise */}
      {isDark && (
        <div style={{ position: 'absolute', inset: 0, opacity: 0.35,
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: '6px 6px' }} />
      )}
      {/* horiz road */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '48%', height: 16, background: s.roads, boxShadow: `0 1px ${s.lines}, 0 -1px ${s.lines}` }} />
      {/* vert road */}
      <div style={{ position: 'absolute', left: '42%', top: 0, bottom: 0, width: 14, background: s.roads, boxShadow: `1px 0 ${s.lines}, -1px 0 ${s.lines}` }} />
      {/* secondary roads */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '22%', height: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: 0, right: 0, top: '74%', height: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: '18%', top: 0, bottom: 0, width: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: '72%', top: 0, bottom: 0, width: 4, background: s.roads, opacity: 0.6 }} />

      {/* you */}
      {you && (
        <div style={{ position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%,-50%)' }}>
          <div style={{
            width: 16, height: 16, borderRadius: 8,
            background: HH.accent, border: '3px solid #fff',
            boxShadow: `0 0 0 10px ${HH.accent}26`,
          }} />
        </div>
      )}

      {/* pins */}
      {Array.from({ length: pins }).map((_, i) => {
        const positions = [
          { left: '22%', top: '28%' }, { left: '68%', top: '24%' },
          { left: '76%', top: '60%' }, { left: '24%', top: '70%' },
          { left: '58%', top: '78%' }, { left: '40%', top: '14%' },
        ];
        const p = positions[i % positions.length];
        return (
          <div key={i} style={{ position: 'absolute', ...p, transform: 'translate(-50%, -100%)' }}>
            <div style={{
              width: 28, height: 36, position: 'relative',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 14,
                background: HH.ink, color: '#fff',
                fontSize: 11, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '2.5px solid #fff', boxShadow: '0 3px 8px rgba(0,0,0,0.25)',
              }}>{i + 1}</div>
              <div style={{
                position: 'absolute', left: '50%', bottom: 1, transform: 'translateX(-50%) rotate(45deg)',
                width: 8, height: 8, background: HH.ink,
                borderRight: '2.5px solid #fff', borderBottom: '2.5px solid #fff',
              }} />
            </div>
          </div>
        );
      })}

      {label && (
        <div style={{
          position: 'absolute', left: 12, top: 12,
          background: isDark ? 'rgba(20,15,8,0.85)' : HH.surface,
          color: isDark ? '#fff' : HH.ink2,
          border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : HH.hairline}`,
          borderRadius: 8, padding: '6px 10px', fontSize: 11,
          fontFamily: HH.fontMono, letterSpacing: 0.2,
          boxShadow: HH.shadow1,
        }}>{label}</div>
      )}

      {children}
    </div>
  );
}

// ─────────────── bottom sheet ───────────────
function HHSheet({ children, bottom = 64, style = {} }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom,
      background: HH.surface,
      borderTopLeftRadius: 24, borderTopRightRadius: 24,
      boxShadow: '0 -10px 30px rgba(20,15,8,0.10)',
      paddingTop: 10, paddingBottom: 16,
      ...style,
    }}>
      <div style={{ width: 40, height: 4, borderRadius: 2, background: HH.hairline, margin: '0 auto 12px' }} />
      {children}
    </div>
  );
}

// ─────────────── section label ───────────────
function HHLabel({ children, action, style = {} }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 20px 10px', ...style,
    }}>
      <div style={{
        fontSize: 11, fontFamily: HH.fontMono, fontWeight: 500,
        color: HH.muted, letterSpacing: 0.8, textTransform: 'uppercase',
      }}>{children}</div>
      {action && <div style={{ fontSize: 12, color: HH.accentDark, fontWeight: 500 }}>{action}</div>}
    </div>
  );
}

// ─────────────── list row ───────────────
function HHRow({ left, title, sub, right, onClick, divider = true, style = {} }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 20px', background: HH.surface,
      borderBottom: divider ? `1px solid ${HH.hairline2}` : 'none',
      cursor: onClick ? 'pointer' : 'default', ...style,
    }}>
      {left}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2, lineHeight: 1.3 }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: HH.muted, marginTop: 2, lineHeight: 1.4 }}>{sub}</div>}
      </div>
      {right && <div style={{ fontSize: 13, color: HH.ink2 }}>{right}</div>}
    </div>
  );
}

// ─────────────── toggle (segmented) ───────────────
function HHSeg({ options, active, onChange }) {
  return (
    <div style={{
      display: 'inline-flex', background: HH.surfaceAlt, borderRadius: HH.r.pill, padding: 3,
    }}>
      {options.map((opt, i) => (
        <div key={i} onClick={() => onChange && onChange(opt)} style={{
          padding: '6px 14px', borderRadius: HH.r.pill, fontSize: 12, fontWeight: 600,
          background: opt === active ? HH.surface : 'transparent',
          color: opt === active ? HH.ink : HH.muted,
          boxShadow: opt === active ? HH.shadow1 : 'none',
          cursor: 'pointer', transition: 'all 0.15s',
        }}>{opt}</div>
      ))}
    </div>
  );
}

// ─────────────── stars row ───────────────
function HHStars({ rating = 5, size = 13, color = HH.warning }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 1, color }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <StarIcon key={i} fill={i < Math.floor(rating) ? color : 'none'} />
      ))}
    </span>
  );
}

// ─────────────── copy tone dictionary ───────────────
// All user-facing copy that varies by tone goes here. Pass tone to copy().
const COPY = {
  // primary CTA on home / new request
  cta_new_request:     { neutral: 'New request',       friendly: 'Get help',           playful: "What's up?" },
  cta_find_helper:     { neutral: 'Find a helper',     friendly: 'Match me with a helper', playful: 'Send me a hero' },
  cta_book_now:        { neutral: 'Book now',          friendly: "Let's go",            playful: 'Make it happen' },
  cta_open_bids:       { neutral: 'Open to all helpers', friendly: 'Cast a wider net',  playful: 'Let everyone try' },
  // section heads
  smart_picks_title:   { neutral: 'Your top matches',  friendly: 'Three great helpers for this',   playful: 'Three good eggs we picked' },
  smart_picks_sub:     { neutral: 'Ranked by fit, distance and availability.',
                          friendly: "Closest fit first — these folks have done this kind of job before.",
                          playful: "Vetted, nearby, and probably already grabbing their toolbelt." },
  home_greet:          { neutral: 'Welcome back',      friendly: 'Hey there',           playful: 'Yo!' },
  home_prompt:         { neutral: 'What do you need set up?', friendly: 'What can we help with today?', playful: "What's on the to-do?" },
  complete_title:      { neutral: 'Job complete',      friendly: 'All done!',           playful: 'Nailed it.' },
  complete_thanks:     { neutral: 'Thanks for using Task Near.', friendly: 'Hope that went well — thanks!', playful: 'High five from us 🙌' },
  // empty
  empty_requests:      { neutral: 'No requests yet',   friendly: 'Nothing here yet',    playful: 'Crickets…' },
  empty_requests_sub:  { neutral: 'Your jobs will appear here once you post one.',
                          friendly: 'Post your first request and we’ll match you with someone great.',
                          playful: 'Post something. Anything. Try us.' },
};
function copy(key, tone = 'neutral') {
  const e = COPY[key];
  return (e && (e[tone] || e.neutral)) || key;
}

// ─────────────── export ───────────────
Object.assign(window, {
  HH, HHPhone, HHAvatar, HHPhoto, HHBtn, HHPill, HHCard,
  HHTopBar, HHTabBar, HHMap, HHSheet, HHLabel, HHRow, HHSeg, HHStars,
  BackIcon, CloseIcon, MenuIcon, SearchIcon, PlusIcon, ChevIcon,
  MsgIcon, PhoneIcon, CamIcon, MicIcon, PinIcon, ClockIcon, CheckIcon,
  StarIcon, BoltIcon, SettIcon, HomeIcon, InboxIcon, UserIcon, BellIcon,
  ShareIcon, CardIcon, HeartIcon, Ico,
  COPY, copy,
});


//===========

// HomeHelp · Flow 1: Onboarding → Cold-start home → Describe

// ═══════════════════════════════════════════════════════
// 01 · Welcome (onboarding entry)
// ═══════════════════════════════════════════════════════
function HH_S_Welcome({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '32px 28px 0' }}>
        {/* logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'auto' }}>
          <div style={{
            width: 32, height: 32, borderRadius: 9,
            background: HH.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
          }}>
            <Ico d="M3 12L12 3l9 9 M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10" size={18} sw={2} />
          </div>
          <span style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.5 }}>Task Near</span>
        </div>

        {/* hero photo */}
        <HHPhoto seed="welcome-hero" h={300} r={20} label="" style={{ marginTop: 28 }} />

        <div style={{ marginTop: 28 }}>
          <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: -1, lineHeight: 1.1, margin: 0 }}>
            Help with home setup,<br/>
            <span style={{ color: HH.accent }}>from someone close by.</span>
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.5, color: HH.muted, marginTop: 14, marginBottom: 0 }}>
            Furniture, TVs, appliances. Verified helpers in your neighborhood, usually within the hour.
          </p>
        </div>

        <div style={{ marginTop: 'auto', marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <HHBtn variant="primary" size="lg">{copy('cta_new_request', tone)}</HHBtn>
          <HHBtn variant="ghost" size="md">I want to help people →</HHBtn>
          <div style={{ textAlign: 'center', fontSize: 12, color: HH.muted, marginTop: 4 }}>
            Have an account? <span style={{ color: HH.ink, fontWeight: 500 }}>Sign in</span>
          </div>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 02 · Location permission
// ═══════════════════════════════════════════════════════
function HH_S_Location({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Your location" left="back" right={<span>Skip</span>} />
        <HHMap h={300} you label="finding helpers near you…" style={mapStyle} />
        <div style={{ padding: '20px 24px 0', flex: 1 }}>
          <div style={{ fontSize: 12, fontFamily: HH.fontMono, color: HH.muted, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>Home address</div>
          <HHCard style={{ padding: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <PinIcon/>
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>2418 Linden Ave, 4B</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 1 }}>Brooklyn, NY 11215</div>
              </div>
            </div>
            <span style={{ color: HH.muted }}><ChevIcon/></span>
          </HHCard>

          <div style={{ marginTop: 14, padding: '12px 14px', background: HH.trustSoft, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ flexShrink: 0, color: HH.trust, marginTop: 1 }}><Ico d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13z M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" size={18} sw={1.8}/></div>
            <div style={{ fontSize: 12, color: HH.ink2, lineHeight: 1.5 }}>
              Your address is only shared with the helper you book — never visible to other helpers in matching.
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 24px 24px' }}>
          <HHBtn variant="primary" size="lg">Use this location</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 03 · Cold-start home (no past requests)
// ═══════════════════════════════════════════════════════
function HH_S_HomeCold({ tone = 'neutral', mapStyle = 'streets' }) {
  const cats = [
    { ic: '🛋', label: 'Furniture' },
    { ic: '📺', label: 'TV mount' },
    { ic: '🧺', label: 'Appliance' },
    { ic: '🔧', label: 'Small fix' },
    { ic: '📦', label: 'Unpack' },
    { ic: '＋', label: 'Other' },
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 64 }}>
        <div style={{ padding: '8px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 13, color: HH.muted }}>{copy('home_greet', tone)}, Alex</div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6, marginTop: 2 }}>{copy('home_prompt', tone)}</div>
          </div>
          <HHAvatar name="Alex Reyes" size={42} />
        </div>

        {/* search bar */}
        <div style={{ padding: '16px 20px 0' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            height: 48, padding: '0 16px',
            background: HH.surface, borderRadius: 24,
            border: `1px solid ${HH.hairline}`,
            boxShadow: HH.shadow1,
          }}>
            <span style={{ color: HH.muted }}><SearchIcon/></span>
            <span style={{ fontSize: 14, color: HH.muted, flex: 1 }}>Describe what you need…</span>
            <span style={{ width: 28, height: 28, borderRadius: 14, background: HH.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MicIcon/>
            </span>
          </div>
        </div>

        <HHLabel>Categories</HHLabel>
        <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {cats.map((c, i) => (
            <HHCard key={i} style={{ padding: '16px 8px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, minHeight: 96 }}>
              <div style={{ fontSize: 28, lineHeight: 1 }}>{c.ic}</div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: -0.1 }}>{c.label}</div>
            </HHCard>
          ))}
        </div>

        <HHLabel>Helpers near you · 12</HHLabel>
        <div style={{ padding: '0 20px' }}>
          <HHCard style={{ overflow: 'hidden' }}>
            <HHMap h={120} pins={4} you label="0.4 mi avg" style={mapStyle} />
          </HHCard>
        </div>

        <HHLabel>Get inspired</HHLabel>
        <div style={{ padding: '0 20px 16px', display: 'flex', gap: 10, overflow: 'hidden' }}>
          {[
            { seed: 'tv',   t: 'Mount a TV',           p: 'from $80' },
            { seed: 'pax',  t: 'Build an IKEA wardrobe', p: 'from $45' },
            { seed: 'desk', t: 'Standing desk',        p: 'from $40' },
          ].map((c, i) => (
            <HHCard key={i} style={{ width: 160, flexShrink: 0, overflow: 'hidden' }}>
              <HHPhoto seed={c.seed} h={90} r={0} />
              <div style={{ padding: '10px 12px 12px' }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{c.t}</div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 2 }}>{c.p}</div>
              </div>
            </HHCard>
          ))}
        </div>
      </div>
      <HHTabBar active={0} />
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 04 · Describe (free-text new request)
// ═══════════════════════════════════════════════════════
function HH_S_Describe({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="New request" left="close" />

        <div style={{ padding: '8px 20px 0', flex: 1, overflow: 'auto' }}>
          <div style={{ fontSize: 11, fontFamily: HH.fontMono, color: HH.muted, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 10 }}>Tell us what you need</div>

          <HHCard style={{ padding: 14, minHeight: 120 }}>
            <div style={{ fontSize: 15.5, lineHeight: 1.55, color: HH.ink }}>
              Need help assembling an <span style={{ background: HH.accentSoft, padding: '1px 4px', borderRadius: 3 }}>IKEA Pax wardrobe</span> in my bedroom tonight. Boxes already inside.
              <span style={{ display: 'inline-block', width: 2, height: 18, background: HH.ink, marginLeft: 1, verticalAlign: -4, animation: 'hhBlink 1.1s steps(2) infinite' }} />
            </div>
            <style>{'@keyframes hhBlink{50%{opacity:0}}'}</style>
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <button style={chipBtn}><CamIcon/> Photo</button>
              <button style={chipBtn}><MicIcon/> Voice</button>
              <button style={chipBtn}><PinIcon/> Pin a spot</button>
            </div>
          </HHCard>

          {/* auto-detected — quiet AI, no sparkle */}
          <HHCard style={{ marginTop: 14, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, background: HH.surface, border: `1px solid ${HH.hairline}` }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>🛋</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: HH.muted }}>Looks like</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Furniture · about 60 min · ~$45</div>
            </div>
            <span style={{ fontSize: 12, color: HH.accentDark, fontWeight: 500 }}>Change</span>
          </HHCard>

          <HHLabel>Details</HHLabel>
          <HHCard>
            <HHRow
              left={<div style={{ color: HH.muted }}><ClockIcon/></div>}
              title="When"
              right={<span style={{ display: 'flex', alignItems: 'center', gap: 4, color: HH.ink2 }}>Today, after 6 PM <ChevIcon/></span>}
            />
            <HHRow
              left={<div style={{ color: HH.muted }}><PinIcon/></div>}
              title="Address"
              right={<span style={{ display: 'flex', alignItems: 'center', gap: 4, color: HH.ink2 }}>2418 Linden Ave <ChevIcon/></span>}
            />
            <HHRow
              left={<div style={{ color: HH.muted }}><CardIcon/></div>}
              title="Budget cap"
              right={<span style={{ display: 'flex', alignItems: 'center', gap: 4, color: HH.ink2 }}>$80 <ChevIcon/></span>}
              divider={false}
            />
          </HHCard>

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

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

const chipBtn = {
  height: 32, padding: '0 12px', borderRadius: 16,
  background: HH.surfaceAlt, color: HH.ink2, border: 'none',
  display: 'inline-flex', alignItems: 'center', gap: 6,
  fontSize: 12, fontWeight: 500, fontFamily: HH.fontSans, cursor: 'pointer',
};

// ═══════════════════════════════════════════════════════
// 05 · Finding helpers (loading state, brief)
// ═══════════════════════════════════════════════════════
function HH_S_Finding({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', position: 'relative' }}>
        <HHTopBar title="" left="close" transparent />

        <div style={{ position: 'absolute', inset: '48px 0 0 0' }}>
          <HHMap h="100%" pins={3} you label="searching within 2 mi" style={mapStyle} />
        </div>

        <HHSheet bottom={0} style={{ paddingBottom: 28 }}>
          <div style={{ padding: '0 24px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 18,
                border: `3px solid ${HH.accent}`, borderTopColor: 'transparent',
                animation: 'hhSpin 1s linear infinite',
              }} />
              <style>{'@keyframes hhSpin{to{transform:rotate(360deg)}}'}</style>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>Finding three great helpers</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>Checking availability now…</div>
              </div>
            </div>

            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['Verified helpers nearby', '12 within 2 mi'],
                ['Available for your time', 'Today after 6 PM'],
                ['Recent Pax assembly experience', 'filtered'],
              ].map(([l, v], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
                  <div style={{ width: 20, height: 20, borderRadius: 10, background: HH.trust, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <CheckIcon/>
                  </div>
                  <span style={{ flex: 1 }}>{l}</span>
                  <span style={{ color: HH.muted, fontSize: 12 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </HHSheet>
      </div>
    </HHPhone>
  );
}

Object.assign(window, { HH_S_Welcome, HH_S_Location, HH_S_HomeCold, HH_S_Describe, HH_S_Finding });


//===========

// 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 });


//===========

// 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 });


//===========

// HomeHelp · Flow 4: My requests dashboard → Notifications → Settings

// ═══════════════════════════════════════════════════════
// 13 · My requests dashboard
// ═══════════════════════════════════════════════════════
function HH_S_Dashboard({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Requests</h1>
          <button style={{
            width: 40, height: 40, borderRadius: 20, background: HH.ink, color: '#fff',
            border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}><PlusIcon/></button>
        </div>

        <div style={{ padding: '12px 20px 0', display: 'flex', gap: 0, borderBottom: `1px solid ${HH.hairline2}` }}>
          {['Active', 'Scheduled', 'Past'].map((t, i) => (
            <div key={i} style={{
              padding: '12px 14px',
              borderBottom: i === 0 ? `2px solid ${HH.ink}` : '2px solid transparent',
              marginBottom: -1,
              fontSize: 13, fontWeight: i === 0 ? 700 : 500,
              color: i === 0 ? HH.ink : HH.muted, cursor: 'pointer',
            }}>{t}</div>
          ))}
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {/* Active card */}
          <div style={{ padding: '14px 20px 0' }}>
            <HHCard style={{ overflow: 'hidden' }}>
              <div style={{ padding: '12px 14px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <HHPill size="sm" variant="accent" icon={<span style={{ width: 6, height: 6, borderRadius: 3, background: HH.accent }} />}>
                  &nbsp;En route · arriving 7:42 PM
                </HHPill>
                <span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>HH-4892-31</span>
              </div>
              <div style={{ display: 'flex', gap: 12, padding: '0 14px 14px' }}>
                <HHPhoto seed="pax-job" h={70} w={70} r={10} label="" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>IKEA Pax wardrobe</div>
                  <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>Today, 7:00 PM · $48</div>
                  <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <HHAvatar name="Marcus Thompson" size={20} />
                    <span style={{ fontSize: 12, color: HH.ink2 }}>Marcus T.</span>
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 0, borderTop: `1px solid ${HH.hairline2}` }}>
                <button style={dashAction}><MsgIcon size={16}/> Message</button>
                <button style={{ ...dashAction, borderLeft: `1px solid ${HH.hairline2}` }}>Track ›</button>
              </div>
            </HHCard>
          </div>

          <HHLabel>Up next</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📺</div>}
            title="65″ TV wall-mount"
            sub="Tomorrow, 10:00 AM · helper TBD"
            right={<HHPill size="sm">Sched</HHPill>}
            onClick={() => {}}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🪴</div>}
            title="Living room rearrange"
            sub="Sat, May 24 · 2 helpers"
            right={<HHPill size="sm">Sched</HHPill>}
            onClick={() => {}}
          />

          <HHLabel>Recently completed</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🧺</div>}
            title="Washer hookup"
            sub={<><span>Priya S. · </span><HHStars rating={5} size={10}/><span> · 30 min</span></>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.ink2 }}>$62</span>}
            onClick={() => {}}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🔧</div>}
            title="Curtain rods × 3"
            sub={<><span>Marcus T. · </span><HHStars rating={4} size={10}/><span> · 45 min</span></>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.ink2 }}>$40</span>}
            onClick={() => {}}
            divider={false}
          />
          <div style={{ height: 80 }} />
        </div>

        <HHTabBar active={2} />
      </div>
    </HHPhone>
  );
}

const dashAction = {
  flex: 1, padding: '12px 0', background: 'transparent', border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
  fontSize: 13, fontWeight: 600, color: HH.ink, cursor: 'pointer', fontFamily: HH.fontSans,
};

// ═══════════════════════════════════════════════════════
// 14 · Notifications inbox
// ═══════════════════════════════════════════════════════
function HH_S_Notifications({ tone = 'neutral' }) {
  const notifs = [
    { d: HH.accent, t: 'Marcus is arriving', s: 'IKEA Pax · 2418 Linden Ave, 4B', when: 'now', read: false },
    { d: HH.accent, t: 'Marcus accepted your request', s: 'ETA 8 min · $48 fixed', when: '5m', read: false },
    { d: HH.trust,  t: 'Booking confirmed', s: 'Sat, May 24 · Living room rearrange', when: '2h', read: false },
    { d: null,      t: 'Rate Priya S.', s: 'Washer hookup · 3 days ago', when: '3d', read: true },
    { d: null,      t: '$10 credit added', s: 'Referral bonus — Jamie joined!', when: '1w', read: true },
    { d: null,      t: 'New helper joined your area', s: 'Tomás R. · ★ 5.0 · 0.6 mi', when: '1w', read: true },
    { d: null,      t: 'Your saved helper is online', s: 'Marcus T. is available tonight', when: '2w', read: true },
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Inbox</h1>
          <button style={{
            padding: '8px 12px', borderRadius: 14, background: HH.surfaceAlt, border: 'none',
            fontSize: 12, fontWeight: 600, color: HH.ink, cursor: 'pointer',
          }}>Mark all read</button>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          <HHLabel>Today</HHLabel>
          {notifs.filter(n => !n.read).map((n, i) => (
            <HHRow key={i}
              left={
                <div style={{ position: 'relative' }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 18,
                    background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: n.d || HH.muted,
                  }}>
                    {n.t.includes('arriv') ? <PinIcon/> : n.t.includes('accept') ? <CheckIcon/> : <BellIcon/>}
                  </div>
                  {n.d && <div style={{ position: 'absolute', right: -2, top: -2, width: 10, height: 10, borderRadius: 5, background: n.d, border: '2px solid #fff' }} />}
                </div>
              }
              title={n.t}
              sub={n.s}
              right={<span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>{n.when}</span>}
            />
          ))}

          <HHLabel>Earlier</HHLabel>
          {notifs.filter(n => n.read).map((n, i) => (
            <HHRow key={i}
              left={
                <div style={{
                  width: 36, height: 36, borderRadius: 18,
                  background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: HH.muted,
                }}>
                  {n.t.includes('credit') ? <CardIcon/> : n.t.includes('joined') ? <UserIcon/> : n.t.includes('saved') ? <HeartIcon/> : <BellIcon/>}
                </div>
              }
              title={n.t}
              sub={n.s}
              right={<span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>{n.when}</span>}
            />
          ))}
          <div style={{ height: 80 }} />
        </div>
        <HHTabBar active={3} />
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 15 · Settings + Saved helpers + Payment
// ═══════════════════════════════════════════════════════
function HH_S_Settings({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '20px 20px 0' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>You</h1>
        </div>

        <div style={{ flex: 1, overflow: 'auto', paddingBottom: 80 }}>
          {/* profile card */}
          <div style={{ padding: '16px 20px 0' }}>
            <HHCard style={{ padding: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
              <HHAvatar name="Alex Reyes" size={56} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Alex Reyes</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>alex@reyes.email · 7 bookings</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>
          </div>

          <HHLabel>Saved helpers · 3</HHLabel>
          <div style={{ padding: '0 20px', display: 'flex', gap: 10, overflow: 'auto' }}>
            {[
              { n: 'Marcus T.', r: 4.9 },
              { n: 'Priya S.',  r: 4.8 },
              { n: 'Aisha B.',  r: 4.9 },
            ].map((p, i) => (
              <HHCard key={i} style={{
                width: 132, flexShrink: 0, padding: '14px 12px', textAlign: 'center',
              }}>
                <HHAvatar name={p.n} size={52} verified style={{ margin: '0 auto' }} />
                <div style={{ fontSize: 13, fontWeight: 600, marginTop: 8 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 2 }}>★ {p.r}</div>
                <button style={{
                  marginTop: 8, padding: '5px 10px', borderRadius: 12,
                  background: HH.ink, color: '#fff', border: 'none',
                  fontSize: 11, fontWeight: 600, cursor: 'pointer',
                }}>Request</button>
              </HHCard>
            ))}
            <div style={{
              width: 132, flexShrink: 0, borderRadius: 14,
              border: `1px dashed ${HH.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: HH.muted, fontSize: 12, fontWeight: 500,
            }}>＋ Add</div>
          </div>

          <HHLabel>Payment methods</HHLabel>
          <HHRow
            left={
              <div style={{ width: 44, height: 28, borderRadius: 4, background: 'linear-gradient(135deg, #2A4D8F, #5B86E5)', position: 'relative' }}>
                <div style={{ position: 'absolute', bottom: 3, left: 4, width: 16, height: 4, background: 'rgba(255,255,255,0.4)', borderRadius: 1 }} />
              </div>
            }
            title="Visa •••• 4242"
            sub="Default · expires 09/27"
            right={<ChevIcon/>}
          />
          <HHRow
            left={
              <div style={{ width: 44, height: 28, borderRadius: 4, background: HH.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 9, fontWeight: 700 }}>Pay</div>
            }
            title="Apple Pay"
            sub="iPhone"
            right={<ChevIcon/>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 28, borderRadius: 4, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.muted }}><PlusIcon/></div>}
            title="Add payment method"
            sub="Card · Apple Pay · Google Pay"
            right={<ChevIcon/>}
            divider={false}
          />

          <HHLabel>Addresses</HHLabel>
          <HHRow
            left={<div style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><HomeIcon/></div>}
            title="Home"
            sub="2418 Linden Ave, 4B · Brooklyn"
            right={<ChevIcon/>}
          />
          <HHRow
            left={<div style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><PlusIcon/></div>}
            title="Add an address"
            divider={false}
          />

          <HHLabel>Account</HHLabel>
          <HHRow left={<div style={iconSlot}><BellIcon/></div>} title="Notifications" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><Ico d="M12 17v.01 M12 14a3 3 0 1 0-3-3 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z"/></div>} title="Help & support" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><Ico d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5"/></div>} title="Become a helper" sub="Verify ID, earn nearby" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><SettIcon/></div>} title="Settings" right={<ChevIcon/>} divider={false} />
        </div>

        <HHTabBar active={4} />
      </div>
    </HHPhone>
  );
}

const iconSlot = {
  width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt,
  display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.muted,
};

Object.assign(window, { HH_S_Dashboard, HH_S_Notifications, HH_S_Settings });


//===========

// HomeHelp · Flow 5: Edge cases + Helper-side

// ═══════════════════════════════════════════════════════
// 16 · Edge: no helpers found nearby
// ═══════════════════════════════════════════════════════
function HH_S_NoHelpers({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="" left="close" transparent />

        <div style={{ padding: '0 24px 16px' }}>
          <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, margin: 0, lineHeight: 1.15 }}>
            No helpers available<br/>for your time slot.
          </h1>
          <p style={{ fontSize: 14, color: HH.muted, marginTop: 10, lineHeight: 1.5 }}>
            We checked everyone within 2 miles. Try one of these and we'll match you instead.
          </p>
        </div>

        <div style={{ flex: 1, padding: '0 20px', overflow: 'auto' }}>
          <HHCard style={{ overflow: 'hidden' }}>
            <HHMap h={140} you label="2 mi radius checked" style={mapStyle} />
            <div style={{ padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12 }}>
              <span style={{ color: HH.muted }}>12 helpers · all booked</span>
              <span style={{ fontFamily: HH.fontMono, color: HH.muted }}>checked 11s ago</span>
            </div>
          </HHCard>

          <HHLabel>Try one of these</HHLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <ClockIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Pick a later time</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>3 helpers free tomorrow morning</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>

            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <PinIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Widen the radius</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>2 → 5 mi · adds 8 helpers · ETA up to 30 min more</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>

            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Ico d="M3 6h18 M3 12h18 M3 18h18" sw={2}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{copy('cta_open_bids', tone)}</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>Helpers will bid · usually within 15 min</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>
          </div>

          <div style={{ marginTop: 16, padding: '12px 14px', background: HH.surfaceAlt, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ color: HH.muted, marginTop: 1 }}><BellIcon/></div>
            <div style={{ fontSize: 12, color: HH.ink2, lineHeight: 1.5, flex: 1 }}>
              Or — we'll text you the moment a helper opens up in your time slot.
              <div style={{ marginTop: 6 }}>
                <button style={{ fontSize: 12, fontWeight: 600, color: HH.accentDark, background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
                  Notify me ✓
                </button>
              </div>
            </div>
          </div>

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

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="ghost" size="md">Edit my request</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 17 · Edge: scheduled for later (next week)
// ═══════════════════════════════════════════════════════
function HH_S_Scheduled({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Pick a time" left="back" />

        <div style={{ padding: '4px 20px 0' }}>
          <div style={{ fontSize: 13, color: HH.muted, lineHeight: 1.5 }}>
            Living room rearrange · 2 helpers · est. 2 hours
          </div>
        </div>

        {/* week strip */}
        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <span style={{ fontSize: 15, fontWeight: 700 }}>May 2026</span>
            <div style={{ display: 'flex', gap: 4 }}>
              <button style={navBtn}><Ico d="M15 6l-6 6 6 6" size={14}/></button>
              <button style={navBtn}><ChevIcon/></button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
            {[
              { d: 'Mon', n: 19, today: true,  free: 0 },
              { d: 'Tue', n: 20, free: 2 },
              { d: 'Wed', n: 21, free: 3 },
              { d: 'Thu', n: 22, free: 1 },
              { d: 'Fri', n: 23, free: 4 },
              { d: 'Sat', n: 24, free: 6, sel: true },
              { d: 'Sun', n: 25, free: 5 },
            ].map((c, i) => (
              <button key={i} style={{
                background: c.sel ? HH.ink : 'transparent',
                color: c.sel ? '#fff' : HH.ink,
                border: c.today && !c.sel ? `1.5px solid ${HH.accent}` : `1px solid ${HH.hairline2}`,
                borderRadius: 12, padding: '10px 0 8px', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}>
                <div style={{ fontSize: 10, opacity: 0.7, fontFamily: HH.fontMono, letterSpacing: 0.4 }}>{c.d.toUpperCase()}</div>
                <div style={{ fontSize: 17, fontWeight: 700, fontFamily: HH.fontMono }}>{c.n}</div>
                <div style={{ fontSize: 9, color: c.sel ? 'rgba(255,255,255,0.7)' : c.free === 0 ? HH.muted : HH.trust, fontFamily: HH.fontMono }}>
                  {c.free === 0 ? 'full' : c.free + ' free'}
                </div>
              </button>
            ))}
          </div>
        </div>

        <HHLabel>Saturday, May 24</HHLabel>
        <div style={{ flex: 1, overflow: 'auto', padding: '0 20px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {[
              ['8:00 AM', 6, false],
              ['9:00 AM', 4, false],
              ['10:00', 5, false],
              ['11:00', 3, false],
              ['12:00 PM', 2, false],
              ['1:00 PM', 4, true],
              ['2:00 PM', 6, false],
              ['3:00 PM', 5, false],
              ['4:00 PM', 3, false],
            ].map(([t, n, sel], i) => (
              <button key={i} style={{
                padding: '12px 0', textAlign: 'center', borderRadius: 12,
                border: `1px solid ${sel ? HH.accent : HH.hairline2}`,
                background: sel ? HH.accentSoft : HH.surface,
                cursor: 'pointer',
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, fontFamily: HH.fontMono, color: sel ? HH.accentDark : HH.ink }}>{t}</div>
                <div style={{ fontSize: 10, color: sel ? HH.accentDark : HH.muted, marginTop: 2 }}>{n} helpers</div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 16, padding: '12px 14px', background: HH.surfaceAlt, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ color: HH.muted, marginTop: 1 }}><ClockIcon/></div>
            <div style={{ fontSize: 12, color: HH.ink2, lineHeight: 1.5 }}>
              We'll match you with a helper <b style={{ color: HH.ink }}>2 hours before</b> your time. You can cancel free until then.
            </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">Schedule for Sat, 1:00 PM</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

const navBtn = {
  width: 32, height: 32, borderRadius: 16, background: HH.surfaceAlt, border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.ink, cursor: 'pointer',
};

// ═══════════════════════════════════════════════════════
// 18 · Open-to-all-bids fallback
// ═══════════════════════════════════════════════════════
function HH_S_OpenBids({ tone = 'neutral' }) {
  const bids = [
    { name: 'Marcus Thompson', short: 'Marcus T.', price: 48, eta: '45 min', rate: 4.9, jobs: 312, note: 'Pax pro — 80+ done. Have all tools.', best: true },
    { name: 'Priya Shah', short: 'Priya S.', price: 55, eta: 'now', rate: 4.8, jobs: 188, note: 'Free right now, can be there in 25 min.' },
    { name: 'Aisha Brooks', short: 'Aisha B.', price: 50, eta: '1 hr', rate: 4.9, jobs: 201, note: 'Done lots of bedroom assemblies.' },
    { name: 'Jordan Kim', short: 'Jordan K.', price: 42, eta: '90 min', rate: 4.7, jobs: 94, note: 'Best price, cordless drill included.' },
    { name: 'Tomás Reyes', short: 'Tomás R.', price: 65, eta: '2 hr', rate: 5.0, jobs: 46, note: 'Newer, perfect rating so far.' },
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="" left="back" right={<span>Sort</span>} />
        <div style={{ padding: '0 20px 8px' }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6 }}>5 bids in 12 min</div>
          <div style={{ fontSize: 12, color: HH.muted, marginTop: 4 }}>IKEA Pax wardrobe · your budget $42–$80</div>

          {/* live indicator */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: HH.trust, animation: 'hhPulse2 1.4s infinite' }} />
            <style>{'@keyframes hhPulse2{0%,100%{opacity:1}50%{opacity:.3}}'}</style>
            <span style={{ fontSize: 11, color: HH.trust, fontWeight: 600 }}>Still accepting bids</span>
            <span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>· closes in 3 min</span>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {bids.map((b, i) => (
            <div key={i} style={{
              display: 'flex', gap: 12, padding: '14px 20px',
              borderBottom: `1px solid ${HH.hairline2}`,
              background: b.best ? HH.accentSoft + '99' : HH.surface,
              position: 'relative',
            }}>
              <HHAvatar name={b.name} size={48} verified />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>{b.short}</span>
                  <span style={{ fontFamily: HH.fontMono, fontSize: 17, fontWeight: 700, letterSpacing: -0.4 }}>${b.price}</span>
                </div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 2, fontFamily: HH.fontMono }}>
                  ★ {b.rate} · {b.jobs} jobs · can start in {b.eta}
                </div>
                <div style={{ fontSize: 12.5, color: HH.ink2, marginTop: 6, lineHeight: 1.4 }}>
                  "{b.note}"
                </div>
              </div>
              {b.best && (
                <div style={{
                  position: 'absolute', right: 12, top: 12,
                  background: HH.ink, color: '#fff',
                  fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 3,
                  fontFamily: HH.fontMono, letterSpacing: 0.4,
                }}>RECOMMENDED</div>
              )}
            </div>
          ))}
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}`, display: 'flex', gap: 10 }}>
          <HHBtn variant="ghost" size="md" full={false} style={{ flex: 1 }}>Wait for more</HHBtn>
          <HHBtn variant="primary" size="md" style={{ flex: 1.4 }}>Accept Marcus · $48</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 19 · Helper · Online + incoming smart-match jobs
// ═══════════════════════════════════════════════════════
function HH_S_HelperHome({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <HHMap h="100%" pins={3} you label="2 matches near you" style={mapStyle} />
        </div>

        {/* top status */}
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16 }}>
          <HHCard style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <HHAvatar name="Marcus Thompson" size={36} verified />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>You're online</div>
              <div style={{ fontSize: 11, color: HH.muted, marginTop: 1, fontFamily: HH.fontMono }}>
                TODAY · $186 · 3 JOBS · ★ 4.9
              </div>
            </div>
            <div style={{
              width: 52, height: 30, borderRadius: 15, background: HH.trust,
              position: 'relative', boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.1)',
            }}>
              <div style={{
                position: 'absolute', top: 2, right: 2, width: 26, height: 26, borderRadius: 13,
                background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
              }} />
            </div>
          </HHCard>
        </div>

        <HHSheet bottom={64} style={{ paddingBottom: 14 }}>
          <div style={{ padding: '0 20px' }}>
            <div style={{
              fontSize: 11, fontFamily: HH.fontMono, color: HH.muted,
              letterSpacing: 0.6, textTransform: 'uppercase',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8,
            }}>
              <span>Matched to you · 2 open</span>
              <span style={{ color: HH.accent }}>Live</span>
            </div>

            {[
              { ic: '🛋', t: 'IKEA Pax wardrobe', by: 'Alex R.', d: '0.3 mi', dur: '60 min', price: 48, urgent: true, decline: '0:42' },
              { ic: '📺', t: '65″ TV wall mount', by: 'Sam K.', d: '1.2 mi', dur: '45 min', price: 80, urgent: false },
            ].map((j, i) => (
              <div key={i} style={{
                padding: '12px 0', display: 'flex', gap: 12, alignItems: 'center',
                borderTop: i ? `1px solid ${HH.hairline2}` : 'none',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 10,
                  background: j.urgent ? HH.accent : HH.surfaceAlt,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, position: 'relative',
                }}>{j.ic}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2 }}>{j.t}</div>
                  <div style={{ fontSize: 11.5, color: HH.muted, marginTop: 2 }}>{j.by} · {j.d} · {j.dur}</div>
                  {j.decline && <div style={{ fontSize: 10, color: HH.accentDark, marginTop: 4, fontFamily: HH.fontMono }}>auto-decline in {j.decline}</div>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 17, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -0.4 }}>${j.price}</div>
                  <button style={{
                    marginTop: 4, padding: '6px 14px', borderRadius: 14,
                    background: HH.ink, color: '#fff', border: 'none', fontSize: 11.5, fontWeight: 700, cursor: 'pointer',
                  }}>Accept</button>
                </div>
              </div>
            ))}
          </div>
        </HHSheet>

        <HHTabBar active={0} helper />
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 20 · Helper · Job detail
// ═══════════════════════════════════════════════════════
function HH_S_HelperJob({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Job from Alex R." left="close" right={<span style={{ color: HH.accentDark, fontWeight: 600 }}>0:42</span>} />

        <div style={{ flex: 1, overflow: 'auto' }}>
          <HHPhoto seed="pax-job" h={180} r={0} label="POSTER'S PHOTO · 1 OF 2" />

          <div style={{ padding: '16px 20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.4 }}>IKEA Pax wardrobe</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 4 }}>
                  3-door · boxes in bedroom · ~60 min
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 22, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -0.5 }}>$48</div>
                <div style={{ fontSize: 10, color: HH.muted, fontFamily: HH.fontMono }}>fixed</div>
              </div>
            </div>

            <div style={{ marginTop: 14, padding: 12, background: HH.surfaceAlt, borderRadius: 10, fontSize: 13, color: HH.ink2, lineHeight: 1.5 }}>
              "3-door Pax, boxes already in bedroom. Tonight if possible. Apartment buzzer works."
            </div>

            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                [<ClockIcon/>, 'Today · 7:00 PM', 'starts in 22 min'],
                [<PinIcon/>, '2418 Linden Ave, 4B', '0.3 mi · drive ~4 min'],
                [<UserIcon/>, 'Alex R.', '★ 4.8 · 14 bookings'],
              ].map(([ic, t, s], i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderTop: i ? `1px dashed ${HH.hairline}` : 'none', alignItems: 'center' }}>
                  <span style={{ color: HH.muted }}>{ic}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{t}</div>
                    <div style={{ fontSize: 11, color: HH.muted }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>

            <HHLabel style={{ padding: '20px 0 8px' }}>Your earnings</HHLabel>
            <HHCard style={{ padding: 14 }}>
              {[
                ['Job price', '$48.00'],
                ['Platform fee (15%)', '−$7.20'],
              ].map(([l, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i === 0 ? `1px dashed ${HH.hairline}` : 'none', fontSize: 13 }}>
                  <span style={{ color: HH.muted }}>{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: 15, fontWeight: 700 }}>
                <span>You earn</span>
                <span style={{ fontFamily: HH.fontMono, letterSpacing: -0.4 }}>$40.80</span>
              </div>
            </HHCard>
          </div>
        </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 }}>Decline</HHBtn>
          <HHBtn variant="primary" size="lg" style={{ flex: 1.6 }}>Accept · drive 4 min</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 21 · Helper · Earnings
// ═══════════════════════════════════════════════════════
function HH_S_HelperEarnings({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Earnings</h1>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {/* big stat */}
          <div style={{ padding: '0 20px' }}>
            <HHSeg options={['Week', 'Month', 'Year']} active="Week" />

            <div style={{ marginTop: 20 }}>
              <div style={{ fontSize: 11, fontFamily: HH.fontMono, color: HH.muted, letterSpacing: 0.6, textTransform: 'uppercase' }}>This week</div>
              <div style={{ fontSize: 40, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -1.5, marginTop: 4, lineHeight: 1 }}>$612.40</div>
              <div style={{ fontSize: 12, color: HH.muted, marginTop: 6, display: 'flex', gap: 12 }}>
                <span>14 jobs</span>
                <span>·</span>
                <span>18.5 hrs</span>
                <span>·</span>
                <span style={{ color: HH.trust, fontWeight: 600 }}>+22% vs last wk</span>
              </div>
            </div>

            {/* chart */}
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'flex-end', gap: 8, height: 110 }}>
              {[
                { d: 'M', v: 0.45, val: 56 },
                { d: 'T', v: 0.60, val: 72 },
                { d: 'W', v: 0.30, val: 38 },
                { d: 'T', v: 0.80, val: 102 },
                { d: 'F', v: 0.50, val: 64 },
                { d: 'S', v: 0.95, val: 124, today: true },
                { d: 'S', v: 0.70, val: 88 },
              ].map((b, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 9, color: HH.muted, fontFamily: HH.fontMono }}>${b.val}</div>
                  <div style={{
                    width: '100%', height: `${b.v * 100}%`, minHeight: 6,
                    background: b.today ? HH.accent : HH.surfaceAlt,
                    border: `1px solid ${b.today ? HH.accent : HH.hairline}`,
                    borderRadius: 6,
                  }} />
                  <div style={{ fontSize: 10, color: HH.muted, fontFamily: HH.fontMono, fontWeight: b.today ? 700 : 400 }}>{b.d}</div>
                </div>
              ))}
            </div>
          </div>

          <HHLabel action="See all">Recent jobs</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🛋</div>}
            title="IKEA Pax wardrobe"
            sub={<span>Alex R. · <HHStars rating={5} size={10}/> · 58 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$40.80</span>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📺</div>}
            title="TV wall-mount"
            sub={<span>Sam K. · <HHStars rating={5} size={10}/> · 41 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$68.00</span>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🧺</div>}
            title="Washer hookup"
            sub={<span>Priya hand-off · 30 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$22.00</span>}
            divider={false}
          />

          <div style={{ padding: '20px', marginBottom: 80 }}>
            <HHCard style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 12, background: HH.trustSoft, border: `1px solid ${HH.trust}33` }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.trust, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <BoltIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Cash out · $612.40</div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 1 }}>Instant transfer · 1% fee</div>
              </div>
              <span style={{ color: HH.trust }}><ChevIcon/></span>
            </HHCard>
          </div>
        </div>

        <HHTabBar active={2} helper />
      </div>
    </HHPhone>
  );
}

Object.assign(window, { HH_S_NoHelpers, HH_S_Scheduled, HH_S_OpenBids, HH_S_HelperHome, HH_S_HelperJob, HH_S_HelperEarnings });