// Puja discovery + booking flow
function PujaListScreen() {
  const list = [
    ['Grih Pravesh Puja', 'गृह प्रवेश पूजा', '2.5 hr · 1 pandit', '5,100', '7,900', 'saffron', 'kalash', 'Bestseller'],
    ['Satyanarayan Katha', 'सत्यनारायण कथा', '2 hr · 1 pandit', '2,100', '2,800', 'gold', 'book'],
    ['Rudrabhishek', 'रुद्राभिषेक', '2 hr · 1–2 pandits', '3,100', null, 'rose', 'flame', 'Shravan special'],
    ['Mundan Sanskar', 'मुंडन संस्कार', '1.5 hr · 1 pandit', '2,500', '3,100', 'teal', 'lotus'],
  ];
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff', paddingBottom: 12 }}>
        <TopBar title="Puja Services" sub="पूजा सेवाएं" right={<IconBtn n="search" />} />
        <Row gap={8} style={{ padding: '0 16px', overflow: 'hidden' }}>
          <Chip on icon="spark">All</Chip><Chip>New beginnings</Chip><Chip>Sanskaar</Chip><Chip>Dosh nivaran</Chip>
        </Row>
      </div>
      <Row gap={8} style={{ padding: '12px 16px', fontSize: 13 }}>
        <span style={{ color: JP.muted }}>48 pujas</span><span style={{ flex: 1 }} />
        <Row gap={4} style={{ fontWeight: 700 }}><Ic n="filter" s={16} />Filter</Row>
        <Row gap={4} style={{ fontWeight: 700, marginLeft: 12 }}>Sort: Popular<Ic n="chevD" s={14} /></Row>
      </Row>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map(([t, h, m, p, s, tone, ic, tag]) => (
          <Card key={t} pad={12}>
            <Row gap={12} a="stretch">
              <Ph w={96} h={110} r={14} tone={tone} icon={ic} label="Artwork">
                {tag && <span style={{ position: 'absolute', top: 6, left: 6 }}><Tag tone="white" style={{ fontSize: 10 }}>{tag}</Tag></span>}
              </Ph>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontWeight: 800, fontSize: 16 }}>{t}</div>
                <Hi s={12.5}>{h}</Hi>
                <Row gap={10} style={{ fontSize: 12, color: JP.ink2, marginTop: 6 }}>
                  <Row gap={3}><Ic n="clock" s={13} />{m.split(' · ')[0]}</Row>
                  <Row gap={3}><Ic n="user" s={13} />{m.split(' · ')[1]}</Row>
                </Row>
                <div style={{ flex: 1 }} />
                <Row style={{ justifyContent: 'space-between', alignItems: 'flex-end' }}>
                  <div><div style={{ fontSize: 11, color: JP.muted }}>from</div><Rupee v={p} strike={s} size={17} /></div>
                  <Add label="BOOK" sm />
                </Row>
              </div>
            </Row>
          </Card>
        ))}
      </div>
      <TabBar active="puja" />
    </Screen>
  );
}

