// Samagri quick-commerce + account
function StoreScreen() {
  const side = [['All', 'spark', true], ['Kits', 'gift'], ['Havan', 'flame'], ['Diya & dhoop', 'diya'], ['Ghee & oil', 'kalash'], ['Murti', 'om'], ['Mala', 'mala'], ['Books', 'book']];
  const prods = [['Grih Pravesh samagri kit', '32 items', '1,138', '1,450', 'saffron', 'Pandit-verified'], ['Havan samagri · 51 herbs', '500 g', '240', null, 'gold'], ['A2 cow ghee (bilona)', '250 g', '336', '399', 'rose', null, 1], ['Clay diyas, hand-painted', 'Set of 12', '199', null, 'kumkum'], ['Kalash, pure copper', '1 pc · 500 ml', '649', '799', 'gold'], ['Gangajal, Haridwar', '500 ml', '99', null, 'teal']];
  return (
    <Screen bg="#fff">
      <div style={{ background: `linear-gradient(180deg, #DDF0EA 0%, #fff 100%)` }}>
        <Status />
        <Row style={{ padding: '0 16px', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 11.5, fontWeight: 800, color: JP.tealDeep, letterSpacing: .8 }}>SAMAGRI DELIVERY IN</div>
            <Row gap={6}><span style={{ fontSize: 25, fontWeight: 900, letterSpacing: -.7 }}>14 minutes</span><Ic n="bolt" s={20} c={JP.saffron} fill={JP.saffron} /></Row>
            <Row gap={3} style={{ fontSize: 13, fontWeight: 600, color: JP.ink2 }}>Home · East Canal Road<Ic n="chevD" s={13} w={2.4} /></Row>
          </div>
          <IconBtn n="bag" badge="3" />
        </Row>
        <div style={{ margin: '12px 16px 0', height: 46, borderRadius: 14, background: '#fff', border: `1px solid ${JP.line}`, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px', color: JP.muted, fontSize: 15 }}><Ic n="search" s={19} c={JP.ink2} />Search ghee, diya, havan samagri…</div>
        <div style={{ margin: '12px 16px 0', borderRadius: 18, background: JP.kumkum, color: '#fff', padding: 14, position: 'relative', overflow: 'hidden', height: 96, boxSizing: 'border-box' }}>
          <div style={{ position: 'absolute', right: -10, top: -10 }}><Ph w={120} h={120} r={60} tone="gold" icon="kalash" /></div>
          <div style={{ fontSize: 11, fontWeight: 800, color: '#FFD08A', letterSpacing: .8 }}>NAVRATRI SPECIAL</div>
          <div style={{ fontSize: 18, fontWeight: 900, marginTop: 2 }}>Complete Navratri kit</div>
          <div style={{ fontSize: 12.5, opacity: .85 }}>24 items · <b>₹1,499</b> <s style={{ opacity: .7 }}>₹1,899</s></div>
        </div>
      </div>
      <div style={{ display: 'flex', marginTop: 12, borderTop: `1px solid ${JP.line}` }}>
        {/* Blinkit-style side rail */}
        <div style={{ width: 80, borderRight: `1px solid ${JP.line}`, background: '#FAFBFB' }}>
          {side.map(([l, n, on]) => (
            <div key={l} style={{ padding: '10px 4px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative', background: on ? '#fff' : 'transparent' }}>
              {on && <span style={{ position: 'absolute', right: -1, top: 8, bottom: 8, width: 4, borderRadius: '4px 0 0 4px', background: JP.teal }} />}
              <div style={{ width: 46, height: 46, borderRadius: 23, background: on ? JP.teal50 : '#EEF1F0', display: 'grid', placeItems: 'center' }}><Ic n={n} s={22} c={on ? JP.teal : JP.ink2} /></div>
              <span style={{ fontSize: 11, fontWeight: on ? 800 : 600, textAlign: 'center', lineHeight: 1.2, color: on ? JP.ink : JP.ink2 }}>{l}</span>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, padding: '10px 10px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 10px', alignContent: 'start' }}>
          {prods.map(([t, q, p, s, tone, tag, qty]) => (
            <div key={t}>
              <div style={{ position: 'relative', border: `1px solid ${JP.line}`, borderRadius: 14, overflow: 'visible' }}>
                <Ph h={112} r={13} tone={tone} icon="bag" label="Product" />
                {s && <span style={{ position: 'absolute', top: 0, left: 8, background: '#2563EB', color: '#fff', fontSize: 9.5, fontWeight: 800, padding: '4px 5px 6px', borderRadius: '0 0 6px 6px', lineHeight: 1.1, textAlign: 'center' }}>{Math.round((1 - parseFloat(p.replace(',', '')) / parseFloat(s.replace(',', ''))) * 100)}%<br />OFF</span>}
                <div style={{ position: 'absolute', right: 6, bottom: -12 }}><Add sm qty={qty} /></div>
              </div>
              <Row gap={3} style={{ marginTop: 16, fontSize: 10, fontWeight: 800, color: JP.muted }}><Ic n="clock" s={10} w={2.6} />14 MINS</Row>
              <div style={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1.25, marginTop: 2, height: 31, overflow: 'hidden' }}>{t}</div>
              <div style={{ fontSize: 11.5, color: JP.muted }}>{q}</div>
              <div style={{ marginTop: 2 }}><Rupee v={p} strike={s} size={14} /></div>
            </div>
          ))}
        </div>
      </div>
      <TabBar active="samagri" cart="3 items · ₹1,673" />
    </Screen>
  );
}

function ProductScreen() {
  return (
    <Screen h={1000} bg="#fff">
      <div style={{ height: 360, position: 'relative', background: JP.cream }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}><Status /></div>
        <Row style={{ position: 'absolute', top: 56, left: 16, right: 16, justifyContent: 'space-between', zIndex: 2 }}><IconBtn n="back" /><Row gap={8}><IconBtn n="heart" /><IconBtn n="share" /></Row></Row>
        <div style={{ position: 'absolute', inset: '100px 50px 40px' }}><Ph h="100%" r={24} tone="saffron" label="Product photo · Grih Pravesh samagri kit" icon="gift" /></div>
        <Row gap={5} style={{ position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)' }}><span style={{ width: 18, height: 5, borderRadius: 3, background: JP.ink }} /><span style={{ width: 5, height: 5, borderRadius: 3, background: '#D6D0BC' }} /><span style={{ width: 5, height: 5, borderRadius: 3, background: '#D6D0BC' }} /></Row>
      </div>
      <div style={{ padding: 16 }}>
        <Row gap={6}><Tag tone="green" icon="clock">14 MINS</Tag><Tag tone="saffron" icon="shield">Pandit-verified kit</Tag></Row>
        <div style={{ fontSize: 23, fontWeight: 900, letterSpacing: -.5, marginTop: 10 }}>Grih Pravesh Samagri Kit</div>
        <Hi s={14}>गृह प्रवेश पूजा सामग्री किट</Hi>
        <Row gap={6} style={{ marginTop: 6, fontSize: 13 }}><Row gap={3} style={{ background: JP.green, color: '#fff', borderRadius: 6, padding: '1px 6px', fontWeight: 800 }}>4.7<Ic n="star" s={10} c="#fff" fill="#fff" /></Row><span style={{ color: JP.muted }}>860 ratings · 2.1k sold this month</span></Row>
        <Row gap={10} style={{ marginTop: 10 }}><Rupee v="1,138" strike="1,450" size={24} /><Tag tone="green">21% OFF</Tag></Row>
        <div style={{ fontWeight: 800, fontSize: 15, margin: '18px 0 8px' }}>Kit size</div>
        <Row gap={8}>
          <div style={{ flex: 1, borderRadius: 14, border: `1.5px solid ${JP.line}`, padding: 10 }}><div style={{ fontWeight: 700, fontSize: 14 }}>Samanya</div><div style={{ fontSize: 12, color: JP.muted }}>22 items · ₹849</div></div>
          <div style={{ flex: 1, borderRadius: 14, border: `2px solid ${JP.teal}`, background: JP.teal50, padding: 10 }}><div style={{ fontWeight: 800, fontSize: 14 }}>Uttam</div><div style={{ fontSize: 12, color: JP.tealDeep }}>32 items · ₹1,138</div></div>
        </Row>
        <div style={{ fontWeight: 800, fontSize: 15, margin: '18px 0 8px' }}>What's inside</div>
        <Card pad={0}>{[['Cow ghee (bilona)', '250 g'], ['Havan samagri · 51 herbs', '500 g'], ['Copper kalash with coconut', '1 pc'], ['Roli, akshat, kalawa, supari', '1 set']].map(([a, b], i) => (
          <Row key={a} style={{ padding: '11px 14px', borderTop: i ? `1px solid ${JP.line2}` : 'none', justifyContent: 'space-between', fontSize: 14 }}><span>{a}</span><span style={{ color: JP.muted }}>{b}</span></Row>
        ))}<div style={{ padding: '11px 14px', borderTop: `1px solid ${JP.line2}`, color: JP.teal, fontWeight: 700, fontSize: 14 }}>+ 28 more items</div></Card>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 14 }}>
          {[['shield', 'Pure & fresh'], ['truck', '7-day return'], ['doc', 'Vidhi PDF']].map(([n, l]) => (
            <div key={l} style={{ background: JP.surface, borderRadius: 14, padding: '12px 4px', textAlign: 'center' }}><div style={{ display: 'grid', placeItems: 'center' }}><Ic n={n} s={20} c={JP.teal} /></div><div style={{ fontSize: 12, fontWeight: 700, marginTop: 4 }}>{l}</div></div>
          ))}
        </div>
      </div>
      <BottomBar><Add qty={1} /><Btn full>Add to cart · ₹1,138</Btn></BottomBar>
    </Screen>
  );
}

function CartScreen() {
  return (
    <Screen h={900} bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}><TopBar title="Cart" sub="3 items · Delivering to Home" right={<IconBtn n="share" />} /></div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Card pad={14}>
          <Row gap={10} style={{ marginBottom: 12 }}><div style={{ width: 38, height: 38, borderRadius: 12, background: JP.green50, display: 'grid', placeItems: 'center' }}><Ic n="bolt" s={20} c={JP.green} /></div><div><div style={{ fontWeight: 800, fontSize: 15 }}>Delivery in 14 minutes</div><div style={{ fontSize: 12.5, color: JP.muted }}>Shipment of 3 items</div></div></Row>
          {[['Grih Pravesh samagri kit', 'Uttam · 32 items', '1,138', 1, 'saffron'], ['A2 cow ghee (bilona)', '250 g', '336', 2, 'gold'], ['Clay diyas, hand-painted', 'Set of 12', '199', 1, 'rose']].map(([t, s, p, q, tone]) => (
            <Row key={t} gap={12} style={{ padding: '10px 0', borderTop: `1px solid ${JP.line2}` }}>
              <Ph w={56} h={56} r={12} tone={tone} icon="bag" />
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14 }}>{t}</div><div style={{ fontSize: 12, color: JP.muted }}>{s}</div><b style={{ fontSize: 14 }}>₹{p}</b></div>
              <Add sm qty={q} />
            </Row>
          ))}
        </Card>
        <div>
          <div style={{ fontWeight: 800, fontSize: 15.5, margin: '4px 2px 10px' }}>Pandit Ji also recommends</div>
          <Row gap={8} style={{ overflow: 'hidden' }}>
            {[['Gangajal', '500 ml · ₹99', 'teal'], ['Camphor', '100 g · ₹120', 'gold'], ['Marigold mala', 'Fresh · ₹149', 'saffron']].map(([t, s, tone]) => (
              <Card key={t} pad={10} style={{ width: 150, flex: 'none' }}><Row gap={8}><Ph w={40} h={40} r={10} tone={tone} /><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 13 }}>{t}</div><div style={{ fontSize: 11, color: JP.muted }}>{s}</div></div><div style={{ width: 28, height: 28, borderRadius: 8, border: `1.5px solid ${JP.teal}`, display: 'grid', placeItems: 'center' }}><Ic n="plus" s={14} c={JP.teal} w={2.6} /></div></Row></Card>
            ))}
          </Row>
        </div>
        <Card pad={14}>
          <Row gap={10}><Ic n="tag" s={19} c={JP.saffronDeep} /><span style={{ flex: 1, fontWeight: 700, fontSize: 14 }}>Apply coupon</span><Ic n="chevR" s={16} c={JP.muted} /></Row>
        </Card>
        <Card pad={14}>
          <div style={{ fontWeight: 800, fontSize: 15, marginBottom: 6 }}>Bill details</div>
          {[['Items total', <span><s style={{ color: JP.muted, marginRight: 6 }}>₹2,247</s>₹2,009</span>], ['Delivery', <span style={{ color: JP.green }}><s style={{ color: JP.muted, marginRight: 6 }}>₹25</s>FREE</span>], ['Handling', '₹4']].map(([a, b]) => (
            <Row key={a} style={{ justifyContent: 'space-between', fontSize: 13.5, padding: '5px 0', color: JP.ink2 }}><span>{a}</span><span style={{ fontWeight: 600 }}>{b}</span></Row>
          ))}
          <Divider m="8px 0" />
          <Row style={{ justifyContent: 'space-between', fontWeight: 800, fontSize: 16 }}><span>Grand total</span><span>₹2,013</span></Row>
          <div style={{ marginTop: 10, background: JP.green50, color: JP.green, fontWeight: 700, fontSize: 13, borderRadius: 10, padding: '8px 12px', textAlign: 'center' }}>You're saving ₹263 on this order</div>
        </Card>
      </div>
      <BottomBar>
        <div style={{ flex: 'none' }}><Row gap={6} style={{ fontSize: 11.5, color: JP.muted, fontWeight: 700 }}><span style={{ fontWeight: 900, color: '#4285F4' }}>G</span>PAY USING</Row><div style={{ fontWeight: 800, fontSize: 14 }}>Google Pay UPI</div></div>
        <div style={{ flex: 1, height: 54, borderRadius: 16, background: JP.teal, color: '#fff', display: 'flex', alignItems: 'center', padding: '0 16px', justifyContent: 'space-between' }}>
          <div><div style={{ fontWeight: 900, fontSize: 16 }}>₹2,013</div><div style={{ fontSize: 10.5, opacity: .8, fontWeight: 700 }}>TOTAL</div></div>
          <Row gap={4} style={{ fontWeight: 800, fontSize: 15 }}>Place order<Ic n="chevR" s={16} c="#fff" w={2.6} /></Row>
        </div>
      </BottomBar>
    </Screen>
  );
}

