// Web screens — Lab tests, Doctor consult, Auth (login/signup)

const Wstyles4 = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif', color: C.ink900 };

// ═════════════════════════════════════════════════════════════
// W10) LAB TESTS booking
// ═════════════════════════════════════════════════════════════
function WebLabs() {
  const tests = [
    { name: 'Complete Blood Count (CBC)', sub: '24 parameters · Fasting not required · Reports in 12 hrs', price: 320, mrp: 480, hue: 'rose', tag: 'POPULAR', tests: 24 },
    { name: 'HbA1c — Diabetes screening', sub: '3-month sugar avg · 12-hr fasting required', price: 480, mrp: 650, hue: 'blue', tag: null, tests: 1 },
    { name: 'Vitamin D 25-Hydroxy', sub: 'Deficiency screening · Reports in 24 hrs', price: 1080, mrp: 1400, hue: 'amber', tag: null, tests: 1 },
    { name: 'Thyroid Profile (T3, T4, TSH)', sub: 'Morning sample · Reports in 12 hrs', price: 540, mrp: 720, hue: 'mint', tag: 'POPULAR', tests: 3 },
    { name: 'Liver Function Test (LFT)', sub: '12 parameters · Fasting required', price: 580, mrp: 780, hue: 'rose', tag: null, tests: 12 },
    { name: 'Lipid Profile', sub: '8 parameters · 12-hr fasting', price: 420, mrp: 580, hue: 'amber', tag: null, tests: 8 },
  ];
  return (
    <div className="screen" style={{ ...Wstyles4, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="labs" />

      {/* Hero band */}
      <div style={{
        background: `linear-gradient(135deg, ${C.navy800} 0%, ${C.blue600} 100%)`,
        color: 'white', padding: '32px 40px 28px', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', right: -40, top: -40, width: 260, height: 260, borderRadius: 200, background: 'rgba(255,255,255,0.06)' }}/>
        <div style={{ position: 'absolute', right: 200, bottom: -40, width: 140, height: 140, borderRadius: 100, background: 'rgba(255,255,255,0.05)' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.2)', fontSize: 11, fontWeight: 600 }}>
              <IconShield size={12}/> NABL-accredited partner labs
            </div>
            <div style={{ fontSize: 38, fontWeight: 700, lineHeight: 1.1, marginTop: 14, letterSpacing: -0.025 }}>
              Lab tests at home, <span style={{ color: C.blue300 }}>reports in 12 hours.</span>
            </div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)', marginTop: 10, maxWidth: 480, lineHeight: 1.55 }}>
              Free sample collection at your home by certified phlebotomists. Digital reports delivered to your account.
            </div>
            {/* Search */}
            <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', background: 'white', borderRadius: 12, padding: 6, maxWidth: 460, boxShadow: '0 16px 40px rgba(0,0,0,0.20)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', flex: 1 }}>
                <IconSearch size={18} style={{ color: C.ink400 }}/>
                <span style={{ fontSize: 13, color: C.ink400 }}>Search 800+ tests, packages & profiles</span>
              </div>
              <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 8, padding: '10px 16px', fontWeight: 700, fontSize: 12 }}>
                Search
              </button>
            </div>
          </div>
          {/* Stats */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { v: '800+', l: 'Tests offered', Icon: IconScan },
              { v: '12 hr', l: 'Report turnaround', Icon: IconClock },
              { v: 'Free', l: 'Home collection', Icon: IconTruck },
              { v: '4.8★', l: 'On 84k+ reviews', Icon: IconStar },
            ].map((s, i) => (
              <div key={i} style={{ padding: 14, borderRadius: 12, background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.18)' }}>
                <s.Icon size={20} style={{ opacity: 0.85 }}/>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700, marginTop: 8, letterSpacing: -0.01 }}>{s.v}</div>
                <div style={{ fontSize: 11, opacity: 0.78, marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Category chips */}
      <div style={{ padding: '24px 40px 0', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 13, color: C.ink500, fontWeight: 600 }}>Browse by</span>
        {[
          { l: 'Popular', on: true },
          { l: 'Diabetes', on: false },
          { l: 'Heart', on: false },
          { l: 'Thyroid', on: false },
          { l: 'Liver', on: false },
          { l: 'Kidney', on: false },
          { l: 'Women\u2019s health', on: false },
          { l: 'Senior health', on: false },
          { l: 'Full body checkup', on: false },
        ].map(c => (
          <div key={c.l} style={{ padding: '7px 14px', borderRadius: 10, background: c.on ? C.navy800 : 'white', color: c.on ? 'white' : C.ink700, fontSize: 12, fontWeight: 600, border: c.on ? 'none' : `1px solid ${C.ink200}` }}>{c.l}</div>
        ))}
      </div>

      {/* Package banner */}
      <div style={{ padding: '20px 40px 0' }}>
        <div style={{
          padding: '20px 24px', borderRadius: 18,
          background: `linear-gradient(135deg, ${C.mint100}, white)`,
          border: `1px solid ${C.mint500}33`, display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconHeart size={32}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: '#0F5A48', fontWeight: 700, letterSpacing: 0.4 }}>FEATURED PACKAGE</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: '#0F5A48', marginTop: 2 }}>Full body checkup · 62 tests</div>
            <div style={{ fontSize: 12, color: '#0F5A48', opacity: 0.8, marginTop: 2 }}>Recommended for ages 30+ once a year. Covers diabetes, heart, liver, kidney, thyroid & vitamins.</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div>
              <span className="mono" style={{ fontSize: 22, fontWeight: 700, color: '#0F5A48' }}>₹1,499</span>
              <span className="mono" style={{ fontSize: 13, color: '#0F5A48', opacity: 0.6, textDecoration: 'line-through', marginLeft: 6 }}>₹2,800</span>
            </div>
            <button style={{ marginTop: 8, background: C.mint500, color: 'white', border: 'none', borderRadius: 10, padding: '9px 18px', fontSize: 12, fontWeight: 700 }}>Book now</button>
          </div>
        </div>
      </div>

      <div style={{ padding: '24px 40px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.02 }}>Popular tests</div>
        <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>View all 800+ →</span>
      </div>

      {/* Tests grid */}
      <div style={{ padding: '14px 40px 28px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {tests.map((t, i) => {
          const colors = { blue: { bg: C.blue100, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 }, amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 } };
          const p = colors[t.hue];
          return (
            <div key={i} style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 50, height: 50, borderRadius: 14, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <IconScan size={24}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 14, fontWeight: 700 }}>{t.name}</span>
                    {t.tag && <span className="pill" style={{ background: C.amber100, color: '#7A4500', fontSize: 9, padding: '1px 6px' }}>{t.tag}</span>}
                  </div>
                  <div style={{ fontSize: 11, color: C.ink500, marginTop: 4, lineHeight: 1.45 }}>{t.sub}</div>
                </div>
              </div>
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <span className="mono" style={{ fontSize: 17, fontWeight: 700 }}>₹{t.price}</span>
                  <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 6 }}>₹{t.mrp}</span>
                </div>
                <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '8px 16px', fontWeight: 700, fontSize: 12, boxShadow: '0 4px 10px rgba(27,91,255,0.20)' }}>Book →</button>
              </div>
            </div>
          );
        })}
      </div>

      <WebFooter />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W11) DOCTOR CONSULTATION
