// Direction C — Browse Directory (Airbnb-style, map-first)
// You scroll/filter helpers, view profiles, request a specific one.

function C_MapBrowse() {
  return (
    <Phone>
      <div style={{ position:'relative', height:'100%' }}>
        <MapWF h={'100%'} pins={6} you label="" />
        {/* search overlay */}
        <div style={{ position:'absolute', left: 12, right: 12, top: 12 }}>
          <div style={{
            height: 44, borderRadius: 22, background: WF.paper, border:`1px solid ${WF.line}`,
            display:'flex', alignItems:'center', gap: 8, padding:'0 14px',
            boxShadow:'0 2px 10px rgba(0,0,0,0.06)',
          }}>
            <span>⌕</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>Furniture assembly</div>
              <div style={{ fontSize: 10, color: WF.muted }}>Within 2 mi · Today</div>
            </div>
            <div style={{ width: 28, height: 28, borderRadius: 14, border:`1px solid ${WF.line}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 12 }}>⚙</div>
          </div>
          <div style={{ display:'flex', gap: 6, marginTop: 8, overflow:'hidden' }}>
            <Pill active>★ 4.8+</Pill>
            <Pill>✓ Verified</Pill>
            <Pill>$ Under $60</Pill>
            <Pill>Available now</Pill>
          </div>
        </div>

        {/* bottom card stack */}
        <Sheet style={{ bottom: 52, padding: 12 }}>
          <div style={{ display:'flex', gap: 10, padding:'0 4px', overflow:'hidden' }}>
            {[
              { n:'Marcus T.', p:'$48', r:'4.9' },
              { n:'Priya S.',  p:'$55', r:'4.8' },
              { n:'Jordan K.', p:'$42', r:'4.7' },
            ].map((h, i) => (
              <div key={i} style={{
                minWidth: 170, border:`1px solid ${WF.line}`, borderRadius: 12, padding: 10,
                background: WF.paper,
              }}>
                <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                  <Avatar size={32} label={h.n[0]} verified />
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 700 }}>{h.n}</div>
                    <div style={{ fontSize: 10, color: WF.muted }}>★ {h.r} · {0.4 + i*0.5} mi</div>
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop: 8 }}>
                  <span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>FROM</span>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>{h.p}</span>
                </div>
              </div>
            ))}
          </div>
        </Sheet>

        {/* map / list toggle */}
        <div style={{
          position:'absolute', left:'50%', bottom: 120, transform:'translateX(-50%)',
          height: 36, padding:'0 14px', background: WF.ink, color:'#fff', borderRadius: 18,
          fontSize: 12, fontWeight: 600, display:'flex', alignItems:'center', gap: 6,
        }}>
          ☰ Show list
        </div>

        <BottomNav active={0} />
      </div>
    </Phone>
  );
}

function C_List() {
  const helpers = [
    { n:'Marcus T.',  s:'IKEA pro · TV mounts',     r:'4.9', j:312, d:'0.4 mi', p:'$48' },
    { n:'Priya S.',   s:'Appliance + plumbing',     r:'4.8', j:188, d:'1.1 mi', p:'$55' },
    { n:'Jordan K.',  s:'Furniture, shelving',      r:'4.7', j:94,  d:'1.6 mi', p:'$42' },
    { n:'Tomás R.',   s:'Cribs, baby gear',         r:'5.0', j:46,  d:'2.2 mi', p:'$65' },
    { n:'Aisha B.',   s:'Curtains, lights, decor',  r:'4.9', j:201, d:'0.9 mi', p:'$50' },
  ];
  return (
    <Phone>
      <TopBar title="Helpers near you" left="‹" right="⊞ map" sub="42 results · sorted by distance" />
      <div style={{ padding:'10px 16px', display:'flex', gap: 6, overflow:'hidden' }}>
        <Pill active>Furniture</Pill><Pill>★ 4.8+</Pill><Pill>Verified</Pill><Pill>≤ 1mi</Pill>
      </div>
      <div style={{ overflow:'hidden', height:'calc(100% - 100px - 60px)' }}>
        {helpers.map((h, i) => (
          <div key={i} style={{
            display:'flex', gap: 10, padding:'12px 16px', borderBottom:`1px solid ${WF.line2}`,
          }}>
            <div style={{ width: 60, height: 60, borderRadius: 10, background: WF.fill1, border:`1px solid ${WF.line}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22, color: WF.muted, position:'relative' }}>
              {h.n[0]}
              <div style={{
                position:'absolute', right: -3, bottom: -3,
                width: 16, height: 16, borderRadius: 8, background: WF.ink, color:'#fff',
                fontSize: 9, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center',
                border:'2px solid #fff',
              }}>✓</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <span style={{ fontWeight: 700, fontSize: 13 }}>{h.n}</span>
                <span style={{ fontSize: 14, fontWeight: 700 }}>{h.p}</span>
              </div>
              <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>{h.s}</div>
              <div style={{ fontSize: 10.5, color: WF.ink2, marginTop: 6, fontFamily: WF.mono }}>
                ★ {h.r} · {h.j} jobs · {h.d}
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active={0} />
    </Phone>
  );
}

