// Pandit, Panchang, Festivals, Anushthan, Temples, Consult
function PanditListScreen() {
  const ps = [['RS', 'Pt. Rameshwar Shastri', 'Vedacharya · Karmakand · 18 yrs', '4.9', '1,240', ['Grih Pravesh', 'Rudrabhishek', 'Vivah'], 'Tomorrow', 'saffron', 'Hindi, Sanskrit'],
    ['DJ', 'Pt. Devendra Joshi', 'Shastri · Pahadi vidhi · 12 yrs', '4.8', '860', ['Namkaran', 'Satyanarayan'], 'Today', 'teal', 'Garhwali, Hindi'],
    ['AM', 'Acharya Anil Mishra', 'Jyotishacharya · 22 yrs', '4.9', '2,010', ['Navgraha', 'Kaal Sarp'], '16 Oct', 'gray', 'Hindi']];
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff', paddingBottom: 12 }}>
        <TopBar title="Pandit Ji" sub="48 verified pandits near Dehradun" right={<IconBtn n="filter" />} />
        <div style={{ margin: '0 16px', height: 46, borderRadius: 14, background: JP.surface, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px', color: JP.muted, fontSize: 15 }}><Ic n="search" s={19} />Search by name, puja or language</div>
        <Row gap={8} style={{ padding: '12px 16px 0', overflow: 'hidden' }}><Chip on>Top rated</Chip><Chip>Available today</Chip><Chip>Garhwali</Chip><Chip>Jyotish</Chip></Row>
      </div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {ps.map(([i, n, s, r, c, tags, av, tone, lang]) => (
          <Card key={n} pad={14}>
            <Row gap={12} a="flex-start">
              <div style={{ position: 'relative' }}><Avatar i={i} s={58} tone={tone} />
                <span style={{ position: 'absolute', bottom: -3, right: -3, width: 20, height: 20, borderRadius: 10, background: JP.teal, border: '2px solid #fff', display: 'grid', placeItems: 'center' }}><Ic n="check" s={11} c="#fff" w={3} /></span></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 16 }}>{n}</div>
                <div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div>
                <Row gap={6} style={{ fontSize: 12.5, marginTop: 4 }}><Row gap={3} style={{ background: JP.green, color: '#fff', borderRadius: 6, padding: '1px 6px', fontWeight: 800 }}>{r}<Ic n="star" s={10} c="#fff" fill="#fff" /></Row><span style={{ color: JP.muted }}>{c} pujas · {lang}</span></Row>
              </div>
            </Row>
            <Row gap={6} style={{ marginTop: 10, flexWrap: 'wrap' }}>{tags.map(t => <Tag key={t} tone="gray">{t}</Tag>)}</Row>
            <Row gap={8} style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${JP.line2}` }}>
              <div style={{ flex: 1, fontSize: 12, color: JP.muted }}>Next available<div style={{ fontWeight: 800, color: av === 'Today' ? JP.green : JP.ink, fontSize: 13.5 }}>{av}</div></div>
              <Btn kind="outline" sm>Consult free</Btn><Btn sm>Book</Btn>
            </Row>
          </Card>
        ))}
      </div>
    </Screen>
  );
}

function PanditProfileScreen() {
  return (
    <Screen h={1300} bg={JP.surface}>
      <div style={{ background: `linear-gradient(180deg, #FFE7C2, ${JP.cream})`, paddingBottom: 20, position: 'relative', overflow: 'hidden' }}>
        <svg width="300" height="300" viewBox="0 0 100 100" style={{ position: 'absolute', left: '50%', top: 20, transform: 'translateX(-50%)', opacity: .16 }}>
          {Array.from({ length: 16 }).map((_, i) => <ellipse key={i} cx="50" cy="24" rx="6" ry="22" fill="none" stroke={JP.saffronDeep} strokeWidth=".5" transform={`rotate(${i * 22.5} 50 50)`} />)}
        </svg>
        <Status />
        <Row style={{ padding: '0 16px', justifyContent: 'space-between', position: 'relative' }}><IconBtn n="back" /><Row gap={8}><IconBtn n="share" /><IconBtn n="heart" /></Row></Row>
        <div style={{ textAlign: 'center', position: 'relative' }}>
          <div style={{ width: 104, height: 104, borderRadius: 52, background: '#fff', margin: '0 auto', display: 'grid', placeItems: 'center', boxShadow: '0 0 0 4px #fff, 0 0 0 6px ' + JP.saffron100 }}>
            <Ph w={96} h={96} r={48} tone="saffron" icon="user" />
          </div>
          <div style={{ fontSize: 23, fontWeight: 900, letterSpacing: -.5, marginTop: 14 }}>Pt. Rameshwar Shastri</div>
          <Hi s={14} c="#9A5A16">पं. रामेश्वर शास्त्री</Hi>
          <Row gap={6} style={{ justifyContent: 'center', marginTop: 8 }}><Tag tone="teal" icon="shield">JIPANDITJI verified</Tag><Tag tone="saffron">Vedacharya</Tag></Row>
        </div>
      </div>
      <div style={{ padding: '0 16px', marginTop: 4 }}>
        <Card pad={0}><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
          {[['4.9★', '412 reviews'], ['1,240', 'Pujas done'], ['18 yrs', 'Experience']].map(([a, b], i) => (
            <div key={b} style={{ textAlign: 'center', padding: '14px 4px', borderLeft: i ? `1px solid ${JP.line}` : 'none' }}><div style={{ fontWeight: 900, fontSize: 19 }}>{a}</div><div style={{ fontSize: 11.5, color: JP.muted }}>{b}</div></div>
          ))}</div></Card>
        <div style={{ fontWeight: 800, fontSize: 17, marginTop: 22 }}>About</div>
        <div style={{ fontSize: 14, color: JP.ink2, lineHeight: 1.55, marginTop: 6 }}>Vedacharya from Sampurnanand Sanskrit University, Varanasi. Performs Shukla Yajurvedic karmakand with clear Hindi explanation of every step.</div>
        <Row gap={6} style={{ marginTop: 10, flexWrap: 'wrap' }}><Tag tone="gray">Hindi</Tag><Tag tone="gray">Sanskrit</Tag><Tag tone="gray">Garhwali</Tag><Tag tone="gray" icon="pin">Dehradun · Rishikesh</Tag></Row>
        <Card pad={14} style={{ marginTop: 16, background: JP.teal50, border: 'none' }}>
          {['ID & address verified', 'Vedic qualification checked', 'Vidhi assessed by our acharya panel'].map(t => <Row key={t} gap={8} style={{ fontSize: 13.5, padding: '3px 0', fontWeight: 600 }}><Ic n="shield" s={16} c={JP.teal} />{t}</Row>)}
        </Card>
        <div style={{ fontWeight: 800, fontSize: 17, marginTop: 22, marginBottom: 8 }}>Pujas performed</div>
        <Card pad={0}>{[['Grih Pravesh Puja', '5,100'], ['Rudrabhishek', '3,100'], ['Vivah Sanskar', '21,000']].map(([a, b], i) => (
          <Row key={a} style={{ padding: '13px 14px', borderTop: i ? `1px solid ${JP.line2}` : 'none', justifyContent: 'space-between' }}><span style={{ fontWeight: 600, fontSize: 14.5 }}>{a}</span><Row gap={6}><b>₹{b}+</b><Ic n="chevR" s={15} c={JP.muted} /></Row></Row>
        ))}</Card>
        <Row style={{ justifyContent: 'space-between', marginTop: 22, marginBottom: 8 }}><div style={{ fontWeight: 800, fontSize: 17 }}>Reviews</div><span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>See all 412</span></Row>
        <Card pad={14}><Row gap={10}><Avatar i="MB" s={36} tone="teal" /><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14 }}>Manoj Bisht</div><div style={{ fontSize: 12, color: JP.muted }}>Rudrabhishek · 2 weeks ago</div></div><Tag tone="green">5.0★</Tag></Row>
          <div style={{ fontSize: 13.5, color: JP.ink2, marginTop: 8, lineHeight: 1.45 }}>Very calm and precise. Explained the meaning of each mantra to our children.</div></Card>
      </div>
      <BottomBar><IconBtn n="chat" bg={JP.teal50} c={JP.teal} /><Btn full>Book Pandit Ji</Btn></BottomBar>
    </Screen>
  );
}

function PanchangScreen() {
  return (
    <Screen h={1180} bg={JP.surface}>
      <div style={{ background: `linear-gradient(170deg, ${JP.kumkum} 0%, #5E1220 100%)`, color: '#fff', paddingBottom: 26, position: 'relative', overflow: 'hidden' }}>
        <svg width="380" height="380" viewBox="0 0 100 100" style={{ position: 'absolute', right: -150, top: -60, opacity: .14 }}>
          <circle cx="50" cy="50" r="20" fill="none" stroke="#FFD08A" strokeWidth=".5" />
          {Array.from({ length: 24 }).map((_, i) => <line key={i} x1="50" y1="22" x2="50" y2="8" stroke="#FFD08A" strokeWidth=".5" transform={`rotate(${i * 15} 50 50)`} />)}
        </svg>
        <Status light />
        <Row style={{ padding: '4px 16px 0', justifyContent: 'space-between', position: 'relative' }}>
          <div><div style={{ fontSize: 22, fontWeight: 900 }}>Panchang <Hi s={16} c="#FFD08A">पंचांग</Hi></div><Row gap={4} style={{ fontSize: 13, opacity: .8 }}><Ic n="pin" s={13} c="#fff" />Dehradun</Row></div>
          <Row gap={6} style={{ background: 'rgba(255,255,255,.14)', borderRadius: 20, padding: '8px 12px', fontSize: 13, fontWeight: 700 }}><Ic n="clock" s={15} c="#fff" />Find muhurat</Row>
        </Row>
        <Row style={{ padding: '18px 16px 0', justifyContent: 'space-between', position: 'relative' }}>
          <IconBtn n="back" light />
          <div style={{ textAlign: 'center' }}><div style={{ fontWeight: 800, fontSize: 16 }}>Thursday, 8 October 2026</div><div style={{ fontSize: 12.5, opacity: .75 }}>Vikram Samvat 2083 · Shaka 1948</div></div>
          <IconBtn n="chevR" light />
        </Row>
        <div style={{ textAlign: 'center', marginTop: 20, position: 'relative' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.5, color: '#FFD08A' }}>TITHI</div>
          <div style={{ fontSize: 34, fontWeight: 900, letterSpacing: -1, marginTop: 4 }}>Krishna Dwadashi</div>
          <Hi s={18} c="#FFE3BC">कृष्ण पक्ष द्वादशी · आश्विन</Hi>
          <div style={{ fontSize: 13, opacity: .75, marginTop: 6 }}>till 11:42 PM, then Trayodashi</div>
        </div>
      </div>
      <div style={{ margin: '-14px 16px 0', position: 'relative' }}>
        <Card pad={14}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', textAlign: 'center' }}>
            {[['sun', '06:14', 'Sunrise'], ['sun', '17:58', 'Sunset'], ['moon', '03:31', 'Moonrise'], ['moon', '16:40', 'Moonset']].map(([n, t, l], i) => (
              <div key={l} style={{ borderLeft: i ? `1px solid ${JP.line2}` : 'none' }}><div style={{ display: 'grid', placeItems: 'center' }}><Ic n={n} s={20} c={i < 2 ? JP.saffronDeep : JP.teal} /></div><div style={{ fontWeight: 800, fontSize: 15, marginTop: 4 }}>{t}</div><div style={{ fontSize: 11, color: JP.muted }}>{l}</div></div>
            ))}
          </div>
        </Card>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, padding: '12px 16px 0' }}>
        {[['VAARA', 'Guruvar', 'Thursday'], ['NAKSHATRA', 'Magha', 'till 04:18 PM'], ['YOGA', 'Shubha', 'till 08:02 PM'], ['KARANA', 'Kaulava', 'till 11:42 AM']].map(([a, b, c]) => (
          <Card key={a} pad={12}><div style={{ fontSize: 10.5, fontWeight: 800, color: JP.muted, letterSpacing: 1 }}>{a}</div><div style={{ fontWeight: 800, fontSize: 16, marginTop: 2 }}>{b}</div><div style={{ fontSize: 12, color: JP.muted }}>{c}</div></Card>
        ))}
      </div>
      <div style={{ padding: '22px 16px 0' }}>
        <div style={{ fontWeight: 800, fontSize: 17, marginBottom: 10 }}>Shubh samay <Hi s={14}>शुभ समय</Hi></div>
        <Card pad={0}>{[['Brahma muhurat', '04:37 – 05:26'], ['Abhijit muhurat', '11:42 – 12:29'], ['Amrit kaal', '14:05 – 15:40']].map(([a, b], i) => (
          <Row key={a} gap={10} style={{ padding: '12px 14px', borderTop: i ? `1px solid ${JP.line2}` : 'none' }}><span style={{ width: 8, height: 8, borderRadius: 4, background: JP.green }} /><span style={{ flex: 1, fontSize: 14.5 }}>{a}</span><b>{b}</b></Row>
        ))}</Card>
        <div style={{ fontWeight: 800, fontSize: 17, margin: '20px 0 10px' }}>Avoid <Hi s={14}>अशुभ समय</Hi></div>
        <Card pad={0}>{[['Rahu kaal', '13:30 – 15:00'], ['Yamaganda', '06:14 – 07:43'], ['Gulika kaal', '09:11 – 10:40']].map(([a, b], i) => (
          <Row key={a} gap={10} style={{ padding: '12px 14px', borderTop: i ? `1px solid ${JP.line2}` : 'none' }}><span style={{ width: 8, height: 8, borderRadius: 4, background: JP.kumkum }} /><span style={{ flex: 1, fontSize: 14.5 }}>{a}</span><b style={{ color: JP.kumkum }}>{b}</b></Row>
        ))}</Card>
        <Row gap={12} style={{ marginTop: 14, borderRadius: 16, background: JP.saffron50, padding: 14 }}>
          <Ic n="cal" s={22} c={JP.saffronDeep} /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 14.5 }}>Sharad Navratri in 3 days</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>Ghatasthapana on Sun, 11 Oct</div></div><Ic n="chevR" s={16} c={JP.saffronDeep} w={2.4} />
        </Row>
      </div>
      <TabBar active="panchang" />
    </Screen>
  );
}

