// Screens 5-8: Cart, Checkout, Order Tracking, Profile

// ═════════════════════════════════════════════════════════════
// 5) CART
// ═════════════════════════════════════════════════════════════
function ScreenCart() {
  const items = [
    { name: 'Metformin SR 500mg', sub: 'Strip of 30 · Rx', qty: 2, price: 78, mrp: 95, hue: 'blue', rx: true },
    { name: 'Vitamin D3 60K IU', sub: '4 capsules', qty: 1, price: 149, mrp: 189, hue: 'amber', rx: false },
    { name: 'Cetirizine 10mg', sub: 'Strip of 10 · Rx', qty: 1, price: 24, mrp: 32, hue: 'mint', rx: true },
  ];
  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={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 130 }}>
      <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 }}>Your cart</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>{items.length} items · delivers by 6:40 PM</div>
        </div>
      </div>

      {/* Rx required banner */}
      <div style={{
        margin: '14px 20px 0', padding: 12, borderRadius: 14,
        background: C.blue50, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconRx size={18} />
        </div>
        <div style={{ flex: 1, fontSize: 12, color: C.navy800 }}>
          <span style={{ fontWeight: 700 }}>Rx attached</span> · Dr_Mehta_Rx.jpg
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Change</span>
      </div>

      {/* Items */}
      <div style={{ padding: '14px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((p, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 18, padding: 12, display: 'flex', gap: 12,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <ProductPlaceholder hue={p.hue} w={64} h={64} radius={12} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>{p.name}</div>
                <IconClose size={16} style={{ color: C.ink300, flexShrink: 0 }} />
              </div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', background: C.blue50, borderRadius: 10,
                }}>
                  <div style={{ width: 28, height: 28, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IconMinus size={14} />
                  </div>
                  <div className="mono" style={{ width: 22, textAlign: 'center', fontSize: 12, fontWeight: 700, color: C.ink900 }}>{p.qty}</div>
                  <div style={{ width: 28, height: 28, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IconPlus size={14} />
                  </div>
                </div>
                <div>
                  <span className="mono" style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>₹{p.price * p.qty}</span>
                  <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 5 }}>₹{p.mrp * p.qty}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Coupon */}
      <div style={{
        margin: '16px 20px 0', padding: '12px 14px', background: 'white', borderRadius: 14,
        display: 'flex', alignItems: 'center', gap: 10,
        boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: `repeating-linear-gradient(45deg, ${C.amber100} 0 5px, white 5px 10px)`,
          border: `1px dashed ${C.amber500}`,
        }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, color: C.ink500 }}>You unlocked</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>JAN20 — Flat 20% off applied</div>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Edit</span>
      </div>

      {/* Bill summary */}
      <div style={{
        margin: '16px 20px 0', padding: 16, background: 'white', borderRadius: 18,
        boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
      }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900, marginBottom: 10 }}>Bill summary</div>
        {[
          ['MRP total', `₹${mrp}`, false],
          ['Discount', `−₹${mrp - subtotal}`, false, C.mint500],
          ['Coupon (JAN20)', `−₹${Math.round(subtotal * 0.2)}`, false, C.mint500],
          ['Delivery', 'FREE', false, C.mint500],
        ].map(([k, v, bold, color], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 13 }}>
            <span style={{ color: C.ink500 }}>{k}</span>
            <span className="mono" style={{ color: color || C.ink700, fontWeight: 600 }}>{v}</span>
          </div>
        ))}
        <div style={{ height: 1, background: C.ink100, margin: '8px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>Total to pay</span>
          <span className="mono" style={{ fontSize: 18, fontWeight: 700, color: C.ink900 }}>₹{Math.round(subtotal * 0.8)}</span>
        </div>
        <div style={{ marginTop: 8, padding: '6px 10px', borderRadius: 8, background: C.mint100, fontSize: 11, color: '#0F5A48', fontWeight: 600, textAlign: 'center' }}>
          You save ₹{mrp - Math.round(subtotal * 0.8)} on this order 🎉
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 12,
        borderRadius: 22, background: 'white',
        boxShadow: '0 12px 30px rgba(11,31,77,0.14)',
        padding: 14, display: 'flex', alignItems: 'center', gap: 12, zIndex: 40,
      }}>
        <div style={{ flex: 1 }}>
          <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: C.ink900 }}>₹{Math.round(subtotal * 0.8)}</div>
          <div style={{ fontSize: 11, color: C.mint500, fontWeight: 600 }}>You save ₹{mrp - Math.round(subtotal * 0.8)}</div>
        </div>
        <button style={{
          flex: 1.5, background: C.blue600, color: 'white', border: 'none',
          borderRadius: 14, padding: '14px 0', fontWeight: 700, fontSize: 14,
          boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>Place order <IconChevR size={16} /></button>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 6) CHECKOUT
// ═════════════════════════════════════════════════════════════
function ScreenCheckout() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 130 }}>
      <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 }}>Checkout</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Step 3 of 3</div>
        </div>
      </div>

      {/* Delivery address */}
      <SectionHeader title="Deliver to" action="Change" />
      <div style={{ padding: '0 20px' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 14, display: 'flex', gap: 12, boxShadow: '0 1px 0 rgba(11,31,77,0.04)' }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconHome size={20} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Home</span>
              <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: 3, lineHeight: 1.45 }}>
              Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038
            </div>
            <div style={{ fontSize: 11, color: C.ink400, marginTop: 4 }}>Arrives in 28 min · Aarav · +91 98••• 12•••</div>
          </div>
        </div>
      </div>

      {/* Delivery slot */}
      <SectionHeader title="Delivery slot" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', gap: 10 }}>
        {[
          { 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 ? C.blue600 : 'white',
            color: s.active ? 'white' : C.ink900,
            boxShadow: s.active ? '0 8px 18px rgba(27,91,255,0.25)' : '0 1px 0 rgba(11,31,77,0.04)',
            border: s.active ? 'none' : `1px solid transparent`,
          }}>
            <div style={{ fontSize: 12, fontWeight: 700 }}>{s.label}</div>
            <div style={{ fontSize: 11, opacity: 0.75, marginTop: 2 }}>{s.sub}</div>
            <div className="mono" style={{ fontSize: 11, marginTop: 4, fontWeight: 700, color: s.active ? 'white' : C.mint500 }}>{s.price}</div>
          </div>
        ))}
      </div>

      {/* Payment methods */}
      <SectionHeader title="Pay using" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { label: 'UPI · GPay', sub: 'aarav@oksbi · Recommended', Icon: IconCard, active: true, hue: 'blue' },
          { label: 'HDFC Credit Card', sub: '•••• 4821 · Earn 12 pts', Icon: IconCard, active: false, hue: 'navy' },
          { label: 'Cash on delivery', sub: 'Pay when you receive', Icon: IconCash, active: false, hue: 'mint' },
          { label: 'Health wallet', sub: 'Balance: ₹420', Icon: IconShield, active: false, hue: 'amber' },
        ].map((m, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 14, padding: 14,
            display: 'flex', alignItems: 'center', gap: 12,
            border: m.active ? `2px solid ${C.blue600}` : '2px solid transparent',
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 12,
              background: { blue: C.blue100, navy: '#E2E8FA', mint: C.mint100, amber: C.amber100 }[m.hue],
              color: { blue: C.blue600, navy: C.navy800, mint: C.mint500, amber: C.amber500 }[m.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <m.Icon size={20} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{m.label}</div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{m.sub}</div>
            </div>
            <div style={{
              width: 20, height: 20, borderRadius: 10,
              background: m.active ? C.blue600 : 'white',
              border: m.active ? 'none' : `2px solid ${C.ink200}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {m.active && <div style={{ width: 8, height: 8, borderRadius: 4, background: 'white' }}/>}
            </div>
          </div>
        ))}
      </div>

      {/* Bill */}
      <div style={{
        margin: '18px 20px 0', padding: 16, background: 'white', borderRadius: 18,
        boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
      }}>
        {[
          ['Items (3)', '₹329'],
          ['Discount + coupon', '−₹81', C.mint500],
          ['Delivery', 'FREE', C.mint500],
        ].map(([k, v, col], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 13 }}>
            <span style={{ color: C.ink500 }}>{k}</span>
            <span className="mono" style={{ color: col || C.ink700, fontWeight: 600 }}>{v}</span>
          </div>
        ))}
        <div style={{ height: 1, background: C.ink100, margin: '8px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>Total</span>
          <span className="mono" style={{ fontSize: 18, fontWeight: 700, color: C.ink900 }}>₹248</span>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 28px',
        background: 'linear-gradient(to top, white 70%, rgba(255,255,255,0))',
      }}>
        <button style={{
          width: '100%', background: C.blue600, color: 'white', border: 'none',
          borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15,
          boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <IconShield size={18} /> Pay ₹248 securely
        </button>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 7) ORDER TRACKING
// ═════════════════════════════════════════════════════════════
function ScreenTracking() {
  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={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 0, paddingBottom: 30 }}>
      {/* Map area */}
      <div style={{
        height: 320, position: 'relative',
        background: `linear-gradient(180deg, ${C.blue100} 0%, ${C.blue50} 100%)`,
        overflow: 'hidden',
      }}>
        {/* Header buttons */}
        <div style={{ position: 'absolute', top: 56, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', zIndex: 5 }}>
          <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.10)' }}>
            <IconChevL size={20} />
          </div>
          <div style={{
            padding: '8px 14px', background: 'white', borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 6,
            fontSize: 12, fontWeight: 700, color: C.ink900,
            boxShadow: '0 2px 6px rgba(11,31,77,0.10)',
          }}>
            <IconClock size={14} style={{ color: C.blue600 }} /> ETA 28 min
          </div>
        </div>
        {/* Roads (decorative) */}
        <svg viewBox="0 0 402 320" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
          <path d="M-20,260 Q120,200 200,220 T420,140" stroke="white" strokeWidth="14" fill="none" strokeLinecap="round" opacity="0.85"/>
          <path d="M-20,260 Q120,200 200,220 T420,140" stroke={C.blue300} strokeWidth="2" strokeDasharray="6 6" fill="none" strokeLinecap="round"/>
          <path d="M80,40 L130,90 L120,160 L200,220" stroke="white" strokeWidth="10" fill="none" strokeLinecap="round" opacity="0.7"/>
          <path d="M280,40 L340,80 L320,150 L390,210" stroke="white" strokeWidth="8" fill="none" strokeLinecap="round" opacity="0.5"/>
          <rect x="30" y="60" width="50" height="40" rx="4" fill="white" opacity="0.45"/>
          <rect x="100" y="30" width="40" height="40" rx="4" fill="white" opacity="0.45"/>
          <rect x="240" y="90" width="60" height="40" rx="4" fill="white" opacity="0.45"/>
          <rect x="320" y="40" width="55" height="40" rx="4" fill="white" opacity="0.45"/>
          <rect x="40" y="170" width="60" height="40" rx="4" fill="white" opacity="0.45"/>
          <rect x="270" y="170" width="55" height="40" rx="4" fill="white" opacity="0.45"/>
        </svg>
        {/* Origin pin */}
        <div style={{ position: 'absolute', left: 50, top: 220, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 14, height: 14, borderRadius: 7, background: C.mint500, border: '3px solid white', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
          <div className="mono" style={{ fontSize: 10, color: C.ink700, fontWeight: 700, background: 'rgba(255,255,255,0.7)', padding: '2px 5px', borderRadius: 4 }}>STORE</div>
        </div>
        {/* Moving rider */}
        <div style={{ position: 'absolute', left: 195, top: 200 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 22, background: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 16px rgba(11,31,77,0.22)', border: `3px solid ${C.blue600}`,
            color: C.blue600,
          }}>
            <IconTruck size={22} />
          </div>
          {/* pulse ring */}
          <div style={{
            position: 'absolute', inset: -8, borderRadius: '50%',
            border: `2px solid ${C.blue600}`, opacity: 0.3,
          }}/>
        </div>
        {/* Destination pin */}
        <div style={{ position: 'absolute', right: 30, top: 130, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: C.rose500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid white', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}>
            <IconHome size={14} />
          </div>
        </div>
      </div>

      {/* Tracking sheet */}
      <div style={{
        marginTop: -22, background: 'white', borderRadius: '24px 24px 0 0', padding: '20px 20px 0',
        position: 'relative', zIndex: 10, boxShadow: '0 -10px 30px rgba(11,31,77,0.05)',
      }}>
        <div style={{ width: 40, height: 4, background: C.ink200, borderRadius: 2, margin: '0 auto 16px' }}/>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 11, color: C.ink500, fontWeight: 600 }}>ORDER</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>#JN-2841-09</div>
          </div>
          <span className="pill" style={{ background: C.blue50, color: C.blue600 }}>Packing now</span>
        </div>

        {/* Rider card */}
        <div style={{
          marginTop: 16, padding: 14, borderRadius: 16,
          background: `linear-gradient(135deg, ${C.navy800}, ${C.blue600})`,
          color: 'white', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 22, background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16,
          }}>RK</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>Rohit will deliver</div>
            <div style={{ fontSize: 11, opacity: 0.8 }}>4.9 ★ · 320 deliveries</div>
          </div>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', color: C.navy800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 24 24" width="18" height="18" 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>

        {/* Timeline */}
        <div style={{ marginTop: 18 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: i === steps.length - 1 ? 0 : 14, position: 'relative' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 11,
                  background: s.done ? C.blue600 : 'white',
                  border: s.done ? 'none' : `2px solid ${C.ink200}`,
                  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: s.active ? `0 0 0 6px ${C.blue100}` : 'none',
                }}>
                  {s.done && <IconCheck size={12} />}
                </div>
                {i < steps.length - 1 && (
                  <div style={{ flex: 1, width: 2, background: s.done ? C.blue600 : C.ink200, marginTop: 2, marginBottom: -2 }}/>
                )}
              </div>
              <div style={{ flex: 1, paddingBottom: 2 }}>
                <div style={{ fontSize: 13, fontWeight: s.active ? 700 : 600, color: s.done ? C.ink900 : C.ink400 }}>{s.label}</div>
                <div className="mono" style={{ fontSize: 11, color: s.done ? C.blue600 : C.ink400, marginTop: 2 }}>{s.time}</div>
              </div>
              {s.active && (
                <div className="pill" style={{ background: C.blue50, color: C.blue600, height: 24, fontSize: 10 }}>● In progress</div>
              )}
            </div>
          ))}
        </div>

        {/* Help row */}
        <div style={{ height: 1, background: C.ink100, margin: '4px 0 14px' }}/>
        <div style={{ display: 'flex', gap: 10, paddingBottom: 16 }}>
          <button className="btn-ghost" style={{ flex: 1, background: C.ink50, color: C.ink700 }}>Need help?</button>
          <button className="btn-ghost" style={{ flex: 1 }}>View order</button>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 8) PROFILE
// ═════════════════════════════════════════════════════════════
function ScreenProfile() {
  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={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 0, paddingBottom: 110 }}>
      {/* Hero header */}
      <div style={{
        background: `linear-gradient(160deg, ${C.navy800} 0%, ${C.blue600} 100%)`,
        padding: '54px 20px 24px', color: 'white', borderRadius: '0 0 24px 24px', 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, paddingTop: 6 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 28,
            background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, fontWeight: 700, border: '2px solid rgba(255,255,255,0.4)',
          }}>AK</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.02 }}>Aarav Kumar</div>
            <div style={{ fontSize: 12, opacity: 0.8 }}>+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 card */}
        <div style={{
          marginTop: 18, padding: 14, borderRadius: 16,
          background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: C.amber500, 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: 700 }}>1,284 pts · ₹128 cashback</div>
          </div>
        </div>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '14px 20px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {[
          { k: 'Orders', v: '24', Icon: IconBox },
          { k: 'Rx', v: '6', Icon: IconRx },
          { k: 'Saved', v: '₹2,140', Icon: IconHeart },
        ].map((s, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 14, padding: 12, textAlign: 'center',
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <div style={{ color: C.blue600, display: 'flex', justifyContent: 'center' }}>
              <s.Icon size={18} />
            </div>
            <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900, marginTop: 4 }}>{s.v}</div>
            <div style={{ fontSize: 10, color: C.ink500, marginTop: 1, fontWeight: 600 }}>{s.k}</div>
          </div>
        ))}
      </div>

      {/* Refill tracker */}
      <SectionHeader title="Refill tracker" action="Manage" />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {refills.map((r, i) => (
          <div key={i} style={{ background: 'white', borderRadius: 16, padding: 14, boxShadow: '0 1px 0 rgba(11,31,77,0.04)' }}>
            <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: 13, fontWeight: 700, color: C.ink900 }}>{r.name}</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>{r.sub}</div>
              </div>
              <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: r.progress > 75 ? C.rose500 : C.ink700 }}>{100 - r.progress}%</span>
            </div>
            <div style={{ marginTop: 10, height: 6, background: C.ink100, borderRadius: 3, overflow: 'hidden' }}>
              <div style={{
                width: r.progress + '%', height: '100%',
                background: r.progress > 75 ? `linear-gradient(90deg, ${C.amber500}, ${C.rose500})` : `linear-gradient(90deg, ${C.blue400}, ${C.blue600})`,
              }}/>
            </div>
          </div>
        ))}
      </div>

      {/* Menu list */}
      <SectionHeader title="Account" action={null} />
      <div style={{ padding: '0 20px', background: 'white', borderRadius: 18, margin: '0 20px', overflow: 'hidden', boxShadow: '0 1px 0 rgba(11,31,77,0.04)' }}>
        {[
          { label: 'My 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' },
        ].map((m, i, a) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '14px 4px',
            borderBottom: i < a.length - 1 ? `1px solid ${C.ink100}` : 'none',
          }}>
            <div style={{ width: 32, height: 32, borderRadius: 10, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <m.Icon size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: C.ink900 }}>{m.label}</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>{m.sub}</div>
            </div>
            <IconChevR size={16} style={{ color: C.ink300 }} />
          </div>
        ))}
      </div>

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

Object.assign(window, { ScreenCart, ScreenCheckout, ScreenTracking, ScreenProfile });