/* ============================================================
   Lima Android — El Niño Advisory (static content) + Weather & Risk tabs
   ============================================================ */
const ELNINO={
  title:'El Niño Advisory — Zambia 2026/27',
  status:'ACTIVE',
  summary:'Delayed and below-average rainfall expected from October 2026.',
  lean:'December 2026 – January 2027',
  high:[['Southern',['Choma','Namwala','Itezhi-Tezhi','Gwembe']],['Western',['Sesheke','Kalabo']],['Central',['Mumbwa','Chibombo']]],
  minimal:['Northern','Luapula','North-Western','Copperbelt'],
  actions:[
    ['seedling','Plant drought-tolerant varieties','SC403, MH26'],
    ['calendar','Time your planting','Mid-November to mid-December, after the first 20 mm of cumulative rain'],
    ['leaf','Southern & Western provinces','Consider sorghum or groundnuts as lower-risk alternatives'],
    ['droplets','Store water','For dry spells during grain fill (February–March)'],
  ],
  source:'FEWS NET Zambia Food Security Outlook, August 2026',
};
const WX_TABS=[['weather','Forecast'],['rain','Flood / Drought'],['elnino','El Niño']];
function WxTabs({page, go}){
  return <div role="tablist" aria-label="Weather & Risk" style={{flex:'0 0 auto',display:'flex',gap:6,padding:'8px 12px',background:'var(--cream)',borderBottom:'1px solid var(--line)'}}>
    {WX_TABS.map(([id,l])=>{const on=page===id;return <button key={id} role="tab" aria-selected={on} onClick={()=>go(id)} style={{flex:1,minHeight:44,borderRadius:999,border:'1.5px solid '+(on?'var(--green)':'var(--line-d)'),background:on?'var(--green)':'var(--paper)',color:on?'#fff':'var(--ink-soft)',fontWeight:700,fontSize:13,padding:'0 6px'}}>{l}</button>;})}
  </div>;
}
function ElninoScreen(){
  return <div className="screen-pad">
    <div style={{padding:'2px 2px 0'}}>
      <div style={{display:'inline-flex',alignItems:'center',gap:7,color:'var(--green)',fontWeight:800,fontSize:11.5,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:8}}><span style={{width:16,height:2,background:'var(--gold)',borderRadius:2}}></span>El Niño Advisory</div>
      <h1 className="serif" style={{margin:0,fontSize:25,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.1}}>{ELNINO.title}</h1>
      <div style={{marginTop:10}}><span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'5px 11px',borderRadius:999,background:'var(--clay)',color:'#fff',fontSize:11.5,fontWeight:800,letterSpacing:'.1em'}}><span style={{width:7,height:7,borderRadius:99,background:'#fff'}}></span>{ELNINO.status}</span></div>
    </div>
    <MCard style={{marginTop:14}}>
      <p style={{margin:0,fontSize:16,lineHeight:1.5,fontWeight:600}}>{ELNINO.summary}</p>
      <div style={{marginTop:12,display:'flex',alignItems:'flex-start',gap:9,padding:'11px 13px',borderRadius:12,background:'rgba(201,151,43,.14)',fontSize:14,lineHeight:1.4}}>
        <Icon name="calendar" size={18} style={{color:'var(--gold-d)',flex:'0 0 auto',marginTop:1}}/><span>Lean season peak:<br/><strong>{ELNINO.lean}</strong></span>
      </div>
    </MCard>
    <MCard style={{marginTop:12,border:'1px solid rgba(178,58,46,.3)'}}>
      <h3 className="serif" style={{margin:'0 0 12px',fontSize:18,fontWeight:800,display:'flex',alignItems:'center',gap:8}}><Icon name="sun" size={20} style={{color:'var(--clay)'}}/>Highest risk</h3>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {ELNINO.high.map(([p,ds])=><div key={p}>
          <div style={{fontSize:11.5,fontWeight:800,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--ink-soft)',marginBottom:6}}>{p}</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>{ds.map(d=><span key={d} style={{padding:'6px 11px',borderRadius:999,background:'rgba(178,58,46,.09)',color:'var(--clay)',fontWeight:700,fontSize:14}}>{d}</span>)}</div>
        </div>)}
      </div>
    </MCard>
    <MCard style={{marginTop:12}}>
      <h3 className="serif" style={{margin:'0 0 12px',fontSize:18,fontWeight:800,display:'flex',alignItems:'center',gap:8}}><Icon name="shield" size={20} style={{color:'var(--green)'}}/>Minimal risk</h3>
      <div style={{display:'flex',flexWrap:'wrap',gap:6}}>{ELNINO.minimal.map(p=><span key={p} style={{padding:'6px 11px',borderRadius:999,background:'rgba(46,125,79,.1)',color:'var(--green-d)',fontWeight:700,fontSize:14}}>{p}</span>)}</div>
    </MCard>
    <div style={{marginTop:20,padding:'0 2px 10px'}}><h3 className="serif" style={{margin:0,fontSize:18,fontWeight:800}}>What to do</h3></div>
    <div style={{display:'flex',flexDirection:'column',gap:10}}>
      {ELNINO.actions.map(([ic,t,d],i)=><div key={i} style={{display:'flex',gap:13,alignItems:'flex-start',padding:'14px 15px',borderRadius:16,background:'var(--paper)',border:'1px solid var(--line)'}}>
        <span style={{width:40,height:40,borderRadius:11,background:'rgba(46,125,79,.12)',color:'var(--green-d)',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name={ic} size={20}/></span>
        <div><div style={{fontWeight:700,fontSize:15}}>{t}</div><div style={{fontSize:14,color:'var(--ink-soft)',marginTop:3,lineHeight:1.45}}>{d}</div></div>
      </div>)}
    </div>
    <p style={{margin:'16px 2px 0',fontSize:12,color:'var(--ink-soft)',lineHeight:1.5}}><strong>Source:</strong> {ELNINO.source}.</p>
  </div>;
}
Object.assign(window,{ElninoScreen,WxTabs});