function FestivalsScreen() {
  const fs = [['SUN', '11', 'Sharad Navratri begins', 'शारदीय नवरात्रि', 'In 3 days', true, JP.saffron], ['MON', '19', 'Durga Ashtami', 'दुर्गा अष्टमी', '', false, JP.kumkum], ['TUE', '20', 'Vijayadashami', 'विजयादशमी', '', false, JP.saffron], ['THU', '22', 'Papankusha Ekadashi', 'पापांकुशा एकादशी', 'Vrat', false, JP.teal], ['THU', '29', 'Karwa Chauth', 'करवा चौथ', 'Vrat', false, JP.kumkum]];
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff', paddingBottom: 12 }}>
        <TopBar title="Festivals & vrat" sub="त्योहार और व्रत" />
        <div style={{ margin: '0 16px', display: 'flex', background: JP.surface, borderRadius: 12, padding: 4 }}>
          <div style={{ flex: 1, textAlign: 'center', padding: 8, background: '#fff', borderRadius: 9, fontWeight: 800, fontSize: 14, boxShadow: '0 1px 3px rgba(0,0,0,.08)' }}>List</div>
          <div style={{ flex: 1, textAlign: 'center', padding: 8, fontWeight: 600, fontSize: 14, color: JP.muted }}>Month view</div>
        </div>
        <Row gap={8} style={{ padding: '12px 16px 0', overflow: 'hidden' }}><Chip on>All</Chip><Chip>Major</Chip><Chip>Ekadashi</Chip><Chip>Purnima</Chip><Chip>Vrat</Chip></Row>
      </div>
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: 1, marginBottom: 10 }}>OCTOBER 2026</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {fs.map(([d, n, t, h, s, on, c]) => (
            <Row key={t} gap={12} style={{ background: '#fff', borderRadius: 16, padding: 12, border: on ? `2px solid ${JP.saffron}` : `1px solid ${JP.line}`, boxShadow: on ? '0 6px 18px rgba(246,145,47,.15)' : 'none' }}>
              <div style={{ width: 52, height: 56, borderRadius: 14, background: on ? c : JP.surface, color: on ? '#fff' : c, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontSize: 10.5, fontWeight: 800 }}>{d}</span><span style={{ fontSize: 22, fontWeight: 900, lineHeight: 1 }}>{n}</span>
              </div>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>{t}</div><Hi s={12.5}>{h}</Hi>{s && <div style={{ fontSize: 12, fontWeight: 700, color: on ? JP.saffronDeep : JP.teal, marginTop: 2 }}>{s}</div>}</div>
              <div style={{ width: 40, height: 40, borderRadius: 20, border: `1.5px solid ${on ? JP.saffron : JP.line}`, background: on ? JP.saffron50 : '#fff', display: 'grid', placeItems: 'center' }}><Ic n="bell" s={18} c={on ? JP.saffronDeep : JP.ink2} /></div>
            </Row>
          ))}
        </div>
      </div>
    </Screen>
  );
}