function PujaDetailScreen() {
  return (
    <Screen h={2100} bg="#fff">
      <div style={{ height: 360, position: 'relative' }}>
        <img src="assets/family.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.25))' }} />
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}><Status light /></div>
        <Row style={{ position: 'absolute', top: 56, left: 16, right: 16, justifyContent: 'space-between' }}>
          <IconBtn n="back" bg="rgba(255,255,255,.95)" />
          <Row gap={8}><IconBtn n="heart" bg="rgba(255,255,255,.95)" /><IconBtn n="share" bg="rgba(255,255,255,.95)" /></Row>
        </Row>
        <Row gap={5} style={{ position: 'absolute', bottom: 36, left: '50%', transform: 'translateX(-50%)' }}>
          <span style={{ width: 18, height: 5, borderRadius: 3, background: '#fff' }} />{[1, 2, 3].map(i => <span key={i} style={{ width: 5, height: 5, borderRadius: 3, background: 'rgba(255,255,255,.55)' }} />)}
        </Row>
      </div>
      <div style={{ marginTop: -22, background: '#fff', borderRadius: '24px 24px 0 0', position: 'relative', padding: '20px 16px 0' }}>
        <Row gap={6}><Tag tone="saffron" icon="star">Most booked in Dehradun</Tag><Tag tone="green">Samagri included</Tag></Row>
        <div style={{ fontSize: 27, fontWeight: 900, letterSpacing: -.7, marginTop: 10 }}>Grih Pravesh Puja</div>
        <Hi s={16} c="#9A5A16">गृह प्रवेश पूजा</Hi>
        <div style={{ fontSize: 14.5, color: JP.ink2, marginTop: 8, lineHeight: 1.55 }}>Bless your new home before you move in — Vastu shanti, kalash sthapana and havan performed by a verified pandit, in your family's tradition.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', marginTop: 16, border: `1px solid ${JP.line}`, borderRadius: 16 }}>
          {[['4.9★', '2.1k reviews'], ['2.5 hr', 'Duration'], ['1–3', 'Pandits'], ['324', 'This month']].map(([a, b], i) => (
            <div key={b} style={{ padding: '12px 4px', textAlign: 'center', borderLeft: i ? `1px solid ${JP.line}` : 'none' }}>
              <div style={{ fontWeight: 800, fontSize: 16 }}>{a}</div><div style={{ fontSize: 11, color: JP.muted, marginTop: 2 }}>{b}</div>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 19, fontWeight: 800, marginTop: 26 }}>Choose your package</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
          {[['Samanya', 'सामान्य', '5,100', '1 pandit', false], ['Uttam', 'उत्तम', '7,100', '2 pandits', true], ['Vishesh', 'विशेष', '11,000', '3 pandits', false]].map(([n, h, p, d, on]) => (
            <div key={n} style={{ borderRadius: 16, border: `${on ? 2 : 1.5}px solid ${on ? JP.teal : JP.line}`, padding: '12px 10px', position: 'relative', background: on ? JP.teal50 : '#fff' }}>
              {on && <span style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)', background: JP.saffron, color: '#fff', fontSize: 9.5, fontWeight: 800, padding: '3px 7px', borderRadius: 6, whiteSpace: 'nowrap' }}>RECOMMENDED</span>}
              <div style={{ fontWeight: 800, fontSize: 14.5 }}>{n}</div><Hi s={11.5}>{h}</Hi>
              <div style={{ fontWeight: 900, fontSize: 18, marginTop: 6 }}>₹{p}</div>
              <div style={{ fontSize: 11.5, color: JP.ink2, marginTop: 2 }}>{d}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, background: JP.surface, borderRadius: 14, padding: '12px 14px' }}>
          {['2 pandits · 3 hr vidhi', 'Navgraha shanti + Vastu havan', 'Full samagri kit (32 items)', 'Puja video recording'].map(t => (
            <Row key={t} gap={8} style={{ fontSize: 13.5, padding: '3px 0' }}><Ic n="check" s={15} c={JP.teal} w={2.6} />{t}</Row>
          ))}
        </div>

        <div style={{ fontSize: 19, fontWeight: 800, marginTop: 26 }}>Puja vidhi <Hi s={14}>पूजा विधि</Hi></div>
        <div style={{ marginTop: 12, position: 'relative' }}>
          <div style={{ position: 'absolute', left: 15, top: 16, bottom: 16, width: 2, background: JP.saffron100 }} />
          {[['Swasti Vachan & Ganesh Puja', 'Opening invocation for peace', '15 min'], ['Kalash Sthapana', 'Inviting divine presence into the home', '20 min'], ['Navgraha & Vastu Shanti', 'Harmony with the nine planets', '45 min'], ['Havan & Purnahuti', 'Sacred fire, final offering & aarti', '60 min']].map(([t, s, d], i) => (
            <Row key={t} gap={12} a="flex-start" style={{ padding: '6px 0', position: 'relative' }}>
              <div style={{ width: 32, height: 32, borderRadius: 16, background: JP.saffron50, border: `2px solid #fff`, boxShadow: `0 0 0 1px ${JP.saffron100}`, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13, color: '#9A5A16', flex: 'none' }}>{i + 1}</div>
              <div style={{ flex: 1, paddingTop: 2 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div></div>
              <span style={{ fontSize: 12, color: JP.muted, paddingTop: 4 }}>{d}</span>
            </Row>
          ))}
        </div>

        <div style={{ marginTop: 22, borderRadius: 18, background: JP.cream, border: `1px solid ${JP.saffron100}`, padding: 14 }}>
          <Row style={{ justifyContent: 'space-between' }}>
            <div><div style={{ fontWeight: 800, fontSize: 15.5 }}>Samagri kit included</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>Pandit brings everything · 32 items</div></div>
            <span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>View list</span>
          </Row>
          <Row gap={6} style={{ marginTop: 10 }}>
            {['saffron', 'gold', 'rose', 'kumkum', 'teal'].map(t => <Ph key={t} w={50} h={50} r={12} tone={t} icon="bag" />)}
            <div style={{ width: 50, height: 50, borderRadius: 12, background: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13, color: JP.ink2 }}>+27</div>
          </Row>
        </div>

        <div style={{ fontSize: 19, fontWeight: 800, marginTop: 26 }}>What families say</div>
        <Row gap={10} style={{ marginTop: 12, overflow: 'hidden' }}>
          {[['MB', 'Manoj Bisht', 'Panditji explained every mantra to our children. Felt truly blessed.'], ['PR', 'Priya Rawat', 'On time, with all samagri. Very calm and traditional Garhwali vidhi.']].map(([i, n, q]) => (
            <Card key={n} pad={14} style={{ width: 270, flex: 'none' }}>
              <Row gap={10}><Avatar i={i} s={36} tone="teal" /><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14 }}>{n}</div><div style={{ color: JP.saffron, fontSize: 11, letterSpacing: 1.5 }}>★★★★★</div></div></Row>
              <div style={{ fontSize: 13.5, color: JP.ink2, marginTop: 8, lineHeight: 1.45 }}>"{q}"</div>
            </Card>
          ))}
        </Row>
      </div>
      <PayBar label="UTTAM · 2 PANDITS" amount="7,100" cta="Book this puja" />
    </Screen>
  );
}

