// Android Material 3 screens for Janaushadhi
// All screens fit inside AndroidDevice (412 × 892).
// Status bar 40px + nav gesture bar 24px → usable height ≈ 828px.
// Padding bottom reserves space for MdBottomNav (80px + 24 safe area).

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

// ═════════════════════════════════════════════════════════════
// A1) HOME (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenHome() {
  const cats = [
    { label: 'Medicines', Icon: IconPill,   bg: M.primaryContainer, fg: M.onPrimaryContainer },
    { label: 'Wellness',  Icon: IconHeart,  bg: '#D6F5EA', fg: '#0F5A48' },
    { label: 'Devices',   Icon: IconShield, bg: '#E2EAFA', fg: '#0B1F4D' },
    { label: 'Lab tests', Icon: IconScan,   bg: '#FFEFD1', fg: '#7A4500' },
    { label: 'Babycare',  Icon: IconUser,   bg: '#FFE4E4', fg: '#7A1C1F' },
    { label: 'Ayurveda',  Icon: IconStar,   bg: '#E5DCFF', fg: '#3C2A78' },
    { label: 'Diabetes',  Icon: IconRx,     bg: '#D6F5EA', fg: '#0F5A48' },
    { label: 'More',      Icon: IconPlus,   bg: M.surfaceContainerHigh, fg: M.onSurface },
  ];
  return (
    <div className="screen" style={{ ...Aroboto, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      {/* App bar with location */}
      <div style={{ padding: '8px 16px 4px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: M.onSurfaceVariant, fontWeight: 500, letterSpacing: 0.5 }}>DELIVER TO</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: M.onSurface, fontWeight: 600, fontSize: 14 }}>
            <IconLoc size={16} style={{ color: M.primary }} /> Indiranagar, 560038 <IconChevD size={16} />
          </div>
        </div>
        <div style={{ width: 40, height: 40, borderRadius: 20, color: M.onSurfaceVariant, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <IconBell size={22} />
          <div style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: 4, background: M.error, border: '2px solid white' }}/>
        </div>
        <div style={{ width: 40, height: 40, borderRadius: 20, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>AK</div>
      </div>

      <MdSearchBar />

      {/* Hero card — Material elevated */}
      <div style={{
        margin: '16px 16px 0', borderRadius: 16, padding: 20,
        background: M.primary, color: 'white', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', right: -30, bottom: -40, width: 130, height: 130, borderRadius: 100, background: 'rgba(255,255,255,0.10)' }}/>
        <div style={{ position: 'absolute', right: 30, top: -20, width: 70, height: 70, borderRadius: 50, background: 'rgba(255,255,255,0.08)' }}/>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.2, opacity: 0.85 }}>WELCOME OFFER</div>
        <div style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.15, marginTop: 4 }}>Flat 20% off + free delivery</div>
        <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>Use code JAN20 · Valid till tonight</div>
        <div style={{ marginTop: 14 }}>
          <MdButton variant="tonal" style={{ background: 'white', color: M.primary, height: 36 }}>Order now</MdButton>
        </div>
      </div>

      {/* Quick actions — outlined cards */}
      <div style={{ padding: '16px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {[
          { title: 'Upload Rx', sub: 'Get medicines', Icon: IconRx, tone: 'primary' },
          { title: 'Book lab test', sub: 'Home sample', Icon: IconScan, tone: 'tonal' },
        ].map((q, i) => (
          <div key={i} style={{
            padding: 14, borderRadius: 16, display: 'flex', alignItems: 'center', gap: 12,
            background: q.tone === 'primary' ? M.primaryContainer : M.surfaceContainer,
            color: M.onPrimaryContainer,
          }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <q.Icon size={22} />
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{q.title}</div>
              <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>{q.sub}</div>
            </div>
          </div>
        ))}
      </div>

      <MdSection title="Shop by category" action="All" />
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, rowGap: 16 }}>
        {cats.map((c) => (
          <div key={c.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 20, background: c.bg, color: c.fg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><c.Icon size={26} /></div>
            <div style={{ fontSize: 11, fontWeight: 500, color: M.onSurface, textAlign: 'center' }}>{c.label}</div>
          </div>
        ))}
      </div>

      <MdSection title="Best-sellers near you" action="See all" />
      <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 16px' }}>
        {[
          { name: 'Dolo 650', sub: 'Paracetamol', price: '32', mrp: '40', hue: 'blue', off: '20' },
          { name: 'Vit D3 60K', sub: '4 capsules', price: '149', mrp: '189', hue: 'amber', off: '21' },
          { name: 'Pan-D', sub: '10 capsules', price: '108', mrp: '128', hue: 'mint', off: '16' },
        ].map((p, i) => (
          <div key={i} style={{
            flex: '0 0 160px', background: M.surfaceContainerLow, borderRadius: 16, padding: 12,
          }}>
            <div style={{ position: 'relative' }}>
              <ProductPlaceholder hue={p.hue} h={110} label={p.name} />
              <div style={{
                position: 'absolute', top: 8, left: 8, background: M.error, color: 'white',
                fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 8,
              }}>−{p.off}%</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: M.onSurface, marginTop: 10 }}>{p.name}</div>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 2 }}>{p.sub}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
              <div>
                <span className="mono" style={{ fontSize: 15, fontWeight: 600, color: M.onSurface }}>₹{p.price}</span>
                <span className="mono" style={{ fontSize: 11, color: M.onSurfaceVariant, textDecoration: 'line-through', marginLeft: 4 }}>₹{p.mrp}</span>
              </div>
              <MdButton variant="tonal" style={{ height: 32, padding: '0 14px' }}>Add</MdButton>
            </div>
          </div>
        ))}
      </div>

      <MdSection title="Refill due soon" action="Manage" />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 1 }}>
        {[
          { name: 'Metformin SR 500mg', sub: 'Last refilled 27 days ago · 3 days left', hue: 'blue' },
          { name: 'Atorvastatin 10mg', sub: 'Last refilled 21 days ago · 9 days left', hue: 'mint' },
        ].map((p, i) => (
          <div key={i} style={{
            background: M.surfaceContainerLow, padding: 14, display: 'flex', alignItems: 'center', gap: 12,
            borderRadius: i === 0 ? '16px 16px 4px 4px' : '4px 4px 16px 16px',
          }}>
            <ProductPlaceholder hue={p.hue} w={44} h={44} radius={12} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{p.name}</div>
              <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 2 }}>{p.sub}</div>
            </div>
            <MdButton variant="outlined" style={{ height: 32, padding: '0 16px' }}>Refill</MdButton>
          </div>
        ))}
      </div>

      <MdFab extended icon={IconRx} label="Upload Rx" bottom={120} />
      <MdBottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A2) SEARCH (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenSearch() {
  const products = [
    { name: 'Crocin Advance', sub: 'Paracetamol 500mg · 15 tabs', price: '38', mrp: '45', hue: 'blue', stock: 'In stock', rx: false, rating: '4.7' },
    { name: 'Metformin SR', sub: 'Glycomet · 500mg · 30 tabs', price: '78', mrp: '95', hue: 'mint', stock: 'In stock', rx: true, rating: '4.5' },
    { name: 'Azithromycin', sub: 'Azithral 500 · 5 tabs', price: '92', mrp: '118', hue: 'amber', stock: 'Low stock', rx: true, rating: '4.6' },
    { name: 'Calpol 250mg', sub: 'Susp · 60ml bottle', price: '52', mrp: '62', hue: 'rose', stock: 'In stock', rx: false, rating: '4.8' },
  ];
  return (
    <div className="screen" style={{ ...Aroboto, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      {/* Sticky M3 search */}
      <div style={{ padding: '8px 0 4px' }}>
        <MdSearchBar value="paracetamol" leading="back" />
      </div>
      {/* Chips row */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '12px 16px 4px' }}>
        <MdChip selected icon={<IconFilter size={16} />}>Filters · 2</MdChip>
        <MdChip selected>Tablets</MdChip>
        <MdChip>Syrups</MdChip>
        <MdChip>Diabetes</MdChip>
        <MdChip>Generics</MdChip>
        <MdChip>Heart</MdChip>
      </div>
      <div style={{ padding: '10px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 13, color: M.onSurfaceVariant }}>
          <span style={{ color: M.onSurface, fontWeight: 600 }}>284</span> results
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, color: M.primary, fontWeight: 600 }}>
          Relevance <IconChevD size={16} />
        </div>
      </div>

      {/* Product list — outlined cards */}
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {products.map((p, i) => (
          <div key={i} style={{
            background: M.surface, borderRadius: 16, padding: 12, display: 'flex', gap: 12,
            border: `1px solid ${M.outlineVar}`,
          }}>
            <ProductPlaceholder hue={p.hue} w={88} h={88} radius={12} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 15, fontWeight: 500, color: M.onSurface, lineHeight: 1.2 }}>{p.name}</div>
                <IconHeart size={20} style={{ color: M.onSurfaceVariant }} />
              </div>
              <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 2 }}>{p.sub}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
                {p.rx && <MdChip style={{ height: 24, fontSize: 11, padding: '0 8px' }} icon={<IconRx size={12}/>}>Rx</MdChip>}
                <MdChip style={{ height: 24, fontSize: 11, padding: '0 8px', background: p.stock === 'Low stock' ? '#FFEFD1' : '#D6F5EA', color: p.stock === 'Low stock' ? '#7A4500' : '#0F5A48', border: 'none' }}>● {p.stock}</MdChip>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 11, color: M.onSurfaceVariant, fontWeight: 500 }}>
                  <IconStar size={12} style={{ color: '#F5A524' }} /> {p.rating}
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                <div>
                  <span className="mono" style={{ fontSize: 17, fontWeight: 600, color: M.onSurface }}>₹{p.price}</span>
                  <span className="mono" style={{ fontSize: 12, color: M.onSurfaceVariant, textDecoration: 'line-through', marginLeft: 5 }}>₹{p.mrp}</span>
                </div>
                <MdButton variant="filled" style={{ height: 36, padding: '0 18px' }}>Add</MdButton>
              </div>
            </div>
          </div>
        ))}
      </div>
      <MdBottomNav active="browse" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A3) PRODUCT DETAIL (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenProduct() {
  return (
    <div className="screen" style={{ ...Aroboto, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 110 }}>
      {/* Hero image */}
      <div style={{
        height: 340, background: `linear-gradient(180deg, ${M.primaryContainer} 0%, #C5D7FF 100%)`,
        position: 'relative', paddingTop: 0,
      }}>
        <div style={{ position: 'absolute', top: 8, left: 0, right: 0, display: 'flex', alignItems: 'center', padding: '0 4px' }}>
          <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: M.onSurface }}><IconChevL size={24} /></div>
          <div style={{ flex: 1 }}/>
          <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: M.onSurface }}><IconHeart size={22} /></div>
          <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: M.onSurface }}><IconCart size={22} /></div>
        </div>
        <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 220, height: 220, borderRadius: 36,
            background: `repeating-linear-gradient(135deg, ${M.surface} 0 14px, ${M.primaryContainer} 14px 28px)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 20px 40px rgba(11,31,77,0.18)',
          }}>
            <div style={{ width: 100, height: 100, borderRadius: 50, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconPill size={48} />
            </div>
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 14, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 6 }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              width: i === 0 ? 20 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? M.primary : 'rgba(11,31,77,0.25)',
            }}/>
          ))}
        </div>
      </div>

      {/* Title sheet */}
      <div style={{ padding: '20px 16px 0', background: M.surface, borderRadius: '20px 20px 0 0', marginTop: -16, position: 'relative' }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <MdChip selected icon={<IconRx size={14}/>}>Prescription</MdChip>
          <MdChip style={{ background: '#D6F5EA', color: '#0F5A48', border: 'none' }}>● In stock</MdChip>
        </div>
        <div style={{ fontSize: 24, fontWeight: 500, color: M.onSurface, marginTop: 12, lineHeight: 1.2 }}>Metformin SR 500mg</div>
        <div style={{ fontSize: 14, color: M.onSurfaceVariant, marginTop: 4 }}>Glycomet-SR · USV Ltd · 30 tablets</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: M.onSurface }}>
            <IconStar size={14} style={{ color: '#F5A524' }} /> 4.7
          </span>
          <span style={{ fontSize: 12, color: M.onSurfaceVariant }}>(2,341 reviews)</span>
          <div style={{ width: 1, height: 12, background: M.outlineVar }} />
          <span style={{ fontSize: 13, fontWeight: 600, color: M.primary }}>Alternates</span>
        </div>

        {/* Price card */}
        <div style={{
          marginTop: 16, padding: 16, background: M.surfaceContainerLow, borderRadius: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="mono" style={{ fontSize: 28, fontWeight: 600, color: M.onSurface }}>₹78</span>
              <span className="mono" style={{ fontSize: 14, color: M.onSurfaceVariant, textDecoration: 'line-through' }}>₹95</span>
            </div>
            <div style={{ fontSize: 12, color: '#0F5A48', fontWeight: 600, marginTop: 2 }}>You save ₹17 (18% off)</div>
          </div>
          {/* M3 quantity stepper */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, border: `1px solid ${M.outline}`, color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconMinus size={18} />
            </div>
            <div className="mono" style={{ width: 32, textAlign: 'center', fontSize: 16, fontWeight: 600, color: M.onSurface }}>2</div>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconPlus size={18} />
            </div>
          </div>
        </div>

        {/* Delivery list item */}
        <div style={{
          marginTop: 16, padding: '12px 14px', borderRadius: 16, border: `1px solid ${M.outlineVar}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: '#D6F5EA', color: '#0F5A48', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconTruck size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>Express delivery in 28 min</div>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>Free over ₹199 · 560038</div>
          </div>
          <span style={{ fontSize: 13, fontWeight: 600, color: M.primary }}>Change</span>
        </div>

        {/* Tabs */}
        <div style={{ marginTop: 22, display: 'flex', borderBottom: `1px solid ${M.outlineVar}` }}>
          {['Uses', 'How to take', 'Side effects', 'FAQ'].map((t, i) => (
            <div key={t} style={{
              flex: 1, padding: '12px 0', textAlign: 'center', fontSize: 13, fontWeight: 600,
              color: i === 0 ? M.primary : M.onSurfaceVariant,
              borderBottom: i === 0 ? `3px solid ${M.primary}` : '3px solid transparent',
              marginBottom: -1,
            }}>{t}</div>
          ))}
        </div>
        <div style={{ marginTop: 12, fontSize: 14, color: M.onSurface, lineHeight: 1.55, opacity: 0.86 }}>
          Used to control high blood sugar in adults with type 2 diabetes. Reduces glucose production in the liver and improves insulin sensitivity.
        </div>
      </div>

      {/* Bottom action bar */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 24,
        padding: '14px 16px 16px', background: M.surface,
        borderTop: `1px solid ${M.outlineVar}`,
        display: 'flex', gap: 12,
      }}>
        <MdButton variant="outlined" full style={{ flex: 1 }} icon={IconRx}>Upload Rx</MdButton>
        <MdButton variant="filled" full style={{ flex: 1.5 }}>Add to cart · ₹156</MdButton>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A4) Rx UPLOAD (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenRx() {
  return (
    <div className="screen" style={{ ...Aroboto, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Upload prescription" subtitle="Verified in under 5 min" />
      {/* Stepper */}
      <div style={{ padding: '0 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
        {['Upload', 'Verify', 'Order'].map((s, i) => (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 24, height: 24, borderRadius: 12,
                background: i === 0 ? M.primary : M.surfaceContainerHigh,
                color: i === 0 ? 'white' : M.onSurfaceVariant,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 600,
              }}>{i + 1}</div>
              <span style={{ fontSize: 13, fontWeight: 600, color: i === 0 ? M.onSurface : M.onSurfaceVariant }}>{s}</span>
            </div>
            {i < 2 && <div style={{ flex: 1, height: 2, background: M.surfaceContainerHigh, borderRadius: 1 }}/>}
          </React.Fragment>
        ))}
      </div>

      {/* Drop zone */}
      <div style={{
        margin: '20px 16px 0', borderRadius: 16, padding: 24,
        background: M.surfaceContainerLow, border: `2px dashed ${M.primary}`, textAlign: 'center',
      }}>
        <div style={{ width: 72, height: 72, borderRadius: 36, background: M.primaryContainer, color: M.onPrimaryContainer, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconUpload size={30} />
        </div>
        <div style={{ fontSize: 16, fontWeight: 500, color: M.onSurface, marginTop: 14 }}>Drop your prescription here</div>
        <div style={{ fontSize: 13, color: M.onSurfaceVariant, marginTop: 4, lineHeight: 1.45 }}>JPG, PNG or PDF, up to 10 MB</div>
        <div style={{ marginTop: 16, display: 'flex', gap: 10, justifyContent: 'center' }}>
          <MdButton variant="filled" icon={IconCamera}>Take photo</MdButton>
          <MdButton variant="tonal" icon={IconUpload}>From files</MdButton>
        </div>
      </div>

      <MdSection title="Attached" action={null} />
      <div style={{ padding: '0 16px' }}>
        <div style={{
          background: M.surfaceContainerLow, borderRadius: 16, padding: 12,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 56, height: 70, borderRadius: 8,
            background: `repeating-linear-gradient(0deg, ${M.surfaceContainerHigh} 0 10px, white 10px 12px)`,
            border: `1px solid ${M.outlineVar}`, position: 'relative',
          }}>
            <div style={{ position: 'absolute', top: 6, left: 6, right: 6, height: 4, background: M.outline, borderRadius: 2 }}/>
            <div style={{ position: 'absolute', top: 14, left: 6, right: 16, height: 3, background: M.outlineVar, borderRadius: 2 }}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>Dr_Mehta_Rx.jpg</div>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>1.8 MB · Uploaded just now</div>
            <div style={{ marginTop: 8, height: 4, background: M.surfaceContainerHigh, borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: '100%', height: '100%', background: M.tertiary }}/>
            </div>
          </div>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: M.tertiary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconCheck size={16} />
          </div>
        </div>
      </div>

      <MdSection title="Who is this for?" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { name: 'Aarav Kumar', sub: 'Self · 32 · M', active: true, init: 'AK', hue: M.primaryContainer, fg: M.onPrimaryContainer },
          { name: 'Meera Kumar', sub: 'Mother · 58 · F', active: false, init: 'MK', hue: '#D6F5EA', fg: '#0F5A48' },
          { name: 'Add member', sub: '', active: false, add: true },
        ].map((p, i) => (
          <div key={i} style={{
            background: p.active ? M.primaryContainer : M.surfaceContainerLow,
            borderRadius: 16, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
            border: p.active ? `2px solid ${M.primary}` : `2px solid transparent`,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 20,
              background: p.add ? M.surfaceContainerHigh : p.hue,
              color: p.add ? M.primary : p.fg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 600, fontSize: 14,
            }}>{p.add ? <IconPlus size={20} /> : p.init}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: p.add ? M.primary : M.onSurface }}>{p.name}</div>
              {p.sub && <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>{p.sub}</div>}
            </div>
            <div style={{
              width: 20, height: 20, borderRadius: 10,
              background: p.active ? M.primary : 'transparent',
              border: p.active ? 'none' : `2px solid ${M.outline}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {p.active && <IconCheck size={14} style={{ color: 'white' }} />}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        margin: '16px 16px 0', padding: 14, borderRadius: 12,
        background: '#FFEFD1', color: '#7A4500', display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <IconShield size={20} />
        <div style={{ fontSize: 13, lineHeight: 1.45 }}>Your prescription is end-to-end encrypted and reviewed only by our licensed pharmacist.</div>
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <MdButton variant="filled" full style={{ height: 48, borderRadius: 24 }}>Continue to order</MdButton>
      </div>
      <MdBottomNav active="home" />
    </div>
  );
}

Object.assign(window, { MdScreenHome, MdScreenSearch, MdScreenProduct, MdScreenRx });