function OrderTrackScreen() {
  return (
    <Screen bg={JP.surface}>
      <div style={{ height: 380, position: 'relative', background: '#E6EEE8', overflow: 'hidden' }}>
        <svg width="390" height="380" style={{ position: 'absolute', inset: 0 }}>
          <rect x="30" y="60" width="120" height="80" rx="8" fill="#DCE6DE" /><rect x="220" y="170" width="140" height="100" rx="8" fill="#DCE6DE" /><rect x="40" y="250" width="110" height="90" rx="8" fill="#D3E3D6" />
          <path d="M-10 170 H 400" stroke="#fff" strokeWidth="18" /><path d="M190 -10 V 400" stroke="#fff" strokeWidth="14" /><path d="M-10 330 C 100 300, 200 360, 400 300" stroke="#fff" strokeWidth="10" fill="none" />
          <path d="M80 170 H 190 V 260 C 220 280, 260 290, 300 300" stroke={JP.teal} strokeWidth="5" fill="none" strokeLinecap="round" />
        </svg>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}><Status /></div>
        <div style={{ position: 'absolute', top: 56, left: 16 }}><IconBtn n="back" /></div>
        <div style={{ position: 'absolute', left: 168, top: 236, width: 44, height: 44, borderRadius: 22, background: JP.saffron, border: '3px solid #fff', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(0,0,0,.25)' }}><Ic n="truck" s={20} c="#fff" w={2} /></div>
        <div style={{ position: 'absolute', left: 284, top: 284, width: 32, height: 32, borderRadius: 16, background: JP.teal, border: '3px solid #fff', display: 'grid', placeItems: 'center' }}><Ic n="home" s={15} c="#fff" w={2.2} /></div>
      </div>
      <div style={{ marginTop: -30, position: 'relative', background: '#fff', borderRadius: '26px 26px 0 0', padding: '10px 16px 0', minHeight: 500 }}>
        <div style={{ width: 40, height: 5, borderRadius: 3, background: JP.line, margin: '0 auto 14px' }} />
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 13, color: JP.muted, fontWeight: 600 }}>Order #JP-20418 · Arriving in</div>
          <div style={{ fontSize: 40, fontWeight: 900, letterSpacing: -1.5, color: JP.green, lineHeight: 1.1 }}>6 mins</div>
          <div style={{ fontSize: 13.5, color: JP.ink2 }}>Packed by our pandit · on the way</div>
        </div>
        <Row gap={4} style={{ margin: '16px 0 0' }}>{[1, 1, 1, 0].map((on, i) => <div key={i} style={{ flex: 1, height: 5, borderRadius: 3, background: on ? JP.green : JP.line }} />)}</Row>
        <Row style={{ justifyContent: 'space-between', fontSize: 11, color: JP.muted, fontWeight: 700, marginTop: 6 }}><span>Confirmed</span><span>Packed</span><span style={{ color: JP.green }}>On the way</span><span>Delivered</span></Row>
        <Card pad={14} style={{ marginTop: 16 }}><Row gap={12}><Avatar i="VK" s={44} tone="teal" /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>Vikas Kumar</div><div style={{ fontSize: 12.5, color: JP.muted }}>Your delivery partner</div></div><IconBtn n="phone" bg={JP.teal} c="#fff" /></Row></Card>
        <Card pad={14} style={{ marginTop: 10 }}><Row gap={10}><div style={{ display: 'flex' }}>{['saffron', 'gold', 'rose'].map((t, i) => <Ph key={t} w={36} h={36} r={10} tone={t} style={{ marginLeft: i ? -8 : 0, border: '2px solid #fff' }} />)}</div><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14 }}>3 items · ₹2,013</div><div style={{ fontSize: 12, color: JP.muted }}>Paid via Google Pay</div></div><span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>Details</span></Row></Card>
      </div>
    </Screen>
  );
}

function BookingsScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}>
        <TopBar title="My bookings" />
        <Row style={{ borderBottom: `1px solid ${JP.line}` }}>
          {['Upcoming (2)', 'Completed', 'Cancelled'].map((t, i) => <div key={t} style={{ flex: 1, textAlign: 'center', padding: '12px 0', fontWeight: i ? 600 : 800, fontSize: 14.5, color: i ? JP.muted : JP.teal, borderBottom: i ? 'none' : `2.5px solid ${JP.teal}` }}>{t}</div>)}
        </Row>
      </div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[['OCT', '11', 'Satyanarayan Puja', 'Sun · 09:00 AM · At home', 'Pandit confirmed', 'green', 'Pt. Rameshwar Shastri · arriving 08:40'], ['OCT', '14', 'Grih Pravesh Puja · Uttam', 'Wed · 07:10 AM · Shivalik Heights', 'Assigning pandit', 'saffron', 'Pandit Ji details by 13 Oct, 7 AM']].map(([m, d, t, s, st, tone, f]) => (
          <Card key={t} pad={0}>
            <Row gap={12} style={{ padding: 14 }}>
              <div style={{ width: 52, height: 56, borderRadius: 14, background: JP.saffron50, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#9A5A16' }}><span style={{ fontSize: 10.5, fontWeight: 800 }}>{m}</span><span style={{ fontSize: 22, fontWeight: 900, lineHeight: 1 }}>{d}</span></div>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15.5 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div><div style={{ marginTop: 5 }}><Tag tone={tone}>{st}</Tag></div></div>
            </Row>
            <Row gap={8} style={{ padding: '10px 14px', borderTop: `1px solid ${JP.line2}`, fontSize: 12.5, color: JP.ink2 }}><Ic n={tone === 'green' ? 'user' : 'clock'} s={15} c={JP.muted} /><span style={{ flex: 1 }}>{f}</span>{tone === 'green' && <Ic n="phone" s={17} c={JP.teal} />}</Row>
          </Card>
        ))}
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: 1, margin: '10px 2px 0' }}>RECENTLY COMPLETED</div>
        <Card pad={14}><Row gap={12}>
          <div style={{ width: 52, height: 56, borderRadius: 14, background: JP.surface, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: JP.muted }}><span style={{ fontSize: 10.5, fontWeight: 800 }}>SEP</span><span style={{ fontSize: 22, fontWeight: 900, lineHeight: 1 }}>28</span></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>Rudrabhishek</div><div style={{ fontSize: 12.5, color: JP.muted }}>Pt. Devendra Joshi</div></div>
          <Btn kind="outline" sm icon="star">Rate</Btn>
        </Row></Card>
      </div>
      <TabBar active="puja" />
    </Screen>
  );
}

