// screens-rg.jsx — Group 5: Responsible Gambling (3 screens) const RG_TOOLS = [ { id:'deposit-limit', icon:'ph-arrow-down-left', title:'Deposit limits', desc:'Set daily, weekly, or monthly deposit caps', screen:'set-limit' }, { id:'loss-limit', icon:'ph-chart-line-down', title:'Loss limits', desc:'Stop losses at a set amount per period', screen:'set-limit' }, { id:'session', icon:'ph-clock', title:'Session time limit', desc:'Set a time limit per gambling session', screen:'set-limit' }, { id:'break', icon:'ph-coffee', title:'Take a break', desc:'Pause your account for 24 hrs to 6 weeks', screen:'set-limit' }, { id:'exclusion', icon:'ph-prohibit', title:'Self-exclusion', desc:'Exclude yourself for 6 months or longer', screen:'self-exclusion' }, { id:'reality', icon:'ph-bell', title:'Reality check', desc:"Pop-up reminders of how long you've played", screen:'set-limit' }, ]; /* ── Screen 17: RG Hub ── */ function RGHubScreen({ navigate, goBack }) { const last30 = { deposited: 420, netPosition: -87.50 }; return ( } />
{/* Limits summary */}
Your active limits
{RG_LIMITS.map(limit => (
{limit.label} =80?'var(--color-warning)':'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }}> {limit.unit === '€' ? `€${limit.value} / €${limit.max}` : `${limit.value} / ${limit.max} min`}
{limit.pct >= 80 && (
You're near your {limit.label.toLowerCase()}
)}
))}
{/* Tools list */}
Tools & settings
{RG_TOOLS.map((tool, i) => (
navigate(tool.screen)} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 16px', borderBottom:i
{tool.title}
{tool.desc}
))}
{/* Last 30 days */}
Last 30 days
Deposited
€{last30.deposited}
Net P&L
−€{Math.abs(last30.netPosition)}
{/* External support */}
Need support?
{[{name:'GamCare', url:'gamcare.org.uk', desc:'Free counselling & support'},{name:'BeGambleAware', url:'begambleaware.org', desc:'Information & advice'}].map(org => (
{org.name}
{org.desc}
))}
); } /* ── Screen 18: Set Limit ── */ function SetLimitScreen({ navigate, goBack }) { const [period, setPeriod] = React.useState('weekly'); const [limitVal, setLimitVal] = React.useState(500); const current = 320; const isIncrease = limitVal > 500; return (
{/* Current limit */}
Current {period} limit €500
€{current} used of €500 this week
{/* Period tabs */}
{['daily','weekly','monthly'].map(p => ( ))}
{/* Slider + input */}
€ setLimitVal(Number(e.target.value))} min={10} max={2000} style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-display)', fontWeight:700, fontSize:26, color:'var(--color-text-primary)', fontVariantNumeric:'tabular-nums' }} />
setLimitVal(Number(e.target.value))} style={{ width:'100%', accentColor:'var(--color-primary)', marginBottom:8, cursor:'pointer' }} />
€10 €2,000
{/* Regulatory info */} {isIncrease ? (
24-hour delay applies
Increases to deposit limits take effect after 24 hours — this is required by regulation to protect players.
) : (
Decreasing a limit takes effect immediately.
)}
); } /* ── Screen 19: Self-Exclusion ── */ function SelfExclusionScreen({ navigate, goBack }) { const [duration, setDuration] = React.useState(null); const [step, setStep] = React.useState(1); const durations = [ { id:'6m', label:'6 months', sub:'Until December 2025' }, { id:'1y', label:'1 year', sub:'Until June 2026' }, { id:'5y', label:'5 years', sub:'Until June 2030' }, { id:'permanent', label:'Permanent', sub:'Cannot be reversed' }, ]; return ( setStep(1):goBack} />
{step === 1 ? (
What self-exclusion means
{['Your account will be closed for the chosen period','You will not be able to log in, deposit, or bet','Any open bets will be settled and winnings returned','Contact us to return after your exclusion period ends'].map((p,i) => (
{p}
))}
Choose duration
{durations.map(d => (
setDuration(d.id)} style={{ display:'flex', alignItems:'center', gap:12, padding:'14px', borderRadius:12, background:'var(--color-surface)', border:`1.5px solid ${duration===d.id?'var(--color-text-primary)':'var(--color-border)'}`, cursor:'pointer', transition:'border-color 0.15s' }}>
{duration===d.id &&
}
{d.label}
{d.sub}
))}
{[{name:'GamCare', url:'gamcare.org.uk'},{name:'BeGambleAware', url:'begambleaware.org'}].map(org => (
{org.name} — {org.url}
))}
) : (

Are you sure?

You're about to exclude yourself for {durations.find(d=>d.id===duration)?.label}. This cannot be undone during the exclusion period.

)}
{step === 1 ? : }
); } Object.assign(window, { RGHubScreen, SetLimitScreen, SelfExclusionScreen });