function MuhuratScreen() {
  const days = [['S', [null, null, null, 1, 2, 3, 4]], ['', [5, 6, 7, 8, 9, 10, 11]], ['', [12, 13, 14, 15, 16, 17, 18]], ['', [19, 20, 21, 22, 23, 24, 25]], ['', [26, 27, 28, 29, 30, 31, null]]];
  const shubh = [8, 11, 14, 16, 21, 22, 24];
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}>
        <TopBar title="Choose date & muhurat" />
        <Steps n={1} label="Date & time" />
      </div>
      <div style={{ padding: 16 }}>
        <Card pad={14}>
          <Row style={{ justifyContent: 'space-between' }}>
            <IconBtn n="back" />
            <div style={{ textAlign: 'center' }}><div style={{ fontWeight: 800, fontSize: 16.5 }}>October 2026</div><Hi s={12.5}>आश्विन – कार्तिक</Hi></div>
            <IconBtn n="chevR" />
          </Row>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', marginTop: 12, textAlign: 'center', rowGap: 4 }}>
            {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <div key={i} style={{ fontSize: 12, fontWeight: 700, color: JP.muted, paddingBottom: 6 }}>{d}</div>)}
            {days.flatMap(([, w]) => w).map((d, i) => {
              const sel = d === 14, sh = shubh.includes(d), past = d && d < 8;
              return (
                <div key={i} style={{ height: 42, display: 'grid', placeItems: 'center', position: 'relative' }}>
                  {d && <div style={{ width: 38, height: 38, borderRadius: 12, display: 'grid', placeItems: 'center', fontWeight: sel ? 800 : 600, fontSize: 15,
                    background: sel ? JP.teal : 'transparent', color: sel ? '#fff' : past ? '#C3CAC9' : JP.ink, border: d === 8 ? `1.5px solid ${JP.ink}` : 'none' }}>{d}</div>}
                  {sh && !sel && <span style={{ position: 'absolute', bottom: 3, width: 5, height: 5, borderRadius: 3, background: JP.saffron }} />}
                </div>
              );
            })}
          </div>
          <Row gap={14} style={{ fontSize: 12, color: JP.ink2, marginTop: 8, paddingTop: 10, borderTop: `1px solid ${JP.line2}` }}>
            <Row gap={5}><span style={{ width: 7, height: 7, borderRadius: 4, background: JP.saffron }} />Shubh muhurat</Row>
            <Row gap={5}><span style={{ width: 12, height: 12, borderRadius: 4, border: `1.5px solid ${JP.ink}` }} />Today</Row>
          </Row>
        </Card>
        <Row style={{ justifyContent: 'space-between', margin: '18px 2px 10px' }}>
          <div style={{ fontWeight: 800, fontSize: 16.5 }}>Muhurat on Wed, 14 Oct</div>
          <Tag tone="saffron">Pushya yog</Tag>
        </Row>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[['07:10 – 09:40', 'Shubh · Best', 1], ['11:45 – 12:31', 'Abhijit muhurat'], ['16:20 – 17:50', 'Labh'], ['13:30 – 15:00', 'Rahu kaal · avoid', 0, 1]].map(([t, s, on, bad]) => (
            <div key={t} style={{ borderRadius: 14, padding: '11px 12px', border: `${on ? 2 : 1.5}px solid ${on ? JP.teal : JP.line}`, background: bad ? '#F4F5F5' : on ? JP.teal50 : '#fff', opacity: bad ? .6 : 1 }}>
              <div style={{ fontWeight: 800, fontSize: 15, textDecoration: bad ? 'line-through' : 'none' }}>{t}</div>
              <Row gap={4} style={{ fontSize: 12, color: on ? JP.tealDeep : JP.muted, marginTop: 2, fontWeight: on ? 700 : 500 }}>{on && <Ic n="star" s={12} fill={JP.saffron} c={JP.saffron} />}{s}</Row>
            </div>
          ))}
        </div>
        <Row gap={8} a="flex-start" style={{ fontSize: 12.5, color: JP.ink2, marginTop: 12 }}><Ic n="help" s={16} c={JP.muted} />Muhurats are calculated for Dehradun. Your pandit may suggest a refinement.</Row>
      </div>
      <PayBar label="14 OCT · 07:10" amount="7,100" cta="Continue" />
    </Screen>
  );
}