function ProfileScreen() {
  const g1 = [['cal', 'My bookings', '2 upcoming'], ['bag', 'Samagri orders'], ['users', 'Family members', '4'], ['wallet', 'Payments & wallet', '₹250'], ['pin', 'Saved addresses']];
  const g2 = [['bell', 'Festival reminders', 'On'], ['globe', 'App language', 'English'], ['help', 'Help & support'], ['doc', 'Terms & privacy']];
  const Group = ({ items }) => (
    <Card pad={0}>{items.map(([n, l, r], i) => (
      <Row key={l} gap={12} style={{ padding: '13px 14px', borderTop: i ? `1px solid ${JP.line2}` : 'none' }}>
        <div style={{ width: 36, height: 36, borderRadius: 11, background: JP.surface, display: 'grid', placeItems: 'center' }}><Ic n={n} s={18} c={JP.ink2} /></div>
        <span style={{ flex: 1, fontWeight: 600, fontSize: 15 }}>{l}</span>{r && <span style={{ fontSize: 13, color: JP.muted }}>{r}</span>}<Ic n="chevR" s={15} c={JP.muted} />
      </Row>
    ))}</Card>
  );
  return (
    <Screen bg={JP.surface}>
      <div style={{ background: `linear-gradient(180deg, #FFE7C2, ${JP.cream})`, paddingBottom: 18 }}>
        <Status />
        <Row gap={14} style={{ padding: '6px 16px 0' }}>
          <Avatar i="AK" s={64} tone="saffron" />
          <div style={{ flex: 1 }}><div style={{ fontSize: 21, fontWeight: 900, letterSpacing: -.4 }}>Ashish Kanyal</div><div style={{ fontSize: 13, color: JP.ink2 }}>+91 98765 43210 · Kashyap gotra</div></div>
          <IconBtn n="edit" />
        </Row>
        <Row gap={10} style={{ margin: '16px 16px 0', background: JP.ink, borderRadius: 18, padding: '14px 16px', color: '#fff' }}>
          <div style={{ width: 40, height: 40, borderRadius: 20, background: 'linear-gradient(135deg, #F6C26B, #C9922E)', display: 'grid', placeItems: 'center' }}><Ic n="om" s={22} c={JP.ink} w={2} /></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>JIPANDITJI Bhakt+ <span style={{ color: '#F6C26B' }}>Gold</span></div><div style={{ fontSize: 12, opacity: .75 }}>Free samagri delivery · priority pandits</div></div>
          <Ic n="chevR" s={16} c="#fff" w={2.4} />
        </Row>
      </div>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[['6', 'Pujas'], ['4', 'Orders'], ['₹250', 'Wallet']].map(([a, b]) => <Card key={b} pad={12} style={{ textAlign: 'center' }}><div style={{ fontWeight: 900, fontSize: 19 }}>{a}</div><div style={{ fontSize: 12, color: JP.muted }}>{b}</div></Card>)}
        </div>
        <Group items={g1} />
        <Group items={g2} />
        <Row gap={6} style={{ justifyContent: 'center', color: JP.kumkum, fontWeight: 700, fontSize: 14.5, padding: 6 }}><Ic n="logout" s={18} />Log out</Row>
      </div>
      <TabBar active="profile" />
    </Screen>
  );
}

function FamilyScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}><TopBar title="Family members" sub="Used for sankalp & personalised muhurats" /></div>
      <div style={{ padding: 16 }}>
        <Row gap={10} a="flex-start" style={{ background: JP.saffron50, borderRadius: 14, padding: '12px 14px', fontSize: 13, color: '#7A4A12' }}><Ic n="spark" s={18} c={JP.saffronDeep} />Add birth details to get birthday puja and shraddh reminders for each member.</Row>
        <Card pad={0} style={{ marginTop: 12 }}>
          {[['AK', 'Ashish Kanyal', 'You · Kashyap gotra · Magha', 'saffron'], ['PK', 'Priya Kanyal', 'Spouse · Rohini nakshatra', 'teal'], ['AK', 'Aarav Kanyal', 'Son · Mundan due this year', 'gray', 'Mundan due'], ['SK', 'Shanti Kanyal', 'Mother', 'kumkum', 'Add birth details']].map(([i, n, s, t, tag], k) => (
            <Row key={n} gap={12} style={{ padding: '13px 14px', borderTop: k ? `1px solid ${JP.line2}` : 'none' }}>
              <Avatar i={i} s={44} tone={t} />
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>{n}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div></div>
              {tag ? <Tag tone="saffron">{tag}</Tag> : <Ic n="edit" s={18} c={JP.muted} />}
            </Row>
          ))}
        </Card>
      </div>
      <BottomBar><Btn full icon="plus">Add family member</Btn></BottomBar>
    </Screen>
  );
}

