// Direction B — Apply with Quotes (reverse marketplace)
// Poster writes job → multiple helpers bid → poster picks the best one.

function B_Home() {
  return (
    <Phone>
      <div style={{ padding:'14px 16px 4px' }}>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>WHAT DO YOU NEED?</div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>Post once, get 3–6 quotes.</div>
      </div>

      <div style={{ padding: '10px 16px 6px' }}>
        <Btn primary>＋ Post a new request</Btn>
      </div>

      <SectionLabel>POPULAR CATEGORIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
        <Tile icon="🛋" label="Furniture assembly" />
        <Tile icon="📺" label="TV wall-mount" />
        <Tile icon="🧺" label="Appliance install" />
        <Tile icon="📦" label="Unpack & set up" />
      </div>

      <SectionLabel>YOUR OPEN POSTS</SectionLabel>
      <Row
        left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🛋</div>}
        title="IKEA Pax assembly"
        sub="4 bids · $42 – $65"
        right={<Pill active style={{ fontSize: 9, background: WF.accent, borderColor: WF.accent, color:'#fff' }}>4 NEW</Pill>}
      />
      <Row
        left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>📺</div>}
        title="65″ TV mount, stud wall"
        sub="2 bids · $80 – $95"
        right={<span style={{ fontSize: 10, color: WF.muted }}>2h</span>}
      />

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

function B_PostJob() {
  return (
    <Phone>
      <TopBar title="Post a request" left="✕" right="3/3" />
      <SectionLabel>JOB</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5 }}>
          <div style={{ fontWeight: 600 }}>IKEA Pax wardrobe + 2 shelves</div>
          <div style={{ color: WF.muted, marginTop: 4 }}>
            Boxes in bedroom. Need it done today if possible.
          </div>
        </div>
      </div>

      <SectionLabel>YOUR BUDGET</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize: 11, color: WF.muted, marginBottom: 4 }}>
          <span>$30</span><span style={{ fontWeight: 700, color: WF.ink, fontSize: 13 }}>$40 – $60</span><span>$120</span>
        </div>
        <div style={{ position:'relative', height: 4, background: WF.fill1, borderRadius: 2 }}>
          <div style={{ position:'absolute', left:'10%', right:'40%', top: 0, bottom: 0, background: WF.ink, borderRadius: 2 }} />
          <div style={{ position:'absolute', left:'10%', top:'50%', transform:'translate(-50%,-50%)', width: 14, height: 14, borderRadius: 7, background:'#fff', border:`2px solid ${WF.ink}` }} />
          <div style={{ position:'absolute', left:'60%', top:'50%', transform:'translate(-50%,-50%)', width: 14, height: 14, borderRadius: 7, background:'#fff', border:`2px solid ${WF.ink}` }} />
        </div>
        <div style={{ fontSize: 10, color: WF.faint, fontFamily: WF.mono, marginTop: 8 }}>
          helpers see your budget · you only pay the bid you accept
        </div>
      </div>

      <SectionLabel>WHEN · WHERE</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexDirection:'column', gap: 8 }}>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>Today, anytime</span><span>›</span>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>2418 Linden Ave, 4B</span><span>›</span>
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Post — collect bids</Btn>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', marginTop: 6, fontFamily: WF.mono }}>
          most posts get a bid in &lt; 15 min
        </div>
      </div>
    </Phone>
  );
}