function SankalpScreen() {
  return (
    <Screen h={900} bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}>
        <TopBar title="Sankalp & address" />
        <Steps n={2} label="Who is the puja for" />
      </div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <Row style={{ justifyContent: 'space-between', marginBottom: 10 }}><div style={{ fontWeight: 800, fontSize: 16 }}>Sankalp for</div><span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>+ Add member</span></Row>
          <Card pad={0}>
            {[['AK', 'Ashish Kanyal', 'Self · Kashyap gotra', true, 'saffron'], ['PK', 'Priya Kanyal', 'Spouse · Rohini nakshatra', true, 'teal'], ['AK', 'Aarav Kanyal', 'Son', false, 'gray']].map(([i, n, s, on, t], k) => (
              <Row key={n} gap={12} style={{ padding: '12px 14px', borderTop: k ? `1px solid ${JP.line2}` : 'none' }}>
                <Check on={on} /><Avatar i={i} s={38} 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>
              </Row>
            ))}
          </Card>
        </div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 16, marginBottom: 10 }}>Special intention <span style={{ fontWeight: 500, color: JP.muted, fontSize: 13 }}>(optional)</span></div>
          <div style={{ background: '#fff', border: `1.5px solid ${JP.line}`, borderRadius: 14, padding: 14, fontSize: 14.5, lineHeight: 1.5, minHeight: 70 }}>For peace and prosperity in our new home at Sahastradhara Road.</div>
        </div>
        <div>
          <Row style={{ justifyContent: 'space-between', marginBottom: 10 }}><div style={{ fontWeight: 800, fontSize: 16 }}>Puja address</div><span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>Change</span></Row>
          <Card pad={14}><Row gap={12} a="flex-start">
            <div style={{ width: 40, height: 40, borderRadius: 12, background: JP.teal50, display: 'grid', placeItems: 'center' }}><Ic n="home" s={20} c={JP.teal} /></div>
            <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>New home</div><div style={{ fontSize: 13, color: JP.ink2, lineHeight: 1.45 }}>Flat 402, Shivalik Heights, Sahastradhara Road, Dehradun 248001</div></div>
          </Row></Card>
        </div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 16, marginBottom: 10 }}>Samagri</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Card pad={14} style={{ border: `2px solid ${JP.teal}`, background: JP.teal50 }}><Row gap={12}><Radio on /><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>Pandit Ji brings it</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>32 items, verified & fresh</div></div><b>+₹1,138</b></Row></Card>
            <Card pad={14}><Row gap={12}><Radio /><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>I'll arrange it</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>We'll share the list on WhatsApp</div></div><b>₹0</b></Row></Card>
          </div>
        </div>
      </div>
      <PayBar amount="8,238" cta="Review booking" />
    </Screen>
  );
}