function EmptyCartScreen() {
  return (
    <Screen bg="#fff">
      <Status />
      <TopBar title="Cart" />
      <div style={{ textAlign: 'center', padding: '110px 40px 0' }}>
        <div style={{ width: 120, height: 120, borderRadius: 60, background: JP.saffron50, margin: '0 auto', display: 'grid', placeItems: 'center' }}><Ic n="bag" s={50} c={JP.saffronDeep} w={1.5} /></div>
        <div style={{ fontSize: 22, fontWeight: 900, marginTop: 22 }}>Your cart is empty</div>
        <div style={{ fontSize: 14.5, color: JP.ink2, marginTop: 6, lineHeight: 1.5 }}>Pandit-verified samagri, delivered before your muhurat.</div>
        <Btn style={{ margin: '22px auto 0', width: 200 }}>Browse samagri</Btn>
        <div style={{ marginTop: 14, color: JP.teal, fontWeight: 700, fontSize: 13.5, textDecoration: 'underline' }}>Or book a puja with samagri included</div>
      </div>
    </Screen>
  );
}

function PaymentFailScreen() {
  return (
    <Screen bg="#fff">
      <Status />
      <div style={{ textAlign: 'center', padding: '100px 30px 0' }}>
        <div style={{ width: 110, height: 110, borderRadius: 55, background: JP.kumkum50, margin: '0 auto', display: 'grid', placeItems: 'center' }}><Ic n="x" s={44} c={JP.kumkum} w={2.4} /></div>
        <div style={{ fontSize: 24, fontWeight: 900, marginTop: 22 }}>Payment didn't go through</div>
        <div style={{ fontSize: 14.5, color: JP.ink2, marginTop: 8, lineHeight: 1.5 }}>Your bank declined the transaction. If money was deducted, it will be refunded in 3–5 working days.</div>
      </div>
      <Card pad={14} style={{ margin: '24px 16px 0' }}>
        <Row style={{ justifyContent: 'space-between', fontSize: 14 }}><span style={{ color: JP.muted }}>Grih Pravesh Puja · 14 Oct</span><b>₹7,738</b></Row>
        <Row gap={8} style={{ marginTop: 10, background: JP.saffron50, borderRadius: 10, padding: '8px 10px', fontSize: 12.5, color: '#7A4A12', fontWeight: 600 }}><Ic n="clock" s={15} c={JP.saffronDeep} />Your muhurat slot is held for 09:54</Row>
      </Card>
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 34, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn full>Retry payment</Btn><Btn kind="outline" full>Use another method</Btn>
      </div>
    </Screen>
  );
}

Object.assign(window, { StoreScreen, ProductScreen, CartScreen, OrderTrackScreen, BookingsScreen, ProfileScreen, FamilyScreen, EmptyCartScreen, PaymentFailScreen });