// Screens 15-19: Categories, Filters sheet, Addresses, Lab tests, Doctor consult

// ═════════════════════════════════════════════════════════════
// 15) CATEGORIES (full grid)
// ═════════════════════════════════════════════════════════════
function ScreenCategories() {
  const cats = [
    { label: 'Pain relief',     count: 142, hue: 'blue',  Icon: IconPill },
    { label: 'Diabetes care',   count: 86,  hue: 'mint',  Icon: IconHeart },
    { label: 'Heart & BP',      count: 64,  hue: 'rose',  Icon: IconRx },
    { label: 'Cold & flu',      count: 58,  hue: 'amber', Icon: IconShield },
    { label: 'Digestive',       count: 47,  hue: 'mint',  Icon: IconPill },
    { label: 'Vitamins',        count: 124, hue: 'amber', Icon: IconStar },
    { label: 'Skin care',       count: 92,  hue: 'rose',  Icon: IconHeart },
    { label: 'Hair care',       count: 68,  hue: 'navy',  Icon: IconUser },
    { label: 'Baby & mom',      count: 81,  hue: 'rose',  Icon: IconUser },
    { label: 'Sexual wellness', count: 54,  hue: 'blue',  Icon: IconShield },
    { label: 'Ayurveda',        count: 102, hue: 'mint',  Icon: IconStar },
    { label: 'Devices',         count: 38,  hue: 'navy',  Icon: IconScan },
  ];
  const palettes = {
    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 },
    navy:  { bg: '#E2E8FA', fg: C.navy800 },
  };
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Categories</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Browse all medicines & wellness</div>
        </div>
      </div>

      <SearchBar placeholder="Search within categories" onMic={false} onScan={false} />

      {/* Featured big banner */}
      <div style={{
        margin: '16px 20px 0', borderRadius: 18, padding: '16px 18px',
        background: `linear-gradient(135deg, ${C.mint100}, #B3EAD7)`,
        display: 'flex', alignItems: 'center', gap: 12, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#0F5A48', letterSpacing: 1 }}>NEW · 2,400+ ITEMS</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#0F5A48', marginTop: 2, letterSpacing: -0.02 }}>Ayurveda store</div>
          <div style={{ fontSize: 12, color: '#0F5A48', opacity: 0.75, marginTop: 2 }}>Curated by Dr. Sharma & team</div>
        </div>
        <div style={{
          width: 64, height: 64, borderRadius: 18, background: 'white', color: C.mint500,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 16px rgba(34,194,154,0.20)',
        }}><IconStar size={28} /></div>
      </div>

      <SectionHeader title="All categories" action="A–Z" />
      <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {cats.map((c) => {
          const p = palettes[c.hue];
          return (
            <div key={c.label} style={{
              background: 'white', borderRadius: 16, padding: '14px 10px', textAlign: 'center',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 16,
                background: p.bg, color: p.fg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><c.Icon size={22} /></div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: C.ink900, lineHeight: 1.2 }}>{c.label}</div>
                <div className="mono" style={{ fontSize: 10, color: C.ink500, marginTop: 2 }}>{c.count} items</div>
              </div>
            </div>
          );
        })}
      </div>
      <BottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 16) FILTERS (bottom sheet over dimmed cart/search)
// ═════════════════════════════════════════════════════════════
function ScreenFilters() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'hidden', background: C.ink50, paddingTop: 50, paddingBottom: 0, position: 'relative' }}>
      {/* Dimmed background — mock of search list */}
      <div style={{ padding: '8px 20px 0', opacity: 0.35, pointerEvents: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}/>
          <div style={{ flex: 1, height: 40, background: 'white', borderRadius: 14, boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}/>
        </div>
        {[0,1,2,3].map(i => (
          <div key={i} style={{ background: 'white', borderRadius: 18, padding: 12, marginTop: 12, height: 84 }}/>
        ))}
      </div>
      {/* Scrim */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,23,51,0.55)', pointerEvents: 'none' }}/>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'white', borderRadius: '24px 24px 0 0',
        padding: '14px 20px 28px', boxShadow: '0 -20px 40px rgba(11,31,77,0.18)',
        maxHeight: '76%', overflow: 'auto',
      }}>
        <div style={{ width: 40, height: 4, background: C.ink200, borderRadius: 2, margin: '0 auto 14px' }}/>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Filters</div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 700 }}>Reset</span>
        </div>

        {/* Form: Type */}
        <div style={{ marginTop: 18, fontSize: 13, fontWeight: 700, color: C.ink900 }}>Type</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
          {[{l:'Tablets', s: true}, {l:'Syrups', s: false}, {l:'Capsules', s: true}, {l:'Injections', s: false}, {l:'Drops', s: false}, {l:'Ointments', s: false}].map((c, i) => (
            <div key={i} style={{
              padding: '8px 14px', borderRadius: 12, fontSize: 12, fontWeight: 600,
              background: c.s ? C.blue600 : C.ink50, color: c.s ? 'white' : C.ink700,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {c.s && <IconCheck size={12} />}
              {c.l}
            </div>
          ))}
        </div>

        {/* Brand */}
        <div style={{ marginTop: 18, fontSize: 13, fontWeight: 700, color: C.ink900 }}>Brand</div>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            { label: 'Cipla', count: 86, on: true },
            { label: 'Sun Pharma', count: 124, on: true },
            { label: 'Dr. Reddy\u2019s', count: 67, on: false },
            { label: 'Pfizer', count: 42, on: false },
          ].map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
              <div style={{
                width: 22, height: 22, borderRadius: 6,
                background: b.on ? C.blue600 : 'white',
                border: b.on ? 'none' : `2px solid ${C.ink200}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
              }}>{b.on && <IconCheck size={14} />}</div>
              <span style={{ flex: 1, fontSize: 13, color: C.ink900, fontWeight: 500 }}>{b.label}</span>
              <span className="mono" style={{ fontSize: 11, color: C.ink400 }}>{b.count}</span>
            </div>
          ))}
        </div>

        {/* Price slider */}
        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Price</div>
          <div className="mono" style={{ fontSize: 12, color: C.ink700, fontWeight: 600 }}>₹40 — ₹650</div>
        </div>
        <div style={{ marginTop: 12, height: 6, background: C.ink100, borderRadius: 3, position: 'relative' }}>
          <div style={{ position: 'absolute', left: '8%', right: '32%', top: 0, bottom: 0, background: C.blue600, borderRadius: 3 }}/>
          <div style={{ position: 'absolute', left: '8%', top: '50%', width: 20, height: 20, borderRadius: 10, background: 'white', border: `3px solid ${C.blue600}`, transform: 'translate(-50%, -50%)', boxShadow: '0 2px 4px rgba(11,31,77,0.20)' }}/>
          <div style={{ position: 'absolute', left: '68%', top: '50%', width: 20, height: 20, borderRadius: 10, background: 'white', border: `3px solid ${C.blue600}`, transform: 'translate(-50%, -50%)', boxShadow: '0 2px 4px rgba(11,31,77,0.20)' }}/>
        </div>

        {/* Toggles */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { label: 'In stock only', sub: 'Hide unavailable items', on: true },
            { label: 'Generic alternatives', sub: 'Show cheaper substitutes', on: true },
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{t.label}</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>{t.sub}</div>
              </div>
              {/* iOS toggle */}
              <div style={{
                width: 46, height: 28, borderRadius: 14, background: t.on ? C.blue600 : C.ink200,
                position: 'relative', transition: 'all .2s',
              }}>
                <div style={{
                  position: 'absolute', top: 2, left: t.on ? 20 : 2, width: 24, height: 24, borderRadius: 12, background: 'white',
                  boxShadow: '0 2px 4px rgba(0,0,0,0.18)', transition: 'all .2s',
                }}/>
              </div>
            </div>
          ))}
        </div>

        {/* Apply CTA */}
        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          <button style={{ flex: 1, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 14, padding: '13px 0', fontSize: 14, fontWeight: 700 }}>Cancel</button>
          <button style={{ flex: 1.6, background: C.blue600, color: 'white', border: 'none', borderRadius: 14, padding: '13px 0', fontSize: 14, fontWeight: 700, boxShadow: '0 8px 18px rgba(27,91,255,0.28)' }}>Show 184 results</button>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 17) ADDRESSES (list + add)
// ═════════════════════════════════════════════════════════════
function ScreenAddresses() {
  const addrs = [
    { label: 'Home', sub: 'Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038', Icon: IconHome, default: true, hue: 'blue' },
    { label: 'Work', sub: '5th Floor, Prestige Tech Park, Marathahalli, Bengaluru 560103', Icon: IconBox, default: false, hue: 'mint' },
    { label: 'Mom\u2019s place', sub: 'Plot 12, Sector 14, Whitefield, Bengaluru 560066', Icon: IconHeart, default: false, hue: 'rose' },
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Saved addresses</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>3 places · used for delivery</div>
        </div>
      </div>

      {/* Map slot */}
      <div style={{
        margin: '14px 20px 0', height: 140, borderRadius: 18, position: 'relative',
        background: `linear-gradient(180deg, ${C.blue100} 0%, ${C.blue50} 100%)`,
        overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg viewBox="0 0 360 140" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
          <path d="M0,100 Q90,60 180,80 T360,40" stroke="white" strokeWidth="10" fill="none" opacity="0.7"/>
          <path d="M60,140 L120,80 L240,90 L300,40" stroke="white" strokeWidth="6" fill="none" opacity="0.6"/>
          <rect x="40" y="20" width="40" height="30" rx="4" fill="white" opacity="0.5"/>
          <rect x="240" y="80" width="60" height="30" rx="4" fill="white" opacity="0.5"/>
        </svg>
        <div style={{
          width: 44, height: 44, borderRadius: 22, background: C.blue600, color: 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid white',
          boxShadow: '0 6px 14px rgba(0,0,0,0.2)',
        }}>
          <IconLoc size={22} />
        </div>
        <button style={{
          position: 'absolute', bottom: 12, right: 12,
          background: 'white', color: C.blue600, border: 'none',
          borderRadius: 12, padding: '8px 14px', fontWeight: 700, fontSize: 12,
          boxShadow: '0 2px 6px rgba(0,0,0,0.10)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}><IconLoc size={14} /> Use current</button>
      </div>

      <SectionHeader title="Your places" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {addrs.map((a, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 16, padding: 14,
            display: 'flex', gap: 12, alignItems: 'flex-start',
            border: a.default ? `2px solid ${C.blue600}` : '2px solid transparent',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 12,
              background: { blue: C.blue100, mint: C.mint100, rose: C.rose100 }[a.hue],
              color: { blue: C.blue600, mint: C.mint500, rose: C.rose500 }[a.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><a.Icon size={20} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>{a.label}</span>
                {a.default && <span className="pill" style={{ background: C.mint100, color: '#0F5A48', padding: '2px 8px', fontSize: 10 }}>Default</span>}
              </div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 4, lineHeight: 1.5 }}>{a.sub}</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 14 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Edit</span>
                {!a.default && <span style={{ fontSize: 12, fontWeight: 700, color: C.ink500 }}>Set default</span>}
                <span style={{ fontSize: 12, fontWeight: 700, color: C.rose500 }}>Delete</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Add new address */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{
          padding: 16, borderRadius: 16, border: `2px dashed ${C.blue300}`,
          display: 'flex', alignItems: 'center', gap: 12, background: 'white',
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconPlus size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>Add new address</div>
            <div style={{ fontSize: 11, color: C.ink500 }}>Home, work, or anywhere else</div>
          </div>
          <IconChevR size={18} style={{ color: C.ink400 }} />
        </div>
      </div>
      <BottomNav active="profile" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 18) LAB TESTS booking
// ═════════════════════════════════════════════════════════════
function ScreenLabTests() {
  const tests = [
    { name: 'Complete blood count (CBC)', sub: '24 parameters · Fasting not required', price: 320, mrp: 480, hue: 'rose', tag: 'POPULAR' },
    { name: 'HbA1c (Diabetes)', sub: '3-month sugar avg · 12-hr fasting', price: 480, mrp: 650, hue: 'blue', tag: null },
    { name: 'Vitamin D 25-OH', sub: 'Deficiency screening', price: 1080, mrp: 1400, hue: 'amber', tag: null },
    { name: 'Thyroid profile T3 T4 TSH', sub: '3 tests · Morning sample', price: 540, mrp: 720, hue: 'mint', tag: null },
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      {/* Hero */}
      <div style={{
        margin: '8px 20px 0', borderRadius: 22, padding: '18px 18px 20px',
        background: `linear-gradient(160deg, ${C.navy800}, ${C.blue600})`,
        color: 'white', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconChevL size={20} />
          </div>
          <div style={{ flex: 1, fontSize: 14, fontWeight: 700, letterSpacing: -0.01 }}>Lab tests</div>
        </div>
        <div style={{ marginTop: 16, fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: -0.02 }}>
          Home sample collection,<br/>NABL-accredited labs
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 14, fontSize: 11, opacity: 0.85 }}>
          <span>⚡ Reports in 12 hrs</span>
          <span>• Free sample pickup</span>
        </div>
      </div>

      {/* Search */}
      <div style={{
        margin: '14px 20px 0', display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 14px', background: 'white', borderRadius: 16,
        boxShadow: '0 1px 0 rgba(11,31,77,0.04), 0 8px 18px rgba(11,31,77,0.06)',
      }}>
        <IconSearch size={20} style={{ color: C.ink400 }} />
        <span style={{ flex: 1, fontSize: 14, color: C.ink400 }}>Search 800+ tests & packages</span>
        <IconScan size={20} style={{ color: C.blue600 }} />
      </div>

      {/* Quick chips */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '14px 20px 4px' }}>
        {['Popular', 'Diabetes', 'Heart', 'Thyroid', 'Liver', 'Kidney', 'Women', 'Full body'].map((f, i) => (
          <div key={f} style={{
            padding: '8px 14px', borderRadius: 12,
            background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700,
            fontSize: 12, fontWeight: 600, flexShrink: 0,
            boxShadow: i === 0 ? 'none' : '0 1px 3px rgba(11,31,77,0.05)',
          }}>{f}</div>
        ))}
      </div>

      <SectionHeader title="Most booked this week" action="See all" />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tests.map((t, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 16, padding: 14, display: 'flex', gap: 12,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <div style={{
              width: 52, height: 52, borderRadius: 14,
              background: { blue: C.blue100, mint: C.mint100, amber: C.amber100, rose: C.rose100 }[t.hue],
              color: { blue: C.blue600, mint: C.mint500, amber: C.amber500, rose: C.rose500 }[t.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IconScan size={26} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>{t.name}</span>
                {t.tag && <span className="pill" style={{ background: C.amber100, color: '#7A4500', padding: '1px 6px', fontSize: 9 }}>{t.tag}</span>}
              </div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{t.sub}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                <div>
                  <span className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900 }}>₹{t.price}</span>
                  <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 5 }}>₹{t.mrp}</span>
                </div>
                <button style={{
                  background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12,
                  padding: '7px 14px', fontWeight: 700, fontSize: 12,
                }}>Book</button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Packages teaser */}
      <SectionHeader title="Health packages" action="View all" />
      <div style={{ padding: '0 20px' }}>
        <div style={{
          background: `linear-gradient(135deg, ${C.mint100}, white)`,
          border: `1px solid ${C.mint500}33`, borderRadius: 16, padding: 14,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconHeart size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Full body checkup · 62 tests</div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>Recommended for ages 30+ annually</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <span className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900 }}>₹1,499</span>
            <div className="mono" style={{ fontSize: 10, color: C.ink400, textDecoration: 'line-through' }}>₹2,800</div>
          </div>
        </div>
      </div>
      <BottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 19) DOCTOR CONSULTATION
// ═════════════════════════════════════════════════════════════
function ScreenDoctorConsult() {
  const specs = [
    { label: 'General', Icon: IconUser, hue: 'blue' },
    { label: 'Skin', Icon: IconHeart, hue: 'rose' },
    { label: 'Pediatrics', Icon: IconShield, hue: 'mint' },
    { label: 'Mental', Icon: IconStar, hue: 'amber' },
  ];
  const docs = [
    { name: 'Dr. Priya Mehta', spec: 'General physician · 12 yrs', rating: '4.9', lang: 'EN · HI · KN', price: 199, available: 'In 4 min', hue: 'blue' },
    { name: 'Dr. Rohan Iyer', spec: 'Dermatologist · 8 yrs', rating: '4.8', lang: 'EN · HI', price: 349, available: 'In 12 min', hue: 'rose' },
    { name: 'Dr. Anjali Rao', spec: 'Pediatrician · 15 yrs', rating: '4.9', lang: 'EN · HI · TA', price: 299, available: 'Tomorrow', hue: 'mint' },
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Consult a doctor</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Video or chat · in minutes</div>
        </div>
      </div>

      {/* Active consult card (if any) */}
      <div style={{
        margin: '14px 20px 0', borderRadius: 18, padding: 14,
        background: `linear-gradient(135deg, ${C.mint100}, white)`,
        border: `1px solid ${C.mint500}33`,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 24, background: C.mint500, color: 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
        }}>PM</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Dr. Priya replied to your chat</div>
          <div style={{ fontSize: 11, color: C.ink500 }}>2 min ago · Follow-up consultation</div>
        </div>
        <button style={{ background: C.mint500, color: 'white', border: 'none', borderRadius: 12, padding: '8px 12px', fontWeight: 700, fontSize: 12 }}>Open</button>
      </div>

      {/* Spec grid */}
      <SectionHeader title="Pick a specialist" action="All" />
      <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {specs.map((s) => (
          <div key={s.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{
              width: 60, height: 60, borderRadius: 18,
              background: { blue: C.blue100, rose: C.rose100, mint: C.mint100, amber: C.amber100 }[s.hue],
              color: { blue: C.blue600, rose: C.rose500, mint: C.mint500, amber: C.amber500 }[s.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><s.Icon size={26} /></div>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.ink700, textAlign: 'center' }}>{s.label}</div>
          </div>
        ))}
      </div>

      <SectionHeader title="Available now" action="See all" />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {docs.map((d, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 18, padding: 14,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{
                width: 52, height: 52, borderRadius: 26, position: 'relative',
                background: { blue: C.blue100, rose: C.rose100, mint: C.mint100 }[d.hue],
                color: { blue: C.blue600, rose: C.rose500, mint: C.mint500 }[d.hue],
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
              }}>{d.name.split(' ').slice(1).map(s => s[0]).join('')}
                <div style={{ position: 'absolute', bottom: 0, right: 0, width: 14, height: 14, borderRadius: 7, background: d.available.startsWith('In') ? C.mint500 : C.amber500, border: '2px solid white' }}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>{d.name}</div>
                  <IconHeart size={18} style={{ color: C.ink300 }} />
                </div>
                <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{d.spec}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 2, fontSize: 11, fontWeight: 600, color: C.ink700 }}>
                    <IconStar size={12} style={{ color: C.amber500 }} /> {d.rating}
                  </span>
                  <div style={{ width: 1, height: 10, background: C.ink200 }}/>
                  <span className="mono" style={{ fontSize: 10, color: C.ink500 }}>{d.lang}</span>
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, paddingTop: 12, borderTop: `1px solid ${C.ink100}` }}>
              <div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900 }}>₹{d.price}</div>
                <div style={{ fontSize: 10, color: d.available.startsWith('In') ? C.mint500 : C.amber500, fontWeight: 700 }}>● {d.available}</div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{ background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12, 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: 12, padding: '8px 14px', fontWeight: 700, fontSize: 12, boxShadow: '0 4px 10px rgba(27,91,255,0.25)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  Video ▶
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active="home" />
    </div>
  );
}

Object.assign(window, { ScreenCategories, ScreenFilters, ScreenAddresses, ScreenLabTests, ScreenDoctorConsult });