function ReviewScreen() {
  return (
    <Screen h={900} bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}>
        <TopBar title="Review booking" />
        <Steps n={3} label="Confirm & pay" />
      </div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Card pad={14}>
          <Row gap={12}><img src="assets/family.jpg" style={{ width: 56, height: 56, borderRadius: 14, objectFit: 'cover' }} />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 16 }}>Grih Pravesh Puja</div><Row gap={6} style={{ marginTop: 3 }}><Tag tone="teal">Uttam package</Tag><Hi s={12}>गृह प्रवेश पूजा</Hi></Row></div>
          </Row>
          <div style={{ marginTop: 12, paddingTop: 4, borderTop: `1px solid ${JP.line2}` }}>
            {[['cal', 'Wed, 14 Oct 2026', '07:10 AM · Shubh muhurat · 2.5 hr'], ['pin', 'Shivalik Heights, Flat 402', 'Sahastradhara Road, Dehradun'], ['users', 'Sankalp for 2', 'Ashish & Priya Kanyal · Kashyap gotra'], ['user', 'Pandit Ji auto-assigned', 'Name & photo shared 24 hrs before']].map(([n, a, b]) => (
              <Row key={a} gap={12} a="flex-start" style={{ padding: '9px 0' }}>
                <Ic n={n} s={19} c={JP.teal} style={{ marginTop: 1 }} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>{a}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{b}</div></div>
              </Row>
            ))}
          </div>
        </Card>
        <Card pad={14} style={{ border: `1.5px dashed ${JP.saffron}`, background: JP.cream }}>
          <Row gap={10}><Ic n="tag" s={20} c={JP.saffronDeep} /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 14.5 }}>NEWHOME500 applied</div><div style={{ fontSize: 12.5, color: JP.green, fontWeight: 600 }}>You save ₹500 on this puja</div></div><span style={{ color: JP.kumkum, fontWeight: 700, fontSize: 13 }}>Remove</span></Row>
        </Card>
        <Card pad={14}>
          <div style={{ fontWeight: 800, fontSize: 15.5, marginBottom: 6 }}>Bill details</div>
          {[['Puja · Uttam', '₹7,100'], ['Samagri kit (32 items)', '₹1,138'], ['Pandit travel', <span style={{ color: JP.green }}><s style={{ color: JP.muted, marginRight: 6 }}>₹150</s>FREE</span>], ['Coupon NEWHOME500', <span style={{ color: JP.green }}>−₹500</span>]].map(([a, b]) => (
            <Row key={a} style={{ justifyContent: 'space-between', fontSize: 14, padding: '6px 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: 17 }}><span>To pay</span><span>₹7,738</span></Row>
        </Card>
        <div style={{ background: JP.green50, borderRadius: 14, padding: '11px 14px', fontSize: 13, color: '#1A6B3C', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
          <Ic n="shield" s={17} c={JP.green} />Free reschedule up to 24 hrs before. Full refund if cancelled 48 hrs before the muhurat.
        </div>
      </div>
      <PayBar label="TO PAY" amount="7,738" sub="Saved ₹650" cta="Proceed to pay" />
    </Screen>
  );
}

function PaymentScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}><TopBar title="Payment" right={<Row gap={4} style={{ fontSize: 12.5, color: JP.green, fontWeight: 700 }}><Ic n="lock" s={14} />Secure</Row>} /></div>
      <div style={{ padding: 16 }}>
        <div style={{ borderRadius: 18, background: `linear-gradient(135deg, ${JP.teal}, ${JP.tealDeep})`, color: '#fff', padding: 16, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -30, top: -30, width: 120, height: 120, borderRadius: 60, border: '1px solid rgba(255,255,255,.15)' }} />
          <div style={{ fontSize: 13, opacity: .85 }}>Grih Pravesh Puja · 14 Oct</div>
          <Row style={{ justifyContent: 'space-between', alignItems: 'flex-end' }}><div style={{ fontSize: 30, fontWeight: 900, letterSpacing: -.8 }}>₹7,738</div><span style={{ fontSize: 13, fontWeight: 700, textDecoration: 'underline' }}>Details</span></Row>
        </div>
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: .8, margin: '20px 2px 10px' }}>PAY BY UPI</div>
        <Card pad={0}>
          {[['GPay', 'Google Pay', true, '#4285F4'], ['Pe', 'PhonePe', false, '#5F259F'], ['Ptm', 'Paytm', false, '#00BAF2'], ['+', 'Pay with UPI ID', false, JP.teal]].map(([i, n, on, c], k) => (
            <Row key={n} gap={12} style={{ padding: '13px 14px', borderTop: k ? `1px solid ${JP.line2}` : 'none' }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: JP.surface, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 900, color: c }}>{i}</div>
              <span style={{ flex: 1, fontWeight: 700, fontSize: 15 }}>{n}</span><Radio on={on} />
            </Row>
          ))}
        </Card>
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: .8, margin: '20px 2px 10px' }}>MORE WAYS TO PAY</div>
        <Card pad={0}>
          {[['card', 'Credit / Debit card', 'Visa ending 4417 saved'], ['wallet', 'JIPANDITJI wallet', 'Balance ₹250'], ['clock', 'Pay ₹1,000 now, rest after puja', 'Balance in cash or UPI to Pandit Ji']].map(([n, a, b], k) => (
            <Row key={a} gap={12} style={{ padding: '13px 14px', borderTop: k ? `1px solid ${JP.line2}` : 'none' }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: k === 2 ? JP.saffron50 : JP.surface, display: 'grid', placeItems: 'center' }}><Ic n={n} s={19} c={k === 2 ? JP.saffronDeep : JP.ink2} /></div>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>{a}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{b}</div></div><Ic n="chevR" s={16} c={JP.muted} />
            </Row>
          ))}
        </Card>
      </div>
      <BottomBar><Btn full>Pay ₹7,738 with Google Pay</Btn></BottomBar>
    </Screen>
  );
}

