// JIPANDITJI mobile kit — tokens, icons, primitives
const JP = {
  saffron: '#F6912F', saffronDeep: '#E2741B', saffron50: '#FFF1DC', saffron100: '#FFE3BC',
  teal: '#0C7C8C', tealDeep: '#08606D', teal50: '#E2F0F1', teal100: '#C6E3E6',
  kumkum: '#8E1B2A', kumkum50: '#FBE9EA', gold: '#C9922E', gold50: '#FBF3E2',
  ink: '#17201F', ink2: '#4A5654', muted: '#7A8584', line: '#E6EAE9', line2: '#EEF1F0',
  cream: '#FFFCEF', surface: '#F5F7F6', white: '#fff', green: '#1E8A4C', green50: '#E5F4EA',
  f: "'Hanken Grotesk', 'Noto Sans Devanagari', sans-serif",
  hi: "'Tiro Devanagari Hindi', 'Noto Sans Devanagari', serif",
};

// ---------- Icons (24 grid, 1.8 stroke) ----------
const IP = {
  back: 'M15 5l-7 7 7 7', chevR: 'M9 5l7 7-7 7', chevD: 'M6 9l6 6 6-6', chevU: 'M6 15l6-6 6 6',
  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-3.5-3.5',
  bell: 'M6 17V11a6 6 0 0 1 12 0v6l1.5 2h-15L6 17zM10 21h4',
  mic: 'M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM6 11a6 6 0 0 0 12 0M12 17v4',
  pin: 'M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21zM12 7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z',
  cal: 'M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zM4 10h16M8 3v4M16 3v4',
  clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5l3 2',
  star: 'M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9 6.8 19.6l1-5.8-4.3-4.1 5.9-.9L12 3.5z',
  check: 'M5 12.5l4.5 4.5L19 7.5', plus: 'M12 5v14M5 12h14', minus: 'M5 12h14', x: 'M6 6l12 12M18 6L6 18',
  bag: 'M5 8h14l-1 12H6L5 8zM9 8V6a3 3 0 0 1 6 0v2',
  home: 'M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1v-9z',
  diya: 'M12 3c1.6 2 2.2 3.4 2.2 4.5a2.2 2.2 0 0 1-4.4 0C9.8 6.4 10.4 5 12 3zM3.5 12h17c0 3.6-3.8 6.5-8.5 6.5S3.5 15.6 3.5 12zM9 21h6',
  kalash: 'M8 8h8M9 8c-3 1.5-4 4-4 6.5C5 18 8 21 12 21s7-3 7-6.5c0-2.5-1-5-4-6.5M10 8V6h4v2M12 6c-2-3-5-3-6-2 1.5.3 3 1 4 2M12 6c2-3 5-3 6-2-1.5.3-3 1-4 2',
  sun: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
  moon: 'M20 14.5A8 8 0 1 1 9.5 4 6.5 6.5 0 0 0 20 14.5z',
  temple: 'M12 2.5v2M8 9l4-4.5L16 9M6 9h12v2H6zM7 11v8M12 11v8M17 11v8M4 21h16M5 19h14',
  user: 'M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4.5 20.5c1-3.6 4-5.5 7.5-5.5s6.5 1.9 7.5 5.5',
  users: 'M9 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM2.5 20c.8-3.2 3.3-5 6.5-5s5.7 1.8 6.5 5M16 5.2a3.3 3.3 0 0 1 0 6.4M18 15.3c1.8.6 3 2.2 3.5 4.7',
  phone: 'M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.1 6.1l1.4-2.3L20 15.5V19a1.5 1.5 0 0 1-1.6 1.5C10.6 20 4 13.4 3.5 5.6A1.5 1.5 0 0 1 5 4z',
  chat: 'M4 5h16v11H9l-5 4V5z', video: 'M3 7h12v10H3zM15 10.5l6-3.5v10l-6-3.5',
  heart: 'M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z',
  share: 'M12 3v12M7 8l5-5 5 5M5 13v7h14v-7',
  shield: 'M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6L12 3zM8.5 12l2.5 2.5 4.5-5',
  filter: 'M4 6h16M7 12h10M10 18h4', gift: 'M4 10h16v10H4zM3 7h18v3H3zM12 7v13M12 7c-1-3-5-4-5-1.5S12 7 12 7zM12 7c1-3 5-4 5-1.5S12 7 12 7z',
  wallet: 'M4 7h15a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7zM4 7l12-3v3M16 13.5h2',
  card: 'M3 6h18v12H3zM3 10h18M7 15h3',
  truck: 'M2 6h12v10H2zM14 9h4l3 3.5V16h-7M6 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM17 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z',
  live: 'M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.6 5.6a9 9 0 0 0 0 12.8M18.4 5.6a9 9 0 0 1 0 12.8M12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z',
  edit: 'M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4',
  spark: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7.7-2z',
  flame: 'M12 21c-3.9 0-6.5-2.6-6.5-6.2C5.5 10 10 8 10.5 3c3 2 4 4.5 3.8 7 1-.6 1.7-1.6 2-2.8 1.6 1.7 2.2 4.1 2.2 6.3C18.5 18.4 15.9 21 12 21z',
  lotus: 'M12 5c-2 2.2-3 4.6-3 7.2 0 2.4 1.3 4.6 3 5.8 1.7-1.2 3-3.4 3-5.8 0-2.6-1-5-3-7.2zM12 18c-3.8 0-7.5-2-9-6 2.4-.4 4.6.2 6.2 1.4M12 18c3.8 0 7.5-2 9-6-2.4-.4-4.6.2-6.2 1.4M5 20h14',
  book: 'M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5zM4 19a2 2 0 0 1 2-2h13v4H6',
  help: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01',
  logout: 'M10 4H5v16h5M14 8l4 4-4 4M18 12H9', globe: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3z',
  bolt: 'M13 2L4 14h7l-1 8 9-12h-7l1-8z', tag: 'M3 12V4h8l10 10-8 8L3 12zM7.5 7.5h.01',
  om: 'M7 8.5c1.6-1.6 5-1.5 5 1.2 0 2-2.3 2.6-3.6 2.3 2.4.2 4.6 1.3 4.6 3.8 0 2.8-3.4 3.8-6.2 1.6M13.5 12c1.5-1.8 5.5-1.6 5.5 2.2 0 3-2.6 4.8-4.6 3.8M15 4.5c1 .9 2.2 1 3.2.3M15.5 7.5h.01',
  doc: 'M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5', eye: 'M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z',
  mala: 'M12 3a6 6 0 0 0-6 6c0 4 3 6 6 9 3-3 6-5 6-9a6 6 0 0 0-6-6zM12 18v3',
  lock: 'M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3',
};
function Ic({ n, s = 22, c = 'currentColor', w = 1.8, fill = 'none', style }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke={c} strokeWidth={w}
      strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', display: 'block', ...style }}>
      <path d={IP[n]} />
    </svg>
  );
}