// ═════════════════════════════════════════════════════════════
function WebDoctor() {
  const specs = [
    { l: 'General physician', count: '124 doctors', Icon: IconUser, hue: 'blue' },
    { l: 'Dermatology', count: '48 doctors', Icon: IconHeart, hue: 'rose' },
    { l: 'Pediatrics', count: '36 doctors', Icon: IconShield, hue: 'mint' },
    { l: 'Mental health', count: '52 doctors', Icon: IconStar, hue: 'amber' },
    { l: 'Gynecology', count: '38 doctors', Icon: IconUser, hue: 'rose' },
    { l: 'Sexual health', count: '24 doctors', Icon: IconShield, hue: 'blue' },
    { l: 'Diabetes & endo', count: '22 doctors', Icon: IconRx, hue: 'mint' },
    { l: 'Cardiology', count: '18 doctors', Icon: IconHeart, hue: 'rose' },
  ];
  const docs = [
    { name: 'Dr. Priya Mehta', spec: 'General Physician', exp: '12 yrs', rating: '4.9', reviews: '2,140', lang: ['EN', 'HI', 'KN'], price: 199, mrp: 299, available: 'In 4 min', online: true, hue: 'blue' },
    { name: 'Dr. Rohan Iyer', spec: 'Dermatologist (MD Skin)', exp: '8 yrs', rating: '4.8', reviews: '1,612', lang: ['EN', 'HI'], price: 349, mrp: 499, available: 'In 12 min', online: true, hue: 'rose' },
    { name: 'Dr. Anjali Rao', spec: 'Pediatrician', exp: '15 yrs', rating: '4.9', reviews: '3,520', lang: ['EN', 'HI', 'TA'], price: 299, mrp: 449, available: 'Tomorrow, 9 AM', online: false, hue: 'mint' },
    { name: 'Dr. Karan Shah', spec: 'Psychiatrist', exp: '10 yrs', rating: '4.7', reviews: '982', lang: ['EN', 'HI', 'GU'], price: 499, mrp: 699, available: 'In 20 min', online: true, hue: 'amber' },
  ];
  return (
    <div className="screen" style={{ ...Wstyles4, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="doctor" />

      {/* Hero */}
      <div style={{ background: 'white', padding: '32px 40px 28px', borderBottom: `1px solid ${C.ink100}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 999, background: C.mint100, color: '#0F5A48', fontSize: 11, fontWeight: 700 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: C.mint500 }}/> 18 doctors available right now
            </div>
            <div style={{ fontSize: 38, fontWeight: 700, lineHeight: 1.1, marginTop: 14, letterSpacing: -0.025 }}>
              Talk to a doctor in <span style={{ color: C.blue600 }}>minutes.</span>
            </div>
            <div style={{ fontSize: 14, color: C.ink500, marginTop: 10, maxWidth: 520, lineHeight: 1.55 }}>
              Audio, video, or chat consultations with verified specialists. Get e-prescriptions, lab recommendations and follow-ups instantly.
            </div>
            <div style={{ display: 'flex', gap: 24, marginTop: 22 }}>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>500+</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>verified doctors</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>4.8★</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>on 64k consultations</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>e-Rx</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>filled in 28 min</div>
              </div>
            </div>
          </div>
          {/* Doctor card preview */}
          <div style={{ background: `linear-gradient(160deg, ${C.blue50}, ${C.blue100})`, borderRadius: 22, padding: 22, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -30, top: -30, width: 130, height: 130, borderRadius: 100, background: 'rgba(255,255,255,0.5)' }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
              <div style={{
                width: 60, height: 60, borderRadius: 30, background: 'white', color: C.blue600,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18,
                boxShadow: '0 6px 14px rgba(11,31,77,0.10)',
              }}>PM
                <div style={{ position: 'absolute', bottom: 2, right: 2, width: 14, height: 14, borderRadius: 7, background: C.mint500, border: '2px solid white' }}/>
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Dr. Priya Mehta</div>
                <div style={{ fontSize: 12, color: C.ink500 }}>General Physician · MBBS, MD</div>
                <div style={{ fontSize: 11, color: C.mint500, fontWeight: 700, marginTop: 2 }}>● Online now · ₹199</div>
              </div>
            </div>
            <div style={{ marginTop: 16, padding: 14, borderRadius: 14, background: 'white', boxShadow: '0 6px 14px rgba(11,31,77,0.06)' }}>
              <div style={{ fontSize: 12, color: C.ink500, fontWeight: 600 }}>Available consult modes</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
                <div style={{ flex: 1, padding: '8px', borderRadius: 8, background: C.blue50, color: C.blue600, fontSize: 11, fontWeight: 700, textAlign: 'center' }}>📹 Video</div>
                <div style={{ flex: 1, padding: '8px', borderRadius: 8, background: C.mint100, color: '#0F5A48', fontSize: 11, fontWeight: 700, textAlign: 'center' }}>💬 Chat</div>
                <div style={{ flex: 1, padding: '8px', borderRadius: 8, background: C.amber100, color: '#7A4500', fontSize: 11, fontWeight: 700, textAlign: 'center' }}>📞 Audio</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Specialties */}
      <div style={{ padding: '24px 40px 0' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.02 }}>Find a specialist</div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>All specialties →</span>
        </div>
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {specs.map(s => {
            const colors = { blue: { bg: C.blue100, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 }, amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 } };
            const p = colors[s.hue];
            return (
              <div key={s.l} style={{ background: 'white', borderRadius: 14, padding: 14, border: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <s.Icon size={20}/>
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{s.l}</div>
                  <div style={{ fontSize: 11, color: C.ink500 }}>{s.count}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Available now */}
      <div style={{ padding: '24px 40px 28px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.02 }}>Available now</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <span style={{ fontSize: 12, color: C.ink500 }}>Sort by</span>
            <span style={{ fontSize: 12, color: C.blue600, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>Soonest <IconChevD size={14}/></span>
          </div>
        </div>
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          {docs.map((d, i) => {
            const colors = { blue: { bg: C.blue100, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 }, amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 } };
            const p = colors[d.hue];
            return (
              <div key={i} style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
                <div style={{ display: 'flex', gap: 14 }}>
                  <div style={{ width: 60, height: 60, borderRadius: 30, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16, flexShrink: 0, position: 'relative' }}>
                    {d.name.split(' ').slice(1).map(s => s[0]).join('')}
                    <div style={{ position: 'absolute', bottom: 0, right: 0, width: 16, height: 16, borderRadius: 8, background: d.online ? C.mint500 : C.amber500, border: '2px solid white' }}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <div style={{ fontSize: 15, fontWeight: 700 }}>{d.name}</div>
                      <IconHeart size={18} style={{ color: C.ink300 }}/>
                    </div>
                    <div style={{ fontSize: 12, color: C.ink500 }}>{d.spec} · {d.exp}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 12, fontWeight: 600 }}>
                        <IconStar size={12} style={{ color: C.amber500 }}/> {d.rating}
                      </span>
                      <span style={{ fontSize: 11, color: C.ink500 }}>({d.reviews})</span>
                      <div style={{ width: 1, height: 10, background: C.ink200 }}/>
                      <div style={{ display: 'flex', gap: 4 }}>
                        {d.lang.map(l => <span key={l} className="mono" style={{ fontSize: 10, padding: '1px 6px', borderRadius: 4, background: C.ink50, color: C.ink700, fontWeight: 600 }}>{l}</span>)}
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: d.online ? C.mint500 : C.amber500 }}>● Available {d.available}</div>
                    <div style={{ marginTop: 2 }}>
                      <span className="mono" style={{ fontSize: 16, fontWeight: 700 }}>₹{d.price}</span>
                      <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 4 }}>₹{d.mrp}</span>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button style={{ background: C.blue50, color: C.blue600, border: 'none', borderRadius: 10, padding: '8px 12px', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 4 }}>💬 Chat</button>
                    <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '8px 16px', fontWeight: 700, fontSize: 12, boxShadow: '0 4px 10px rgba(27,91,255,0.22)' }}>Video ▶</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <WebFooter />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W12) AUTH — Login / Sign up
// ═════════════════════════════════════════════════════════════
function WebAuth() {
  return (
    <div className="screen" style={{ ...Wstyles4, height: '100%', overflow: 'hidden', background: 'white', display: 'flex' }}>
      {/* Left — brand panel */}
      <div style={{
        flex: 1.1, padding: '40px 48px',
        background: `linear-gradient(160deg, ${C.navy800} 0%, ${C.blue600} 100%)`,
        color: 'white', position: 'relative', overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ position: 'absolute', right: -60, top: -60, width: 280, height: 280, borderRadius: 200, background: 'rgba(255,255,255,0.06)' }}/>
        <div style={{ position: 'absolute', right: 80, bottom: 100, width: 140, height: 140, borderRadius: 100, background: 'rgba(255,255,255,0.05)' }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 38, height: 38, 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: 16, fontWeight: 700, letterSpacing: -0.01 }}>Janaushadhi</div>
            <div style={{ fontSize: 10, opacity: 0.75, letterSpacing: 0.6, fontWeight: 600 }}>YOUR DIGITAL PHARMACY</div>
          </div>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 460 }}>
          <div style={{ fontSize: 11, opacity: 0.8, letterSpacing: 0.6, fontWeight: 600 }}>WELCOME BACK</div>
          <div style={{ fontSize: 42, fontWeight: 700, lineHeight: 1.05, marginTop: 8, letterSpacing: -0.03 }}>
            Your health,<br/>delivered to your door.
          </div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)', marginTop: 14, lineHeight: 1.6 }}>
            Sign in to track orders, refill prescriptions, book lab tests at home, and consult with verified doctors.
          </div>

          {/* Feature bullets */}
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { Icon: IconShield, l: '100% genuine medicines from licensed sources' },
              { Icon: IconTruck,  l: 'Express delivery in 28 min · Free over ₹199' },
              { Icon: IconStar,   l: 'Earn JANA+ points on every order' },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.14)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <f.Icon size={18}/>
                </div>
                <div style={{ fontSize: 13, opacity: 0.92 }}>{f.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ fontSize: 11, opacity: 0.6 }}>© 2026 Janaushadhi · Licensed pharmacy DL-560038</div>
      </div>

      {/* Right — form panel */}
      <div style={{ flex: 1, padding: '40px 56px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
        {/* Tab switcher */}
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ display: 'flex', padding: 4, borderRadius: 12, background: C.ink50, gap: 2 }}>
            <div style={{ padding: '8px 16px', borderRadius: 9, background: 'white', fontSize: 12, fontWeight: 700, color: C.ink900, boxShadow: '0 1px 3px rgba(11,31,77,0.06)' }}>Log in</div>
            <div style={{ padding: '8px 16px', borderRadius: 9, fontSize: 12, fontWeight: 600, color: C.ink500 }}>Sign up</div>
          </div>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 440, margin: '0 auto', width: '100%' }}>
          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.025 }}>Welcome back</div>
          <div style={{ fontSize: 13, color: C.ink500, marginTop: 6 }}>Enter your mobile number to continue. We'll send you an OTP.</div>

          {/* Phone input */}
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: C.ink700, letterSpacing: 0.3, marginBottom: 8 }}>MOBILE NUMBER</div>
            <div style={{ display: 'flex', alignItems: 'stretch', border: `2px solid ${C.blue600}`, borderRadius: 12, overflow: 'hidden', background: 'white' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', borderRight: `1px solid ${C.ink100}` }}>
                <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 }}>+91</span>
                <IconChevD size={14} style={{ color: C.ink500 }}/>
              </div>
              <div style={{ flex: 1, padding: '14px 16px', fontSize: 16, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace', letterSpacing: 1 }}>
                98765 43210
              </div>
            </div>
          </div>

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

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

          {/* Divider */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 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', icon: <svg width="18" height="18" 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', icon: <svg width="18" height="18" 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', icon: <svg viewBox="0 0 24 24" width="18" height="18" 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, padding: '12px 0', borderRadius: 12, background: 'white', border: `1px solid ${C.ink200}`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: C.ink700 }}>
                {s.icon} {s.label}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 28, textAlign: 'center', fontSize: 13, color: C.ink500 }}>
            New to Janaushadhi? <span style={{ color: C.blue600, fontWeight: 700 }}>Create an account</span>
          </div>
          <div style={{ marginTop: 14, fontSize: 11, color: C.ink400, textAlign: 'center', lineHeight: 1.6 }}>
            By continuing, you agree to our <span style={{ color: C.blue600, fontWeight: 600 }}>Terms</span> and <span style={{ color: C.blue600, fontWeight: 600 }}>Privacy Policy</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WebLabs, WebDoctor, WebAuth });