function SuccessScreen() {
  return (
    <Screen bg={JP.cream}>
      <Status />
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(60% 40% at 50% 26%, #FFE3BC 0%, ${JP.cream} 70%)` }} />
      {/* marigold confetti */}
      {[[40, 120, 10, JP.saffron], [320, 100, 8, JP.kumkum], [80, 260, 6, JP.gold], [300, 250, 11, JP.saffron], [190, 80, 7, JP.gold], [350, 190, 6, JP.kumkum], [30, 200, 8, '#F4B13E']].map(([x, y, s, c], i) => (
        <span key={i} style={{ position: 'absolute', left: x, top: y, width: s, height: s, borderRadius: '50%', background: c, opacity: .85 }} />
      ))}
      <div style={{ position: 'relative', padding: '56px 24px 0', textAlign: 'center' }}>
        <div style={{ width: 110, height: 110, borderRadius: 55, background: '#fff', margin: '0 auto', display: 'grid', placeItems: 'center', boxShadow: `0 0 0 12px rgba(246,145,47,.12), 0 0 0 26px rgba(246,145,47,.06)` }}>
          <div style={{ width: 76, height: 76, borderRadius: 38, background: JP.green, display: 'grid', placeItems: 'center' }}><Ic n="check" s={42} c="#fff" w={3} /></div>
        </div>
        <Hi s={22} c="#9A5A16" style={{ display: 'block', marginTop: 34 }}>शुभमस्तु</Hi>
        <div style={{ fontSize: 28, fontWeight: 900, letterSpacing: -.7, marginTop: 4 }}>Your puja is booked</div>
        <div style={{ fontSize: 14.5, color: JP.ink2, lineHeight: 1.5, marginTop: 8 }}>Confirmation sent on WhatsApp. Pandit Ji's name and number will be shared 24 hrs before the muhurat.</div>
      </div>
      <div style={{ position: 'relative', margin: '24px 16px 0' }}>
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: 14 }}>
            {[['Booking ID', 'JP-B-58213'], ['Puja', 'Grih Pravesh · Uttam'], ['Muhurat', 'Wed, 14 Oct · 07:10 AM'], ['Amount paid', '₹7,738']].map(([a, b]) => (
              <Row key={a} style={{ justifyContent: 'space-between', fontSize: 14, padding: '5px 0' }}><span style={{ color: JP.muted }}>{a}</span><b>{b}</b></Row>
            ))}
          </div>
          <Row style={{ borderTop: `1px dashed ${JP.line}` }}>
            <Row gap={6} style={{ flex: 1, justifyContent: 'center', padding: 13, color: JP.teal, fontWeight: 700, fontSize: 14 }}><Ic n="cal" s={17} />Add to calendar</Row>
            <div style={{ width: 1, alignSelf: 'stretch', background: JP.line }} />
            <Row gap={6} style={{ flex: 1, justifyContent: 'center', padding: 13, color: JP.teal, fontWeight: 700, fontSize: 14 }}><Ic n="share" s={17} />Share invite</Row>
          </Row>
        </Card>
      </div>
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 34, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn full>Track booking</Btn>
        <Btn kind="ghost" full style={{ background: '#F1EEDF' }}>Back to home</Btn>
      </div>
    </Screen>
  );
}

function BookingTrackScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg={JP.teal} light />
      <div style={{ background: JP.teal, color: '#fff', paddingBottom: 70 }}>
        <TopBar title="Satyanarayan Puja" sub="Booking JP-B-58107" light right={<IconBtn n="help" light />} />
        <div style={{ padding: '6px 20px 0' }}>
          <div style={{ fontSize: 13, opacity: .8 }}>Sun, 11 Oct 2026</div>
          <div style={{ fontSize: 30, fontWeight: 900, letterSpacing: -.8 }}>Pandit Ji arriving <span style={{ color: '#FFD08A' }}>in 18 min</span></div>
        </div>
      </div>
      <div style={{ margin: '-56px 16px 0', position: 'relative' }}>
        <Card pad={0} style={{ overflow: 'hidden', boxShadow: '0 10px 30px rgba(8,96,109,.15)' }}>
          {/* map placeholder */}
          <div style={{ height: 150, background: '#E8EFE9', position: 'relative', overflow: 'hidden' }}>
            <svg width="100%" height="150" style={{ position: 'absolute', inset: 0 }}>
              <path d="M-10 110 C 80 90, 120 40, 220 60 S 360 30, 420 50" stroke="#fff" strokeWidth="14" fill="none" />
              <path d="M60 -10 L 120 170" stroke="#fff" strokeWidth="10" />
              <path d="M260 -10 L 300 170" stroke="#fff" strokeWidth="8" />
              <path d="M70 100 C 120 80, 150 50, 220 60 S 300 45, 310 50" stroke={JP.teal} strokeWidth="4" fill="none" strokeDasharray="2 7" strokeLinecap="round" />
            </svg>
            <div style={{ position: 'absolute', left: 54, top: 82, width: 34, height: 34, borderRadius: 17, background: JP.saffron, border: '3px solid #fff', display: 'grid', placeItems: 'center', boxShadow: '0 4px 10px rgba(0,0,0,.2)' }}><Ic n="user" s={16} c="#fff" w={2.2} /></div>
            <div style={{ position: 'absolute', left: 296, top: 30, width: 34, height: 34, borderRadius: 17, background: JP.teal, border: '3px solid #fff', display: 'grid', placeItems: 'center' }}><Ic n="home" s={16} c="#fff" w={2.2} /></div>
          </div>
          <Row gap={12} style={{ padding: 14 }}>
            <Avatar i="RS" s={48} />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15.5 }}>Pt. Rameshwar Shastri</div><Row gap={4} style={{ fontSize: 12.5, color: JP.muted }}><Ic n="star" s={12} c={JP.saffron} fill={JP.saffron} />4.9 · Hindi, Sanskrit</Row></div>
            <IconBtn n="chat" bg={JP.teal50} c={JP.teal} /><IconBtn n="phone" bg={JP.teal} c="#fff" />
          </Row>
        </Card>
      </div>
      <div style={{ margin: '12px 16px 0', borderRadius: 16, background: JP.ink, color: '#fff', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, opacity: .7 }}>Share this code with Pandit Ji to begin</div></div>
        <div style={{ fontSize: 24, fontWeight: 900, letterSpacing: 6 }}>4821</div>
      </div>
      <Card pad={16} style={{ margin: '12px 16px 0' }}>
        {[['Booked & paid', '5 Oct, 6:42 PM', 2], ['Pandit Ji assigned', '7 Oct, 11:16 AM', 2], ['Samagri packed & with Pandit Ji', 'Today, 8:10 AM', 2], ['Pandit Ji on the way', '18 min away', 1], ['Puja performed', '', 0]].map(([a, b, st], i, arr) => (
          <Row key={a} gap={12} a="flex-start" style={{ position: 'relative', paddingBottom: i < arr.length - 1 ? 14 : 0 }}>
            {i < arr.length - 1 && <div style={{ position: 'absolute', left: 10, top: 22, bottom: -2, width: 2, background: st === 2 ? JP.green : JP.line }} />}
            <div style={{ width: 22, height: 22, borderRadius: 11, flex: 'none', display: 'grid', placeItems: 'center', background: st === 2 ? JP.green : st === 1 ? '#fff' : JP.line2, border: st === 1 ? `2.5px solid ${JP.saffron}` : 'none', position: 'relative', zIndex: 1 }}>
              {st === 2 && <Ic n="check" s={13} c="#fff" w={3} />}{st === 1 && <span style={{ width: 8, height: 8, borderRadius: 4, background: JP.saffron }} />}
            </div>
            <div style={{ flex: 1 }}><div style={{ fontWeight: st === 1 ? 800 : 600, fontSize: 14.5, color: st === 0 ? JP.muted : JP.ink }}>{a}</div>{b && <div style={{ fontSize: 12, color: st === 1 ? JP.saffronDeep : JP.muted, fontWeight: st === 1 ? 700 : 400 }}>{b}</div>}</div>
          </Row>
        ))}
      </Card>
      <BottomBar><Btn kind="outline" full>Reschedule</Btn><Btn kind="ghost" full style={{ color: JP.kumkum, background: JP.kumkum50 }}>Cancel</Btn></BottomBar>
    </Screen>
  );
}

Object.assign(window, { PujaListScreen, PujaDetailScreen, MuhuratScreen, SankalpScreen, ReviewScreen, PaymentScreen, SuccessScreen, BookingTrackScreen });