// screens-rewards.jsx — dedicated Rewards tab: XP, challenges, badges, loyalty,
// the Posse (friends + wallet gifting), and the vendor Trail Bounties sheet.

// Local icons (Lucide-style, 2.2 stroke) not in the shared set
const RIco = {
  camera: (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke={p.c||'currentColor'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="14" r="3.5"/></svg>,
  share: (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke={p.c||'currentColor'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="m8.7 10.7 6.6-3.4M8.7 13.3l6.6 3.4"/></svg>,
  gift: (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke={p.c||'currentColor'} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="8" width="18" height="4"/><path d="M5 12v8h14v-8M12 8v12"/><path d="M12 8c-1.5 0-4.5-.5-4.5-2.7C7.5 3.6 9 3 10 3c2 0 2 3 2 5zm0 0c1.5 0 4.5-.5 4.5-2.7C16.5 3.6 15 3 14 3c-2 0-2 3-2 5z"/></svg>,
  at: (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke={p.c||'currentColor'} strokeWidth="2.2" strokeLinecap="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg>,
};

// ─── Rewards screen ─────────────────────────────────────────────────
function RewardsScreen({ app }) {
  const locked = !app.authed;
  const liveXp = app.xp != null ? app.xp : PROFILE.xp_points;
  const p = { ...PROFILE,
    xp_points: locked ? 0 : liveXp,
    xp_to_next: locked ? PROFILE.xp_total_next : Math.max(0, PROFILE.xp_total_next - liveXp),
    streak_current: locked ? 0 : (app.streak != null ? app.streak : PROFILE.streak_current),
    total_orders: locked ? 0 : (app.ordersCount != null ? app.ordersCount : PROFILE.total_orders),
    challenges: PROFILE.challenges.map(c => ({
      ...c,
      progress: locked ? 0 : (app.challengeProgress && app.challengeProgress[c.id] != null ? app.challengeProgress[c.id] : c.progress),
    })),
  };
  const xpProgress = (p.xp_points / p.xp_total_next) * 100;
  const [rewardCard, setRewardCard] = React.useState(null);
  const [badge, setBadge] = React.useState(null);
  const [giftFriend, setGiftFriend] = React.useState(null);
  const [addOpen, setAddOpen] = React.useState(false);
  const nextChallenge = p.challenges.find(c => c.progress < c.total) || p.challenges[0];

  return (
    <Screen>
      {/* Dark hero — rank + XP + wallet */}
      <div style={{ background: 'var(--dark-chocolate)', color: 'var(--dust-cream)', padding: '12px 20px 22px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -24, top: -14, opacity: 0.35 }}><Bull size={140}/></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, position: 'relative' }}>
          <Wordmark size={18}/>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 13px', borderRadius: 999, background: 'rgba(255,255,255,0.07)', border: '1.5px solid rgba(255,255,255,0.1)' }}>
            <Ico.wallet c="var(--sun-orange)" s={15}/>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 13 }}>{locked ? 'Sign in' : `£${app.walletBalance.toFixed(2)}`}</span>
          </div>
        </div>
        <div data-level-up-trigger="" data-level-up-state={p.xp_points >= (window.LV_NEXT_RANK ? LV_NEXT_RANK.threshold : 2500) ? 'reached' : 'progressing'} style={{ position: 'relative' }}>
          <Eyebrow color="var(--brand-orange)">Rewards</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 6 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 26, lineHeight: 1 }}>{locked ? 'Trail rewards' : p.rank_label}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#9F8979' }}>{locked ? 'Sign in to save XP, wallet credit and bounties' : `${p.xp_points.toLocaleString()} XP · ${p.xp_to_next} to Trail Boss`}</div>
          </div>
          <div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.08)', overflow: 'hidden', marginTop: 12 }}>
            <div style={{ height: '100%', width: `${xpProgress}%`, background: 'linear-gradient(90deg,#F28C1B,#D85A14)', transition: 'width 600ms var(--ease-out)' }}/>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '20px 0 max(132px, calc(env(safe-area-inset-bottom, 0px) + 132px))', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <RewardCommandDeck app={app} p={p} nextChallenge={nextChallenge}/>

        {/* Signed-out prompt — rewards actions need an account */}
        {!app.authed && (
          <div data-customer-auth-entry="" onClick={() => { app.setRedirectAfterAuth('rewards'); app.nav('auth'); }} style={{ margin: '0 20px', padding: '13px 15px', borderRadius: 16, background: 'var(--bg-warm)', border: '1.5px solid rgba(216,90,20,0.3)', display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer' }}>
            <Ico.lock c="var(--brand-orange)" s={18}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--fg-primary)' }}>Sign in to earn &amp; claim</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--warm-stone)', marginTop: 2 }}>XP, streaks and bounties save to your account</div>
            </div>
            <Ico.arrow c="var(--brand-orange)" s={16}/>
          </div>
        )}

        {/* Streak */}
        <div>
          <SectionTitle eyebrow="Streak" title={`${p.streak_current} weeks riding`}/>
          <div style={{ padding: '0 20px' }}>
            <StreakCard app={app} streak={p.streak_current} best={p.streak_best}/>
          </div>
        </div>

        {/* Challenges */}
        <div>
          <SectionTitle eyebrow="Active challenges" title="Earn XP this week"/>
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {p.challenges.map(c => <ChallengeCard key={c.id} challenge={c}/>)}
          </div>
        </div>

        {/* Lucky Strike + Trail points wallet */}
        <div>
          <SectionTitle eyebrow="Shootout" title="Daily dinner battles"/>
          <ShootoutRouteCard app={app}/>
        </div>
        <div>
          <SectionTitle eyebrow="Lucky Strike" title="Prize draws on the trail"/>
          <LuckyStrikeRouteCard app={app}/>
        </div>
        <div>
          <SectionTitle eyebrow="Trail points" title="Your points, in your pocket"/>
          <TrailPointsWalletPanel app={app}/>
        </div>

        {/* Badges */}
        <div>
          <SectionTitle eyebrow="Badges" title={`${p.badge_count} unlocked`}/>
          <div data-lasso="badges-container" style={{ display: 'flex', gap: 10, padding: '0 20px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            <style>{`[data-lasso="badges-container"]::-webkit-scrollbar{display:none}`}</style>
            {p.badges.map(b => <BadgeCard key={b.id} badge={b} onOpen={() => setBadge(b)}/>)}
          </div>
        </div>

        {/* Trail Pass — per-kitchen passports */}
        <div>
          <SectionTitle eyebrow="Trail Pass" title="Your passports"/>
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['rojo-smoke', 'maverick-burger', 'cactus-cream', 'dune-coffee'].map(rid => {
              const pass = trailPassFor(rid, app.passStamps);
              const r = RESTAURANT_LOOKUP[rid];
              if (!pass || !r) return null;
              return <TrailPassCard key={rid} rid={rid} app={app} compact onOpen={() => setRewardCard({
                id: rid, cardName: 'Trail Pass', restaurantId: rid, restaurantName: r.name,
                stamps: pass.stamps, total: pass.total, reward: pass.reward,
              })}/>;
            })}
          </div>
        </div>

        {/* Gifts received */}
        <div>
          <SectionTitle eyebrow="Gifts" title="Sent your way"/>
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {GIFTS_RECEIVED.map(g => {
              const friend = app.friends.find(f => f.id === g.friendId);
              return (
                <div key={g.id} data-lasso="gift-row" style={{ background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 16, padding: 13 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <div style={{ width: 42, height: 42, borderRadius: 13, background: 'linear-gradient(135deg,#F28C1B,#D85A14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: 'var(--shadow-orange)' }}>
                      <RIco.gift c="#fff" s={19}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13.5, color: 'var(--fg-primary)' }}>
                        £{g.amount.toFixed(2)} from {g.from.split(' ')[0]}
                      </div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)', marginTop: 1 }}>{g.date} · landed in your wallet</div>
                    </div>
                    <button onClick={() => friend ? setGiftFriend(friend) : app.toast('They’re not in your posse yet', 'info')} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 13px', borderRadius: 11, flexShrink: 0,
                      background: 'var(--dark-chocolate)', border: 'none', cursor: 'pointer',
                      fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11.5, color: 'var(--dust-cream)',
                    }}><RIco.gift c="var(--sun-orange)" s={13}/> Return the favour</button>
                  </div>
                  {g.note && (
                    <div style={{ marginTop: 10, padding: '9px 12px', background: 'var(--bg-warm)', borderRadius: 11, fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--horse-brown)', fontStyle: 'italic' }}>“{g.note}”</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* The Posse — friends + gifting */}
        <div>
          <SectionTitle eyebrow="The posse" title="Ride with friends" action="Add friend" onAction={() => setAddOpen(true)}/>
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {app.friends.map(f => (
              <div key={f.id} data-lasso="friend-row" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px', background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 16 }}>
                <div style={{ position: 'relative', flexShrink: 0 }}>
                  <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'linear-gradient(135deg,#F4E1C1,#F28C1B)', color: 'var(--horse-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14 }}>{f.initials}</div>
                  {f.online && <span style={{ position: 'absolute', bottom: 0, right: 0, width: 11, height: 11, borderRadius: '50%', background: 'var(--live-green)', border: '2px solid var(--bg-surface)' }}/>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13.5, color: 'var(--fg-primary)' }}>{f.name}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)', marginTop: 1 }}>{f.mutual} · {f.orders} rides</div>
                </div>
                <button onClick={() => setGiftFriend(f)} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 13px', borderRadius: 11,
                  background: 'var(--bg-warm)', border: '1.5px solid var(--soft-line)', cursor: 'pointer',
                  fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11.5, color: 'var(--horse-brown)',
                }}><RIco.gift c="var(--brand-orange)" s={14}/> Gift</button>
              </div>
            ))}
            {/* Referral banner */}
            <div onClick={() => setAddOpen(true)} style={{
              marginTop: 4, borderRadius: 18, padding: '15px 16px', cursor: 'pointer',
              background: 'linear-gradient(125deg,#5A6F2E 0%,#283417 100%)', color: 'var(--dust-cream)',
              display: 'flex', alignItems: 'center', gap: 12, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', right: -10, bottom: -14, opacity: 0.3 }}><Bull size={80}/></div>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><RIco.share c="#fff" s={19}/></div>
              <div style={{ position: 'relative', flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14 }}>Rope in a friend, get £10 each</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'rgba(245,239,231,0.75)', marginTop: 2 }}>Straight to both wallets after their first ride.</div>
              </div>
              <Ico.chev c="#fff" s={16}/>
            </div>
          </div>
        </div>
      </div>

      <RewardsChallengeSheet card={rewardCard} onClose={() => setRewardCard(null)} app={app}/>
      <BadgeSheet badge={badge} onClose={() => setBadge(null)} app={app}/>
      <GiftSheet friend={giftFriend} onClose={() => setGiftFriend(null)} app={app}/>
      <AddFriendSheet open={addOpen} onClose={() => setAddOpen(false)} app={app}/>
    </Screen>
  );
}

function RewardCommandDeck({ app, p, nextChallenge }) {
  const locked = !app.authed;
  const challengeLeft = nextChallenge ? Math.max(0, nextChallenge.total - nextChallenge.progress) : 0;
  const nextTitle = locked
    ? 'Unlock your trail'
    : challengeLeft > 0
      ? `${challengeLeft} ride${challengeLeft === 1 ? '' : 's'} from +${nextChallenge.xp} XP`
      : 'Claim the next reward';
  const nextSub = locked
    ? 'Save XP, wallet credit, bounties and streaks to your account.'
    : nextChallenge?.title || 'Pick a kitchen and keep the rewards moving.';
  const runPrimary = () => {
    if (locked) {
      app.setRedirectAfterAuth('rewards');
      app.nav('auth');
      return;
    }
    app.replaceTo('home');
  };
  const fast = [
    { id: 'points', label: 'Trail points', value: locked ? 'Save XP' : p.xp_points.toLocaleString(), sub: locked ? 'account only' : `${p.xp_to_next} to boss`, icon: <Ico.badge c="var(--brand-orange)" s={17}/>, action: () => locked ? app.nav('auth') : app.toast('Trail points build from real orders', 'info') },
    { id: 'wallet', label: 'Wallet', value: locked ? 'Locked' : `£${app.walletBalance.toFixed(2)}`, sub: locked ? 'sign in' : 'ready now', icon: <Ico.wallet c="var(--live-green)" s={17}/>, action: () => app.toast(locked ? 'Sign in to use Trail Wallet' : 'Wallet credit applies at checkout', 'info') },
    { id: 'strike', label: 'Lucky Strike', value: locked ? 'Preview' : 'Live', sub: 'bounties', icon: <Ico.flame c="var(--sun-orange)" s={17}/>, action: () => app.openLuckyStrike('rewards-command') },
  ];
  return (
    <section data-lasso="reward-command-deck" style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <button onClick={runPrimary} style={{
        border: 'none',
        borderRadius: 20,
        padding: 0,
        overflow: 'hidden',
        cursor: 'pointer',
        textAlign: 'left',
        background: 'linear-gradient(125deg,#FFF7EA 0%,#F6E4CA 100%)',
        boxShadow: '0 14px 30px rgba(72,44,24,0.12)',
      }}>
        <div style={{ position: 'relative', padding: 16, minHeight: 118, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{ position: 'absolute', right: -18, bottom: -34, opacity: 0.16 }}><Bull size={128}/></div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
            <div>
              <Eyebrow color="var(--brand-orange)">Best next move</Eyebrow>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 24, lineHeight: 1, color: 'var(--fg-primary)', marginTop: 7 }}>{nextTitle}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--warm-stone)', marginTop: 7, lineHeight: 1.35, maxWidth: 230 }}>{nextSub}</div>
            </div>
            <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '9px 12px', borderRadius: 12, background: 'var(--dark-chocolate)', color: 'var(--dust-cream)', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 11.5 }}>
              {locked ? 'Sign in' : 'Order'} <Ico.arrow c="var(--brand-orange)" s={14}/>
            </span>
          </div>
          {!locked && nextChallenge && (
            <div style={{ position: 'relative', marginTop: 14 }}>
              <div style={{ height: 7, borderRadius: 999, background: 'rgba(27,18,13,0.1)', overflow: 'hidden' }}>
                <div style={{ width: `${Math.min(100, (nextChallenge.progress / nextChallenge.total) * 100)}%`, height: '100%', background: 'linear-gradient(90deg,#F28C1B,#D85A14)' }}/>
              </div>
            </div>
          )}
        </div>
      </button>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8 }}>
        {fast.map(item => (
          <button key={item.id} onClick={item.action} style={{
            minWidth: 0,
            border: '1.5px solid var(--soft-line)',
            background: 'var(--bg-surface)',
            borderRadius: 16,
            padding: '11px 8px',
            cursor: 'pointer',
            textAlign: 'left',
            boxShadow: '0 8px 18px rgba(72,44,24,0.06)',
          }}>
            <div style={{ width: 30, height: 30, borderRadius: 10, background: 'var(--bg-warm)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 9 }}>{item.icon}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14, color: 'var(--fg-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.value}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, color: 'var(--warm-stone)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.label}</div>
          </button>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none', scrollSnapType: 'x mandatory', paddingBottom: 2 }}>
        {[
          { label: 'Spend points', icon: <Ico.wallet c="var(--brand-orange)" s={14}/>, run: () => app.toast('Spend-in-store is still coming soon', 'info') },
          { label: 'Find bounties', icon: <Ico.flame c="var(--brand-orange)" s={14}/>, run: () => app.openLuckyStrike('rewards-chip') },
          { label: 'Gift credit', icon: <RIco.gift c="var(--brand-orange)" s={14}/>, run: () => app.toast(locked ? 'Sign in to gift wallet credit' : 'Pick a friend below', 'info') },
        ].map(chip => (
          <button key={chip.label} onClick={chip.run} style={{
            flexShrink: 0,
            scrollSnapAlign: 'start',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 7,
            padding: '9px 12px',
            borderRadius: 999,
            border: '1.5px solid var(--soft-line)',
            background: 'var(--bg-surface)',
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 11.5,
            color: 'var(--horse-brown)',
            cursor: 'pointer',
          }}>{chip.icon}{chip.label}</button>
        ))}
      </div>
    </section>
  );
}

// ─── Streak card — week dots + freeze mechanic ────────────────────
function StreakCard({ app, streak, best }) {
  const [frozen, setFrozen] = React.useState(false);
  const days = ['M','T','W','T','F','S','S'];
  const doneDays = 4; // ordered Mon–Thu this week
  return (
    <div style={{ background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 18, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 46, height: 46, borderRadius: 14, background: 'linear-gradient(135deg,#F28C1B,#D85A14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: 'var(--shadow-orange)' }}>
          <Ico.flame c="#fff" s={24}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 16, color: 'var(--fg-primary)' }}>{streak}-week streak</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)', marginTop: 1 }}>Best: {best} weeks · order once a week to keep it alive</div>
        </div>
        <Pill bg="var(--bg-warm)" fg="var(--brand-orange)">+50 XP / wk</Pill>
      </div>
      {/* week dots */}
      <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
        {days.map((d, i) => {
          const done = i < doneDays;
          const today = i === doneDays;
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
              <div style={{
                width: 30, height: 30, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: done ? 'var(--brand-orange)' : today ? 'var(--dark-chocolate)' : 'var(--bg-warm)',
                border: today ? 'none' : done ? 'none' : '1.5px dashed var(--soft-line)',
                boxShadow: today ? '0 0 0 3px rgba(216,90,20,0.2)' : 'none',
              }}>
                {done ? <Ico.check c="#fff" s={13}/> : today ? <Ico.flame c="var(--brand-orange)" s={13}/> : null}
              </div>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9, color: done || today ? 'var(--fg-primary)' : 'var(--warm-stone)' }}>{d}</span>
            </div>
          );
        })}
      </div>
      {/* freeze */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14, padding: '11px 13px', background: frozen ? 'rgba(62,124,176,0.1)' : 'var(--bg-warm)', border: '1.5px solid ' + (frozen ? 'rgba(62,124,176,0.35)' : 'var(--soft-line)'), borderRadius: 13, transition: 'all 220ms var(--ease-out)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: frozen ? 'rgba(62,124,176,0.15)' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Ico.lock c={frozen ? '#2f6694' : 'var(--horse-brown)'} s={15}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12.5, color: frozen ? '#2f6694' : 'var(--fg-primary)' }}>{frozen ? 'Streak freeze armed' : 'Streak freeze · 1 available'}</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--warm-stone)', marginTop: 1 }}>{frozen ? 'Skip a week without losing your streak.' : 'Miss a week? A freeze saves your run.'}</div>
        </div>
        {!frozen && (
          <button onClick={() => { setFrozen(true); app.toast('Streak freeze armed — your run is safe', 'success'); }} style={{ background: 'var(--dark-chocolate)', color: 'var(--dust-cream)', border: 'none', padding: '8px 13px', borderRadius: 10, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11.5, cursor: 'pointer', flexShrink: 0 }}>Arm it</button>
        )}
        {frozen && <Ico.check c="#2f6694" s={18}/>}
      </div>
    </div>
  );
}

// ─── Badge detail sheet ─────────────────────────────────────────────
function BadgeSheet({ badge: b, onClose, app }) {
  if (!b) return <BottomSheet open={false} onClose={onClose}/>;
  const palette = {
    orange: 'linear-gradient(135deg,#F28C1B,#D85A14)',
    sun: 'linear-gradient(135deg,#F4D8B0,#F28C1B)',
    gold: 'linear-gradient(135deg,#F4E1C1,#D6A63A)',
    gray: 'var(--bg-warm)',
  }[b.kind];
  const meta = {
    b1: { earnedOn: 'Feb 12', xp: 50, hint: 'Everyone starts somewhere on the trail.' },
    b2: { earnedOn: 'Mar 03', xp: 150, hint: 'Sunrise orders, three mornings running.' },
    b3: { earnedOn: 'May 29', xp: 400, hint: 'Half a grand ridden. Respect.' },
    b4: { xp: 300, hint: 'Start a group order with 4 friends in one bag.', progress: 2, total: 4 },
    b5: { xp: 350, hint: 'Leave reviews — kitchens read every one.', progress: 9, total: 25 },
  }[b.id] || { xp: 100, hint: '' };
  return (
    <BottomSheet open={!!b} onClose={onClose}>
      <div style={{ padding: '0 20px 32px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14 }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%', background: palette,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: b.earned ? '0 14px 30px -8px rgba(216,90,20,0.45)' : 'none',
          filter: b.earned ? 'none' : 'grayscale(0.4)', opacity: b.earned ? 1 : 0.65,
          animation: 'lasso-bag-pop 320ms var(--ease-out)',
        }}>
          <Ico.badge c={b.kind === 'gray' ? 'var(--warm-stone)' : '#fff'} s={46}/>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 24, letterSpacing: '-0.01em', color: 'var(--fg-primary)' }}>{b.name}</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--warm-stone)', marginTop: 4 }}>{b.desc}</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {b.earned
            ? <Pill bg="rgba(46,139,78,0.14)" fg="var(--live-green)"><Ico.check c="var(--live-green)" s={12}/> Unlocked {meta.earnedOn ? `· ${meta.earnedOn}` : ''}</Pill>
            : <Pill bg="var(--bg-warm)" fg="var(--warm-stone)"><Ico.lock c="var(--warm-stone)" s={12}/> Locked</Pill>}
          <Pill bg="var(--brand-orange)" fg="#fff">+{meta.xp} XP</Pill>
        </div>
        {!b.earned && meta.total && (
          <div style={{ width: '100%', maxWidth: 260 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--warm-stone)' }}>Progress</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, color: 'var(--fg-primary)' }}>{meta.progress}/{meta.total}</span>
            </div>
            <div style={{ height: 7, borderRadius: 4, background: 'var(--soft-line)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${(meta.progress/meta.total)*100}%`, background: 'var(--brand-orange)' }}/>
            </div>
          </div>
        )}
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--warm-stone)', fontStyle: 'italic', maxWidth: 260, lineHeight: 1.45 }}>{meta.hint}</div>
        <div style={{ display: 'flex', gap: 10, width: '100%', maxWidth: 300, marginTop: 4 }}>
          <Button kind="ghost" full onClick={() => { try { navigator.clipboard && navigator.clipboard.writeText(`I just roped the “${b.name}” badge on Lasso — lasso.app/b/${b.id}`); } catch (e) {} app && app.toast('Badge copied — paste it anywhere', 'success'); }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><RIco.share s={15}/> Share</span>
          </Button>
          <Button kind="primary" full onClick={onClose}>Done</Button>
        </div>
      </div>
    </BottomSheet>
  );
}

// ─── Gift wallet money sheet ────────────────────────────────────────
function GiftSheet({ friend, onClose, app }) {
  const [amount, setAmount] = React.useState(5);
  const [note, setNote] = React.useState('');
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (friend) { setAmount(5); setNote(''); setSent(false); } }, [friend]);
  if (!friend) return <BottomSheet open={false} onClose={onClose}/>;
  const amounts = [5, 10, 15, 20];
  const canSend = amount > 0 && amount <= app.walletBalance;
  return (
    <BottomSheet open={!!friend} onClose={onClose} title={sent ? '' : `Gift ${friend.name.split(' ')[0]}`}>
      {sent ? (
        <div style={{ padding: '10px 20px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14 }}>
          <div style={{ width: 88, height: 88, borderRadius: '50%', background: 'linear-gradient(135deg,#F28C1B,#D85A14)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'lasso-bag-pop 380ms var(--ease-out)', boxShadow: '0 14px 30px -8px rgba(216,90,20,0.5)' }}>
            <RIco.gift c="#fff" s={40}/>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 24, color: 'var(--fg-primary)' }}>£{amount.toFixed(2)} sent</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--warm-stone)', maxWidth: 250, lineHeight: 1.5 }}>{friend.name.split(' ')[0]} will see it in their wallet on the next ride. Your balance: <strong style={{ color: 'var(--fg-primary)' }}>£{app.walletBalance.toFixed(2)}</strong></div>
          <Button kind="primary" onClick={onClose}>Done</Button>
        </div>
      ) : (
        <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Friend recap */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--bg-warm)', borderRadius: 16 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg,#F4E1C1,#F28C1B)', color: 'var(--horse-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 15 }}>{friend.initials}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14.5, color: 'var(--fg-primary)' }}>{friend.name}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)' }}>Lands as Lasso wallet credit</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 10, color: 'var(--warm-stone)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Your wallet</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 15, color: 'var(--fg-primary)' }}>£{app.walletBalance.toFixed(2)}</div>
            </div>
          </div>
          {/* Amount picker */}
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--warm-stone)', marginBottom: 10 }}>Amount</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {amounts.map(a => {
                const on = a === amount;
                const disabled = a > app.walletBalance;
                return (
                  <button key={a} disabled={disabled} onClick={() => setAmount(a)} style={{
                    flex: 1, padding: '14px 4px', borderRadius: 14, cursor: disabled ? 'default' : 'pointer',
                    background: on ? 'var(--dark-chocolate)' : 'var(--bg-surface)',
                    color: on ? 'var(--dust-cream)' : disabled ? 'var(--soft-line)' : 'var(--fg-primary)',
                    border: '1.5px solid ' + (on ? 'var(--dark-chocolate)' : 'var(--soft-line)'),
                    fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 16,
                    transition: 'all 160ms var(--ease-out)', transform: on ? 'scale(1.04)' : 'scale(1)',
                  }}>£{a}</button>
                );
              })}
            </div>
            {amount > app.walletBalance && (
              <div style={{ marginTop: 8, fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--delayed-red)' }}>Not enough in your wallet for that one.</div>
            )}
          </div>
          {/* Note */}
          <input value={note} onChange={e => setNote(e.target.value)} placeholder="Add a note — “dinner's on me, partner”"
            style={{ width: '100%', boxSizing: 'border-box', height: 48, padding: '0 14px', borderRadius: 14, border: '1.5px solid var(--soft-line)', background: 'var(--bg-surface)', fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--fg-primary)', outline: 'none' }}/>
          <Button kind="accent" full size="lg" disabled={!canSend} onClick={() => {
            app.sendGift(friend.id, amount);
            setSent(true);
          }}>Send £{amount.toFixed(2)}</Button>
        </div>
      )}
    </BottomSheet>
  );
}