// ---------- Layout ----------
function Screen({ bg = JP.surface, h = 844, children, style }) {
  return (
    <div style={{ width: 390, height: h, background: bg, position: 'relative', overflow: 'hidden',
      fontFamily: JP.f, color: JP.ink, WebkitFontSmoothing: 'antialiased', ...style }}>
      {children}
    </div>
  );
}
function Status({ light, bg = 'transparent' }) {
  const c = light ? '#fff' : JP.ink;
  return (
    <div style={{ height: 50, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '6px 28px 0 34px', fontWeight: 700, fontSize: 16, color: c, background: bg, position: 'relative', zIndex: 5 }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <svg width="18" height="12" viewBox="0 0 18 12"><g fill={c}><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></g></svg>
        <svg width="16" height="12" viewBox="0 0 16 12"><path d="M8 2.5c2.4 0 4.6.9 6.2 2.5l1.3-1.3A10.6 10.6 0 0 0 8 .7 10.6 10.6 0 0 0 .5 3.7L1.8 5A8.7 8.7 0 0 1 8 2.5zm0 3.6c1.4 0 2.7.5 3.6 1.4l1.3-1.3A7 7 0 0 0 8 4.3a7 7 0 0 0-4.9 1.9l1.3 1.3c.9-.9 2.2-1.4 3.6-1.4zM8 9.6l1.9-1.9a2.7 2.7 0 0 0-3.8 0L8 9.6z" fill={c}/></svg>
        <span style={{ width: 25, height: 12, border: `1.5px solid ${c}`, borderRadius: 4, padding: 1.5, opacity: .9, display: 'flex' }}>
          <span style={{ flex: '0 0 70%', background: c, borderRadius: 1.5 }} /></span>
      </span>
    </div>
  );
}
function TopBar({ title, sub, right, back = true, bg, light }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 16px 12px', background: bg }}>
      {back && <IconBtn n="back" light={light} />}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -.3, color: light ? '#fff' : JP.ink }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: light ? 'rgba(255,255,255,.8)' : JP.muted, fontFamily: /[\u0900-\u097F]/.test(sub) ? JP.hi : JP.f, marginTop: 1 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}
