// Direction A — Instant Match (Uber-style)
// Tap category → set details → app auto-matches closest verified helper at fixed price.

function A_Home() {
  return (
    <Phone>
      {/* greeting + map peek */}
      <div style={{ padding:'12px 16px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>HI, ALEX</div>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>What needs setting up?</div>
          </div>
          <Avatar size={32} label="A" />
        </div>
      </div>

      <div style={{ padding:'12px 16px' }}>
        <div style={{
          height: 36, borderRadius: 18, background: WF.fill2, border:`1px solid ${WF.line}`,
          display:'flex', alignItems:'center', gap: 8, padding:'0 14px',
          fontSize: 12, color: WF.muted,
        }}>
          <span>⌕</span> Describe what you need…
        </div>
      </div>

      <SectionLabel>CATEGORIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
        <Tile icon="🛋" label="Furniture" />
        <Tile icon="📺" label="TV mount" />
        <Tile icon="🧺" label="Appliance" />
        <Tile icon="🔧" label="Small fix" />
        <Tile icon="📦" label="Unpack" />
        <Tile icon="＋" label="Other" />
      </div>

      <SectionLabel>HELPERS NEAR YOU · 12</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ height: 96, borderRadius: 10, overflow:'hidden', border:`1px solid ${WF.line}` }}>
          <MapWF h={96} pins={4} label="0.4 mi avg" />
        </div>
      </div>

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

function A_Post() {
  return (
    <Phone>
      <TopBar title="New request" left="✕" right="2/3" />
      <div style={{ padding: '16px 16px 0' }}>
        <Pill active>🛋 Furniture</Pill> <Pill>Today</Pill> <Pill>1 helper</Pill>
      </div>

      <SectionLabel>WHAT'S THE JOB?</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5, minHeight: 70 }}>
          <div>IKEA Pax wardrobe, 3 doors.</div>
          <div style={{ color: WF.muted }}>Boxes already in the bedroom.</div>
        </div>
      </div>

      <SectionLabel>PHOTOS · OPTIONAL</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <Hatch w={64} h={64} r={8} label="01" />
        <Hatch w={64} h={64} r={8} label="02" />
        <div style={{
          width: 64, height: 64, borderRadius: 8, border:`1.5px dashed ${WF.line}`,
          display:'flex', alignItems:'center', justifyContent:'center', fontSize: 24, color: WF.faint,
        }}>＋</div>
      </div>

      <SectionLabel>WHEN</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <Pill active>ASAP</Pill>
        <Pill>In 2 hrs</Pill>
        <Pill>Tonight</Pill>
        <Pill>Schedule…</Pill>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 16, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 10 }}>
          <span style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>FIXED PRICE</span>
          <span style={{ fontSize: 18, fontWeight: 700 }}>$48 <span style={{ fontSize: 11, color: WF.muted, fontWeight: 400 }}>· ~60 min</span></span>
        </div>
        <Btn primary>Find me a helper →</Btn>
      </div>
    </Phone>
  );
}

function A_Matching() {
  return (
    <Phone>
      <TopBar title="Finding a helper" left="✕" sub="searching within 1.5 mi" />
      <MapWF h={300} pins={3} you label="radar" />
      <div style={{ padding: '14px 16px' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 14, border:`2.5px solid ${WF.accent}`, borderTopColor:'transparent',
            animation:'spin 1s linear infinite',
          }} />
          <div style={{ fontSize: 13, fontWeight: 600 }}>3 verified helpers nearby</div>
        </div>
        <Bar w="35%" h={6} color={WF.accent} style={{ marginBottom: 4 }} />
        <Bar h={6} />
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono, marginTop: 10, lineHeight: 1.5 }}>
          → ping helper #1 (0.3 mi) … waiting<br/>
          → fallback to #2 (0.6 mi) in 12s<br/>
          → cancel anytime, no charge
        </div>
      </div>
      <style>{'@keyframes spin{to{transform:rotate(360deg)}}'}</style>
    </Phone>
  );
}