// ─── Add friend sheet ───────────────────────────────────────────────
function AddFriendSheet({ open, onClose, app }) {
  const [q, setQ] = React.useState('');
  const suggested = [
    { id: 's1', name: 'Dev Okafor', initials: 'DO', mutual: '2 mutual friends' },
    { id: 's2', name: 'Wes Calloway', initials: 'WC', mutual: 'Orders from Dune Coffee' },
    { id: 's3', name: 'Rosa Delgado', initials: 'RD', mutual: 'In your contacts' },
  ].filter(s => !app.friends.find(f => f.name === s.name) && (!q.trim() || s.name.toLowerCase().includes(q.toLowerCase())));
  const link = 'lasso.app/j/jordan-7K2';
  return (
    <BottomSheet open={open} onClose={onClose} title="Add to the posse">
      <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Search */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 14, padding: '11px 14px' }}>
          <Ico.search c="var(--warm-stone)" s={17}/>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search name or @handle…"
            style={{ border: 'none', outline: 'none', flex: 1, background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-primary)' }}/>
        </div>
        {/* Suggested */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {suggested.length === 0 && (
            <div style={{ padding: '16px 4px', fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--warm-stone)' }}>No wranglers by that name — send them your link below.</div>
          )}
          {suggested.map(s => (
            <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 14 }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--bg-warm)', color: 'var(--horse-brown)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 13 }}>{s.initials}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13.5, color: 'var(--fg-primary)' }}>{s.name}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)' }}>{s.mutual}</div>
              </div>
              <Button kind="primary" size="sm" onClick={() => { app.addFriend(s.name, s.initials); app.toast(`${s.name.split(' ')[0]} joined your posse`, 'success'); }}>Add</Button>
            </div>
          ))}
        </div>
        {/* Invite link */}
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: 'var(--bg-warm)', border: '1.5px dashed var(--soft-line)', borderRadius: 14, padding: '10px 12px' }}>
          <RIco.share c="var(--brand-orange)" s={17}/>
          <span style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--horse-brown)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link}</span>
          <button onClick={() => { try { navigator.clipboard && navigator.clipboard.writeText(link); } catch (e) {} app.toast('Invite link copied — £10 each when they ride', 'success'); }}
            style={{ background: 'var(--dark-chocolate)', color: 'var(--dust-cream)', border: 'none', padding: '8px 14px', borderRadius: 10, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, cursor: 'pointer' }}>Copy</button>
        </div>
      </div>
    </BottomSheet>
  );
}