function IconBtn({ n, light, badge, bg, c }) {
  return (
    <div style={{ width: 40, height: 40, borderRadius: 20, background: bg || (light ? 'rgba(255,255,255,.22)' : '#fff'),
      border: light || bg ? 'none' : `1px solid ${JP.line}`, display: 'grid', placeItems: 'center', position: 'relative', flex: 'none' }}>
      <Ic n={n} s={20} c={c || (light ? '#fff' : JP.ink)} />
      {badge && <span style={{ position: 'absolute', top: -2, right: -2, minWidth: 18, height: 18, borderRadius: 9, background: JP.kumkum,
        color: '#fff', fontSize: 11, fontWeight: 800, display: 'grid', placeItems: 'center', border: '2px solid #fff', padding: '0 3px' }}>{badge}</span>}
    </div>
  );
}

// ---------- Primitives ----------
function Btn({ kind = 'primary', children, icon, iconR, full, sm, style }) {
  const k = {
    primary: { background: JP.teal, color: '#fff', border: 'none' },
    saffron: { background: JP.saffron, color: '#fff', border: 'none' },
    kumkum: { background: JP.kumkum, color: '#fff', border: 'none' },
    outline: { background: '#fff', color: JP.teal, border: `1.5px solid ${JP.teal}` },
    ghost: { background: JP.surface, color: JP.ink, border: 'none' },
    white: { background: '#fff', color: JP.ink, border: 'none' },
  }[kind];
  return (
    <div style={{ height: sm ? 38 : 52, padding: sm ? '0 14px' : '0 20px', borderRadius: sm ? 12 : 16, display: 'flex', alignItems: 'center',
      justifyContent: 'center', gap: 8, fontWeight: 700, fontSize: sm ? 14 : 16, width: full ? '100%' : undefined, boxSizing: 'border-box',
      flex: full ? '1 1 auto' : 'none', minHeight: sm ? 38 : 52, flexShrink: 0, whiteSpace: 'nowrap', ...k, ...style }}>
      {icon && <Ic n={icon} s={sm ? 16 : 19} />}{children}{iconR && <Ic n={iconR} s={sm ? 16 : 18} w={2.2} />}
    </div>
  );
}
function Add({ label = 'ADD', qty, sm }) {
  if (qty) return (
    <div style={{ height: sm ? 32 : 36, borderRadius: 10, background: JP.teal, color: '#fff', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', padding: '0 8px', gap: 10, fontWeight: 800, fontSize: 14, minWidth: 78, boxSizing: 'border-box' }}>
      <Ic n="minus" s={15} w={2.6} /><span>{qty}</span><Ic n="plus" s={15} w={2.6} />
    </div>);
  return (
    <div style={{ height: sm ? 32 : 36, borderRadius: 10, border: `1.5px solid ${JP.teal}`, background: '#fff', color: JP.teal,
      display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13, letterSpacing: .4, minWidth: 70, padding: '0 12px', boxSizing: 'border-box',
      boxShadow: '0 2px 0 rgba(12,124,140,.12)' }}>{label}</div>
  );
}
function Chip({ on, children, icon, tone }) {
  return (
    <div style={{ height: 36, padding: '0 14px', borderRadius: 18, display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 600,
      background: on ? (tone || JP.ink) : '#fff', color: on ? '#fff' : JP.ink, border: on ? 'none' : `1px solid ${JP.line}`, whiteSpace: 'nowrap', flex: 'none' }}>
      {icon && <Ic n={icon} s={16} />}{children}
    </div>
  );
}
function Tag({ tone = 'teal', children, icon, style }) {
  const t = { teal: [JP.teal50, JP.tealDeep], saffron: [JP.saffron50, '#A9530C'], green: [JP.green50, JP.green], kumkum: [JP.kumkum50, JP.kumkum],
    gray: [JP.surface, JP.ink2], gold: [JP.gold50, '#8A5E12'], dark: ['rgba(0,0,0,.55)', '#fff'], white: ['#fff', JP.ink] }[tone];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 22, padding: '0 8px', borderRadius: 6, background: t[0], color: t[1],
      fontSize: 11.5, fontWeight: 700, whiteSpace: 'nowrap', ...style }}>{icon && <Ic n={icon} s={12} w={2.2} />}{children}</span>
  );
}
// Image placeholder — warm, patterned; label tells the team which photo goes here
function Ph({ label, h = 120, w = '100%', r = 14, tone = 'saffron', icon, style, children }) {
  const t = {
    saffron: ['#F9DDB5', '#F3C68A', '#9A5A16'], kumkum: ['#E9B9A9', '#C97A6A', '#6E1A22'], teal: ['#CFE6E8', '#9FCBD0', '#0A5A66'],
    gold: ['#F2E2BE', '#E2C584', '#7A5512'], rose: ['#F6D6CF', '#EDB3A6', '#7E2E25'], dusk: ['#3B2A4A', '#8E1B2A', '#FFE3BC'],
  }[tone];
  return (
    <div style={{ width: w, height: h, borderRadius: r, position: 'relative', overflow: 'hidden', flex: 'none',
      background: `radial-gradient(120% 90% at 30% 20%, ${t[0]} 0%, ${t[1]} 100%)`, ...style }}>
      <div style={{ position: 'absolute', inset: 0, opacity: .22,
        backgroundImage: `radial-gradient(${t[2]} 1px, transparent 1.2px)`, backgroundSize: '10px 10px' }} />
      {icon && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', opacity: .55 }}><Ic n={icon} s={Math.min(44, (typeof h === 'number' ? h : 100) * .34)} c={t[2]} w={1.4} /></div>}
      {label && <div style={{ position: 'absolute', left: 8, bottom: 7, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 9.5, color: t[2], opacity: .8, letterSpacing: .2 }}>{label}</div>}
      {children}
    </div>
  );
}
function Avatar({ i, tone = 'saffron', s = 48 }) {
  const t = { saffron: [JP.saffron50, '#B4600F'], teal: [JP.teal50, JP.tealDeep], gray: ['#ECEFEE', JP.ink2], kumkum: [JP.kumkum50, JP.kumkum] }[tone];
  return <div style={{ width: s, height: s, borderRadius: s / 2.6, background: t[0], color: t[1], display: 'grid', placeItems: 'center',
    fontWeight: 800, fontSize: s * .36, flex: 'none' }}>{i}</div>;
}
function Sec({ title, hi, action, sub, style }) {
  return (
    <div style={{ padding: '0 16px', marginBottom: 12, ...style }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -.3 }}>{title}{hi && <span style={{ fontFamily: JP.hi, fontWeight: 400, fontSize: 15, color: JP.muted, marginLeft: 8 }}>{hi}</span>}</div>
        {action && <div style={{ fontSize: 14, fontWeight: 700, color: JP.teal, display: 'flex', alignItems: 'center', gap: 2 }}>{action}<Ic n="chevR" s={14} w={2.4} /></div>}
      </div>
      {sub && <div style={{ fontSize: 13, color: JP.muted, marginTop: 3 }}>{sub}</div>}
    </div>
  );
}
function Card({ children, style, pad = 16 }) {
  return <div style={{ background: '#fff', borderRadius: 18, border: `1px solid ${JP.line}`, padding: pad, ...style }}>{children}</div>;
}
function Rupee({ v, strike, size = 18, c = JP.ink }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
      <span style={{ fontSize: size, fontWeight: 800, color: c, letterSpacing: -.3 }}>₹{v}</span>
      {strike && <span style={{ fontSize: size * .7, color: JP.muted, textDecoration: 'line-through' }}>₹{strike}</span>}
    </span>
  );
}
function BottomBar({ children, style }) {
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: '#fff', borderTop: `1px solid ${JP.line}`,
      padding: '12px 16px 30px', display: 'flex', alignItems: 'center', gap: 12, zIndex: 10, ...style }}>{children}</div>
  );
}
function PayBar({ label = 'TOTAL', amount, sub, cta, icon = 'chevR', kind }) {
  return (
    <BottomBar>
      <div style={{ flex: 'none' }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: JP.muted, letterSpacing: .6 }}>{label}</div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -.4 }}>₹{amount}</div>
        {sub && <div style={{ fontSize: 12, color: JP.teal, fontWeight: 700 }}>{sub}</div>}
      </div>
      <Btn full kind={kind} iconR={icon}>{cta}</Btn>
    </BottomBar>
  );
}
function TabBar({ active = 'home', cart }) {
  const tabs = [['home', 'Home', 'home'], ['puja', 'Puja', 'diya'], ['panchang', 'Panchang', 'sun'], ['samagri', 'Samagri', 'bag'], ['profile', 'Profile', 'user']];
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 20 }}>
      {cart && (
        <div style={{ margin: '0 auto 10px', width: 'fit-content', background: JP.teal, color: '#fff', borderRadius: 30, padding: '7px 8px 7px 8px',
          display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 10px 24px rgba(8,96,109,.35)' }}>
          <div style={{ display: 'flex' }}>
            {['saffron', 'gold', 'rose'].map((t, i) => <Ph key={i} w={30} h={30} r={15} tone={t} style={{ border: '2px solid #fff', marginLeft: i ? -10 : 0 }} />)}
          </div>
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontWeight: 800, fontSize: 14 }}>View cart</div>
            <div style={{ fontSize: 11.5, opacity: .85 }}>{cart}</div>
          </div>
          <div style={{ width: 30, height: 30, borderRadius: 15, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center' }}><Ic n="chevR" s={16} c="#fff" w={2.4} /></div>
        </div>
      )}
      <div style={{ background: '#fff', borderTop: `1px solid ${JP.line}`, display: 'flex', padding: '8px 6px 28px' }}>
        {tabs.map(([k, l, n]) => {
          const on = k === active;
          return (
            <div key={k} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: on ? JP.teal : JP.muted, position: 'relative' }}>
              {on && <span style={{ position: 'absolute', top: -9, width: 28, height: 3, borderRadius: 2, background: JP.teal }} />}
              <div style={{ width: 52, height: 30, borderRadius: 15, background: on ? JP.teal50 : 'transparent', display: 'grid', placeItems: 'center' }}>
                <Ic n={n} s={22} w={on ? 2.1 : 1.8} />
              </div>
              <span style={{ fontSize: 11.5, fontWeight: on ? 800 : 600 }}>{l}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
function Field({ label, value, ph, icon, right, style, prefix }) {
  return (
    <div style={style}>
      {label && <div style={{ fontSize: 13, fontWeight: 700, color: JP.ink2, marginBottom: 6 }}>{label}</div>}
      <div style={{ height: 52, borderRadius: 14, border: `1.5px solid ${value ? JP.line : JP.line}`, background: '#fff', display: 'flex', alignItems: 'center',
        gap: 10, padding: '0 14px', fontSize: 16 }}>
        {icon && <Ic n={icon} s={19} c={JP.muted} />}
        {prefix && <span style={{ fontWeight: 700, paddingRight: 10, borderRight: `1px solid ${JP.line}` }}>{prefix}</span>}
        <span style={{ flex: 1, color: value ? JP.ink : JP.muted, fontWeight: value ? 600 : 400 }}>{value || ph}</span>
        {right}
      </div>
    </div>
  );
}
function Radio({ on }) {
  return <span style={{ width: 22, height: 22, borderRadius: 11, border: `2px solid ${on ? JP.teal : '#C5CDCC'}`, display: 'grid', placeItems: 'center', flex: 'none' }}>
    {on && <span style={{ width: 11, height: 11, borderRadius: 6, background: JP.teal }} />}</span>;
}
function Check({ on }) {
  return <span style={{ width: 22, height: 22, borderRadius: 7, border: on ? 'none' : '2px solid #C5CDCC', background: on ? JP.teal : '#fff', display: 'grid', placeItems: 'center', flex: 'none' }}>
    {on && <Ic n="check" s={15} c="#fff" w={2.8} />}</span>;
}
function Steps({ n, total = 3, label }) {
  return (
    <div style={{ padding: '0 16px 12px' }}>
      <div style={{ display: 'flex', gap: 6 }}>
        {Array.from({ length: total }).map((_, i) => <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i < n ? JP.teal : JP.line }} />)}
      </div>
      {label && <div style={{ fontSize: 12.5, color: JP.muted, marginTop: 6, fontWeight: 600 }}>Step {n} of {total} · {label}</div>}
    </div>
  );
}
function Logo({ h = 22 }) { return <img src="assets/logo.png" style={{ height: h, display: 'block' }} />; }
const Hi = ({ children, s = 14, c = JP.muted, style }) => <span style={{ fontFamily: JP.hi, fontSize: s, color: c, ...style }}>{children}</span>;
const Row = ({ children, gap = 8, style, a = 'center' }) => <div style={{ display: 'flex', alignItems: a, gap, ...style }}>{children}</div>;
const Divider = ({ m = 0 }) => <div style={{ height: 1, background: JP.line, margin: m }} />;

Object.assign(window, { JP, Ic, Screen, Status, TopBar, IconBtn, Btn, Add, Chip, Tag, Ph, Avatar, Sec, Card, Rupee, BottomBar, PayBar,
  TabBar, Field, Radio, Check, Steps, Logo, Hi, Row, Divider });