// Android screens 5-8: Cart, Checkout, Tracking, Profile

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

// ═════════════════════════════════════════════════════════════
// A5) CART (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenCart() {
  const items = [
    { name: 'Metformin SR 500mg', sub: 'Strip of 30 · Rx', qty: 2, price: 78, mrp: 95, hue: 'blue' },
    { name: 'Vitamin D3 60K IU', sub: '4 capsules', qty: 1, price: 149, mrp: 189, hue: 'amber' },
    { name: 'Cetirizine 10mg', sub: 'Strip of 10 · Rx', qty: 1, price: 24, mrp: 32, hue: 'mint' },
  ];
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const mrp = items.reduce((s, i) => s + i.mrp * i.qty, 0);
  return (
    <div className="screen" style={{ ...Aroboto2, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Your cart" subtitle={`${items.length} items · delivers by 6:40 PM`} trailing={['more']} />

      {/* Rx attached row */}
      <div style={{ margin: '0 16px', padding: 12, borderRadius: 12, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconRx size={20} />
        </div>
        <div style={{ flex: 1, fontSize: 13 }}>
          <span style={{ fontWeight: 600 }}>Rx attached</span> · Dr_Mehta_Rx.jpg
        </div>
        <span style={{ fontSize: 13, fontWeight: 600, color: M.primary }}>Change</span>
      </div>

      {/* Items - list cards stitched together */}
      <div style={{ margin: '16px 16px 0', display: 'flex', flexDirection: 'column', gap: 1, borderRadius: 16, overflow: 'hidden' }}>
        {items.map((p, i) => (
          <div key={i} style={{
            background: M.surfaceContainerLow, padding: 12, display: 'flex', gap: 12,
          }}>
            <ProductPlaceholder hue={p.hue} w={72} h={72} radius={10} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{p.name}</div>
                <IconClose size={18} style={{ color: M.onSurfaceVariant, flexShrink: 0 }} />
              </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 style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 15, border: `1px solid ${M.outline}`, color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IconMinus size={14} />
                  </div>
                  <div className="mono" style={{ width: 28, textAlign: 'center', fontSize: 14, fontWeight: 600, color: M.onSurface }}>{p.qty}</div>
                  <div style={{ width: 30, height: 30, borderRadius: 15, background: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IconPlus size={14} />
                  </div>
                </div>
                <div>
                  <span className="mono" style={{ fontSize: 15, fontWeight: 600, color: M.onSurface }}>₹{p.price * p.qty}</span>
                  <span className="mono" style={{ fontSize: 12, color: M.onSurfaceVariant, textDecoration: 'line-through', marginLeft: 5 }}>₹{p.mrp * p.qty}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Add more — text button row */}
      <div style={{ margin: '12px 16px 0', display: 'flex', justifyContent: 'flex-start' }}>
        <MdButton variant="text" icon={IconPlus}>Add more items</MdButton>
      </div>

      {/* Coupon */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{
          background: M.surface, border: `1px solid ${M.outlineVar}`, borderRadius: 16,
          padding: 14, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: `repeating-linear-gradient(45deg, #FFEFD1 0 5px, white 5px 10px)`,
            border: `1px dashed #F5A524`,
          }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>You unlocked</div>
            <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>JAN20 — Flat 20% off</div>
          </div>
          <span style={{ fontSize: 13, fontWeight: 600, color: M.primary }}>Edit</span>
        </div>
      </div>

      {/* Bill summary */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: M.onSurface, marginBottom: 8 }}>Bill summary</div>
          {[
            ['MRP total', `₹${mrp}`, M.onSurfaceVariant],
            ['Discount', `−₹${mrp - subtotal}`, '#0F5A48'],
            ['Coupon (JAN20)', `−₹${Math.round(subtotal * 0.2)}`, '#0F5A48'],
            ['Delivery', 'FREE', '#0F5A48'],
          ].map(([k, v, col], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 14 }}>
              <span style={{ color: M.onSurfaceVariant }}>{k}</span>
              <span className="mono" style={{ color: col, fontWeight: 500 }}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: M.outlineVar, margin: '10px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 16, fontWeight: 600, color: M.onSurface }}>Total</span>
            <span className="mono" style={{ fontSize: 22, fontWeight: 600, color: M.onSurface }}>₹{Math.round(subtotal * 0.8)}</span>
          </div>
          <div style={{ marginTop: 10, padding: '8px 12px', borderRadius: 10, background: '#D6F5EA', fontSize: 12, color: '#0F5A48', fontWeight: 500, textAlign: 'center' }}>
            You save ₹{mrp - Math.round(subtotal * 0.8)} on this order
          </div>
        </div>
      </div>

      {/* Bottom action bar */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 24,
        padding: '14px 16px 14px', background: M.surface,
        borderTop: `1px solid ${M.outlineVar}`,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div className="mono" style={{ fontSize: 20, fontWeight: 600, color: M.onSurface }}>₹{Math.round(subtotal * 0.8)}</div>
          <div style={{ fontSize: 12, color: '#0F5A48', fontWeight: 500 }}>Save ₹{mrp - Math.round(subtotal * 0.8)}</div>
        </div>
        <MdButton variant="filled" style={{ flex: 1.4, height: 48, borderRadius: 24 }}>
          Checkout <IconChevR size={18} />
        </MdButton>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A6) CHECKOUT (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenCheckout() {
  return (
    <div className="screen" style={{ ...Aroboto2, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Checkout" subtitle="Step 3 of 3" />

      <MdSection title="Deliver to" action="Change" />
      <div style={{ padding: '0 16px' }}>
        <div style={{
          background: M.surfaceContainerLow, borderRadius: 16, padding: 14,
          display: 'flex', gap: 12, border: `1px solid ${M.outlineVar}`,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconHome size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: M.onSurface }}>Home</span>
              <MdChip style={{ height: 22, fontSize: 10, padding: '0 8px', background: '#D6F5EA', color: '#0F5A48', border: 'none' }}>Default</MdChip>
            </div>
            <div style={{ fontSize: 13, color: M.onSurfaceVariant, marginTop: 4, lineHeight: 1.45 }}>
              Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038
            </div>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 4, opacity: 0.85 }}>Aarav · +91 98••• 12•••</div>
          </div>
        </div>
      </div>

      <MdSection title="Delivery slot" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', gap: 8 }}>
        {[
          { label: 'Express', sub: '28 min', price: 'FREE', active: true },
          { label: 'Today', sub: 'by 8 PM', price: 'FREE', active: false },
          { label: 'Tomorrow', sub: '8–10 AM', price: '₹19', active: false },
        ].map((s) => (
          <div key={s.label} style={{
            flex: 1, padding: 12, borderRadius: 14, textAlign: 'center',
            background: s.active ? M.primary : M.surfaceContainerLow,
            color: s.active ? 'white' : M.onSurface,
            border: s.active ? 'none' : `1px solid ${M.outlineVar}`,
          }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{s.label}</div>
            <div style={{ fontSize: 11, opacity: s.active ? 0.85 : 0.65, marginTop: 2 }}>{s.sub}</div>
            <div className="mono" style={{ fontSize: 12, marginTop: 4, fontWeight: 600, color: s.active ? 'white' : '#0F5A48' }}>{s.price}</div>
          </div>
        ))}
      </div>

      <MdSection title="Pay using" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { label: 'UPI · GPay', sub: 'aarav@oksbi · Recommended', Icon: IconCard, active: true, hue: M.primaryContainer, fg: M.onPrimaryContainer },
          { label: 'HDFC Credit Card', sub: '•••• 4821 · Earn 12 pts', Icon: IconCard, active: false, hue: '#E2EAFA', fg: '#0B1F4D' },
          { label: 'Cash on delivery', sub: 'Pay when you receive', Icon: IconCash, active: false, hue: '#D6F5EA', fg: '#0F5A48' },
          { label: 'Health wallet', sub: 'Balance: ₹420', Icon: IconShield, active: false, hue: '#FFEFD1', fg: '#7A4500' },
        ].map((m, i) => (
          <div key={i} style={{
            background: m.active ? M.primaryContainer : M.surfaceContainerLow,
            border: m.active ? `2px solid ${M.primary}` : `1px solid ${M.outlineVar}`,
            borderRadius: 14, padding: 14,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: m.hue, color: m.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <m.Icon size={22} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{m.label}</div>
              <div style={{ fontSize: 12, color: M.onSurfaceVariant, marginTop: 2 }}>{m.sub}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 11,
              background: m.active ? M.primary : 'transparent',
              border: m.active ? 'none' : `2px solid ${M.outline}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {m.active && <div style={{ width: 10, height: 10, borderRadius: 5, background: 'white' }}/>}
            </div>
          </div>
        ))}
      </div>

      {/* Bill */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 16 }}>
          {[
            ['Items (3)', '₹329', M.onSurfaceVariant],
            ['Discount + coupon', '−₹81', '#0F5A48'],
            ['Delivery', 'FREE', '#0F5A48'],
          ].map(([k, v, col], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 14 }}>
              <span style={{ color: M.onSurfaceVariant }}>{k}</span>
              <span className="mono" style={{ color: col, fontWeight: 500 }}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: M.outlineVar, margin: '10px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 16, fontWeight: 600, color: M.onSurface }}>Total</span>
            <span className="mono" style={{ fontSize: 20, fontWeight: 600, color: M.onSurface }}>₹248</span>
          </div>
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 24, padding: '14px 16px',
        background: M.surface, borderTop: `1px solid ${M.outlineVar}`,
      }}>
        <MdButton variant="filled" full style={{ height: 48, borderRadius: 24 }} icon={IconShield}>
          Pay ₹248 securely
        </MdButton>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A7) TRACKING (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenTracking() {
  const steps = [
    { label: 'Order confirmed', time: '5:42 PM', done: true },
    { label: 'Pharmacist verified Rx', time: '5:48 PM', done: true },
    { label: 'Packed at Indiranagar store', time: '5:55 PM', done: true, active: true },
    { label: 'Out for delivery', time: 'Est 6:10 PM', done: false },
    { label: 'Delivered', time: 'Est 6:40 PM', done: false },
  ];
  return (
    <div className="screen" style={{ ...Aroboto2, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 50 }}>
      {/* Map */}
      <div style={{
        height: 340, position: 'relative',
        background: `linear-gradient(180deg, ${M.primaryContainer} 0%, #F4F8FF 100%)`,
        overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: 8, left: 4, right: 4, display: 'flex', alignItems: 'center', zIndex: 5 }}>
          <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={{
            height: 36, padding: '0 14px', borderRadius: 18, background: 'white',
            display: 'flex', alignItems: 'center', gap: 6,
            fontSize: 13, fontWeight: 600, color: M.onSurface,
            boxShadow: '0 2px 6px rgba(11,31,77,0.10)', marginRight: 12,
          }}>
            <IconClock size={16} style={{ color: M.primary }} /> ETA 28 min
          </div>
        </div>
        <svg viewBox="0 0 412 340" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
          <path d="M-20,280 Q120,220 200,240 T440,160" stroke="white" strokeWidth="16" fill="none" strokeLinecap="round" opacity="0.95"/>
          <path d="M-20,280 Q120,220 200,240 T440,160" stroke={M.primary} strokeWidth="2" strokeDasharray="6 6" fill="none" strokeLinecap="round" opacity="0.9"/>
          <path d="M80,40 L130,90 L120,160 L200,240" stroke="white" strokeWidth="11" fill="none" strokeLinecap="round" opacity="0.8"/>
          <path d="M280,40 L340,80 L320,150 L390,210" stroke="white" strokeWidth="9" fill="none" strokeLinecap="round" opacity="0.6"/>
          <rect x="30" y="60" width="50" height="40" rx="6" fill="white" opacity="0.55"/>
          <rect x="100" y="30" width="40" height="40" rx="6" fill="white" opacity="0.55"/>
          <rect x="250" y="90" width="60" height="40" rx="6" fill="white" opacity="0.55"/>
          <rect x="330" y="40" width="55" height="40" rx="6" fill="white" opacity="0.55"/>
          <rect x="40" y="170" width="60" height="40" rx="6" fill="white" opacity="0.55"/>
          <rect x="280" y="180" width="55" height="40" rx="6" fill="white" opacity="0.55"/>
        </svg>
        {/* Origin pin */}
        <div style={{ position: 'absolute', left: 56, top: 240, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 14, height: 14, borderRadius: 7, background: M.tertiary, border: '3px solid white', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
          <div className="mono" style={{ fontSize: 10, color: M.onSurface, fontWeight: 700, background: 'rgba(255,255,255,0.85)', padding: '2px 6px', borderRadius: 4 }}>STORE</div>
        </div>
        {/* Rider */}
        <div style={{ position: 'absolute', left: 200, top: 218 }}>
          <div style={{
            width: 48, height: 48, borderRadius: 24, background: M.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 16px rgba(11,31,77,0.28)', border: `3px solid white`, color: 'white',
          }}><IconTruck size={24} /></div>
        </div>
        {/* Destination */}
        <div style={{ position: 'absolute', right: 30, top: 145, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: M.error, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid white', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}>
            <IconHome size={16} />
          </div>
        </div>
      </div>

      {/* Tracking sheet — Material bottom sheet */}
      <div style={{
        marginTop: -24, background: M.surface, borderRadius: '28px 28px 0 0',
        padding: '12px 16px 16px', position: 'relative', zIndex: 10,
      }}>
        <div style={{ width: 32, height: 4, background: M.outline, borderRadius: 2, margin: '0 auto 16px', opacity: 0.4 }}/>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 11, color: M.onSurfaceVariant, fontWeight: 500, letterSpacing: 0.5 }}>ORDER</div>
            <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: M.onSurface }}>#JN-2841-09</div>
          </div>
          <MdChip selected style={{ background: M.primaryContainer, border: 'none' }}>Packing now</MdChip>
        </div>

        {/* Rider card */}
        <div style={{
          padding: 14, borderRadius: 20, background: M.primaryContainer,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 24, background: M.primary, color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16,
          }}>RK</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: M.onPrimaryContainer }}>Rohit will deliver</div>
            <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>4.9 ★ · 320 deliveries</div>
          </div>
          <div style={{ width: 40, height: 40, borderRadius: 20, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <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 style={{ width: 40, height: 40, borderRadius: 20, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconBell size={20} />
          </div>
        </div>

        {/* Timeline */}
        <div style={{ marginTop: 18 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: i === steps.length - 1 ? 0 : 14 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                  width: 24, height: 24, borderRadius: 12,
                  background: s.done ? M.primary : M.surface,
                  border: s.done ? 'none' : `2px solid ${M.outline}`,
                  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: s.active ? `0 0 0 6px ${M.primaryContainer}` : 'none',
                }}>
                  {s.done && <IconCheck size={14} />}
                </div>
                {i < steps.length - 1 && (
                  <div style={{ flex: 1, width: 2, background: s.done ? M.primary : M.outlineVar, marginTop: 2, marginBottom: -2 }}/>
                )}
              </div>
              <div style={{ flex: 1, paddingBottom: 2 }}>
                <div style={{ fontSize: 14, fontWeight: s.active ? 600 : 500, color: s.done ? M.onSurface : M.onSurfaceVariant }}>{s.label}</div>
                <div className="mono" style={{ fontSize: 12, color: s.done ? M.primary : M.onSurfaceVariant, marginTop: 2 }}>{s.time}</div>
              </div>
              {s.active && (
                <MdChip style={{ height: 24, fontSize: 11, background: M.primaryContainer, border: 'none', color: M.onPrimaryContainer }}>● Now</MdChip>
              )}
            </div>
          ))}
        </div>

        <div style={{ height: 1, background: M.outlineVar, margin: '6px 0 14px' }}/>
        <div style={{ display: 'flex', gap: 10, paddingBottom: 16 }}>
          <MdButton variant="outlined" full style={{ flex: 1 }}>Need help?</MdButton>
          <MdButton variant="tonal" full style={{ flex: 1 }}>View order</MdButton>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// A8) PROFILE (Material)
// ═════════════════════════════════════════════════════════════
function MdScreenProfile() {
  const refills = [
    { name: 'Metformin SR 500mg', sub: 'Refill due in 3 days', progress: 88, hue: 'blue' },
    { name: 'Atorvastatin 10mg', sub: 'Refill due in 9 days', progress: 65, hue: 'mint' },
    { name: 'Vitamin D3 60K IU', sub: 'Refill due in 21 days', progress: 32, hue: 'amber' },
  ];
  return (
    <div className="screen" style={{ ...Aroboto2, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="You" trailing={['bell', 'more']} leading="none" />

      {/* Profile header card — large tonal */}
      <div style={{
        margin: '0 16px', padding: 20, borderRadius: 24,
        background: `linear-gradient(160deg, ${M.primary} 0%, #0B1F4D 100%)`,
        color: 'white', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', right: -40, top: -30, width: 160, height: 160, borderRadius: 100, background: 'rgba(255,255,255,0.07)' }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 28, background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, fontWeight: 600, border: '2px solid rgba(255,255,255,0.35)',
          }}>AK</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 500 }}>Aarav Kumar</div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>+91 98••• 12••• · 4 family members</div>
          </div>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconChevR size={18} />
          </div>
        </div>
        {/* Loyalty */}
        <div style={{
          marginTop: 16, padding: 12, borderRadius: 16,
          background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 20, background: '#F5A524', color: '#7A4500', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconStar size={20} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, opacity: 0.85 }}>JANA+ Gold member</div>
            <div className="mono" style={{ fontSize: 16, fontWeight: 600 }}>1,284 pts · ₹128 cashback</div>
          </div>
        </div>
      </div>

      {/* Stats row */}
      <div style={{ padding: '16px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {[
          { k: 'Orders', v: '24', Icon: IconBox },
          { k: 'Rx saved', v: '6', Icon: IconRx },
          { k: 'Total saved', v: '₹2,140', Icon: IconHeart },
        ].map((s, i) => (
          <div key={i} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 12, textAlign: 'center' }}>
            <div style={{ color: M.primary, display: 'flex', justifyContent: 'center' }}>
              <s.Icon size={20} />
            </div>
            <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: M.onSurface, marginTop: 4 }}>{s.v}</div>
            <div style={{ fontSize: 11, color: M.onSurfaceVariant, marginTop: 1 }}>{s.k}</div>
          </div>
        ))}
      </div>

      {/* Refills */}
      <MdSection title="Refill tracker" action="Manage" />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {refills.map((r, i) => (
          <div key={i} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <ProductPlaceholder hue={r.hue} w={36} h={36} radius={10} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{r.name}</div>
                <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>{r.sub}</div>
              </div>
              <span className="mono" style={{ fontSize: 13, fontWeight: 600, color: r.progress > 75 ? M.error : M.onSurface }}>{100 - r.progress}%</span>
            </div>
            <div style={{ marginTop: 10, height: 6, background: M.surfaceContainerHigh, borderRadius: 3, overflow: 'hidden' }}>
              <div style={{
                width: r.progress + '%', height: '100%',
                background: r.progress > 75 ? `linear-gradient(90deg, #F5A524, ${M.error})` : `linear-gradient(90deg, ${M.secondary}, ${M.primary})`,
              }}/>
            </div>
          </div>
        ))}
      </div>

      {/* Account list */}
      <MdSection title="Account" action={null} />
      <div style={{ padding: '0 16px' }}>
        <div style={{ background: M.surfaceContainerLow, borderRadius: 16, overflow: 'hidden' }}>
          {[
            { label: 'Addresses', Icon: IconLoc, sub: '3 saved' },
            { label: 'Payment methods', Icon: IconCard, sub: '2 cards · UPI' },
            { label: 'Family health records', Icon: IconShield, sub: '4 members' },
            { label: 'Help & support', Icon: IconBell, sub: '24×7 chat' },
            { label: 'Sign out', Icon: IconClose, sub: '' },
          ].map((m, i, a) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 16, padding: '14px 16px',
              borderBottom: i < a.length - 1 ? `1px solid ${M.outlineVar}` : 'none',
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <m.Icon size={20} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{m.label}</div>
                {m.sub && <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>{m.sub}</div>}
              </div>
              <IconChevR size={18} style={{ color: M.onSurfaceVariant }} />
            </div>
          ))}
        </div>
      </div>

      <MdBottomNav active="profile" />
    </div>
  );
}

Object.assign(window, { MdScreenCart, MdScreenCheckout, MdScreenTracking, MdScreenProfile });