// Android Material 3 screens — batch 4: Addresses, Lab tests, Doctor consult, Reminders, Notifications, Help chat

const Aroboto4 = { fontFamily: 'Roboto, "Roboto Flex", system-ui, sans-serif' };

// ═════════════════════════════════════════════════════════════
// MA-15) ADDRESSES
// ═════════════════════════════════════════════════════════════
function MdScreenAddresses() {
  const addrs = [
    { label: 'Home', sub: 'Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038', Icon: IconHome, def: true, hue: 'blue' },
    { label: 'Work', sub: '5th Floor, Prestige Tech Park, Marathahalli, Bengaluru 560103', Icon: IconBox, def: false, hue: 'mint' },
    { label: 'Mom\u2019s place', sub: 'Plot 12, Sector 14, Whitefield, Bengaluru 560066', Icon: IconHeart, def: false, hue: 'rose' },
  ];
  const palettes = { blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer }, mint: { bg: '#D6F5EA', fg: '#0F5A48' }, rose: { bg: '#FFE4E4', fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Saved addresses" subtitle="3 places · used for delivery" trailing={[]} />

      {/* Map */}
      <div style={{ margin: '0 16px', height: 150, borderRadius: 16, position: 'relative', background: `linear-gradient(180deg, ${M.primaryContainer} 0%, #F4F8FF 100%)`, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg viewBox="0 0 380 150" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
          <path d="M0,110 Q90,60 190,80 T380,40" stroke="white" strokeWidth="12" fill="none" opacity="0.8"/>
          <path d="M60,150 L120,90 L260,100 L320,40" stroke="white" strokeWidth="7" fill="none" opacity="0.6"/>
          <rect x="40" y="20" width="44" height="32" rx="5" fill="white" opacity="0.5"/>
          <rect x="250" y="85" width="64" height="32" rx="5" fill="white" opacity="0.5"/>
        </svg>
        <div style={{ width: 48, height: 48, borderRadius: 24, background: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid white', boxShadow: '0 6px 14px rgba(0,0,0,0.2)' }}>
          <IconLoc size={24}/>
        </div>
        <div style={{ position: 'absolute', bottom: 12, right: 12, height: 36, padding: '0 14px', borderRadius: 18, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', gap: 6, fontWeight: 700, fontSize: 12, boxShadow: '0 2px 6px rgba(0,0,0,0.1)' }}>
          <IconLoc size={14}/> Use current
        </div>
      </div>

      <MdSection title="Your places" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {addrs.map((a, i) => {
          const p = palettes[a.hue];
          return (
            <div key={i} style={{ background: a.def ? M.primaryContainer : M.surfaceContainerLow, borderRadius: 16, padding: 14, display: 'flex', gap: 12, alignItems: 'flex-start', border: a.def ? `2px solid ${M.primary}` : '2px solid transparent' }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: p.bg, color: p.fg, 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: 600, color: M.onSurface }}>{a.label}</span>
                  {a.def && <MdChip style={{ height: 22, fontSize: 10, padding: '0 8px', background: '#D6F5EA', color: '#0F5A48', border: 'none' }}>Default</MdChip>}
                </div>
                <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 4, lineHeight: 1.5 }}>{a.sub}</div>
                <div style={{ marginTop: 8, display: 'flex', gap: 16 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: M.primary }}>Edit</span>
                  {!a.def && <span style={{ fontSize: 12, fontWeight: 600, color: M.onSurfaceVariant }}>Set default</span>}
                  <span style={{ fontSize: 12, fontWeight: 600, color: M.error }}>Delete</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ padding: 16, borderRadius: 16, border: `2px dashed ${M.primary}`, display: 'flex', alignItems: 'center', gap: 12, background: M.surfaceContainerLow }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus size={22}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: M.onSurface }}>Add new address</div>
            <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>Home, work, or anywhere else</div>
          </div>
          <IconChevR size={20} style={{ color: M.onSurfaceVariant }}/>
        </div>
      </div>
      <MdBottomNav active="profile" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-16) LAB TESTS
// ═════════════════════════════════════════════════════════════
function MdScreenLabTests() {
  const tests = [
    { name: 'Complete blood count (CBC)', sub: '24 parameters · No fasting', price: 320, mrp: 480, hue: 'rose', tag: 'POPULAR' },
    { name: 'HbA1c (Diabetes)', sub: '3-month sugar avg · 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 T3 T4 TSH', sub: '3 tests · Morning sample', price: 540, mrp: 720, hue: 'mint', tag: null },
  ];
  const palettes = { blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer }, mint: { bg: '#D6F5EA', fg: '#0F5A48' }, amber: { bg: '#FFEFD1', fg: '#7A4500' }, rose: { bg: '#FFE4E4', fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      {/* Hero */}
      <div style={{ margin: '8px 16px 0', borderRadius: 20, padding: '18px 18px 20px', background: `linear-gradient(160deg, ${M.primary}, #0B1F4D)`, color: 'white' }}>
        <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: 15, fontWeight: 600 }}>Lab tests</div>
        </div>
        <div style={{ marginTop: 16, fontSize: 22, fontWeight: 600, lineHeight: 1.15 }}>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 pickup</span>
        </div>
      </div>

      <div style={{ padding: '0 16px', marginTop: 14 }}>
        <MdSearchBar value="Search 800+ tests & packages" leading="search" />
      </div>

      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '14px 16px 4px' }}>
        <MdChip selected>Popular</MdChip><MdChip>Diabetes</MdChip><MdChip>Heart</MdChip><MdChip>Thyroid</MdChip><MdChip>Full body</MdChip>
      </div>

      <MdSection title="Most booked this week" action="See all" />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tests.map((t, i) => {
          const p = palettes[t.hue];
          return (
            <div key={i} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 14, display: 'flex', gap: 12 }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: p.bg, color: p.fg, 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: 14, fontWeight: 600, color: M.onSurface }}>{t.name}</span>
                  {t.tag && <MdChip style={{ height: 20, fontSize: 9, padding: '0 6px', background: '#FFEFD1', color: '#7A4500', border: 'none' }}>{t.tag}</MdChip>}
                </div>
                <div style={{ fontSize: 11, color: M.onSurfaceVariant, 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: M.onSurface }}>₹{t.price}</span>
                    <span className="mono" style={{ fontSize: 11, color: M.onSurfaceVariant, textDecoration: 'line-through', marginLeft: 5 }}>₹{t.mrp}</span>
                  </div>
                  <MdButton variant="tonal" style={{ height: 32, padding: '0 16px' }}>Book</MdButton>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <MdSection title="Health packages" action="All" />
      <div style={{ padding: '0 16px' }}>
        <div style={{ background: 'linear-gradient(135deg, #D6F5EA, white)', border: '1px solid rgba(34,194,154,0.2)', borderRadius: 16, padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: M.tertiary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconHeart size={22}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: M.onSurface }}>Full body checkup · 62 tests</div>
            <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>Recommended for ages 30+ annually</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <span className="mono" style={{ fontSize: 15, fontWeight: 700, color: M.onSurface }}>₹1,499</span>
            <div className="mono" style={{ fontSize: 10, color: M.onSurfaceVariant, textDecoration: 'line-through' }}>₹2,800</div>
          </div>
        </div>
      </div>
      <MdBottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-17) DOCTOR CONSULT
// ═════════════════════════════════════════════════════════════
function MdScreenDoctorConsult() {
  const specs = [
    { l: 'General', Icon: IconUser, hue: 'blue' },
    { l: 'Skin', Icon: IconHeart, hue: 'rose' },
    { l: 'Pediatrics', Icon: IconShield, hue: 'mint' },
    { l: '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' },
  ];
  const palettes = { blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer }, mint: { bg: '#D6F5EA', fg: '#0F5A48' }, amber: { bg: '#FFEFD1', fg: '#7A4500' }, rose: { bg: '#FFE4E4', fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Consult a doctor" subtitle="Video or chat · in minutes" trailing={[]} />

      {/* Active consult */}
      <div style={{ margin: '0 16px', borderRadius: 16, padding: 14, background: 'linear-gradient(135deg, #D6F5EA, white)', border: '1px solid rgba(34,194,154,0.2)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 48, height: 48, borderRadius: 24, background: M.tertiary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>PM</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: M.onSurface }}>Dr. Priya replied to your chat</div>
          <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>2 min ago · Follow-up</div>
        </div>
        <MdButton variant="filled" style={{ height: 36, padding: '0 16px', background: M.tertiary }}>Open</MdButton>
      </div>

      <MdSection title="Pick a specialist" action="All" />
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {specs.map(s => {
          const p = palettes[s.hue];
          return (
            <div key={s.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 60, height: 60, borderRadius: 18, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><s.Icon size={26}/></div>
              <div style={{ fontSize: 11, fontWeight: 500, color: M.onSurface }}>{s.l}</div>
            </div>
          );
        })}
      </div>

      <MdSection title="Available now" action="See all" />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {docs.map((d, i) => {
          const p = palettes[d.hue];
          return (
            <div key={i} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 14 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 52, height: 52, borderRadius: 26, position: 'relative', background: p.bg, color: p.fg, 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') ? M.tertiary : '#F5A524', border: '2px solid white' }}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: M.onSurface }}>{d.name}</div>
                    <IconHeart size={18} style={{ color: M.onSurfaceVariant }}/>
                  </div>
                  <div style={{ fontSize: 11, color: M.onSurfaceVariant, 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: M.onSurface }}><IconStar size={12} style={{ color: '#F5A524' }}/> {d.rating}</span>
                    <div style={{ width: 1, height: 10, background: M.outlineVar }}/>
                    <span className="mono" style={{ fontSize: 10, color: M.onSurfaceVariant }}>{d.lang}</span>
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, paddingTop: 12, borderTop: `1px solid ${M.outlineVar}` }}>
                <div>
                  <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: M.onSurface }}>₹{d.price}</div>
                  <div style={{ fontSize: 10, color: d.available.startsWith('In') ? M.tertiary : '#F5A524', fontWeight: 700 }}>● {d.available}</div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <MdButton variant="tonal" style={{ height: 34, padding: '0 14px' }}>Chat</MdButton>
                  <MdButton variant="filled" style={{ height: 34, padding: '0 16px' }}>Video</MdButton>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <MdBottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-18) MEDICINE REMINDERS
// ═════════════════════════════════════════════════════════════
function MdScreenReminders() {
  const schedule = [
    { time: '08:00 AM', label: 'Morning · After breakfast', meds: [
      { name: 'Metformin SR 500mg', dose: '1 tab', hue: 'blue', taken: true },
      { name: 'Atorvastatin 10mg', dose: '1 tab', hue: 'mint', taken: true },
    ]},
    { time: '06:30 PM', label: 'Evening · before dinner', meds: [
      { name: 'Pan-D', dose: '1 cap', hue: 'mint', taken: false, due: true },
      { name: 'Vitamin D3 60K', dose: '1 cap · weekly', hue: 'amber', taken: false, due: true },
    ]},
    { time: '10:00 PM', label: 'Bedtime', meds: [
      { name: 'Metformin SR 500mg', dose: '1 tab', hue: 'blue', taken: false },
    ]},
  ];
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Reminders" subtitle="Today, Wed 28 May" trailing={['more']} />

      {/* Adherence ring */}
      <div style={{ margin: '0 16px', padding: 18, borderRadius: 20, background: `linear-gradient(160deg, ${M.primary}, #0B1F4D)`, color: 'white', display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{ position: 'relative', width: 86, height: 86 }}>
          <svg viewBox="0 0 86 86" width="86" height="86">
            <circle cx="43" cy="43" r="36" stroke="rgba(255,255,255,0.18)" strokeWidth="9" fill="none"/>
            <circle cx="43" cy="43" r="36" stroke={M.tertiary} strokeWidth="9" fill="none" strokeDasharray={`${226 * 0.6} 226`} strokeLinecap="round" transform="rotate(-90 43 43)"/>
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <div className="mono" style={{ fontSize: 20, fontWeight: 700 }}>60%</div>
            <div style={{ fontSize: 9, opacity: 0.8 }}>TODAY</div>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>3 of 5 doses taken</div>
          <div style={{ fontSize: 12, opacity: 0.85, marginTop: 4 }}>2 doses due at <span style={{ fontWeight: 700 }}>6:30 PM</span></div>
          <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2 }}>14-day streak · keep going!</div>
        </div>
      </div>

      <MdSection title="Today's schedule" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {schedule.map((slot, si) => (
          <div key={si}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
              <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: slot.meds.some(m => m.due) ? M.primary : M.onSurface }}>{slot.time}</div>
              <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>{slot.label}</div>
              {slot.meds.some(m => m.due) && <MdChip selected style={{ height: 20, fontSize: 9, padding: '0 8px', background: M.primaryContainer, border: 'none' }}>NOW</MdChip>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {slot.meds.map((m, mi) => (
                <div key={mi} style={{ background: M.surfaceContainerLow, borderRadius: 14, padding: 12, display: 'flex', alignItems: 'center', gap: 12, opacity: m.taken ? 0.6 : 1, border: m.due ? `2px solid ${M.primary}` : '2px solid transparent' }}>
                  <ProductPlaceholder hue={m.hue} w={40} h={40} radius={10} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: M.onSurface, textDecoration: m.taken ? 'line-through' : 'none' }}>{m.name}</div>
                    <div style={{ fontSize: 11, color: M.onSurfaceVariant, marginTop: 2 }}>{m.dose}</div>
                  </div>
                  {m.taken ? (
                    <div style={{ width: 28, height: 28, borderRadius: 14, background: M.tertiary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconCheck size={16}/></div>
                  ) : (
                    <MdButton variant={m.due ? 'filled' : 'outlined'} style={{ height: 32, padding: '0 12px', fontSize: 11 }}>Mark taken</MdButton>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <MdBottomNav active="profile" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-19) NOTIFICATIONS
// ═════════════════════════════════════════════════════════════
function MdScreenNotifications() {
  const notifs = [
    { group: 'Today', items: [
      { title: 'Your order is being packed', sub: '#JN-2841-09 · est 6:40 PM', time: '5:55 PM', unread: true, Icon: IconBox, hue: 'blue' },
      { title: 'Rx verified by Dr. Mehta', sub: '"Refill safe to dispense."', time: '5:48 PM', unread: true, Icon: IconRx, hue: 'mint' },
      { title: '6:30 PM — Time for Pan-D', sub: '1 capsule before dinner', time: '6:30 PM', unread: false, Icon: IconClock, hue: 'amber' },
    ]},
    { group: 'Yesterday', items: [
      { title: '20% off on vitamins', sub: 'Use VIT20 · ends Sunday', time: '11:24 AM', unread: false, Icon: IconStar, hue: 'amber' },
      { title: 'Time to refill Metformin SR', sub: '3 days of stock left', time: '9:00 AM', unread: false, Icon: IconRx, hue: 'blue' },
    ]},
  ];
  const palettes = { blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer }, mint: { bg: '#D6F5EA', fg: '#0F5A48' }, amber: { bg: '#FFEFD1', fg: '#7A4500' }, rose: { bg: '#FFE4E4', fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Notifications" subtitle="2 unread" trailing={['more']} />
      <div style={{ display: 'flex', gap: 8, padding: '0 16px 4px' }}>
        <MdChip selected>All</MdChip><MdChip>Orders</MdChip><MdChip>Reminders</MdChip><MdChip>Offers</MdChip>
      </div>

      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {notifs.map((g, gi) => (
          <div key={gi}>
            <div style={{ fontSize: 11, fontWeight: 700, color: M.onSurfaceVariant, letterSpacing: 0.5, marginBottom: 8 }}>{g.group.toUpperCase()}</div>
            <div style={{ background: M.surfaceContainerLow, borderRadius: 16, overflow: 'hidden' }}>
              {g.items.map((n, ni, a) => {
                const p = palettes[n.hue];
                return (
                  <div key={ni} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14, borderBottom: ni < a.length - 1 ? `1px solid ${M.outlineVar}` : 'none', background: n.unread ? M.primaryContainer : 'transparent', position: 'relative' }}>
                    {n.unread && <div style={{ position: 'absolute', top: 18, right: 14, width: 8, height: 8, borderRadius: 4, background: M.primary }}/>}
                    <div style={{ width: 40, height: 40, borderRadius: 20, background: n.unread ? 'white' : p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><n.Icon size={20}/></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: n.unread ? 700 : 500, color: M.onSurface, paddingRight: n.unread ? 14 : 0 }}>{n.title}</div>
                      <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 2, lineHeight: 1.4 }}>{n.sub}</div>
                      <div className="mono" style={{ fontSize: 10, color: M.onSurfaceVariant, marginTop: 6, opacity: 0.7 }}>{n.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <MdBottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-20) HELP & CHAT
// ═════════════════════════════════════════════════════════════
function MdScreenHelpChat() {
  return (
    <div className="screen" style={{ ...Aroboto4, height: '100%', overflow: 'hidden', background: M.surface, display: 'flex', flexDirection: 'column', paddingBottom: 24 }}>
      {/* App bar */}
      <div style={{ padding: '8px 8px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${M.outlineVar}` }}>
        <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: M.onSurface }}><IconChevL size={24}/></div>
        <div style={{ width: 40, height: 40, borderRadius: 20, position: 'relative', background: `linear-gradient(160deg, ${M.secondary}, ${M.primary})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>
          J<div style={{ position: 'absolute', bottom: 0, right: 0, width: 12, height: 12, borderRadius: 6, background: M.tertiary, border: '2px solid white' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: M.onSurface }}>Janaushadhi Care</div>
          <div style={{ fontSize: 11, color: M.tertiary, fontWeight: 600 }}>● Replies in seconds</div>
        </div>
        <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: M.onSurfaceVariant }}>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.75" 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>
        </div>
      </div>

      {/* Chat */}
      <div style={{ flex: 1, padding: '16px', background: M.surfaceDim, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ textAlign: 'center' }}>
          <span style={{ padding: '4px 12px', fontSize: 11, borderRadius: 999, background: M.surfaceContainerHigh, color: M.onSurfaceVariant }}>Today, 5:42 PM</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, maxWidth: '85%' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(160deg, ${M.secondary}, ${M.primary})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>J</div>
          <div style={{ background: M.surface, borderRadius: '18px 18px 18px 4px', padding: '10px 14px' }}>
            <div style={{ fontSize: 13, color: M.onSurface, lineHeight: 1.45 }}>Hi Aarav! How can we help today?</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginLeft: 36 }}>
          {['Track my order', 'Rx not verified', 'Refund status'].map((q, i) => (
            <div key={i} style={{ padding: '7px 12px', background: M.surface, borderRadius: 12, fontSize: 12, fontWeight: 600, color: M.primary, border: `1px solid ${M.primaryContainer}` }}>{q}</div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ background: M.primary, color: 'white', borderRadius: '18px 18px 4px 18px', padding: '10px 14px', maxWidth: '75%' }}>
            <div style={{ fontSize: 13, lineHeight: 1.45 }}>Where is my order #JN-2841-09?</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, maxWidth: '88%' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(160deg, ${M.secondary}, ${M.primary})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>J</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ background: M.surface, borderRadius: '18px 18px 18px 4px', padding: '10px 14px' }}>
              <div style={{ fontSize: 13, color: M.onSurface, lineHeight: 1.45 }}>It's being packed and will be on its way in ~10 minutes.</div>
            </div>
            <div style={{ background: M.surface, borderRadius: 16, padding: 12, border: `1px solid ${M.outlineVar}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconTruck size={20}/></div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: M.onSurface }}>#JN-2841-09</div>
                  <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>Packing · ETA 6:40 PM</div>
                </div>
              </div>
              <MdButton variant="filled" full style={{ height: 36, marginTop: 10 }}>Track live</MdButton>
            </div>
          </div>
        </div>
      </div>

      {/* Composer */}
      <div style={{ padding: '10px 14px', borderTop: `1px solid ${M.outlineVar}`, background: M.surface, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 40, height: 40, borderRadius: 20, background: M.surfaceContainerHigh, color: M.onSurfaceVariant, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus size={20}/></div>
        <div style={{ flex: 1, padding: '12px 16px', borderRadius: 24, background: M.surfaceContainerHigh, fontSize: 13, color: M.onSurfaceVariant }}>Type a message…</div>
        <div style={{ width: 44, height: 44, borderRadius: 22, background: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconMic size={20}/></div>
      </div>
    </div>
  );
}

Object.assign(window, { MdScreenAddresses, MdScreenLabTests, MdScreenDoctorConsult, MdScreenReminders, MdScreenNotifications, MdScreenHelpChat });