// Shared screens — Onboarding (role choice, location, verify ID)
// Re-used across all directions.

function Onb_Welcome() {
  return (
    <Phone>
      <div style={{ padding:'40px 24px 0', height:'100%', display:'flex', flexDirection:'column' }}>
        <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.15, marginBottom: 10 }}>
          Get help setting up<br/>anything at home.
        </div>
        <div style={{ fontSize: 12, color: WF.muted, lineHeight: 1.45, marginBottom: 24 }}>
          Furniture, TVs, appliances — nearby<br/>verified helpers, on demand.
        </div>
        <Hatch h={170} r={14} label="HERO ILLUSTRATION" />
        <div style={{ flex: 1 }} />
        <div style={{ display:'flex', flexDirection:'column', gap: 10, marginBottom: 16 }}>
          <Btn primary>Get started</Btn>
          <Btn ghost>I want to <b>&nbsp;help</b>&nbsp; people →</Btn>
        </div>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', fontFamily: WF.mono }}>
          Already have an account? Sign in
        </div>
      </div>
    </Phone>
  );
}

function Onb_Role() {
  return (
    <Phone>
      <TopBar title="" left="‹" />
      <div style={{ padding:'20px 20px' }}>
        <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>Which one are you?</div>
        <div style={{ fontSize: 11, color: WF.muted, marginBottom: 20 }}>You can switch later.</div>

        <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
          <div style={{ border:`2px solid ${WF.ink}`, borderRadius: 14, padding: 14, background: WF.fill2 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 8 }}>
              <span style={{ fontWeight: 700, fontSize: 14 }}>I need help</span>
              <span style={{ width: 18, height: 18, borderRadius: 9, background: WF.ink, color:'#fff', fontSize: 10, display:'flex', alignItems:'center', justifyContent:'center' }}>✓</span>
            </div>
            <div style={{ fontSize: 11, color: WF.muted, lineHeight: 1.4 }}>
              Post a quick request, get matched with a nearby helper in minutes.
            </div>
          </div>

          <div style={{ border:`1px solid ${WF.line}`, borderRadius: 14, padding: 14 }}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 6 }}>I want to help</div>
            <div style={{ fontSize: 11, color: WF.muted, lineHeight: 1.4 }}>
              Earn money fixing, mounting, assembling near you. Verify ID first.
            </div>
          </div>
        </div>

        <div style={{ marginTop: 26 }}>
          <Btn primary>Continue</Btn>
        </div>
      </div>
    </Phone>
  );
}

function Onb_Location() {
  return (
    <Phone>
      <TopBar title="Your location" left="‹" right="skip" />
      <MapWF h={260} you label="finding nearby helpers…" />
      <div style={{ padding: '16px 20px' }}>
        <div style={{ fontSize: 11, fontFamily: WF.mono, color: WF.muted, marginBottom: 6 }}>HOME ADDRESS</div>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding:'12px 14px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>2418 Linden Ave, Apt 4B</div>
            <div style={{ fontSize: 11, color: WF.muted }}>Brooklyn, NY 11215</div>
          </div>
          <span style={{ color: WF.muted, fontSize: 14 }}>›</span>
        </div>
        <div style={{ marginTop: 14 }}>
          <Btn primary>Use this location</Btn>
        </div>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', marginTop: 12, fontFamily: WF.mono }}>
          we only share with the helper you book
        </div>
      </div>
    </Phone>
  );
}

function Onb_VerifyID() {
  return (
    <Phone>
      <TopBar title="Verify your ID" left="‹" sub="helpers only · ≈ 90s" />
      <div style={{ padding: '20px' }}>
        <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6 }}>Quick ID check</div>
        <div style={{ fontSize: 12, color: WF.muted, marginBottom: 18, lineHeight: 1.45 }}>
          We confirm every helper is who they say they are. Posters see a verified badge before they book.
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
          {[
            ['Government ID', 'photo of front + back', true],
            ['Selfie match',  'auto-compared to ID', true],
            ['Phone number',  'we text a 6-digit code', false],
            ['Background check', 'optional, +$ trust', false],
          ].map(([t, s, done], i) => (
            <div key={i} style={{
              display:'flex', alignItems:'center', gap: 12,
              padding: '12px 14px', border: `1px solid ${WF.line}`, borderRadius: 10,
              background: done ? WF.fill2 : WF.paper,
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11,
                background: done ? WF.ink : WF.fill1, color: done ? '#fff' : WF.muted,
                display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 700,
                border:`1px solid ${done ? WF.ink : WF.line}`,
              }}>{done ? '✓' : i+1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>{t}</div>
                <div style={{ fontSize: 10.5, color: WF.muted, marginTop: 1 }}>{s}</div>
              </div>
              <span style={{ color: WF.faint, fontSize: 14 }}>›</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18 }}>
          <Btn primary>Continue verification</Btn>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { Onb_Welcome, Onb_Role, Onb_Location, Onb_VerifyID });