function FestivalDetailScreen() {
  return (
    <Screen h={1080} bg="#fff">
      <div style={{ height: 300, position: 'relative' }}>
        <Ph h={300} r={0} tone="dusk" label="Festival banner · Maa Durga artwork" icon="lotus" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%, rgba(94,18,32,.85))' }} />
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}><Status light /></div>
        <div style={{ position: 'absolute', top: 56, left: 16 }}><IconBtn n="back" bg="rgba(255,255,255,.95)" /></div>
        <div style={{ position: 'absolute', left: 16, bottom: 18, color: '#fff' }}>
          <Tag tone="white" style={{ background: JP.saffron, color: '#fff' }}>IN 3 DAYS</Tag>
          <div style={{ fontSize: 30, fontWeight: 900, letterSpacing: -.8, marginTop: 8 }}>Sharad Navratri</div>
          <Hi s={17} c="#FFE3BC">शारदीय नवरात्रि · 11 – 19 Oct</Hi>
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <Row gap={12} style={{ background: JP.teal50, borderRadius: 16, padding: 14 }}>
          <div style={{ width: 42, height: 42, borderRadius: 21, background: '#fff', display: 'grid', placeItems: 'center' }}><Ic n="kalash" s={22} c={JP.teal} /></div>
          <div><div style={{ fontSize: 12, color: JP.tealDeep, fontWeight: 700 }}>Ghatasthapana muhurat</div><div style={{ fontWeight: 900, fontSize: 18 }}>06:15 – 07:50 AM, 11 Oct</div><div style={{ fontSize: 12, color: JP.ink2 }}>Abhijit: 11:44 AM – 12:30 PM</div></div>
        </Row>
        <div style={{ fontWeight: 800, fontSize: 17, margin: '22px 0 10px' }}>Nine forms of Devi</div>
        <Row gap={8} style={{ overflow: 'hidden' }}>
          {[['Day 1', 'Shailputri', 'शैलपुत्री', true], ['Day 2', 'Brahmacharini', 'ब्रह्मचारिणी'], ['Day 3', 'Chandraghanta', 'चंद्रघंटा'], ['Day 4', 'Kushmanda', 'कूष्मांडा']].map(([d, n, h, on]) => (
            <div key={d} style={{ width: 96, flex: 'none', borderRadius: 14, border: `${on ? 2 : 1}px solid ${on ? JP.saffron : JP.line}`, background: on ? JP.saffron50 : '#fff', padding: 10 }}>
              <div style={{ fontSize: 11, color: JP.muted, fontWeight: 700 }}>{d}</div><div style={{ fontWeight: 800, fontSize: 13, marginTop: 2 }}>{n}</div><Hi s={11.5}>{h}</Hi>
            </div>
          ))}
        </Row>
        <div style={{ fontWeight: 800, fontSize: 17, margin: '22px 0 10px' }}>Recommended for Navratri</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[['Durga Saptashati Path', '9 days · from ₹11,000', 'kumkum', 'book'], ['Kanya Pujan & Havan', 'Ashtami/Navami · from ₹3,100', 'saffron', 'flame']].map(([t, s, tone, ic]) => (
            <Card key={t} pad={12}><Row gap={12}><Ph w={56} h={56} r={14} tone={tone} icon={ic} /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div></div><Add label="BOOK" sm /></Row></Card>
          ))}
          <Card pad={12} style={{ background: JP.cream, borderColor: JP.saffron100 }}><Row gap={12}><Ph w={56} h={56} r={14} tone="gold" icon="bag" /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>Navratri samagri kit</div><div style={{ fontSize: 12.5, color: JP.muted }}>Kalash, jau, chunri & 24 items</div><Rupee v="1,499" size={15} /></div><Add /></Row></Card>
        </div>
      </div>
      <BottomBar><Btn kind="outline" icon="bell">Remind me</Btn><Btn full>Book Navratri puja</Btn></BottomBar>
    </Screen>
  );
}