function A_Matched() {
  return (
    <Phone>
      <TopBar title="Helper matched!" left="‹" />
      <MapWF h={220} pins={1} you label="ETA 8 min · 0.4 mi" />
      <div style={{ padding: '16px' }}>
        <div style={{ display:'flex', gap: 12, alignItems:'center' }}>
          <Avatar size={52} label="M" verified />
          <div style={{ flex: 1 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
              <span style={{ fontWeight: 700, fontSize: 15 }}>Marcus T.</span>
              <Pill style={{ background: WF.ink, color:'#fff', borderColor: WF.ink, fontSize: 9 }}>✓ ID verified</Pill>
            </div>
            <div style={{ fontSize: 11.5, color: WF.muted, marginTop: 3 }}>
              ★ 4.9 · 312 jobs · IKEA pro
            </div>
          </div>
        </div>

        <div style={{ display:'flex', gap: 8, marginTop: 14 }}>
          <Btn ghost>💬 Message</Btn>
          <Btn ghost>📞 Call</Btn>
        </div>

        <div style={{ marginTop: 14, padding: 12, background: WF.fill2, borderRadius: 10 }}>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: WF.muted }}>Job</span><span style={{ fontWeight: 600 }}>IKEA Pax wardrobe</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: WF.muted }}>Fixed price</span><span style={{ fontWeight: 600 }}>$48.00</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12 }}>
            <span style={{ color: WF.muted }}>Pay on arrival</span>
            <span style={{ fontWeight: 600 }}>•••• 4242</span>
          </div>
        </div>
      </div>

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

function A_Inflight() {
  return (
    <Phone>
      <div style={{ height: '100%', display:'flex', flexDirection:'column' }}>
        <MapWF h={360} pins={1} you label="Marcus · 4 min away" />
        <Sheet>
          <div style={{ padding: '0 16px' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <Avatar size={40} label="M" verified />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Marcus is on the way</div>
                <div style={{ fontSize: 11, color: WF.muted }}>Arriving 7:42 PM · Toyota Corolla • 4PJ-829</div>
              </div>
            </div>
            <div style={{ display:'flex', gap: 8, marginTop: 14 }}>
              <Btn ghost full={false} style={{ flex: 1 }}>💬</Btn>
              <Btn ghost full={false} style={{ flex: 1 }}>📞</Btn>
              <Btn full={false} style={{ flex: 2 }}>Share trip</Btn>
            </div>
          </div>
        </Sheet>
        <BottomNav active={2} />
      </div>
    </Phone>
  );
}

function A_Chat() {
  const msgs = [
    { who:'them', t:'Hey! On my way. Anything I should bring up the elevator?' },
    { who:'me',   t:'No, all boxes already in the bedroom.' },
    { who:'them', t:'Perfect. Apartment buzzer working?' },
    { who:'me',   t:'Yes — apt 4B, buzz "Reyes".' },
    { who:'them', t:'👍 ETA 4 min' },
  ];
  return (
    <Phone>
      <TopBar title="Marcus T." left="‹" sub="✓ ID verified · ETA 4 min" />
      <div style={{ padding: 12, display:'flex', flexDirection:'column', gap: 6, height:'calc(100% - 100px - 52px)', overflow:'hidden' }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display:'flex', justifyContent: m.who==='me' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth:'78%', padding:'8px 11px', borderRadius: 14, fontSize: 12, lineHeight: 1.35,
              background: m.who==='me' ? WF.ink : WF.fill1,
              color: m.who==='me' ? '#fff' : WF.ink,
            }}>{m.t}</div>
          </div>
        ))}
      </div>
      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: '8px 12px', borderTop:`1px solid ${WF.line2}`, background: WF.paper }}>
        <div style={{
          display:'flex', alignItems:'center', gap: 8,
          height: 36, borderRadius: 18, background: WF.fill2, border:`1px solid ${WF.line}`,
          padding: '0 12px', fontSize: 12, color: WF.muted,
        }}>
          <span>📷</span><span style={{ flex: 1 }}>Message Marcus…</span><span>↗</span>
        </div>
      </div>
    </Phone>
  );
}

