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