function C_HelperFull() {
  return (
    <Phone>
      <Hatch h={150} r={0} label="COVER · helper at work" />
      <div style={{ padding:'14px 16px 6px', display:'flex', alignItems:'center', gap: 10 }}>
        <Avatar size={52} label="M" verified />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Marcus T.</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Brooklyn · joined Jan 2024</div>
        </div>
        <span style={{ fontSize: 16 }}>♡</span>
      </div>

      <div style={{ padding:'0 16px', display:'flex', gap: 6, flexWrap:'wrap' }}>
        <Pill active>✓ ID verified</Pill><Pill>Background check</Pill><Pill>Tools included</Pill>
      </div>

      <SectionLabel>RATES · STARTING</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>FURNITURE</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$45<span style={{ fontSize: 10, color: WF.muted }}>/hr</span></div>
        </div>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>TV MOUNT</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$80<span style={{ fontSize: 10, color: WF.muted }}>/job</span></div>
        </div>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>APPLIANCE</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$65<span style={{ fontSize: 10, color: WF.muted }}>/job</span></div>
        </div>
      </div>

      <SectionLabel>PORTFOLIO · 24 PHOTOS</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 6 }}>
        <Hatch h={56} r={6} label="" /><Hatch h={56} r={6} label="" /><Hatch h={56} r={6} label="" />
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}`, display:'flex', gap: 8 }}>
        <Btn ghost full={false} style={{ flex: 1 }}>💬 Message</Btn>
        <Btn primary style={{ flex: 1.5 }}>Request Marcus →</Btn>
      </div>
    </Phone>
  );
}

function C_Filter() {
  return (
    <Phone>
      <TopBar title="Filters" left="✕" right="reset" />
      <SectionLabel>WHAT</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexWrap:'wrap', gap: 6 }}>
        <Pill active>Furniture</Pill><Pill>TV mount</Pill><Pill>Appliance</Pill><Pill>Plumbing</Pill><Pill>Electrical</Pill><Pill>Other</Pill>
      </div>

      <SectionLabel>DISTANCE · 2 MI</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ position:'relative', height: 4, background: WF.fill1, borderRadius: 2 }}>
          <div style={{ position:'absolute', left: 0, width:'30%', top: 0, bottom: 0, background: WF.ink, borderRadius: 2 }} />
          <div style={{ position:'absolute', left:'30%', top:'50%', transform:'translate(-50%,-50%)', width: 16, height: 16, borderRadius: 8, background:'#fff', border:`2px solid ${WF.ink}` }} />
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize: 10, color: WF.muted, marginTop: 4, fontFamily: WF.mono }}>
          <span>0.1 mi</span><span>10 mi</span>
        </div>
      </div>

      <SectionLabel>PRICE · $30 – $80</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <Bar h={4} color={WF.fill1} />
      </div>

      <SectionLabel>TRUST</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexDirection:'column', gap: 8 }}>
        {[
          ['✓ ID verified', true],
          ['Background check', true],
          ['Insured', false],
          ['Tools included', false],
        ].map(([l, on], i) => (
          <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderBottom:`1px solid ${WF.line2}`, fontSize: 13 }}>
            <span>{l}</span>
            <div style={{
              width: 36, height: 20, borderRadius: 10, background: on ? WF.ink : WF.fill1,
              border:`1px solid ${on ? WF.ink : WF.line}`, position:'relative',
            }}>
              <div style={{
                position:'absolute', top: 1, left: on ? 17 : 1,
                width: 16, height: 16, borderRadius: 8, background:'#fff', transition:'left 0.15s',
              }} />
            </div>
          </div>
        ))}
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Show 42 helpers</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { C_MapBrowse, C_List, C_HelperFull, C_Filter });