function A_Pay() {
  return (
    <Phone>
      <TopBar title="Job complete" left="✕" />
      <div style={{ padding: 16 }}>
        <Hatch h={140} r={12} label="PHOTO · ASSEMBLED ✓" />
        <div style={{ marginTop: 14, fontSize: 14, fontWeight: 700 }}>$48.00 charged to •••• 4242</div>
        <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Marcus T. · 58 min · IKEA Pax wardrobe</div>

        <div style={{ marginTop: 18, padding: 14, border:`1px solid ${WF.line}`, borderRadius: 12 }}>
          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Rate Marcus</div>
          <div style={{ display:'flex', gap: 6, fontSize: 22 }}>
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <div style={{ marginTop: 10, display:'flex', flexWrap:'wrap', gap: 6 }}>
            <Pill>On time</Pill><Pill>Friendly</Pill><Pill>Clean work</Pill><Pill>Above &amp; beyond</Pill>
          </div>
        </div>

        <div style={{ marginTop: 14, display:'flex', gap: 8 }}>
          <Btn ghost>＋ Tip $5</Btn>
          <Btn primary>Submit</Btn>
        </div>
      </div>
    </Phone>
  );
}

function A_Profile() {
  return (
    <Phone>
      <TopBar title="Marcus T." left="‹" right="⋯" />
      <div style={{ padding: 16, display:'flex', gap: 14, alignItems:'center' }}>
        <Avatar size={64} label="M" verified />
        <div>
          <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
            <span style={{ fontSize: 16, fontWeight: 700 }}>Marcus T.</span>
            <Pill style={{ background: WF.ink, color:'#fff', borderColor: WF.ink, fontSize: 9 }}>✓ ID verified</Pill>
          </div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 4 }}>★ 4.9 · 312 jobs · 0.4 mi away</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Speaks English, Spanish</div>
        </div>
      </div>

      <SectionLabel>SPECIALTIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexWrap:'wrap', gap: 6 }}>
        <Pill active>IKEA assembly</Pill><Pill>TV mounting</Pill><Pill>Shelves</Pill><Pill>Cribs</Pill>
      </div>

      <SectionLabel>RECENT REVIEWS</SectionLabel>
      <Row left={<Avatar size={28} label="J"/>} title="Jamie · ★★★★★" sub="“Got my desk done in 40 min. Super tidy.”" right="2d" />
      <Row left={<Avatar size={28} label="R"/>} title="Rina · ★★★★★" sub="“Mounted my 65″ TV perfectly.”" right="5d" />

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

function A_Dashboard() {
  return (
    <Phone>
      <TopBar title="My requests" left="" right="＋" />
      <div style={{ padding: '12px 16px', display:'flex', gap: 6 }}>
        <Pill active>Active</Pill><Pill>Scheduled</Pill><Pill>Past</Pill>
      </div>
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🛋</div>}
        title="IKEA Pax wardrobe"
        sub="Marcus · arriving 7:42 PM"
        right={<Pill active style={{ fontSize: 9 }}>EN ROUTE</Pill>}
      />
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>📺</div>}
        title="65″ TV wall-mount"
        sub="Tomorrow 10 AM · helper TBD"
        right={<span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>SCHED</span>}
      />

      <SectionLabel>RECENT</SectionLabel>
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🧺</div>}
        title="Washer hookup"
        sub="Priya · ★★★★★ · $62"
        right={<span style={{ fontSize: 10, color: WF.muted }}>May 14</span>}
      />
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🔧</div>}
        title="Curtain rods × 3"
        sub="Marcus · ★★★★☆ · $40"
        right={<span style={{ fontSize: 10, color: WF.muted }}>May 9</span>}
      />

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

function A_Notifs() {
  return (
    <Phone>
      <TopBar title="Notifications" left="" right="✓" />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.accent }} />}
        title="Marcus accepted your request"
        sub="ETA 8 min · $48 fixed"
        right="now"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.accent }} />}
        title="Marcus is arriving"
        sub="Apt 4B · 2418 Linden Ave"
        right="2m"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.line }} />}
        title="Rate your last helper"
        sub="Priya · washer hookup"
        right="3d"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.line }} />}
        title="$10 credit added"
        sub="referral bonus"
        right="1w"
      />
      <BottomNav active={3} />
    </Phone>
  );
}

Object.assign(window, { A_Home, A_Post, A_Matching, A_Matched, A_Inflight, A_Chat, A_Pay, A_Profile, A_Dashboard, A_Notifs });