// Onboarding, auth, home, search
function SplashScreen() {
  return (
    <Screen bg={JP.cream}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(80% 50% at 50% 42%, ${JP.saffron50} 0%, ${JP.cream} 70%)` }} />
      {/* mandala rings */}
      <div style={{ position: 'absolute', left: '50%', top: 330, transform: 'translate(-50%,-50%)' }}>
        {[300, 230, 160].map((d, i) => (
          <div key={d} style={{ position: 'absolute', width: d, height: d, left: -d / 2, top: -d / 2, borderRadius: '50%',
            border: `1px ${i === 0 ? 'dashed' : 'solid'} ${i === 2 ? JP.saffron100 : '#EED9B4'}`, background: i === 2 ? '#FFF6E6' : 'transparent' }} />
        ))}
        <div style={{ position: 'absolute', left: -32, top: -36 }}><Ic n="diya" s={64} c={JP.saffron} w={1.6} /></div>
      </div>
      <div style={{ position: 'absolute', top: 520, left: 0, right: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Logo h={40} />
        <Hi s={20} c="#9A5A16" style={{ marginTop: 14 }}>श्रद्धा से · विधि से</Hi>
        <div style={{ fontSize: 15, color: JP.ink2, textAlign: 'center', marginTop: 14, lineHeight: 1.5, width: 280 }}>
          Verified pandits, authentic Vedic rituals and puja samagri — at your doorstep.
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 50, left: 0, right: 0, textAlign: 'center', fontSize: 12, color: JP.muted, letterSpacing: 1.2, fontWeight: 700 }}>
        TRUSTED BY 50,000+ FAMILIES
      </div>
    </Screen>
  );
}

function OnboardScreen() {
  return (
    <Screen bg={JP.cream}>
      <Status />
      <Row style={{ justifyContent: 'space-between', padding: '4px 16px 14px' }}>
        <Logo h={20} />
        <LangToggle />
      </Row>
      <div style={{ margin: '0 16px', height: 400, borderRadius: 28, overflow: 'hidden', position: 'relative' }}>
        <img src="assets/family.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(23,32,31,.55))' }} />
        <div style={{ position: 'absolute', left: 14, bottom: 14, right: 14, display: 'flex', gap: 8 }}>
          <div style={{ background: 'rgba(255,255,255,.95)', borderRadius: 14, padding: '9px 12px', display: 'flex', gap: 9, alignItems: 'center' }}>
            <div style={{ width: 30, height: 30, borderRadius: 10, background: JP.teal50, display: 'grid', placeItems: 'center' }}><Ic n="shield" s={17} c={JP.teal} /></div>
            <div><div style={{ fontWeight: 800, fontSize: 13 }}>Verified pandits only</div><div style={{ fontSize: 11.5, color: JP.muted }}>Background & vidhi checked</div></div>
          </div>
        </div>
      </div>
      <div style={{ padding: '26px 24px 0' }}>
        <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: -.8, lineHeight: 1.12 }}>Every sanskaar,<br />performed <span style={{ color: JP.saffronDeep }}>the right way</span></div>
        <div style={{ fontSize: 15, color: JP.ink2, marginTop: 12, lineHeight: 1.5 }}>Book a verified pandit for puja, havan and anushthan — with the right muhurat and samagri brought to your door.</div>
        <Row gap={6} style={{ marginTop: 20 }}>
          <span style={{ width: 24, height: 6, borderRadius: 3, background: JP.teal }} />
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#D6DCDB' }} />
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#D6DCDB' }} />
        </Row>
      </div>
      <BottomBar style={{ background: 'transparent', borderTop: 'none' }}>
        <Btn kind="ghost" style={{ width: 110, background: '#F1EEDF' }}>Skip</Btn>
        <Btn full iconR="chevR">Next</Btn>
      </BottomBar>
    </Screen>
  );
}
function LangToggle() {
  return (
    <div style={{ display: 'flex', background: '#fff', border: `1px solid ${JP.line}`, borderRadius: 20, padding: 3 }}>
      <span style={{ background: JP.teal, color: '#fff', borderRadius: 16, padding: '5px 12px', fontWeight: 800, fontSize: 13 }}>EN</span>
      <span style={{ padding: '5px 12px', fontWeight: 700, fontSize: 14, fontFamily: JP.hi }}>हि</span>
    </div>
  );
}

// Blinkit-style tile wall login
function LoginScreen() {
  const tiles = [
    ['diya', 'saffron'], ['kalash', 'gold'], ['lotus', 'rose'], ['flame', 'saffron'],
    ['om', 'teal'], ['mala', 'kumkum'], ['temple', 'gold'], ['book', 'saffron'],
    ['sun', 'gold'], ['gift', 'rose'], ['diya', 'teal'], ['kalash', 'saffron'],
  ];
  return (
    <Screen bg="#fff">
      <Status />
      <div style={{ position: 'absolute', top: 54, left: 0, right: 0, height: 360, overflow: 'hidden' }}>
        {[0, 1, 2].map(r => (
          <div key={r} style={{ display: 'flex', gap: 12, marginLeft: r === 1 ? -54 : -10, marginBottom: 12 }}>
            {tiles.slice(r * 4, r * 4 + 4).concat(tiles.slice(0, 1)).map(([n, t], i) => (
              <Ph key={i} w={104} h={104} r={24} tone={t} icon={n} />
            ))}
          </div>
        ))}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,0) 30%, #fff 92%)' }} />
      </div>
      <div style={{ position: 'absolute', top: 60, left: 16 }}><IconBtn n="back" /></div>
      <div style={{ position: 'absolute', top: 360, left: 0, right: 0, padding: '0 20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 20, background: JP.cream, border: `1px solid ${JP.saffron100}`, display: 'grid', placeItems: 'center', boxShadow: '0 8px 20px rgba(246,145,47,.22)' }}>
          <Ic n="diya" s={38} c={JP.saffron} w={1.7} />
        </div>
        <div style={{ fontSize: 27, fontWeight: 800, letterSpacing: -.7, marginTop: 16, textAlign: 'center' }}>India's sacred ritual app</div>
        <div style={{ fontSize: 15, color: JP.ink2, marginTop: 4 }}>Log in or sign up</div>
        <Row gap={10} style={{ width: '100%', marginTop: 22 }}>
          <div style={{ height: 54, width: 70, borderRadius: 14, border: `1.5px solid ${JP.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <span style={{ width: 24, height: 16, borderRadius: 3, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <span style={{ flex: 1, background: '#F39233' }} /><span style={{ flex: 1, background: '#fff', display: 'grid', placeItems: 'center' }}><span style={{ width: 4, height: 4, borderRadius: 2, border: '1px solid #1A3A8F' }} /></span><span style={{ flex: 1, background: '#138808' }} />
            </span>
            <Ic n="chevD" s={14} w={2.4} />
          </div>
          <div style={{ flex: 1, height: 54, borderRadius: 14, border: `1.5px solid ${JP.teal}`, display: 'flex', alignItems: 'center', gap: 12, padding: '0 16px', boxShadow: `0 0 0 4px ${JP.teal50}` }}>
            <span style={{ fontWeight: 700, fontSize: 16 }}>+91</span>
            <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: .5 }}>98765 4321<span style={{ borderLeft: `2px solid ${JP.teal}`, marginLeft: 1 }} /></span>
          </div>
        </Row>
        <Btn full style={{ width: '100%', marginTop: 12, background: '#B9C7C8' }}>Continue</Btn>
        <Row gap={12} style={{ width: '100%', margin: '18px 0' }}><div style={{ flex: 1, height: 1, background: JP.line }} /><span style={{ flex: 'none', fontSize: 13, color: JP.muted, fontWeight: 600 }}>OR</span><div style={{ flex: 1, height: 1, background: JP.line }} /></Row>
        <Row gap={10} style={{ width: '100%' }}>
          <Btn kind="outline" full style={{ color: JP.ink, borderColor: JP.line }}>
            <span style={{ fontWeight: 900, fontSize: 18, background: 'conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0)', WebkitBackgroundClip: 'text', color: 'transparent' }}>G</span>Google</Btn>
          <Btn kind="outline" full style={{ color: JP.ink, borderColor: JP.line }}><Ic n="chat" s={18} c="#1E8A4C" />WhatsApp</Btn>
        </Row>
      </div>
      <div style={{ position: 'absolute', bottom: 24, left: 0, right: 0, textAlign: 'center', fontSize: 11.5, color: JP.muted, padding: '12px 30px 0', borderTop: `1px solid ${JP.line2}` }}>
        By continuing, you agree to our <u>Terms of Service</u> & <u>Privacy policy</u>
      </div>
    </Screen>
  );
}

function OtpScreen() {
  return (
    <Screen bg="#fff">
      <Status />
      <TopBar title="OTP verification" />
      <div style={{ padding: '18px 24px' }}>
        <div style={{ fontSize: 15, color: JP.ink2, lineHeight: 1.5 }}>We've sent a 4-digit code to<br /><b style={{ color: JP.ink }}>+91 98765 43210</b> <span style={{ color: JP.teal, fontWeight: 700, marginLeft: 6 }}>Change</span></div>
        <Row gap={12} style={{ marginTop: 28, justifyContent: 'center' }}>
          {['4', '8', '2', ''].map((d, i) => (
            <div key={i} style={{ width: 64, height: 68, borderRadius: 16, border: `1.5px solid ${i === 3 ? JP.teal : JP.line}`, boxShadow: i === 3 ? `0 0 0 4px ${JP.teal50}` : 'none',
              display: 'grid', placeItems: 'center', fontSize: 28, fontWeight: 800, background: d ? '#fff' : '#fff' }}>{d || <span style={{ width: 2, height: 28, background: JP.teal }} />}</div>
          ))}
        </Row>
        <div style={{ textAlign: 'center', marginTop: 22, fontSize: 14, color: JP.muted }}>Didn't get it? Resend in <b style={{ color: JP.ink }}>00:24</b></div>
        <div style={{ marginTop: 26, background: JP.green50, borderRadius: 14, padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'center' }}>
          <Ic n="chat" s={20} c={JP.green} />
          <div style={{ fontSize: 13.5, color: JP.ink2, flex: 1 }}>Get OTP on <b>WhatsApp</b> instead</div>
          <Ic n="chevR" s={16} c={JP.green} w={2.4} />
        </div>
      </div>
      {/* keypad */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: '#D2D5DB', padding: '8px 6px 34px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 7 }}>
        {['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '⌫'].map((k, i) => (
          <div key={i} style={{ height: 48, borderRadius: 8, background: k && k !== '⌫' ? '#fff' : 'transparent', display: 'grid', placeItems: 'center', fontSize: 24, boxShadow: k && k !== '⌫' ? '0 1px 0 #898A8D' : 'none' }}>{k}</div>
        ))}
      </div>
    </Screen>
  );
}

function ProfileSetupScreen() {
  return (
    <Screen bg="#fff">
      <Status />
      <TopBar title="Tell us about you" sub="Your pandit uses these details during sankalp" right={<span style={{ color: JP.teal, fontWeight: 700, fontSize: 14 }}>Skip</span>} />
      <div style={{ padding: '8px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Field label="Full name" value="Ashish Kanyal" />
        <Row gap={10}>
          <Field label="Gotra (optional)" value="Kashyap" style={{ flex: 1 }} />
          <Field label="Nakshatra" ph="Select" right={<Ic n="chevD" s={16} c={JP.muted} />} style={{ flex: 1 }} />
        </Row>
        <Field label="City" value="Dehradun, Uttarakhand" right={<Ic n="pin" s={18} c={JP.teal} />} />
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: JP.ink2, marginBottom: 8 }}>Your tradition</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[['Pahadi', 'पहाड़ी', true], ['North Indian', 'उत्तर भारतीय'], ['Bengali', 'বাঙালি'], ['South Indian', 'दक्षिण भारतीय']].map(([e, h, on]) => (
              <div key={e} style={{ borderRadius: 14, border: `1.5px solid ${on ? JP.teal : JP.line}`, background: on ? JP.teal50 : '#fff', padding: '10px 12px', position: 'relative' }}>
                <div style={{ fontWeight: 700, fontSize: 14.5 }}>{e}</div><Hi s={12.5}>{h}</Hi>
                {on && <span style={{ position: 'absolute', top: 10, right: 10 }}><Check on /></span>}
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: JP.ink2, marginBottom: 8 }}>Pandit should speak</div>
          <Row gap={8} style={{ flexWrap: 'wrap' }}>
            <Chip on tone={JP.teal}>Hindi</Chip><Chip on tone={JP.teal}>Garhwali</Chip><Chip>Sanskrit</Chip><Chip>English</Chip><Chip>Kumaoni</Chip>
          </Row>
        </div>
      </div>
      <BottomBar style={{ borderTop: 'none' }}><Btn full>Continue</Btn></BottomBar>
    </Screen>
  );
}

// ---------- HOME ----------
function HomeScreen() {
  const cats = [['Puja', 'diya', 'saffron'], ['Anushthan', 'flame', 'saffron'], ['Pandit Ji', 'user', 'saffron'], ['Samagri', 'bag', 'saffron'],
    ['Muhurat', 'clock', 'teal'], ['Temples', 'temple', 'teal'], ['Kundli', 'star', 'teal'], ['Festivals', 'cal', 'teal']];
  return (
    <Screen h={2380} bg={JP.surface}>
      {/* Header — Blinkit-style warm block */}
      <div style={{ background: `linear-gradient(180deg, #FFE7C2 0%, ${JP.cream} 100%)`, paddingBottom: 18, position: 'relative', overflow: 'hidden' }}>
        <svg width="260" height="260" viewBox="0 0 100 100" style={{ position: 'absolute', right: -80, top: -40, opacity: .18 }}>
          {Array.from({ length: 12 }).map((_, i) => <ellipse key={i} cx="50" cy="26" rx="8" ry="24" fill="none" stroke={JP.saffronDeep} strokeWidth=".6" transform={`rotate(${i * 30} 50 50)`} />)}
          <circle cx="50" cy="50" r="10" fill="none" stroke={JP.saffronDeep} strokeWidth=".6" />
        </svg>
        <Status />
        <Row style={{ padding: '2px 16px 0', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
          <div>
            <div style={{ fontSize: 11.5, fontWeight: 800, color: '#9A5A16', letterSpacing: .8 }}>SAMAGRI IN</div>
            <div style={{ fontSize: 26, fontWeight: 900, letterSpacing: -.8, lineHeight: 1.05 }}>14 minutes</div>
            <Row gap={4} style={{ marginTop: 3, fontSize: 13.5, fontWeight: 700 }}>
              <span>Home</span><span style={{ fontWeight: 500, color: JP.ink2 }}>· East Canal Road, Dehradun</span><Ic n="chevD" s={14} w={2.4} />
            </Row>
          </div>
          <Row gap={8}><IconBtn n="bell" badge="3" /><Avatar i="AK" s={40} tone="teal" /></Row>
        </Row>
        {/* search */}
        <div style={{ margin: '14px 16px 0', height: 50, borderRadius: 14, background: '#fff', border: `1px solid ${JP.line}`, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px', boxShadow: '0 4px 14px rgba(154,90,22,.08)' }}>
          <Ic n="search" s={20} c={JP.ink2} />
          <span style={{ flex: 1, fontSize: 15, color: JP.muted }}>Search "<span style={{ color: JP.ink2 }}>Satyanarayan katha</span>"</span>
          <div style={{ width: 1, height: 22, background: JP.line }} />
          <Ic n="mic" s={20} c={JP.teal} />
        </div>
        {/* Panchang strip */}
        <Row gap={10} style={{ margin: '12px 16px 0', background: 'rgba(255,255,255,.6)', borderRadius: 14, padding: '10px 12px', border: '1px solid rgba(201,146,46,.25)' }}>
          <Ic n="sun" s={20} c={JP.saffronDeep} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 800 }}>Ashwin Krishna Dwadashi <Hi s={12.5} c="#9A5A16">· द्वादशी</Hi></div>
            <div style={{ fontSize: 12, color: JP.ink2, marginTop: 1 }}>Sunrise 06:14 · Sunset 17:58 · <span style={{ color: JP.kumkum, fontWeight: 700 }}>Rahu 13:30–15:00</span></div>
          </div>
          <Ic n="chevR" s={16} c={JP.ink2} w={2.2} />
        </Row>
      </div>

      {/* Festival hero */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ height: 196, borderRadius: 22, overflow: 'hidden', position: 'relative', background: `linear-gradient(120deg, ${JP.kumkum} 0%, #B4322A 55%, ${JP.saffronDeep} 120%)` }}>
          <div style={{ position: 'absolute', right: -20, top: -10, bottom: -10, width: 200 }}>
            <Ph h="100%" w="100%" r={0} tone="dusk" label="Maa Durga artwork" icon="lotus" style={{ opacity: .9, borderRadius: '100px 0 0 100px' }} />
          </div>
          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(90deg, ${JP.kumkum} 45%, rgba(142,27,42,0) 75%)` }} />
          <div style={{ position: 'absolute', left: 18, top: 18, right: 150, color: '#fff' }}>
            <Tag tone="white" style={{ background: JP.saffron, color: '#fff' }}>IN 3 DAYS</Tag>
            <div style={{ fontSize: 24, fontWeight: 900, letterSpacing: -.5, marginTop: 10, lineHeight: 1.1 }}>Sharad Navratri</div>
            <Hi s={15} c="#FFE3BC">शारदीय नवरात्रि</Hi>
            <div style={{ fontSize: 12.5, opacity: .85, marginTop: 6 }}>Ghatasthapana 06:15 – 07:50 AM</div>
            <div style={{ marginTop: 12, display: 'inline-flex', background: '#fff', color: JP.kumkum, fontWeight: 800, fontSize: 13.5, borderRadius: 10, padding: '8px 12px', gap: 4, alignItems: 'center' }}>Book Navratri puja<Ic n="chevR" s={14} w={2.6} /></div>
          </div>
          <Row gap={5} style={{ position: 'absolute', bottom: 12, left: 18 }}>
            <span style={{ width: 18, height: 5, borderRadius: 3, background: '#fff' }} /><span style={{ width: 5, height: 5, borderRadius: 3, background: 'rgba(255,255,255,.5)' }} /><span style={{ width: 5, height: 5, borderRadius: 3, background: 'rgba(255,255,255,.5)' }} />
          </Row>
        </div>
      </div>

      {/* Category grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '16px 8px', padding: '22px 16px 6px' }}>
        {cats.map(([l, n, t]) => (
          <div key={l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7 }}>
            <div style={{ width: 70, height: 70, borderRadius: 22, background: t === 'saffron' ? JP.saffron50 : JP.teal50, display: 'grid', placeItems: 'center', position: 'relative' }}>
              <Ic n={n} s={30} c={t === 'saffron' ? JP.saffronDeep : JP.teal} w={1.7} />
              {l === 'Samagri' && <span style={{ position: 'absolute', top: -6, right: -4, background: JP.green, color: '#fff', fontSize: 9.5, fontWeight: 800, borderRadius: 6, padding: '2px 5px' }}>15 MIN</span>}
            </div>
            <span style={{ fontSize: 13, fontWeight: 700 }}>{l}</span>
          </div>
        ))}
      </div>

      {/* Quick book */}
      <div style={{ margin: '18px 16px 0' }}>
        <Card pad={16} style={{ boxShadow: '0 6px 20px rgba(23,32,31,.05)' }}>
          <Row style={{ justifyContent: 'space-between' }}>
            <div style={{ fontWeight: 800, fontSize: 17 }}>Book a pandit in 30 seconds</div>
            <Tag tone="green" icon="bolt">Fast</Tag>
          </Row>
          <Row gap={8} style={{ marginTop: 12 }}>
            <QBField l="PUJA" v="Grih Pravesh" />
            <QBField l="DATE" v="14 Oct · Wed" icon="cal" />
          </Row>
          <Btn full style={{ marginTop: 10 }}>Find Pandit Ji</Btn>
          <Row gap={6} style={{ justifyContent: 'center', marginTop: 10, fontSize: 13, fontWeight: 700, color: JP.teal }}><Ic n="phone" s={15} />Not sure which puja? Free consultation</Row>
        </Card>
      </div>

      {/* Upcoming booking */}
      <div style={{ margin: '16px 16px 0', borderRadius: 18, background: JP.teal, color: '#fff', padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ width: 52, height: 56, borderRadius: 14, background: 'rgba(255,255,255,.15)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontSize: 11, fontWeight: 800, opacity: .8 }}>OCT</span><span style={{ fontSize: 22, fontWeight: 900, lineHeight: 1 }}>11</span>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 800, fontSize: 15.5 }}>Satyanarayan Puja</div>
          <div style={{ fontSize: 12.5, opacity: .85, marginTop: 2 }}>Pt. Rameshwar Shastri · 09:00 AM</div>
          <Row gap={5} style={{ marginTop: 6, fontSize: 12, fontWeight: 700, color: '#BFF0D0' }}><span style={{ width: 7, height: 7, borderRadius: 4, background: '#5BE08C' }} />Pandit confirmed · Samagri packed</Row>
        </div>
        <Ic n="chevR" s={18} c="#fff" w={2.2} />
      </div>

      {/* Popular pujas */}
      <div style={{ marginTop: 28 }}>
        <Sec title="Popular pujas" hi="लोकप्रिय पूजा" action="See all" />
        <Row gap={8} style={{ padding: '0 16px 12px', overflow: 'hidden' }}>
          <Chip on>Popular</Chip><Chip>New home</Chip><Chip>Sanskaar</Chip><Chip>Dosh nivaran</Chip>
        </Row>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '0 16px' }}>
          <PujaTile img="assets/family.jpg" t="Grih Pravesh" h="गृह प्रवेश" p="5,100" r="4.9" tag="Most booked" />
          <PujaTile tone="gold" icon="book" t="Satyanarayan Katha" h="सत्यनारायण कथा" p="2,100" r="4.8" />
          <PujaTile tone="rose" icon="flame" t="Rudrabhishek" h="रुद्राभिषेक" p="3,100" r="4.9" />
          <PujaTile tone="kumkum" icon="mala" t="Mahamrityunjaya Jaap" h="महामृत्युंजय जाप" p="51,000" r="5.0" tag="Anushthan" />
        </div>
      </div>

      {/* Samagri quick add */}
      <div style={{ marginTop: 28, background: '#fff', padding: '18px 0 18px', borderTop: `1px solid ${JP.line}`, borderBottom: `1px solid ${JP.line}` }}>
        <Sec title="Samagri in 15 mins" action="Shop" sub="Pandit-verified, delivered before your muhurat" />
        <Row gap={10} style={{ padding: '0 16px', overflow: 'hidden', alignItems: 'stretch' }}>
          <MiniProduct tone="saffron" t="Grih Pravesh samagri kit" q="32 items" p="1,138" s="1,450" />
          <MiniProduct tone="gold" t="A2 cow ghee (bilona)" q="250 g" p="336" />
          <MiniProduct tone="rose" t="Clay diyas, hand-painted" q="Set of 12" p="199" qty={2} />
        </Row>
      </div>

      {/* Live darshan */}
      <div style={{ marginTop: 28 }}>
        <Sec title="Live darshan" hi="लाइव दर्शन" action="All temples" />
        <Row gap={10} style={{ padding: '0 16px', overflow: 'hidden' }}>
          {[['Kedarnath', 'Rudraprayag', 'gold', '12.4k'], ['Kashi Vishwanath', 'Varanasi', 'saffron', '8.1k'], ['Mahakaleshwar', 'Ujjain', 'rose', '5.6k']].map(([t, c, tone, v]) => (
            <div key={t} style={{ width: 150, flex: 'none' }}>
              <Ph h={190} r={18} tone={tone} label={`${t} aarti`} icon="temple">
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6))' }} />
                <Row gap={4} style={{ position: 'absolute', top: 10, left: 10 }}><Tag tone="kumkum" style={{ background: '#E0262F', color: '#fff' }}>● LIVE</Tag></Row>
                <Row gap={4} style={{ position: 'absolute', top: 10, right: 10, fontSize: 11, color: '#fff', fontWeight: 700 }}><Ic n="eye" s={13} c="#fff" />{v}</Row>
                <div style={{ position: 'absolute', left: 10, bottom: 10, color: '#fff' }}>
                  <div style={{ fontWeight: 800, fontSize: 14 }}>{t}</div><div style={{ fontSize: 11.5, opacity: .85 }}>{c}</div>
                </div>
              </Ph>
            </div>
          ))}
        </Row>
      </div>

      {/* Top pandits */}
      <div style={{ marginTop: 28 }}>
        <Sec title="Top Pandit Ji near you" action="View all" />
        <Row gap={10} style={{ padding: '0 16px', overflow: 'hidden' }}>
          <PanditMini i="RS" n="Pt. Rameshwar Shastri" s="Vedacharya · 18 yrs" r="4.9" c="1,240" tone="saffron" />
          <PanditMini i="DJ" n="Pt. Devendra Joshi" s="Shastri · Pahadi vidhi" r="4.8" c="860" tone="teal" />
        </Row>
      </div>

      {/* Trust */}
      <div style={{ margin: '28px 16px 0', borderRadius: 22, background: JP.cream, border: `1px solid ${JP.saffron100}`, padding: 18 }}>
        <div style={{ fontWeight: 800, fontSize: 17 }}>Why families trust <span style={{ color: JP.saffronDeep }}>JIPANDITJI</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', marginTop: 14, textAlign: 'center' }}>
          {[['1,200+', 'Verified pandits'], ['50k+', 'Pujas done'], ['4.9★', 'App rating']].map(([a, b], i) => (
            <div key={a} style={{ borderLeft: i ? `1px solid ${JP.saffron100}` : 'none' }}>
              <div style={{ fontSize: 20, fontWeight: 900, color: '#9A5A16' }}>{a}</div><div style={{ fontSize: 11.5, color: JP.ink2, marginTop: 2 }}>{b}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, background: '#fff', borderRadius: 14, padding: 12 }}>
          <div style={{ color: JP.saffron, fontSize: 13, letterSpacing: 2 }}>★★★★★</div>
          <div style={{ fontSize: 13.5, color: JP.ink2, marginTop: 4, lineHeight: 1.45 }}>"Panditji arrived 15 minutes early with all samagri. Explained every mantra to our kids."</div>
          <div style={{ fontSize: 12, color: JP.muted, marginTop: 6, fontWeight: 600 }}>Manoj Bisht · Grih Pravesh, Rishikesh</div>
        </div>
      </div>
      <div style={{ padding: '30px 24px 0', color: '#C9C2AE' }}>
        <div style={{ fontSize: 34, fontWeight: 900, letterSpacing: -1, lineHeight: 1 }}>श्रद्धा से,<br />विधि से।</div>
        <div style={{ fontSize: 12.5, marginTop: 8, fontWeight: 600 }}>Made with devotion in Dehradun</div>
      </div>
      <TabBar active="home" cart="3 items · ₹1,673" />
    </Screen>
  );
}
function QBField({ l, v, icon }) {
  return (
    <div style={{ flex: 1, border: `1.5px solid ${JP.line}`, borderRadius: 14, padding: '8px 12px' }}>
      <div style={{ fontSize: 10.5, fontWeight: 800, color: JP.muted, letterSpacing: .8 }}>{l}</div>
      <Row style={{ justifyContent: 'space-between' }}><span style={{ fontWeight: 700, fontSize: 15 }}>{v}</span><Ic n={icon || 'chevD'} s={16} c={JP.teal} /></Row>
    </div>
  );
}
function PujaTile({ img, tone, icon, t, h, p, r, tag }) {
  return (
    <div style={{ background: '#fff', borderRadius: 18, border: `1px solid ${JP.line}`, overflow: 'hidden' }}>
      <div style={{ height: 118, position: 'relative' }}>
        {img ? <img src={img} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%' }} /> : <Ph h={118} r={0} tone={tone} icon={icon} label={`${t} artwork`} />}
        {tag && <span style={{ position: 'absolute', top: 8, left: 8 }}><Tag tone="white">{tag}</Tag></span>}
      </div>
      <div style={{ padding: '10px 12px 12px' }}>
        <div style={{ fontWeight: 800, fontSize: 14.5, lineHeight: 1.2 }}>{t}</div>
        <Hi s={12}>{h}</Hi>
        <Row style={{ justifyContent: 'space-between', marginTop: 8 }}>
          <span style={{ fontSize: 12, color: JP.muted }}>from <b style={{ color: JP.ink, fontSize: 14 }}>₹{p}</b></span>
          <Row gap={2} style={{ fontSize: 12, fontWeight: 700 }}><Ic n="star" s={12} c={JP.saffron} fill={JP.saffron} />{r}</Row>
        </Row>
      </div>
    </div>
  );
}
function MiniProduct({ tone, t, q, p, s, qty }) {
  return (
    <div style={{ width: 136, flex: 'none' }}>
      <div style={{ position: 'relative' }}>
        <Ph h={120} r={16} tone={tone} icon="bag" label="Product" />
        <div style={{ position: 'absolute', right: 6, bottom: -14 }}><Add sm qty={qty} /></div>
      </div>
      <Row gap={4} style={{ marginTop: 20, fontSize: 10.5, fontWeight: 800, color: JP.green }}><Ic n="clock" s={11} w={2.4} />15 MINS</Row>
      <div style={{ fontSize: 13.5, fontWeight: 700, lineHeight: 1.25, marginTop: 3, height: 34, overflow: 'hidden' }}>{t}</div>
      <div style={{ fontSize: 12, color: JP.muted, marginTop: 2 }}>{q}</div>
      <div style={{ marginTop: 4 }}><Rupee v={p} strike={s} size={15} /></div>
    </div>
  );
}
function PanditMini({ i, n, s, r, c, tone }) {
  return (
    <Card style={{ width: 290, flex: 'none' }} pad={14}>
      <Row gap={12}>
        <div style={{ position: 'relative' }}><Avatar i={i} tone={tone} s={54} />
          <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: 15.5 }}>{n}</div>
          <div style={{ fontSize: 12.5, color: JP.muted }}>{s}</div>
          <Row gap={4} style={{ fontSize: 12.5, marginTop: 3 }}><Ic n="star" s={13} c={JP.saffron} fill={JP.saffron} /><b>{r}</b><span style={{ color: JP.muted }}>· {c} pujas</span></Row>
        </div>
      </Row>
      <Row gap={8} style={{ marginTop: 12 }}><Btn kind="outline" sm full>Consult free</Btn><Btn sm full>Book now</Btn></Row>
    </Card>
  );
}

function SearchScreen() {
  return (
    <Screen bg="#fff">
      <Status />
      <Row gap={10} style={{ padding: '4px 16px 12px' }}>
        <Ic n="back" s={24} />
        <div style={{ flex: 1, height: 48, borderRadius: 14, border: `1.5px solid ${JP.teal}`, display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px' }}>
          <Ic n="search" s={19} c={JP.ink2} /><span style={{ flex: 1, fontSize: 16, fontWeight: 600 }}>rudra<span style={{ borderLeft: `2px solid ${JP.teal}` }} /></span><Ic n="x" s={18} c={JP.muted} />
        </div>
      </Row>
      <Row gap={8} style={{ padding: '0 16px 14px', overflow: 'hidden' }}><Chip on>All</Chip><Chip>Pujas</Chip><Chip>Pandit Ji</Chip><Chip>Samagri</Chip><Chip>Temples</Chip></Row>
      <Divider />
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: .8, marginBottom: 6 }}>PUJAS & ANUSHTHAN</div>
        {[['Rudrabhishek', 'रुद्राभिषेक', '2 hr · 1 pandit · from ₹3,100', 'rose'], ['Laghu Rudra Anushthan', 'लघु रुद्र', '3 days · 5 pandits · from ₹21,000', 'kumkum']].map(([t, h, s, tone]) => (
          <Row key={t} gap={12} style={{ padding: '10px 0' }}>
            <Ph w={52} h={52} r={14} tone={tone} icon="flame" />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>{t.split(/(rudra)/i).map((p, j) => /rudra/i.test(p) ? <b key={j} style={{ background: JP.saffron50 }}>{p}</b> : p)} <Hi s={12.5}>{h}</Hi></div><div style={{ fontSize: 12.5, color: JP.muted, marginTop: 2 }}>{s}</div></div>
            <Ic n="chevR" s={16} c={JP.muted} />
          </Row>
        ))}
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: .8, margin: '14px 0 6px' }}>SAMAGRI · 15 MIN DELIVERY</div>
        {[['Rudrabhishek samagri kit', '24 items · ₹1,249', 'saffron'], ['5 Mukhi Rudraksha mala', '108 beads · ₹499', 'gold']].map(([t, s, tone]) => (
          <Row key={t} gap={12} style={{ padding: '10px 0' }}>
            <Ph w={52} h={52} r={14} tone={tone} icon="bag" />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15 }}>{t}</div><div style={{ fontSize: 12.5, color: JP.muted, marginTop: 2 }}>{s}</div></div>
            <Add sm />
          </Row>
        ))}
        <div style={{ fontSize: 12, fontWeight: 800, color: JP.muted, letterSpacing: .8, margin: '14px 0 10px' }}>TRENDING IN DEHRADUN</div>
        <Row gap={8} style={{ flexWrap: 'wrap' }}>
          {['Navratri Kanya pujan', 'Durga Saptashati', 'Karwa Chauth', 'Grih Pravesh', 'Kaal Sarp dosh'].map(t => <Chip key={t} icon="spark">{t}</Chip>)}
        </Row>
      </div>
    </Screen>
  );
}

Object.assign(window, { SplashScreen, OnboardScreen, LoginScreen, OtpScreen, ProfileSetupScreen, HomeScreen, SearchScreen, PujaTile, MiniProduct, LangToggle });