// Web screens — Cart, Checkout, Account dashboard

const Wstyles2 = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif', color: C.ink900 };

// ═════════════════════════════════════════════════════════════
// W4) CART (full-page)
// ═════════════════════════════════════════════════════════════
function WebCart() {
  const items = [
    { name: 'Metformin SR 500mg', sub: 'Strip of 30 · Glycomet-SR', qty: 2, price: 78, mrp: 95, hue: 'blue', rx: true, stock: 'In stock', save: 17 },
    { name: 'Vitamin D3 60K IU', sub: '4 capsules · Healthkart', qty: 1, price: 149, mrp: 189, hue: 'amber', rx: false, stock: 'In stock', save: 40 },
    { name: 'Cetirizine 10mg', sub: 'Strip of 10 · Cetzine', qty: 1, price: 24, mrp: 32, hue: 'mint', rx: true, stock: 'In stock', save: 8 },
  ];
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const mrp = items.reduce((s, i) => s + i.mrp * i.qty, 0);
  const couponSave = Math.round(subtotal * 0.2);
  const total = subtotal - couponSave;
  return (
    <div className="screen" style={{ ...Wstyles2, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="medicine" />
      <div style={{ padding: '20px 40px 0', fontSize: 12, color: C.ink500 }}>
        Home <span style={{ margin: '0 6px' }}>›</span> <span style={{ color: C.ink900, fontWeight: 600 }}>Cart</span>
      </div>
      <div style={{ padding: '12px 40px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>Your cart <span style={{ color: C.ink400, fontWeight: 600, fontSize: 18 }}>({items.length} items)</span></div>
        <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>Continue shopping →</span>
      </div>

      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24 }}>
        {/* Items + Rx + delivery */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Rx attached row */}
          <div style={{ background: 'white', borderRadius: 16, padding: 14, border: `1px solid ${C.blue100}`, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconRx size={22}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Prescription attached</div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Dr_Mehta_Rx.jpg · Verified by Dr. P. Mehta · 2 min ago</div>
            </div>
            <div className="pill" style={{ background: C.mint100, color: '#0F5A48' }}><IconCheck size={12}/> Verified</div>
            <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Replace</span>
          </div>

          {/* Items list */}
          <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}` }}>
            <div style={{ padding: '12px 18px', borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 18, height: 18, borderRadius: 4, background: C.blue600, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconCheck size={12}/></div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 700 }}>Deliver all 3 items together</div>
              <div style={{ fontSize: 12, color: C.ink500 }}>Today, by 6:40 PM</div>
            </div>
            {items.map((p, i) => (
              <div key={i} style={{ padding: 18, borderBottom: i < items.length - 1 ? `1px solid ${C.ink100}` : 'none', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <ProductPlaceholder hue={p.hue} w={92} h={92} radius={12} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700 }}>{p.name}</div>
                      <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <span className="mono" style={{ fontSize: 17, fontWeight: 700 }}>₹{p.price * p.qty}</span>
                      <div className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through' }}>₹{p.mrp * p.qty}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                    {p.rx && <span className="pill" style={{ background: C.blue50, color: C.blue600, fontSize: 10 }}><IconRx size={11}/> Rx</span>}
                    <span className="pill" style={{ background: C.mint100, color: '#0F5A48', fontSize: 10 }}>● {p.stock}</span>
                    <span className="pill" style={{ background: C.amber100, color: '#7A4500', fontSize: 10 }}>Save ₹{p.save}/unit</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
                    <div style={{ display: 'flex', alignItems: 'center', background: C.ink50, borderRadius: 10 }}>
                      <div style={{ width: 30, height: 30, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconMinus size={16}/></div>
                      <div className="mono" style={{ width: 28, textAlign: 'center', fontWeight: 700, fontSize: 13 }}>{p.qty}</div>
                      <div style={{ width: 30, height: 30, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus size={16}/></div>
                    </div>
                    <div style={{ display: 'flex', gap: 14 }}>
                      <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Save for later</span>
                      <span style={{ fontSize: 12, fontWeight: 700, color: C.rose500 }}>Remove</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* You might also need */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Frequently bought together</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { name: 'Glucometer strips', price: 320, hue: 'blue' },
                { name: 'Vit B-Complex', price: 245, hue: 'amber' },
                { name: 'Pan-D 40mg', price: 108, hue: 'mint' },
                { name: 'BP monitor', price: 1899, hue: 'navy' },
              ].map((s, i) => (
                <div key={i} style={{ padding: 10, borderRadius: 12, border: `1px solid ${C.ink100}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <ProductPlaceholder hue={s.hue} h={70} radius={8}/>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>{s.name}</div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 700 }}>₹{s.price}</span>
                    <span style={{ fontSize: 11, fontWeight: 700, color: C.blue600 }}>+ Add</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Summary column */}
        <div>
          <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}`, position: 'sticky', top: 20, boxShadow: '0 8px 20px rgba(11,31,77,0.06)' }}>
            {/* Coupon */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 12, borderRadius: 12, background: `linear-gradient(135deg, ${C.amber100}, white)`, border: `1px dashed ${C.amber500}` }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: C.amber500, color: '#7A4500', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>%</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#7A4500' }}>JAN20 applied</div>
                <div style={{ fontSize: 11, color: '#7A4500', opacity: 0.7 }}>Flat 20% off · saved ₹{couponSave}</div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: '#7A4500' }}>Edit</span>
            </div>

            {/* Bill */}
            <div style={{ fontSize: 13, fontWeight: 700, marginTop: 18 }}>Bill summary</div>
            <div style={{ marginTop: 8 }}>
              {[
                ['MRP total', `₹${mrp}`],
                ['Product discount', `−₹${mrp - subtotal}`, C.mint500],
                ['Coupon (JAN20)', `−₹${couponSave}`, C.mint500],
                ['Delivery', 'FREE', C.mint500],
                ['Convenience fee', '₹0'],
              ].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>
            <div style={{ height: 1, background: C.ink100, margin: '10px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontSize: 14, fontWeight: 700 }}>Total to pay</span>
              <span className="mono" style={{ fontSize: 22, fontWeight: 700 }}>₹{total}</span>
            </div>
            <div style={{ marginTop: 10, padding: '8px 12px', borderRadius: 10, background: C.mint100, fontSize: 11, color: '#0F5A48', fontWeight: 600, textAlign: 'center' }}>
              Total savings: ₹{mrp - total} 🎉
            </div>
            <button style={{ marginTop: 14, width: '100%', background: C.blue600, color: 'white', border: 'none', borderRadius: 12, padding: '14px 0', fontWeight: 700, fontSize: 14, boxShadow: '0 8px 18px rgba(27,91,255,0.28)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              Proceed to checkout <IconChevR size={16}/>
            </button>
            <div style={{ marginTop: 14, display: 'flex', gap: 16, fontSize: 11, color: C.ink500, justifyContent: 'center' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><IconShield size={14} style={{ color: C.blue600 }}/> 100% secure</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><IconCheck size={14} style={{ color: C.mint500 }}/> Easy returns</span>
            </div>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W5) CHECKOUT (3-step layout)
// ═════════════════════════════════════════════════════════════
function WebCheckout() {
  return (
    <div className="screen" style={{ ...Wstyles2, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="medicine" />
      <div style={{ padding: '20px 40px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>Checkout</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: C.mint500, fontWeight: 700 }}>
          <IconShield size={14}/> Encrypted and secure
        </div>
      </div>

      {/* Steps */}
      <div style={{ padding: '16px 40px 0', display: 'flex', alignItems: 'center', gap: 14 }}>
        {[
          { l: 'Address', done: true },
          { l: 'Delivery', done: true },
          { l: 'Payment', active: true },
          { l: 'Review', done: false },
        ].map((s, i, a) => (
          <React.Fragment key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 14,
                background: s.done ? C.blue600 : (s.active ? 'white' : 'white'),
                color: s.done ? 'white' : (s.active ? C.blue600 : C.ink400),
                border: s.active ? `2px solid ${C.blue600}` : (s.done ? 'none' : `2px solid ${C.ink200}`),
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700,
              }}>{s.done ? <IconCheck size={14}/> : i + 1}</div>
              <span style={{ fontSize: 13, fontWeight: 700, color: s.done || s.active ? C.ink900 : C.ink400 }}>{s.l}</span>
            </div>
            {i < a.length - 1 && <div style={{ flex: 1, height: 2, background: s.done ? C.blue600 : C.ink200, borderRadius: 1, maxWidth: 100 }}/>}
          </React.Fragment>
        ))}
      </div>

      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Delivery address — collapsed */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconCheck size={18}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Delivering to <span style={{ color: C.ink900 }}>Aarav · Home</span></div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038 · +91 98••• 12•••</div>
            </div>
            <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Change</span>
          </div>

          {/* Delivery slot */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconTruck size={18}/></div>
              <div style={{ fontSize: 14, fontWeight: 700, flex: 1 }}>Delivery slot</div>
              <span style={{ fontSize: 12, color: C.mint500, fontWeight: 700 }}>Express selected</span>
            </div>
            <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { l: 'Express', s: '28 min', p: 'FREE', active: true },
                { l: 'Today', s: 'by 8 PM', p: 'FREE' },
                { l: 'Tomorrow', s: '8–10 AM', p: '₹19' },
                { l: 'Tomorrow', s: '6–8 PM', p: '₹19' },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: 14, borderRadius: 12, textAlign: 'center',
                  background: s.active ? C.blue600 : C.ink50,
                  color: s.active ? 'white' : C.ink900,
                  border: s.active ? `2px solid ${C.blue600}` : '2px solid transparent',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{s.l}</div>
                  <div style={{ fontSize: 11, opacity: 0.8, marginTop: 2 }}>{s.s}</div>
                  <div className="mono" style={{ fontSize: 11, marginTop: 4, fontWeight: 700, color: s.active ? 'white' : C.mint500 }}>{s.p}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Payment */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `2px solid ${C.blue600}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconCard size={18}/></div>
              <div style={{ fontSize: 14, fontWeight: 700, flex: 1 }}>Payment method</div>
              <span className="pill" style={{ background: C.blue50, color: C.blue600 }}>Step 3 · in progress</span>
            </div>
            <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { l: 'UPI · GPay', sub: 'aarav@oksbi · Recommended', Icon: IconCard, active: true, hue: 'blue' },
                { l: 'HDFC Credit Card', sub: '•••• 4821 · Earn 12 pts', Icon: IconCard, active: false, hue: 'navy' },
                { l: 'Cash on delivery', sub: 'Pay when you receive', Icon: IconCash, active: false, hue: 'mint' },
                { l: 'Health wallet', sub: 'Balance: ₹420', Icon: IconShield, active: false, hue: 'amber' },
              ].map((m, i) => (
                <div key={i} style={{
                  padding: 14, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12,
                  background: m.active ? C.blue25 : 'white', border: m.active ? `2px solid ${C.blue600}` : `1px solid ${C.ink200}`,
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    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={18}/></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700 }}>{m.l}</div>
                    <div style={{ fontSize: 11, color: C.ink500 }}>{m.sub}</div>
                  </div>
                  <div style={{
                    width: 18, height: 18, borderRadius: 9,
                    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>

            {/* UPI ID input row (active) */}
            <div style={{ marginTop: 14, padding: 12, borderRadius: 12, background: C.blue25 }}>
              <div style={{ fontSize: 11, color: C.ink500, fontWeight: 700, letterSpacing: 0.3 }}>UPI ID</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
                <div style={{ flex: 1, padding: '12px 14px', borderRadius: 10, background: 'white', fontSize: 14, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace', border: `1.5px solid ${C.blue600}` }}>
                  aarav@oksbi
                </div>
                <button style={{ background: 'white', color: C.blue600, border: `1.5px solid ${C.blue600}`, borderRadius: 10, padding: '12px 16px', fontWeight: 700, fontSize: 13 }}>Verify</button>
              </div>
            </div>
          </div>
        </div>

        {/* Sticky summary */}
        <div>
          <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}`, position: 'sticky', top: 20, boxShadow: '0 8px 20px rgba(11,31,77,0.06)' }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Order summary</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: 'Metformin SR 500mg', qty: 2, price: 156, hue: 'blue' },
                { name: 'Vitamin D3 60K IU', qty: 1, price: 149, hue: 'amber' },
                { name: 'Cetirizine 10mg', qty: 1, price: 24, hue: 'mint' },
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <ProductPlaceholder hue={p.hue} w={40} h={40} radius={8}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{p.name}</div>
                    <div style={{ fontSize: 11, color: C.ink500 }}>Qty {p.qty}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 13, fontWeight: 700 }}>₹{p.price}</span>
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: C.ink100, margin: '12px 0' }}/>
            {[
              ['Items', '₹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: '4px 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' }}>
              <span style={{ fontSize: 14, fontWeight: 700 }}>Total</span>
              <span className="mono" style={{ fontSize: 20, fontWeight: 700 }}>₹248</span>
            </div>
            <button style={{ marginTop: 16, width: '100%', background: C.blue600, color: 'white', border: 'none', borderRadius: 12, padding: '14px 0', fontWeight: 700, fontSize: 14, boxShadow: '0 8px 18px rgba(27,91,255,0.28)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <IconShield size={16}/> Pay ₹248 securely
            </button>
            <div style={{ marginTop: 12, fontSize: 11, color: C.ink400, textAlign: 'center', lineHeight: 1.5 }}>
              By placing this order, you agree to our<br/><span style={{ color: C.blue600, fontWeight: 600 }}>Refund Policy</span> and <span style={{ color: C.blue600, fontWeight: 600 }}>Terms</span>
            </div>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W6) ACCOUNT DASHBOARD
// ═════════════════════════════════════════════════════════════
function WebAccount() {
  return (
    <div className="screen" style={{ ...Wstyles2, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="" />

      <div style={{ padding: '24px 40px 0', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 24 }}>
        {/* Sidebar */}
        <div>
          <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
            {/* Avatar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 50, height: 50, borderRadius: 25,
                background: `linear-gradient(160deg, ${C.blue400}, ${C.navy800})`,
                color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16,
              }}>AK</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>Aarav Kumar</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>JANA+ Gold · 1,284 pts</div>
              </div>
            </div>
            {/* Nav */}
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 2 }}>
              {[
                { l: 'Overview', Icon: IconHome, on: true },
                { l: 'My orders', Icon: IconBox, badge: '24' },
                { l: 'Prescriptions', Icon: IconRx, badge: '6' },
                { l: 'Refill tracker', Icon: IconClock },
                { l: 'Lab reports', Icon: IconScan },
                { l: 'Addresses', Icon: IconLoc, badge: '3' },
                { l: 'Payment methods', Icon: IconCard },
                { l: 'Family members', Icon: IconUser, badge: '4' },
                { l: 'Wallet & rewards', Icon: IconStar },
              ].map((m, i) => (
                <div key={i} style={{
                  padding: '10px 12px', borderRadius: 10,
                  background: m.on ? C.blue50 : 'transparent',
                  color: m.on ? C.blue600 : C.ink700,
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 13, fontWeight: m.on ? 700 : 500,
                }}>
                  <m.Icon size={18}/>
                  <span style={{ flex: 1 }}>{m.l}</span>
                  {m.badge && <span className="mono" style={{ fontSize: 10, color: C.ink400, fontWeight: 700 }}>{m.badge}</span>}
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: C.ink100, margin: '12px 0' }}/>
            <div style={{ padding: '10px 12px', borderRadius: 10, color: C.ink500, display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, fontWeight: 500 }}>
              <IconClose size={18}/> Sign out
            </div>
          </div>
        </div>

        {/* Main */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.02 }}>Welcome back, Aarav 👋</div>
              <div style={{ fontSize: 13, color: C.ink500, marginTop: 4 }}>Here's a quick look at your health account.</div>
            </div>
          </div>

          {/* Stat row */}
          <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { l: 'Active orders', v: '1', s: 'Arriving in 14 min', Icon: IconTruck, hue: 'blue', cta: 'Track' },
              { l: 'Refills due', v: '3', s: 'Next: Metformin in 3d', Icon: IconRx, hue: 'amber', cta: 'Refill' },
              { l: 'JANA+ points', v: '1,284', s: '₹128 cashback ready', Icon: IconStar, hue: 'mint', cta: 'Redeem' },
              { l: 'Lifetime saved', v: '₹2,140', s: 'on 24 orders', Icon: IconHeart, hue: 'rose', cta: null },
            ].map((s, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 14, padding: 16, border: `1px solid ${C.ink100}` }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: { blue: C.blue100, mint: C.mint100, amber: C.amber100, rose: C.rose100 }[s.hue],
                    color: { blue: C.blue600, mint: C.mint500, amber: C.amber500, rose: C.rose500 }[s.hue],
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}><s.Icon size={20}/></div>
                  {s.cta && <span style={{ fontSize: 11, fontWeight: 700, color: C.blue600 }}>{s.cta} →</span>}
                </div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700, marginTop: 12, letterSpacing: -0.01 }}>{s.v}</div>
                <div style={{ fontSize: 12, color: C.ink700, fontWeight: 600 }}>{s.l}</div>
                <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{s.s}</div>
              </div>
            ))}
          </div>

          {/* Two columns */}
          <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
            {/* Active order */}
            <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Active order</div>
                <span style={{ fontSize: 12, color: C.blue600, fontWeight: 700 }}>All orders →</span>
              </div>
              <div style={{ marginTop: 14, padding: 14, borderRadius: 12, background: C.blue25, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 22, background: C.blue600, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconTruck size={22}/></div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 700 }}>#JN-2841-09</div>
                  <div style={{ fontSize: 11, color: C.ink500 }}>3 items · Arriving by 6:40 PM</div>
                </div>
                <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '8px 14px', fontSize: 12, fontWeight: 700 }}>Track live</button>
              </div>
              {/* Mini timeline */}
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 0 }}>
                {[
                  { l: 'Confirmed', done: true },
                  { l: 'Verified', done: true },
                  { l: 'Packed', done: true, active: true },
                  { l: 'Shipped', done: false },
                  { l: 'Delivered', done: false },
                ].map((s, i, a) => (
                  <React.Fragment key={i}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, minWidth: 64 }}>
                      <div style={{
                        width: 16, height: 16, borderRadius: 8,
                        background: s.done ? C.blue600 : C.ink200,
                        boxShadow: s.active ? `0 0 0 5px ${C.blue100}` : 'none',
                      }}/>
                      <span style={{ fontSize: 10, color: s.done ? C.ink900 : C.ink400, fontWeight: s.active ? 700 : 500 }}>{s.l}</span>
                    </div>
                    {i < a.length - 1 && <div style={{ flex: 1, height: 2, background: s.done ? C.blue600 : C.ink200 }}/>}
                  </React.Fragment>
                ))}
              </div>
            </div>

            {/* Refills */}
            <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Refill tracker</div>
                <span style={{ fontSize: 12, color: C.blue600, fontWeight: 700 }}>Manage</span>
              </div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { name: 'Metformin SR 500', d: '3 days', p: 88, urgent: true },
                  { name: 'Atorvastatin 10', d: '9 days', p: 65 },
                  { name: 'Vitamin D3', d: '21 days', p: 32 },
                ].map((r, i) => (
                  <div key={i}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                      <span style={{ fontWeight: 600 }}>{r.name}</span>
                      <span className="mono" style={{ fontWeight: 700, color: r.urgent ? C.rose500 : C.ink700 }}>{r.d}</span>
                    </div>
                    <div style={{ marginTop: 4, height: 5, background: C.ink100, borderRadius: 3, overflow: 'hidden' }}>
                      <div style={{ width: r.p + '%', height: '100%', background: r.urgent ? `linear-gradient(90deg, ${C.amber500}, ${C.rose500})` : `linear-gradient(90deg, ${C.blue400}, ${C.blue600})` }}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Recent orders + quick actions */}
          <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14, paddingBottom: 28 }}>
            <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Recent orders</div>
                <span style={{ fontSize: 12, color: C.blue600, fontWeight: 700 }}>View all</span>
              </div>
              <div style={{ marginTop: 12 }}>
                {[
                  { id: '#JN-2812-06', date: 'May 24', items: '2 items', total: '₹352', tone: 'mint', status: 'Delivered' },
                  { id: '#JN-2784-13', date: 'May 18', items: '5 items', total: '₹1,284', tone: 'mint', status: 'Delivered' },
                  { id: '#JN-2750-02', date: 'May 12', items: '1 item', total: '₹95', tone: 'rose', status: 'Refunded' },
                ].map((o, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: i < 2 ? `1px solid ${C.ink100}` : 'none', gap: 12 }}>
                    <div className="mono" style={{ fontSize: 12, fontWeight: 700, width: 110 }}>{o.id}</div>
                    <div style={{ fontSize: 12, color: C.ink500, width: 70 }}>{o.date}</div>
                    <div style={{ fontSize: 12, color: C.ink500, flex: 1 }}>{o.items}</div>
                    <div className="pill" style={{ background: o.tone === 'mint' ? C.mint100 : C.rose100, color: o.tone === 'mint' ? '#0F5A48' : '#7A1C1F', fontSize: 10 }}>● {o.status}</div>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 700, width: 70, textAlign: 'right' }}>{o.total}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: `linear-gradient(160deg, ${C.navy800}, ${C.blue600})`, color: 'white', borderRadius: 16, padding: 18, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', right: -30, bottom: -30, width: 140, height: 140, borderRadius: 100, background: 'rgba(255,255,255,0.08)' }}/>
              <div style={{ fontSize: 12, opacity: 0.85, letterSpacing: 0.5, fontWeight: 600 }}>JANA+ GOLD</div>
              <div className="mono" style={{ fontSize: 30, fontWeight: 700, marginTop: 4, letterSpacing: -0.02 }}>1,284</div>
              <div style={{ fontSize: 12, opacity: 0.8 }}>points · ₹128 cashback ready</div>
              <div style={{ marginTop: 14, padding: 10, borderRadius: 10, background: 'rgba(255,255,255,0.14)', fontSize: 11, opacity: 0.9 }}>
                Earn 2× points on lab tests this week
              </div>
              <button style={{ marginTop: 14, width: '100%', background: 'white', color: C.navy800, border: 'none', borderRadius: 10, padding: '10px 0', fontWeight: 700, fontSize: 13 }}>
                Redeem rewards →
              </button>
            </div>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

Object.assign(window, { WebCart, WebCheckout, WebAccount });