/* ============================================================
Lima Android — device shell: status bar, app bar, bottom nav
============================================================ */
/* ---------- status bar (Lima tinted) ---------- */
function StatusBar({dark=false}){
const c = dark ? '#ffffff' : 'var(--ink)';
return (
);
}
/* ---------- top app bar ---------- */
function AppBar({variant='home', title, onBack, onBell, prov, onProv, scrolled}){
if(variant==='back'){
return
{title}
{onBell &&
;
}
// home variant: logo + bell
return
{prov &&
{prov}
}
;
}
const iconBtn={width:44,height:44,borderRadius:999,border:'none',background:'transparent',color:'var(--ink)',display:'grid',placeItems:'center',flex:'0 0 auto',cursor:'pointer'};
/* ---------- news ticker (compact, mobile) ---------- */
function NewsTickerM({go}){
const feeds=useNewsFeeds();
const trackRef=useRef(null);
const movers=D.market_prices.filter(m=>m.price_zmw_per_kg!=null).sort((a,b)=>Math.abs(b.change_pct)-Math.abs(a.change_pct)).slice(0,4);
const tag=t=>[{t}] ;
const items=[];
feeds.items.forEach((n,i)=>items.push({tag(n.tag)}{n.title} ));
D.news.slice(0,3).forEach((n,i)=>items.push({tag('KU-LIMA')}{n.title} ));
movers.forEach((m,i)=>{const col=m.trend==='up'?'#8fdcab':m.trend==='down'?'#f0a99e':'#cdd6e6';const ar=m.trend==='up'?'▲':m.trend==='down'?'▼':'▬';
items.push({tag('KU-LIMA')}{m.crop} {ZMW(m.price_zmw_per_kg,2)} /kg {ar} {m.change_pct>0?'+':''}{m.change_pct}% );});
const woven=[];items.forEach((it,i)=>{woven.push(it);woven.push(◆ );});
const track=[0,1].map(cp=>woven.map((n,i)=>React.cloneElement(n,{key:cp+'-'+i})));
const dur=useTickerSpeed(trackRef,35,[feeds.items.length]);
return go('news')} aria-label="Open farming news" className="tkm" style={{flex:'0 0 auto',display:'flex',alignItems:'center',height:32,width:'100%',border:'none',padding:0,background:'var(--green-d)',color:'#e3ede7',overflow:'hidden',textAlign:'left'}}>
NEWS
{track} ;
}
/* ---------- bottom navigation (Material 3) ---------- */
const NAV_ITEMS=[
{id:'home', label:'Grow', icon:'sprout'},
{id:'market', label:'Market', icon:'chart'},
{id:'weather',label:'Weather & Risk', icon:'cloud'},
];
function BottomNav({page, go}){
const cur = page==='report' ? 'home' : (page==='rain'||page==='elnino') ? 'weather' : page;
return
{NAV_ITEMS.map(it=>{
const on=cur===it.id;
return go(it.id)} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4,
border:'none',background:'transparent',cursor:'pointer',padding:'2px 0'}}>
{it.label}
;
})}
;
}
/* ---------- the device frame ---------- */
const LIMA_NATIVE = /[?&]native\b/.test(location.search) || window.LIMA_NATIVE || (window.innerWidth<600 && matchMedia('(pointer:coarse)').matches);
function Frame({children, statusDark}){
if(LIMA_NATIVE) return {children}
;
return (
{children}
);
}
/* ---------- scaling stage (fits any viewport, letterboxes) ---------- */
function DeviceStage({children}){
if(LIMA_NATIVE) return children;
const ref=useRef(null);
const [scale,setScale]=useState(1);
useEffect(()=>{
const fit=()=>{
const pad=40;
const sw=(window.innerWidth-pad)/412;
const sh=(window.innerHeight-pad)/892;
setScale(Math.min(1.05, Math.min(sw,sh)));
};
fit(); window.addEventListener('resize',fit); return ()=>window.removeEventListener('resize',fit);
},[]);
return ;
}
Object.assign(window, { LIMA_NATIVE, StatusBar, AppBar, BottomNav, NewsTickerM, Frame, DeviceStage, NAV_ITEMS, iconBtn });