// Direction D — Hybrid Smart-Match
// Describe job → AI suggests top 3 helpers (with reasons) → tap to instant book
// OR open it up to all helpers for bids.

function D_Describe() {
  return (
    <Phone>
      <TopBar title="New request" left="✕" />
      <div style={{ padding:'16px 16px 8px' }}>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono, marginBottom: 6 }}>JUST TELL US WHAT YOU NEED</div>
        <div style={{
          minHeight: 110, border:`1px solid ${WF.line}`, borderRadius: 12, padding: 12,
          fontSize: 14, lineHeight: 1.5,
        }}>
          “Need help assembling an <b>IKEA Pax wardrobe</b> in my bedroom tonight. Boxes already inside.”
          <span style={{ display:'inline-block', width: 2, height: 16, background: WF.ink, verticalAlign:'middle', marginLeft: 1, animation:'blink 1s steps(2) infinite' }} />
        </div>
        <style>{'@keyframes blink{50%{opacity:0}}'}</style>
        <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
          <Pill>📎 Photo</Pill><Pill>🎤 Voice</Pill><Pill>📍 Location</Pill>
        </div>
      </div>

      <div style={{ padding:'4px 16px', display:'flex', alignItems:'center', gap: 8 }}>
        <div style={{ width: 22, height: 22, borderRadius: 11, background: WF.accentSoft, border:`1px solid ${WF.accent}`, color: WF.accent, fontSize: 11, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center' }}>✦</div>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>auto-detected: <span style={{ color: WF.ink }}>FURNITURE</span> · ~60 min · ≈ $45</div>
      </div>

      <SectionLabel>OPTIONAL</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 }}>When</span><span>Today, after 6 PM ›</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 }}>Budget cap</span><span>$80 ›</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>✦ Find me 3 great helpers</Btn>
      </div>
    </Phone>
  );
}

function D_SmartPicks() {
  const picks = [
    { n:'Marcus T.', why:'IKEA Pax pro · 0.4 mi · free tonight', p:'$48', r:'4.9 · 312', best:true },
    { n:'Priya S.',  why:'Available now · slightly farther',      p:'$55', r:'4.8 · 188' },
    { n:'Jordan K.', why:'Cheapest option · 1.6 mi · 90 min wait', p:'$42', r:'4.7 · 94' },
  ];
  return (
    <Phone>
      <TopBar title="Your top 3 picks" left="‹" right="⋯" sub="✦ ranked by fit, distance, history" />
      <div style={{ padding:'10px 16px 0' }}>
        <div style={{ display:'flex', gap: 6 }}>
          <Pill>🛋 Furniture</Pill><Pill>0.4–1.6 mi</Pill><Pill>$42–55</Pill>
        </div>
      </div>

      <div style={{ padding:'12px 16px', display:'flex', flexDirection:'column', gap: 10, height:'calc(100% - 96px - 52px - 70px)', overflow:'hidden' }}>
        {picks.map((p, i) => (
          <div key={i} style={{
            border: `1.5px solid ${p.best ? WF.accent : WF.line}`, borderRadius: 14, padding: 12,
            background: p.best ? WF.accentSoft : WF.paper, position:'relative',
          }}>
            {p.best && (
              <div style={{
                position:'absolute', right: 10, top: -8, background: WF.accent, color:'#fff',
                fontSize: 9, fontWeight: 700, padding:'2px 8px', borderRadius: 4, fontFamily: WF.mono,
              }}>BEST FIT</div>
            )}
            <div style={{ display:'flex', gap: 10, alignItems:'center' }}>
              <Avatar size={44} label={p.n[0]} verified />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>★ {p.r}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{p.p}</div>
                <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>fixed</div>
              </div>
            </div>
            <div style={{
              marginTop: 10, fontSize: 11.5, color: WF.ink2, lineHeight: 1.4,
              padding: 8, background: p.best ? '#fff' : WF.fill2, borderRadius: 8,
              display:'flex', gap: 6, alignItems:'flex-start',
            }}>
              <span style={{ color: WF.accent, fontWeight: 700 }}>✦</span>
              <span>{p.why}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 52, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Book Marcus · $48</Btn>
        <div style={{ textAlign:'center', marginTop: 8, fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>
          or <u>open to all helpers (collect bids)</u>
        </div>
      </div>
      <BottomNav active={1} />
    </Phone>
  );
}

function D_Compare() {
  return (
    <Phone>
      <TopBar title="Compare picks" left="‹" right="⇅" />
      <div style={{ padding: 12, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr 1fr 1fr', gap: 6, fontSize: 11 }}>
          <div></div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0', background: WF.accentSoft, borderRadius: 6, color: WF.accent }}>Marcus</div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0' }}>Priya</div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0' }}>Jordan</div>

          {[
            ['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'],
            ['Pax pro', '✓', '—', '—'],
            ['Tools', '✓', '✓', '✓'],
            ['Verified', '✓', '✓', '✓'],
            ['ETA', '45m', 'now', '90m'],
          ].map((r, i) => (
            <React.Fragment key={i}>
              <div style={{ color: WF.muted, padding:'8px 6px', borderTop:`1px solid ${WF.line2}` }}>{r[0]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}`, background: WF.accentSoft, fontWeight: i === 0 ? 700 : 500 }}>{r[1]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}` }}>{r[2]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}` }}>{r[3]}</div>
            </React.Fragment>
          ))}
        </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 }}>Open to all</Btn>
        <Btn primary style={{ flex: 1.4 }}>Book Marcus</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { D_Describe, D_SmartPicks, D_Compare });