// route-teasers.jsx — lightweight entry cards shared by the delivery shell.
//
// Keep previews here so Rewards can advertise game routes without importing
// either game implementation. In Next.js 16 this maps to shared server/client
// components while each game remains in its own lazy route segment.

function ShootoutRouteCard({ app }) {
  return (
    <div
      data-showdown-rewards-card=""
      data-shootout-rewards-card=""
      onClick={() => app.nav('showdowns')}
      style={{
        margin: '0 20px',
        borderRadius: 22,
        padding: 16,
        background: 'linear-gradient(135deg,#2A130B,#7A2416)',
        color: '#F5EFE7',
        border: '1.5px solid rgba(233,185,122,0.32)',
        cursor: 'pointer',
        boxShadow: '0 18px 38px rgba(27,18,13,0.18)',
      }}
    >
      <Eyebrow color="#E9B97A">Today’s Shootout</Eyebrow>
      <div style={{ marginTop: 8, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 21 }}>Burger King vs McDonald’s</div>
      <div style={{ marginTop: 6, fontFamily: 'var(--font-body)', fontSize: 12.5, color: '#D8C0A0', lineHeight: 1.4 }}>Make seven calls, earn XP, and unlock the Lucky Strike response after the Trail decides.</div>
      <div style={{ marginTop: 13, display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 12, color: '#F28C1B' }}>MAKE CALLS <Ico.arrow c="#F28C1B" s={14}/></div>
    </div>
  );
}

function LuckyStrikeRouteCard({ app }) {
  const joined = app.lsJoined;
  return (
    <div data-customer-lucky-strike="" onClick={() => app.openLuckyStrike('rewards')} style={{
      margin: '0 20px', borderRadius: 20, cursor: 'pointer', overflow: 'hidden',
      background: 'linear-gradient(150deg, #2A1B10, #1B120D)', color: 'var(--dust-cream)',
      border: '1.5px solid rgba(233,185,122,0.35)', boxShadow: 'var(--shadow-lg)', position: 'relative',
    }}>
      <div style={{ position: 'absolute', right: -18, top: -20, opacity: 0.16 }}><Bull size={120}/></div>
      <div style={{ padding: '16px 16px 15px', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 30, height: 30, borderRadius: 10, background: 'linear-gradient(135deg,#E9B97A,#D85A14)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Ico.star c="#fff" s={15}/>
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 15 }}>Lucky Strike</span>
          <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#E9B97A', border: '1px solid rgba(233,185,122,0.4)', borderRadius: 999, padding: '3px 8px' }}>
            {joined ? 'MVP live' : 'MVP preview'}
          </span>
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#B6A595', lineHeight: 1.5, marginTop: 9 }}>
          Spin live food drops from LASSO kitchens. Park wins, secure several, then wrangle the haul.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 11, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, color: 'var(--sun-orange)' }}>
          Open Lucky Strike <Ico.arrow c="var(--sun-orange)" s={14}/>
        </div>
      </div>
    </div>
  );
}

function TrailPointsWalletPanel({ app }) {
  return (
    <div data-trail-points-wallet="" style={{ margin: '0 20px', background: 'var(--bg-surface)', border: '1.5px solid var(--soft-line)', borderRadius: 20, overflow: 'hidden' }}>
      <div style={{ padding: '15px 16px 13px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ width: 40, height: 40, borderRadius: 13, background: 'var(--bg-warm)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Ico.wallet c="var(--brand-orange)" s={19}/>
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 19, color: 'var(--fg-primary)', lineHeight: 1 }}>{app.xp.toLocaleString()} Trail points</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--warm-stone)', marginTop: 3 }}>Earned from real orders &amp; challenges</div>
        </div>
      </div>
      <div data-trail-points-spend-store="" style={{ borderTop: '1.5px dashed var(--soft-line)', padding: '13px 16px 15px', background: 'var(--bg-app)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--fg-primary)' }}>Spend points in store</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#a86d12', background: 'rgba(224,153,42,0.14)', border: '1px solid rgba(224,153,42,0.3)', borderRadius: 999, padding: '2.5px 8px' }}>Coming soon</span>
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--warm-stone)', lineHeight: 1.55 }}>
          Soon you'll show a redeem code at the counter and knock points straight off your bill at participating kitchens. In-store redemption isn't switched on yet — your points are safe and keep stacking.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ShootoutRouteCard,
  LuckyStrikeRouteCard,
  TrailPointsWalletPanel,
});