// Screens 23-24: Sign up flow (welcome + phone entry, profile setup)

// ═════════════════════════════════════════════════════════════
// 23) WELCOME / SIGN UP (phone entry)
// ═════════════════════════════════════════════════════════════
function ScreenSignup() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: 'white', paddingTop: 0, paddingBottom: 0, display: 'flex', flexDirection: 'column' }}>
      {/* Hero gradient top */}
      <div style={{
        height: 310, position: 'relative', overflow: 'hidden',
        background: `linear-gradient(160deg, ${C.navy800} 0%, ${C.blue600} 100%)`,
        color: 'white', paddingTop: 60,
      }}>
        {/* Decorative shapes */}
        <div style={{ position: 'absolute', right: -50, top: -40, width: 220, height: 220, borderRadius: 150, background: 'rgba(255,255,255,0.06)' }}/>
        <div style={{ position: 'absolute', right: 60, top: 80, width: 90, height: 90, borderRadius: 50, background: 'rgba(255,255,255,0.07)' }}/>
        <div style={{ position: 'absolute', left: -30, bottom: -20, width: 110, height: 110, borderRadius: 80, background: 'rgba(255,255,255,0.05)' }}/>

        {/* Brand */}
        <div style={{ padding: '12px 20px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 11, background: 'rgba(255,255,255,0.18)',
            border: '1.5px solid rgba(255,255,255,0.35)',
            color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
          }}>J</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: -0.01 }}>Janaushadhi</div>
            <div style={{ fontSize: 10, opacity: 0.75, letterSpacing: 0.4 }}>YOUR DIGITAL PHARMACY</div>
          </div>
        </div>

        {/* Floating pill graphic */}
        <div style={{ position: 'absolute', right: 24, bottom: 56, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
          <div style={{
            width: 112, height: 112, borderRadius: 22, background: 'rgba(255,255,255,0.92)',
            color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: 'rotate(-10deg)',
            boxShadow: '0 20px 40px rgba(0,0,0,0.18)',
          }}><IconPill size={56} /></div>
        </div>
        <div style={{
          position: 'absolute', right: 132, bottom: 100, padding: '6px 12px', borderRadius: 12,
          background: 'rgba(255,255,255,0.95)', color: C.mint500,
          fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6,
          boxShadow: '0 6px 14px rgba(0,0,0,0.15)',
        }}><IconTruck size={14} /> 28 min</div>

        {/* Welcome copy */}
        <div style={{ position: 'absolute', bottom: 32, left: 24 }}>
          <div style={{ fontSize: 11, opacity: 0.85, letterSpacing: 0.5, fontWeight: 600 }}>WELCOME</div>
          <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, lineHeight: 1.1, letterSpacing: -0.03 }}>
            Create your<br/>health account
          </div>
        </div>
      </div>

      {/* Form sheet — overlaps hero */}
      <div style={{
        background: 'white', borderRadius: '28px 28px 0 0', padding: '24px 24px 16px',
        marginTop: -22, flex: 1, position: 'relative', zIndex: 5,
        boxShadow: '0 -8px 24px rgba(11,31,77,0.06)',
      }}>
        <div style={{ fontSize: 13, color: C.ink500, marginBottom: 18 }}>
          We use your number to verify and protect your prescriptions.
        </div>

        {/* Phone input — country code + number */}
        <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 8 }}>MOBILE NUMBER</div>
        <div style={{
          display: 'flex', alignItems: 'stretch',
          border: `2px solid ${C.blue600}`, borderRadius: 14, overflow: 'hidden',
          background: 'white',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px',
            borderRight: `1px solid ${C.ink100}`,
          }}>
            {/* Tiny flag mark */}
            <div style={{ width: 22, height: 16, borderRadius: 3, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ flex: 1, background: '#FF9933' }}/>
              <div style={{ flex: 1, background: 'white', position: 'relative' }}>
                <div style={{ position: 'absolute', top: '50%', left: '50%', width: 5, height: 5, borderRadius: 3, border: '0.8px solid #000080', transform: 'translate(-50%,-50%)' }}/>
              </div>
              <div style={{ flex: 1, background: '#138808' }}/>
            </div>
            <span className="mono" style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>+91</span>
            <IconChevD size={14} style={{ color: C.ink500 }}/>
          </div>
          <div style={{
            flex: 1, padding: '14px 14px',
            fontSize: 17, fontWeight: 600, color: C.ink900, fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            letterSpacing: 1, position: 'relative',
          }}>
            98765 43210
            <div style={{
              position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
              width: 2, height: 22, background: C.blue600, opacity: 0,
            }}/>
          </div>
        </div>

        {/* WhatsApp opt-in */}
        <div style={{
          marginTop: 16, padding: 12, borderRadius: 12, background: C.blue25,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 6, background: C.blue600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
          }}><IconCheck size={14} /></div>
          <div style={{ flex: 1, fontSize: 12, color: C.navy800, lineHeight: 1.45 }}>
            Send order updates on <span style={{ fontWeight: 700 }}>WhatsApp</span>
          </div>
        </div>

        {/* Send code button */}
        <button style={{
          marginTop: 18, width: '100%', background: C.blue600, color: 'white', border: 'none',
          borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15,
          boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>Send verification code <IconChevR size={16} /></button>

        {/* Divider */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '20px 0' }}>
          <div style={{ flex: 1, height: 1, background: C.ink100 }}/>
          <span style={{ fontSize: 11, color: C.ink400, fontWeight: 600, letterSpacing: 0.5 }}>OR CONTINUE WITH</span>
          <div style={{ flex: 1, height: 1, background: C.ink100 }}/>
        </div>

        {/* Social */}
        <div style={{ display: 'flex', gap: 10 }}>
          {[
            { label: 'Google', color: '#EA4335', bg: 'white', border: true,
              icon: (
                <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2-1.9 3.3-4.7 3.3-8.2z"/><path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.2 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.6H2v2.8A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.7 14.1A6.6 6.6 0 0 1 5.7 10v-2.8H2A11 11 0 0 0 2 17z"/><path fill="#EA4335" d="M12 5.4c1.6 0 3 .6 4.2 1.7l3.1-3.1A11 11 0 0 0 12 1 11 11 0 0 0 2 7.2L5.7 10A6.6 6.6 0 0 1 12 5.4z"/></svg>
              )},
            { label: 'Apple', color: '#000', bg: 'white', border: true,
              icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="#000"><path d="M17.6 12.5c0-2.8 2.3-4.2 2.4-4.3-1.3-1.9-3.3-2.2-4-2.2-1.7-.2-3.4 1-4.2 1-.9 0-2.2-1-3.7-1-1.9 0-3.6 1.1-4.6 2.8-2 3.4-.5 8.5 1.4 11.2 1 1.4 2.1 2.9 3.6 2.8 1.4-.1 2-.9 3.7-.9s2.2.9 3.7.9c1.5 0 2.5-1.4 3.4-2.8 1.1-1.6 1.5-3.2 1.5-3.3-.1 0-3-1.1-3-4.2zM14.9 4.2c.8-1 1.3-2.3 1.2-3.6-1.1 0-2.5.7-3.3 1.7-.7.8-1.4 2.2-1.2 3.4 1.2.1 2.5-.6 3.3-1.5z"/></svg> },
            { label: 'Truecaller', color: C.blue600, bg: 'white', border: true,
              icon: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke={C.blue600} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5.5a2 2 0 0 1 2-2h2l2 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 2v2a2 2 0 0 1-2 2A14 14 0 0 1 4 5.5z"/></svg> },
          ].map((s, i) => (
            <div key={i} style={{
              flex: 1, height: 52, borderRadius: 14, background: s.bg,
              border: s.border ? `1px solid ${C.ink200}` : 'none',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            }}>
              {s.icon}
              <span style={{ fontSize: 10, color: C.ink700, fontWeight: 600 }}>{s.label}</span>
            </div>
          ))}
        </div>

        {/* Existing user */}
        <div style={{ textAlign: 'center', marginTop: 20, fontSize: 13, color: C.ink500 }}>
          Already have an account? <span style={{ color: C.blue600, fontWeight: 700 }}>Log in</span>
        </div>
        <div style={{ marginTop: 14, fontSize: 11, color: C.ink400, textAlign: 'center', lineHeight: 1.6, paddingBottom: 24 }}>
          By continuing, you agree to our <span style={{ color: C.blue600, fontWeight: 600 }}>Terms of Service</span>,<br/>
          <span style={{ color: C.blue600, fontWeight: 600 }}>Privacy Policy</span> & <span style={{ color: C.blue600, fontWeight: 600 }}>Refund Policy</span>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 24) CREATE PROFILE (post-OTP, new user details)
// ═════════════════════════════════════════════════════════════
function ScreenCreateProfile() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: 'white', paddingTop: 60, paddingBottom: 30 }}>
      {/* Header */}
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1, fontSize: 12, color: C.ink500, fontWeight: 600, letterSpacing: 0.3 }}>STEP 2 OF 2</div>
        <span style={{ fontSize: 13, color: C.ink500, fontWeight: 600 }}>Skip</span>
      </div>

      {/* Progress */}
      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6 }}>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: C.blue600 }}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: C.blue600 }}/>
      </div>

      {/* Title */}
      <div style={{ padding: '20px 24px 0' }}>
        <div style={{ fontSize: 24, fontWeight: 700, color: C.ink900, letterSpacing: -0.03, lineHeight: 1.15 }}>
          Tell us about<br/>yourself
        </div>
        <div style={{ fontSize: 13, color: C.ink500, marginTop: 8 }}>
          Helps our pharmacists give better advice — and personalize your home feed.
        </div>
      </div>

      {/* Avatar upload */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 22 }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            width: 84, height: 84, borderRadius: 42,
            background: `linear-gradient(160deg, ${C.blue100}, ${C.blue300})`,
            color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 30, fontWeight: 700, fontFamily: 'Inter',
          }}>A</div>
          <div style={{
            position: 'absolute', bottom: -2, right: -2,
            width: 30, height: 30, borderRadius: 15, background: C.blue600, color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '3px solid white',
            boxShadow: '0 2px 6px rgba(11,31,77,0.16)',
          }}><IconCamera size={14} /></div>
        </div>
      </div>

      {/* Fields */}
      <div style={{ padding: '22px 24px 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Full name */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 6 }}>FULL NAME</div>
          <div style={{
            padding: '14px 14px', borderRadius: 14, border: `2px solid ${C.blue600}`,
            background: 'white', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <IconUser size={18} style={{ color: C.blue600 }}/>
            <span style={{ fontSize: 15, fontWeight: 600, color: C.ink900 }}>Aarav Kumar</span>
          </div>
        </div>

        {/* Email */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
            <span>EMAIL ADDRESS</span>
            <span style={{ color: C.ink400 }}>For invoices & reports</span>
          </div>
          <div style={{
            padding: '14px 14px', borderRadius: 14, border: `1.5px solid ${C.ink200}`,
            background: 'white', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke={C.ink400} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/>
            </svg>
            <span style={{ fontSize: 15, color: C.ink400 }}>you@example.com</span>
          </div>
        </div>

        {/* DOB + Gender side-by-side */}
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1.2 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 6 }}>DATE OF BIRTH</div>
            <div style={{
              padding: '14px 12px', borderRadius: 14, border: `1.5px solid ${C.ink200}`,
              background: 'white', display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <IconClock size={18} style={{ color: C.ink400 }}/>
              <span className="mono" style={{ fontSize: 14, color: C.ink900, fontWeight: 600 }}>12 / 04 / 1993</span>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 6 }}>GENDER</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { l: 'M', on: true },
                { l: 'F', on: false },
                { l: 'O', on: false },
              ].map((g, i) => (
                <div key={i} style={{
                  flex: 1, height: 50, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: g.on ? C.blue600 : 'white',
                  color: g.on ? 'white' : C.ink700,
                  border: g.on ? 'none' : `1.5px solid ${C.ink200}`,
                  fontSize: 14, fontWeight: 700,
                }}>{g.l}</div>
              ))}
            </div>
          </div>
        </div>

        {/* Quick health profile */}
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, letterSpacing: 0.2, marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
            <span>ANY ONGOING CONDITIONS?</span>
            <span style={{ color: C.ink400, fontWeight: 500 }}>Optional</span>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[
              { l: 'Diabetes', on: true },
              { l: 'BP / Heart', on: false },
              { l: 'Thyroid', on: false },
              { l: 'Asthma', on: false },
              { l: 'None', on: false },
            ].map((c, i) => (
              <div key={i} style={{
                padding: '8px 14px', borderRadius: 12, fontSize: 12, fontWeight: 600,
                background: c.on ? C.blue50 : 'white',
                color: c.on ? C.blue600 : C.ink700,
                border: c.on ? `1.5px solid ${C.blue600}` : `1px solid ${C.ink200}`,
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>{c.on && <IconCheck size={12} />}{c.l}</div>
            ))}
          </div>
        </div>

        {/* Marketing toggle */}
        <div style={{
          padding: 14, borderRadius: 14, background: C.ink50,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Health tips & offers</div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>1–2 emails per week, no spam</div>
          </div>
          <div style={{
            width: 46, height: 28, borderRadius: 14, background: C.blue600,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 2, left: 20, width: 24, height: 24, borderRadius: 12, background: 'white',
              boxShadow: '0 2px 4px rgba(0,0,0,0.18)',
            }}/>
          </div>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{ padding: '24px 24px 0' }}>
        <button style={{
          width: '100%', background: C.blue600, color: 'white', border: 'none',
          borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15,
          boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>Create account <IconChevR size={18} /></button>
        <div style={{ marginTop: 12, fontSize: 11, color: C.ink400, textAlign: 'center' }}>
          You can edit any of this later in <span style={{ color: C.blue600, fontWeight: 600 }}>Profile</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenSignup, ScreenCreateProfile });