// ─── Vendor Trail Bounties sheet (opened from restaurant Trail Pass) ─
function VendorChallengesSheet({ open, onClose, app, restaurant: r, trailDone = 3, trailTotal = 5 }) {
  const [claimed, setClaimed] = React.useState(() => new Set());
  const bounties = [
    { id: 'vb1', icon: 'camera', title: 'Snap your spread', desc: `Post a photo of your ${r?.name || ''} order to your story`, xp: 150, progress: 0, total: 1, cta: 'Open camera' },
    { id: 'vb2', icon: 'at', title: 'Tag the kitchen', desc: `Tag @${(r?.slug || 'kitchen').replace(/-/g, '')} and 2 friends in a story`, xp: 100, progress: 0, total: 1, cta: 'Share story' },
    { id: 'vb3', icon: 'share', title: 'Rope in a friend', desc: 'Refer a friend — you both pocket £10', xp: 200, progress: 0, total: 1, cta: 'Share link' },
    { id: 'vb4', icon: 'gift', title: 'Order for a friend', desc: `Send a ${r?.name || ''} meal to someone in your posse`, xp: 250, progress: 0, total: 1, cta: 'Pick a friend' },
    { id: 'vb5', icon: 'star', title: 'Photo review', desc: 'Review your last order with a photo', xp: 120, progress: 1, total: 1, claimable: true },
    { id: 'vb6', icon: 'flame', title: 'Three-peat', desc: 'Order 3 times in 30 days', xp: 300, progress: 2, total: 3 },
  ];
  const availableXP = bounties.filter(b => !claimed.has(b.id)).reduce((s, b) => s + b.xp, 0);
  const BIcon = ({ name, c, s }) => name === 'camera' ? <RIco.camera c={c} s={s}/> : name === 'at' ? <RIco.at c={c} s={s}/> : name === 'share' ? <RIco.share c={c} s={s}/> : name === 'gift' ? <RIco.gift c={c} s={s}/> : name === 'flame' ? <Ico.flame c={c} s={s}/> : <Ico.star c={c} s={s}/>;
  return (
    <BottomSheet open={open} onClose={onClose} maxHeight="92%">
      <div style={{ padding: '0 20px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Leather header */}
        <div style={{ borderRadius: 18, padding: '16px 16px 15px', position: 'relative', overflow: 'hidden', background: '#2A1A12', color: 'var(--dust-cream)' }}>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 100% at 25% 0%, #4A2E1E 0%, #2A1A12 55%, #1C110A 100%)' }}/>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, opacity: 0.5, backgroundImage: 'repeating-linear-gradient(115deg, rgba(255,225,190,0.05) 0 2px, transparent 2px 7px)' }}/>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 6, borderRadius: 13, border: '1.5px dashed rgba(242,140,27,0.4)', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <SheriffStar size={22}/>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, letterSpacing: '0.13em', textTransform: 'uppercase' }}>Trail Bounties</span>
              </div>
              <Pill bg="var(--brand-orange)" fg="#fff">{availableXP.toLocaleString()} XP up for grabs</Pill>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22, letterSpacing: '-0.01em', marginTop: 10 }}>{r?.name || 'This kitchen'} wants you famous.</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#C9B3A0', marginTop: 4, lineHeight: 1.45 }}>Post it, tag it, share it, gift it — every bounty pays XP and moves your Trail Pass.</div>
            {/* Stamp recap */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
              {Array.from({ length: trailTotal }).map((_, i) => (
                <div key={i} style={{ width: 22, height: 22, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: i < trailDone ? 'var(--sun-orange)' : 'rgba(245,239,231,0.12)', border: i < trailDone ? 'none' : '1.5px solid rgba(245,239,231,0.25)' }}>
                  {i < trailDone && <Ico.star c="#2A1A12" s={11}/>}
                </div>
              ))}
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: '#C9B3A0', marginLeft: 4 }}>{trailTotal - trailDone} rides to a free side</span>
            </div>
          </div>
        </div>

        {/* Bounty list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {bounties.map(b => {
            const isClaimed = claimed.has(b.id);
            const pct = (b.progress / b.total) * 100;
            return (
              <div key={b.id} data-lasso="bounty-row" style={{
                background: isClaimed ? 'rgba(46,139,78,0.07)' : 'var(--bg-surface)',
                border: '1.5px solid ' + (isClaimed ? 'rgba(46,139,78,0.3)' : b.claimable ? 'var(--brand-orange)' : 'var(--soft-line)'),
                borderRadius: 16, padding: 13, display: 'flex', gap: 12, alignItems: 'center',
                boxShadow: b.claimable && !isClaimed ? '0 6px 18px -6px rgba(216,90,20,0.35)' : 'none',
                transition: 'all 220ms var(--ease-out)',
              }}>
                <div style={{ width: 42, height: 42, borderRadius: 12, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: isClaimed ? 'rgba(46,139,78,0.12)' : 'var(--bg-warm)' }}>
                  {isClaimed ? <Ico.check c="var(--live-green)" s={20}/> : <BIcon name={b.icon} c="var(--brand-orange)" s={20}/>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'baseline' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13.5, color: 'var(--fg-primary)', textDecoration: isClaimed ? 'line-through' : 'none', opacity: isClaimed ? 0.6 : 1 }}>{b.title}</div>
                    <Pill bg={isClaimed ? 'rgba(46,139,78,0.14)' : 'var(--brand-orange)'} fg={isClaimed ? 'var(--live-green)' : '#fff'} style={{ fontSize: 10 }}>{isClaimed ? 'Roped in' : `+${b.xp} XP`}</Pill>
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)', marginTop: 2, lineHeight: 1.35 }}>{b.desc}</div>
                  {!isClaimed && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                      {b.total > 1 || b.progress > 0 ? (
                        <>
                          <div style={{ flex: 1, height: 5, borderRadius: 3, background: 'var(--soft-line)', overflow: 'hidden' }}><div style={{ height: '100%', width: `${pct}%`, background: 'var(--brand-orange)' }}/></div>
                          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, color: 'var(--warm-stone)' }}>{b.progress}/{b.total}</span>
                        </>
                      ) : (
                        <button onClick={() => app.toast(`${b.cta} — ${b.title}`, 'info')} style={{ background: 'var(--bg-warm)', color: 'var(--horse-brown)', border: 'none', padding: '6px 12px', borderRadius: 9, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, cursor: 'pointer' }}>{b.cta} →</button>
                      )}
                      {b.claimable && (
                        <button onClick={() => { setClaimed(s => new Set([...s, b.id])); app.toast(`+${b.xp} XP roped in`, 'success'); }} style={{
                          background: 'var(--brand-orange)', color: '#fff', border: 'none', padding: '7px 16px', borderRadius: 10,
                          fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 12, cursor: 'pointer', boxShadow: 'var(--shadow-orange)',
                        }}>Claim</button>
                      )}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
        <Button kind="accent" full size="lg" onClick={() => { onClose(); app.toast('Order placed bounties count automatically', 'info'); }}>Ride for the bounty</Button>
      </div>
    </BottomSheet>
  );
}

Object.assign(window, { RewardsScreen, BadgeSheet, GiftSheet, AddFriendSheet, VendorChallengesSheet, StreakCard, RIco });