function AnushthanScreen() {
  return (
    <Screen h={1060} bg="#fff">
      <div style={{ background: `linear-gradient(180deg, #FFE7C2, ${JP.cream})`, paddingBottom: 24 }}>
        <Status />
        <div style={{ padding: '0 16px' }}><IconBtn n="back" /></div>
        <div style={{ display: 'grid', placeItems: 'center', marginTop: 4 }}>
          <Ph w={150} h={150} r={75} tone="kumkum" label="Deity" icon="mala" style={{ boxShadow: `0 0 0 8px rgba(255,255,255,.6), 0 0 0 18px rgba(255,255,255,.3)` }} />
        </div>
        <div style={{ textAlign: 'center', marginTop: 18 }}><Hi s={16} c="#9A5A16">ॐ त्र्यम्बकं यजामहे</Hi></div>
      </div>
      <div style={{ padding: '16px 16px 0' }}>
        <Tag tone="green">Health & longevity</Tag>
        <div style={{ fontSize: 26, fontWeight: 900, letterSpacing: -.6, marginTop: 8 }}>Mahamrityunjaya Jaap</div>
        <Hi s={15}>महामृत्युंजय जाप अनुष्ठान</Hi>
        <div style={{ fontSize: 14, color: JP.ink2, lineHeight: 1.55, marginTop: 8 }}>1.25 lakh recitations by a team of pandits over seven days, concluding with a dashansh havan.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, marginTop: 14 }}>
          {[['1.25L', 'Jaap'], ['7', 'Days'], ['11', 'Pandits'], ['12,500', 'Havan']].map(([a, b]) => (
            <div key={b} style={{ background: JP.surface, borderRadius: 12, padding: '10px 4px', textAlign: 'center' }}><div style={{ fontWeight: 900, fontSize: 16 }}>{a}</div><div style={{ fontSize: 11, color: JP.muted, fontWeight: 700 }}>{b.toUpperCase()}</div></div>
          ))}
        </div>
        <div style={{ fontWeight: 800, fontSize: 17, margin: '22px 0 10px' }}>How should it be performed?</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[['In your name, with live video', 'At our Haridwar yagyashala · daily live link', '51,000', true, 'live'], ['At your home', 'Pandits stay on-site · samagri included', '71,000', false, 'home'], ['At a tirth with family', 'Ujjain or Trimbakeshwar · travel extra', '61,000', false, 'temple']].map(([t, s, p, on, ic]) => (
            <Row key={t} gap={12} style={{ borderRadius: 16, border: `${on ? 2 : 1.5}px solid ${on ? JP.teal : JP.line}`, background: on ? JP.teal50 : '#fff', padding: 14 }}>
              <Radio on={on} /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 14.5 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>{s}</div></div><b style={{ fontSize: 15 }}>₹{p}</b>
            </Row>
          ))}
        </div>
        <div style={{ fontWeight: 800, fontSize: 17, margin: '22px 0 10px' }}>You will receive</div>
        {[['video', 'Daily live stream and full recording'], ['gift', 'Abhimantrit prasad & raksha sutra by courier'], ['doc', 'Sankalp patra with your family\'s names']].map(([n, t]) => (
          <Row key={t} gap={12} style={{ padding: '6px 0' }}><div style={{ width: 36, height: 36, borderRadius: 11, background: JP.saffron50, display: 'grid', placeItems: 'center' }}><Ic n={n} s={18} c={JP.saffronDeep} /></div><span style={{ fontSize: 14 }}>{t}</span></Row>
        ))}
      </div>
      <PayBar label="LIVE VIDEO" amount="51,000" cta="Book anushthan" />
    </Screen>
  );
}

function TemplesScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff', paddingBottom: 14 }}>
        <TopBar title="Temples & Yatra" sub="मंदिर और यात्रा" />
        <div style={{ margin: '0 16px', height: 46, borderRadius: 14, background: JP.surface, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px', color: JP.muted, fontSize: 15 }}><Ic n="search" s={19} />Search temple, jyotirlinga, dham…</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, padding: '12px 16px 0' }}>
          {[['diya', 'Chadhava & puja', true], ['live', 'Live darshan'], ['pin', 'Yatra packages']].map(([n, l, on]) => (
            <div key={l} style={{ borderRadius: 14, border: `${on ? 2 : 1}px solid ${on ? JP.teal : JP.line}`, background: on ? JP.teal50 : '#fff', padding: '10px 6px', textAlign: 'center' }}>
              <div style={{ display: 'grid', placeItems: 'center' }}><Ic n={n} s={22} c={on ? JP.teal : JP.ink2} /></div><div style={{ fontSize: 12.5, fontWeight: 700, marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ borderRadius: 20, overflow: 'hidden', background: '#fff', border: `1px solid ${JP.line}` }}>
          <Ph h={150} r={0} tone="teal" label="Kedarnath temple photo" icon="temple"><span style={{ position: 'absolute', top: 10, left: 10 }}><Tag tone="white">Char Dham 2027 · bookings open</Tag></span></Ph>
          <Row style={{ padding: 14, justifyContent: 'space-between' }}><div><div style={{ fontWeight: 800, fontSize: 16 }}>Char Dham Yatra from Dehradun</div><div style={{ fontSize: 12.5, color: JP.muted }}>10 days · Yamunotri, Gangotri, Kedarnath, Badrinath</div></div></Row>
        </div>
        <Row style={{ justifyContent: 'space-between', margin: '20px 0 10px' }}><div style={{ fontWeight: 800, fontSize: 17 }}>Temples</div><span style={{ fontSize: 12.5, color: JP.muted }}>Puja in your name</span></Row>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[['Kashi Vishwanath', 'Varanasi · Jyotirlinga', '501', 'saffron', 'Rudrabhishek'], ['Mahakaleshwar', 'Ujjain · Jyotirlinga', '751', 'rose', 'Bhasma aarti', true], ['Trimbakeshwar', 'Nashik · Kaal Sarp puja', '2,100', 'gold', 'Narayan Nagbali']].map(([t, s, p, tone, tag, live]) => (
            <Card key={t} pad={12}><Row gap={12}><Ph w={64} h={64} r={14} tone={tone} icon="temple" /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div><Row gap={5} style={{ marginTop: 5 }}><Tag tone="gray">{tag}</Tag>{live && <Tag tone="kumkum">● Live</Tag>}</Row></div><div style={{ textAlign: 'right' }}><div style={{ fontSize: 11, color: JP.muted }}>from</div><b>₹{p}</b></div></Row></Card>
          ))}
        </div>
      </div>
    </Screen>
  );
}

function ConsultScreen() {
  return (
    <Screen bg={JP.surface}>
      <Status bg="#fff" />
      <div style={{ background: '#fff' }}><TopBar title="Free consultation" sub="10 minutes with a verified Pandit Ji" /></div>
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Card pad={14}><Row gap={12}><Avatar i="RS" s={46} /><div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 15 }}>Pt. Rameshwar Shastri</div><Row gap={5} style={{ fontSize: 12.5, color: JP.green, fontWeight: 700 }}><span style={{ width: 7, height: 7, borderRadius: 4, background: JP.green }} />Available now</Row></div><span style={{ color: JP.teal, fontWeight: 700, fontSize: 13.5 }}>Change</span></Row></Card>
        <div><div style={{ fontWeight: 800, fontSize: 16, marginBottom: 10 }}>What would you like to ask?</div>
          <Row gap={8} style={{ flexWrap: 'wrap' }}><Chip on tone={JP.teal}>Which puja to do</Chip><Chip>Muhurat</Chip><Chip>Kundli & dosh</Chip><Chip>Vastu</Chip><Chip>Samagri</Chip></Row></div>
        <div><div style={{ fontWeight: 800, fontSize: 16, marginBottom: 10 }}>How should we connect?</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {[['phone', 'Voice call', true], ['video', 'Video call'], ['chat', 'Chat']].map(([n, l, on]) => (
              <div key={l} style={{ borderRadius: 16, border: `${on ? 2 : 1.5}px solid ${on ? JP.teal : JP.line}`, background: on ? JP.teal50 : '#fff', padding: '14px 6px', textAlign: 'center' }}>
                <div style={{ display: 'grid', placeItems: 'center' }}><Ic n={n} s={22} c={on ? JP.teal : JP.ink2} /></div><div style={{ fontSize: 13, fontWeight: 700, marginTop: 6 }}>{l}</div></div>
            ))}
          </div></div>
        <div><div style={{ fontWeight: 800, fontSize: 16, marginBottom: 10 }}>When?</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><div style={{ fontWeight: 800, fontSize: 14.5 }}>Call me now</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>Pandit Ji calls within ~5 min</div></div></Row></Card>
            <Card pad={14}><Row gap={12}><Radio /><div><div style={{ fontWeight: 800, fontSize: 14.5 }}>Schedule for later</div><div style={{ fontSize: 12.5, color: JP.ink2 }}>Pick a 10-min slot today or tomorrow</div></div></Row></Card>
          </div></div>
        <Field label="Your number" value="98765 43210" prefix="+91" />
      </div>
      <BottomBar><Btn full icon="phone">Request free call</Btn></BottomBar>
    </Screen>
  );
}

Object.assign(window, { PanditListScreen, PanditProfileScreen, PanchangScreen, FestivalsScreen, FestivalDetailScreen, AnushthanScreen, TemplesScreen, ConsultScreen });