function B_Bids() {
  const bids = [
    { name:'Marcus T.', dist:'0.4 mi', rate:'4.9', jobs:312, price:'$48', eta:'45 min', note:'Pax pro — 80+ done.', best:true },
    { name:'Priya S.',  dist:'1.1 mi', rate:'4.8', jobs:188, price:'$55', eta:'1 hr',  note:'Available right now.' },
    { name:'Jordan K.', dist:'1.6 mi', rate:'4.7', jobs:94,  price:'$42', eta:'90 min', note:'Cheapest — has tools.' },
    { name:'Tomás R.',  dist:'2.2 mi', rate:'5.0', jobs:46,  price:'$65', eta:'2 hr',   note:'New, fully verified.' },
  ];
  return (
    <Phone>
      <TopBar title="4 bids in 11 min" left="‹" right="⇅" sub="IKEA Pax wardrobe · $42–$65" />
      <div style={{ overflow:'hidden', height: 'calc(100% - 100px - 52px)' }}>
        {bids.map((b, i) => (
          <div key={i} style={{
            padding: '12px 14px', borderBottom: `1px solid ${WF.line2}`,
            display:'flex', gap: 10, background: b.best ? WF.fill2 : WF.paper, position:'relative',
          }}>
            {b.best && (
              <div style={{
                position:'absolute', right: 10, top: 10,
                background: WF.accent, color:'#fff', fontSize: 9, fontWeight: 700, padding:'2px 6px', borderRadius: 4, fontFamily: WF.mono,
              }}>RECOMMENDED</div>
            )}
            <Avatar size={42} label={b.name[0]} verified />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{b.name}</div>
              <div style={{ fontSize: 10.5, color: WF.muted, marginTop: 2 }}>
                ★ {b.rate} · {b.jobs} jobs · {b.dist}
              </div>
              <div style={{ fontSize: 11.5, color: WF.ink2, marginTop: 6, lineHeight: 1.4 }}>
                “{b.note}”
              </div>
              <div style={{ display:'flex', gap: 12, marginTop: 6, alignItems:'baseline' }}>
                <span style={{ fontSize: 16, fontWeight: 700 }}>{b.price}</span>
                <span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>can start in {b.eta}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active={2} />
    </Phone>
  );
}

function B_BidDetail() {
  return (
    <Phone>
      <TopBar title="Marcus's bid" left="‹" right="⋯" />
      <div style={{ padding: 16, display:'flex', gap: 12, alignItems:'center' }}>
        <Avatar size={56} label="M" verified />
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Marcus T.</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 3 }}>★ 4.9 · 312 jobs · 0.4 mi · ✓ ID</div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700 }}>$48</div>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>fixed bid</div>
        </div>
      </div>

      <div style={{ padding:'0 16px' }}>
        <div style={{
          background: WF.fill2, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5,
        }}>
          “Hi! I've done 80+ Pax wardrobes. I have a cordless drill + level. Can be there in 45 min if you accept now.”
        </div>
      </div>

      <SectionLabel>BREAKDOWN</SectionLabel>
      <div style={{ padding:'0 16px', fontSize: 12 }}>
        {[['Labor (≈60 min)', '$40'], ['Tools brought', '$5'], ['Platform fee', '$3']].map(([l, v], i) => (
          <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:`1px dashed ${WF.line}` }}>
            <span style={{ color: WF.muted }}>{l}</span><span>{v}</span>
          </div>
        ))}
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 0' }}>
          <span style={{ fontWeight: 700 }}>You pay</span><span style={{ fontWeight: 700 }}>$48.00</span>
        </div>
      </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 }}>Ask question</Btn>
        <Btn primary style={{ flex: 1.4 }}>Accept · $48</Btn>
      </div>
    </Phone>
  );
}

function B_Schedule() {
  return (
    <Phone>
      <TopBar title="Confirm time" left="‹" sub="with Marcus · $48 fixed" />
      <SectionLabel>PICK A SLOT</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8, overflow:'hidden' }}>
        {['Today', 'Wed', 'Thu', 'Fri', 'Sat'].map((d, i) => (
          <div key={i} style={{
            flex: 1, padding:'8px 0', textAlign:'center', borderRadius: 10,
            border: `1px solid ${i===0 ? WF.ink : WF.line}`, background: i===0 ? WF.ink : WF.paper, color: i===0 ? '#fff' : WF.ink,
          }}>
            <div style={{ fontSize: 10, fontFamily: WF.mono, opacity: 0.7 }}>{['MAY 19','20','21','22','23'][i]}</div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{d}</div>
          </div>
        ))}
      </div>
      <SectionLabel>AVAILABLE</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
        {['6:00 PM','6:30','7:00','7:30','8:00','8:30'].map((t, i) => (
          <div key={i} style={{
            padding:'10px 0', textAlign:'center', borderRadius: 10, fontSize: 12, fontWeight: 600,
            border:`1px solid ${i===2 ? WF.accent : WF.line}`,
            background: i===2 ? WF.accentSoft : WF.paper, color: i===2 ? WF.accent : WF.ink,
          }}>{t}</div>
        ))}
      </div>
      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Book 7:00 PM · $48</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { B_Home, B_PostJob, B_Bids, B_BidDetail, B_Schedule });