/* ============================================================
   Lima Android — Crop Report screen
   ============================================================ */
function waterMode(water){
  if(water==='Rainfed') return 'rainfed';
  if(water==='Mixed') return 'mixed';
  return 'irrigated';
}
const yMid=(a,b)=>(a+b)/2;
function cropYield(c, mode){
  const rf=yMid(c.yield_rainfed_min,c.yield_rainfed_max);
  const ir=yMid(c.yield_irrigated_min,c.yield_irrigated_max);
  if(mode==='rainfed') return rf;
  if(mode==='irrigated') return ir;
  return yMid(rf,ir);
}
function parseMonths(str){
  const out=new Array(12).fill(0);
  if(!str) return out;
  if(/year-?round/i.test(str)) for(let i=0;i<12;i++) out[i]=1;
  const re=/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)/gi;
  const found=[]; let m;
  while((m=re.exec(str))) found.push(MONTHS.findIndex(x=>x.toLowerCase()===m[1].slice(0,3).toLowerCase()));
  for(let i=0;i+1<found.length;i+=2){
    let a=found[i], b=found[i+1]; if(a<0||b<0) continue;
    let j=a; out[j]=2; while(j!==b){ j=(j+1)%12; out[j]=2; }
  }
  if(found.length%2===1){ const a=found[found.length-1]; if(a>=0) out[a]=Math.max(out[a],2); }
  return out;
}

/* section header inside a card */
function CardHead({icon, title, accent='var(--green)', right}){
  return <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14}}>
    <span style={{color:accent}}><Icon name={icon} size={20}/></span>
    <h3 className="serif" style={{margin:0,fontSize:18,fontWeight:700}}>{title}</h3>
    {right && <div style={{marginLeft:'auto'}}>{right}</div>}
  </div>;
}

function ReportHeader({c, prov, water}){
  const provObj=D.provinces.find(p=>p.name===prov);
  const level=c.suitability[prov];
  const tona=water==='TONA System';
  return <div style={{padding:'2px 2px 0'}}>
    <Placeholder label={`${c.name} field photo`} h={120} style={{marginBottom:16}}/>
    <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
      <span style={{display:'inline-flex',alignItems:'center',gap:7,color:'var(--green)',fontWeight:800,fontSize:11.5,letterSpacing:'.1em',textTransform:'uppercase'}}><span style={{width:16,height:2,background:'var(--gold)',borderRadius:2}}></span>Field report</span>
      <LiveDot/>
    </div>
    <div style={{display:'flex',alignItems:'center',gap:14}}>
      <span style={{fontSize:52,lineHeight:1}}>{c.emoji}</span>
      <div style={{minWidth:0}}>
        <h1 className="serif" style={{margin:0,fontSize:30,fontWeight:800,letterSpacing:'-.02em',lineHeight:1.02}}>{c.name}</h1>
        <div className="mono" style={{fontSize:12.5,color:'var(--ink-soft)',marginTop:5}}>{(()=>{const ln=localName(c,prov);return ln?<span>{ln.name} <span style={{color:'var(--ink-faint)'}}>({ln.lang})</span> · </span>:null;})()}{cap(c.category)}</div>
      </div>
    </div>
    <div style={{marginTop:14,display:'flex',gap:8,flexWrap:'wrap',alignItems:'center'}}>
      <SuitBadge level={level} size="lg"/>
      <Pill tone="navy"><Icon name="pin" size={14}/> {prov} · Zone {provObj.agro_zone}</Pill>
      <Pill tone={tona?'gold':'green'}>{tona?<Icon name="bolt" size={13}/>:<Icon name="drop" size={13}/>}{water}</Pill>
    </div>
    <p style={{margin:'15px 0 0',fontSize:14.5,color:'var(--ink-soft)',lineHeight:1.6}}>{c.notes}</p>
    {tona && <div style={{marginTop:14,background:'linear-gradient(135deg,#fbeec6,#f3dd9c)',border:'1px solid var(--gold)',borderRadius:16,padding:'14px 16px',display:'flex',gap:12,alignItems:'flex-start'}}>
      <span style={{width:38,height:38,borderRadius:11,background:'var(--gold)',color:'#fff',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="bolt" size={20}/></span>
      <div>
        <div className="serif" style={{fontWeight:800,color:'var(--gold-d)',fontSize:15}}>TONA System active</div>
        <div style={{fontSize:12.5,color:'#7a5e15',marginTop:4,lineHeight:1.5}}>Irrigated figures shown below · Chishango 48-hour repair guarantee · free Ku-Lima advisory.</div>
      </div>
    </div>}
  </div>;
}

function YieldCard({c, water}){
  const mode=waterMode(water);
  const rf=yMid(c.yield_rainfed_min,c.yield_rainfed_max);
  const ir=yMid(c.yield_irrigated_min,c.yield_irrigated_max);
  const gain=Math.round((ir/rf-1)*100);
  const max=Math.max(rf,ir);
  const tona=water==='TONA System';
  const Col=({label,val,range,active,gold})=>(
    <div style={{flex:1,padding:'15px 14px',borderRadius:15,position:'relative',
      border:'1.5px solid '+(active?(gold?'var(--gold)':'var(--green)'):'var(--line)'),
      background:active?(gold?'rgba(201,151,43,.07)':'rgba(46,125,79,.05)'):'var(--cream)'}}>
      {active && <span style={{position:'absolute',top:-9,left:12,fontSize:9.5,fontWeight:800,letterSpacing:'.05em',textTransform:'uppercase',background:gold?'var(--gold)':'var(--green)',color:'#fff',padding:'2px 8px',borderRadius:6}}>You</span>}
      <div style={{display:'flex',alignItems:'center',gap:6,color:'var(--ink-soft)',fontSize:12.5,fontWeight:700}}><Icon name={gold?'bolt':label.includes('Rain')?'rain':'droplets'} size={15}/>{label}</div>
      <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:9}}>
        <span className="serif" style={{fontSize:30,fontWeight:800,color:gold?'var(--gold-d)':'var(--green-d)'}}>{val.toFixed(1)}</span>
        <span style={{fontSize:12.5,color:'var(--ink-soft)',fontWeight:600}}>t/ha</span>
      </div>
      <div style={{marginTop:9,height:7,borderRadius:9,background:'var(--cream-2)',overflow:'hidden'}}>
        <div style={{height:'100%',width:(val/max*100)+'%',background:gold?'linear-gradient(90deg,var(--gold),var(--gold-l))':'linear-gradient(90deg,var(--green),var(--green-l))',borderRadius:9}}></div>
      </div>
      <div className="mono" style={{marginTop:7,fontSize:10.5,color:'var(--ink-faint)'}}>{range}</div>
    </div>
  );
  return <MCard>
    <CardHead icon="chart" title="Yield comparison" right={<Pill tone="green"><Icon name="arrowUp" size={13} sw={2.4}/>+{gain}%</Pill>}/>
    <div style={{display:'flex',gap:11}}>
      <Col label="Rain-fed" val={rf} range={`${c.yield_rainfed_min}–${c.yield_rainfed_max} t/ha`} active={mode==='rainfed'}/>
      <Col label={tona?'TONA':'Irrigated'} val={ir} range={`${c.yield_irrigated_min}–${c.yield_irrigated_max} t/ha`} active={mode!=='rainfed'} gold={tona}/>
    </div>
    <p style={{margin:'13px 0 0',fontSize:12.5,color:'var(--ink-soft)',lineHeight:1.5}}>Irrigating this crop can raise output by about <strong>{gain}%</strong> in the same season.</p>
  </MCard>;
}

function EconCard({c, water}){
  const mode=waterMode(water);
  const y=cropYield(c,mode);
  const hasPrice=c.market_price_zmw_per_kg!=null;
  const revenue=hasPrice?y*1000*c.market_price_zmw_per_kg:null;
  const costMid=yMid(c.input_cost_zmw_min,c.input_cost_zmw_max);
  const verified=!!c.verified_margin && hasPrice;
  const net=verified?revenue-costMid:null;
  const mp=D.market_prices.find(m=>m.crop===c.name);
  const Stat=({label,val,sub,tone,icon})=>(
    <div style={{padding:'13px 14px',borderRadius:13,background:'var(--cream)',border:'1px solid var(--line)'}}>
      <div style={{display:'flex',alignItems:'center',gap:6,color:'var(--ink-soft)',fontSize:11.5,fontWeight:700}}><Icon name={icon} size={14}/>{label}</div>
      <div className="serif" style={{fontSize:20,fontWeight:800,marginTop:6,color:tone}}>{val}</div>
      <div style={{fontSize:11,color:'var(--ink-faint)',marginTop:2}}>{sub}</div>
    </div>
  );
  return <MCard>
    <CardHead icon="coins" title="Economics" accent="var(--gold-d)" right={<Pill tone="gold">per ha</Pill>}/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:9}}>
      <Stat label="Inputs" val={ZMW(costMid)} sub="seed + fertiliser" tone="var(--clay)" icon="coins"/>
      <Stat label="Price/kg" val={hasPrice?ZMW(c.market_price_zmw_per_kg,2):'—'} sub={hasPrice?'Feb 2025':'No official price'} tone="var(--ink)" icon="chart"/>
      <Stat label="Revenue" val={hasPrice?ZMW(revenue):'—'} sub={`${y.toFixed(1)} t/ha`} tone="var(--green-d)" icon="leaf"/>
    </div>
    {verified ? <div style={{marginTop:13,padding:'15px 16px',borderRadius:14,
      background:net>0?'linear-gradient(135deg,rgba(46,125,79,.1),rgba(46,125,79,.04))':'rgba(178,58,46,.07)',
      border:'1px solid '+(net>0?'rgba(46,125,79,.25)':'rgba(178,58,46,.25)')}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12}}>
        <div style={{fontSize:12.5,fontWeight:700,color:'var(--ink-soft)',lineHeight:1.3}}>Gross margin / ha<br/><span style={{fontWeight:600,color:'var(--ink-faint)'}}>after seed and fertiliser only</span></div>
        <div className="serif" style={{fontSize:30,fontWeight:800,color:net>0?'var(--green-d)':'var(--clay)'}}>{ZMW(net)}</div>
      </div>
      <div style={{marginTop:9,fontSize:11.5,color:'var(--ink-soft)',lineHeight:1.45}}><strong>Not included:</strong> labour, chemicals, transport, land, finance.</div>
    </div>
    : <div style={{marginTop:13,padding:'13px 16px',borderRadius:14,border:'1px dashed var(--line-d)',background:'var(--cream)',fontSize:13,color:'var(--ink-soft)',display:'flex',gap:9,alignItems:'center'}}><Icon name="shield" size={17} style={{color:'var(--ink-faint)',flex:'0 0 auto'}}/>Cost data not yet verified for this crop — no margin shown.</div>}
    {mp&&mp.retail && <p style={{margin:'10px 2px 0',fontSize:11.5,color:'var(--ink-soft)',lineHeight:1.45}}>Retail price, Aug 2026 (ZamStats): <strong>{ZMW(mp.retail.price,2)}</strong> per {mp.retail.unit}, {mp.retail.change_pct>0?'+':''}{mp.retail.change_pct}% vs Jul.</p>}
    {hasPrice && <p style={{margin:'8px 2px 0',fontSize:11,color:'var(--ink-faint)',lineHeight:1.45}}>Farm-gate price: Ministry of Agriculture national average as at 28 Feb 2025 — may be out of date.</p>}
  </MCard>;
}

function VarietiesCard({c}){
  const Fact=({icon,label,val})=>(
    <div style={{display:'flex',gap:9,alignItems:'flex-start'}}>
      <span style={{color:'var(--green)',flex:'0 0 auto',marginTop:1}}><Icon name={icon} size={16}/></span>
      <div><div style={{fontSize:10.5,fontWeight:800,color:'var(--ink-faint)',textTransform:'uppercase',letterSpacing:'.04em'}}>{label}</div>
      <div style={{color:'var(--ink)',marginTop:2,fontSize:13}}>{val}</div></div>
    </div>
  );
  return <MCard>
    <CardHead icon="seedling" title="Recommended varieties"/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:9}}>
      {c.varieties.map((v,i)=>{
        const m=v.match(/^(.*?)\s*\((.*)\)$/);
        return <div key={i} style={{padding:'11px 13px',borderRadius:12,border:'1px solid var(--line)',background:'var(--cream)',display:'flex',alignItems:'center',gap:10}}>
          <span className="mono" style={{width:26,height:26,borderRadius:8,background:'rgba(46,125,79,.12)',color:'var(--green)',display:'grid',placeItems:'center',flex:'0 0 auto',fontWeight:700,fontSize:12}}>{i+1}</span>
          <div style={{minWidth:0}}><div style={{fontWeight:700,fontSize:13.5,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{m?m[1]:v}</div>{m && <div className="mono" style={{fontSize:10.5,color:'var(--ink-faint)',marginTop:1}}>{m[2]}</div>}</div>
        </div>;
      })}
    </div>
    <div style={{marginTop:16,display:'grid',gridTemplateColumns:'1fr 1fr',gap:13}}>
      <Fact icon="map" label="Soil" val={c.soil}/>
      <Fact icon="drop" label="Water need" val={c.water_req}/>
      <Fact icon="sun" label="Optimal temp" val={`${c.temp_opt_min}–${c.temp_opt_max}°C`}/>
      <Fact icon="calendar" label="Duration" val={`${c.duration_min}–${c.duration_max} days`}/>
      <Fact icon="droplets" label="Soil pH" val={`${c.ph_min}–${c.ph_max}`}/>
    </div>
  </MCard>;
}

function CalendarCard({c}){
  const plant=parseMonths(c.planting_window);
  const harvest=parseMonths(c.harvest_window);
  const Row=({label,data,color,light})=>(
    <div style={{display:'flex',alignItems:'center',gap:9,marginBottom:8}}>
      <span style={{width:48,flex:'0 0 auto',fontSize:11.5,fontWeight:700,color:'var(--ink-soft)'}}>{label}</span>
      <div style={{display:'grid',gridTemplateColumns:'repeat(12,1fr)',gap:3,flex:1}}>
        {MONTHS.map((mo,i)=>(<div key={i} style={{height:26,borderRadius:6,display:'grid',placeItems:'center',fontSize:9.5,fontWeight:700,
          background:data[i]===2?color:data[i]===1?light:'var(--cream-2)',color:data[i]?'#fff':'var(--ink-faint)'}}>{mo[0]}</div>))}
      </div>
    </div>
  );
  return <MCard>
    <CardHead icon="calendar" title="Planting calendar"/>
    <Row label="Plant" data={plant} color="var(--green)" light="rgba(46,125,79,.3)"/>
    <Row label="Harvest" data={harvest} color="var(--gold)" light="rgba(201,151,43,.3)"/>
    <div style={{marginTop:14,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
      <div style={{padding:'11px 13px',borderRadius:12,background:'var(--cream)',border:'1px solid var(--line)'}}>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10.5,fontWeight:800,color:'var(--ink-faint)',textTransform:'uppercase',letterSpacing:'.04em'}}><Icon name="seedling" size={13}/>Planting</div>
        <div style={{marginTop:5,fontSize:12.5,color:'var(--ink)',lineHeight:1.4}}>{c.planting_window}</div>
      </div>
      <div style={{padding:'11px 13px',borderRadius:12,background:'var(--cream)',border:'1px solid var(--line)'}}>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10.5,fontWeight:800,color:'var(--ink-faint)',textTransform:'uppercase',letterSpacing:'.04em'}}><Icon name="leaf" size={13}/>Harvest</div>
        <div style={{marginTop:5,fontSize:12.5,color:'var(--ink)',lineHeight:1.4}}>{c.harvest_window}</div>
      </div>
    </div>
  </MCard>;
}

function WeatherStripCard({prov, go}){
  const w=D.weather_by_province[prov];
  const condIcon={['Sunny']:'sun','Partly cloudy':'cloud','Cloudy':'cloud','Overcast':'cloud','Light showers':'rain','Heavy showers':'rain'}[w.condition]||'cloud';
  const Mini=({icon,label,val})=>(<div><div style={{display:'flex',alignItems:'center',gap:5,fontSize:11,color:'var(--ink-faint)',fontWeight:700}}><Icon name={icon} size={13}/>{label}</div><div className="serif" style={{fontSize:17,fontWeight:700,marginTop:3}}>{val}</div></div>);
  return <MCard>
    <CardHead icon="cloud" title={`Weather · ${prov}`} accent="var(--navy)" right={<button onClick={()=>go('weather')} style={{background:'none',border:'none',color:'var(--green)',fontWeight:700,fontSize:12.5,display:'inline-flex',alignItems:'center',gap:3}}>Full<Icon name="chev" size={14} style={{transform:'rotate(-90deg)'}}/></button>}/>
    <div style={{display:'flex',alignItems:'center',gap:14}}>
      <span style={{width:52,height:52,borderRadius:14,background:'rgba(27,58,107,.08)',color:'var(--navy)',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name={condIcon} size={28}/></span>
      <div style={{flex:'0 0 auto'}}><div className="serif" style={{fontSize:30,fontWeight:800,lineHeight:1}}>{w.temp_c}°C</div><div style={{fontSize:12,color:'var(--ink-soft)'}}>{w.condition}</div></div>
      <div style={{marginLeft:'auto',display:'flex',gap:16}}>
        <Mini icon="droplets" label="Humid" val={`${w.humidity}%`}/>
        <Mini icon="rain" label="Rain 7d" val={`${w.rain_7day_mm}mm`}/>
      </div>
    </div>
    <div style={{marginTop:13,padding:'12px 14px',borderRadius:12,background:'rgba(27,58,107,.05)',border:'1px solid rgba(27,58,107,.13)',fontSize:12.5,color:'var(--navy)',lineHeight:1.5,display:'flex',gap:9}}>
      <Icon name="cloud" size={16} style={{flex:'0 0 auto',marginTop:1}}/><div><strong>ZMD:</strong> {w.advisory}</div>
    </div>
  </MCard>;
}

function PestCard({c}){
  const pests=D.pests.filter(p=>c.pests.includes(p.name) || p.crops.includes(c.name));
  const known=pests.map(p=>p.name);
  const extra=c.pests.filter(n=>!known.includes(n));
  const sevMap={critical:{c:'var(--clay)',bg:'rgba(178,58,46,.07)',bd:'rgba(178,58,46,.3)',t:'Critical'},warning:{c:'var(--gold-d)',bg:'rgba(201,151,43,.08)',bd:'rgba(201,151,43,.35)',t:'Warning'}};
  return <MCard>
    <CardHead icon="bug" title="Pest & disease risk" accent="var(--clay)" right={<Pill tone="neutral">{pests.length+extra.length}</Pill>}/>
    <div style={{display:'flex',flexDirection:'column',gap:11}}>
      {pests.map(p=>{
        const s=sevMap[p.severity]||sevMap.warning;
        return <div key={p.id} style={{border:'1px solid '+s.bd,background:s.bg,borderRadius:14,padding:'13px 14px'}}>
          <div style={{display:'flex',alignItems:'center',gap:9}}>
            <span style={{width:30,height:30,borderRadius:9,background:s.c,color:'#fff',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="bug" size={16}/></span>
            <span style={{fontWeight:700,fontSize:14.5,flex:1}}>{p.name}</span>
            <span style={{fontSize:9.5,fontWeight:800,textTransform:'uppercase',letterSpacing:'.05em',color:s.c,border:'1.5px solid '+s.bd,padding:'2px 7px',borderRadius:6}}>{s.t}</span>
          </div>
          <div style={{marginTop:9,fontSize:12.5,color:'var(--ink-soft)',lineHeight:1.5}}><strong style={{color:'var(--ink)'}}>Signs:</strong> {p.symptoms}</div>
          <div style={{marginTop:6,fontSize:12.5,color:'var(--ink-soft)',lineHeight:1.5}}><strong style={{color:'var(--green-d)'}}>Treat:</strong> {p.treatment}</div>
          <div style={{marginTop:9,display:'flex',gap:5,flexWrap:'wrap'}}>{p.peak_months.map(mn=><span key={mn} className="mono" style={{fontSize:9.5,padding:'2px 6px',borderRadius:5,background:'rgba(0,0,0,.05)',color:s.c,fontWeight:700}}>{MONTHS[mn-1]}</span>)}</div>
        </div>;
      })}
      {extra.map((n,i)=>(<div key={'x'+i} style={{border:'1px dashed var(--line-d)',borderRadius:14,padding:'13px 14px',background:'var(--cream)'}}>
        <div style={{display:'flex',alignItems:'center',gap:9}}><span style={{width:30,height:30,borderRadius:9,background:'var(--ink-faint)',color:'#fff',display:'grid',placeItems:'center'}}><Icon name="bug" size={16}/></span><span style={{fontWeight:700,fontSize:14.5}}>{n}</span></div>
        <div style={{marginTop:8,fontSize:12.5,color:'var(--ink-faint)'}}>Monitor regularly. Detailed guidance coming soon to Ku-Lima.</div>
      </div>))}
    </div>
  </MCard>;
}

function TimelineCard({c}){
  const tasks=D.planting_calendar_tasks[c.name];
  if(!tasks) return <MCard>
    <CardHead icon="calendar" title="Weekly task timeline"/>
    <div style={{display:'flex',gap:11,color:'var(--ink-soft)',fontSize:13.5,lineHeight:1.6}}>
      <Icon name="calendar" size={18} style={{flex:'0 0 auto',color:'var(--green)',marginTop:2}}/>
      <div>A week-by-week plan for <strong>{c.name}</strong> is being prepared. This is a <strong>{c.duration_min}–{c.duration_max} day</strong> crop — plant in <strong>{c.planting_window}</strong>, harvest around <strong>{c.harvest_window}</strong>.</div>
    </div>
  </MCard>;
  return <MCard>
    <CardHead icon="calendar" title="Weekly task timeline" right={<Pill tone="green">{tasks.length} stages</Pill>}/>
    <div style={{position:'relative',paddingLeft:2}}>
      <div style={{position:'absolute',left:22,top:6,bottom:6,width:2,background:'var(--line)'}}></div>
      <div style={{display:'flex',flexDirection:'column',gap:2}}>
        {tasks.map((t,i)=>(<div key={i} style={{display:'flex',gap:13,position:'relative',padding:'8px 0'}}>
          <span className="mono" style={{flex:'0 0 44px',width:44,height:44,borderRadius:12,background:'var(--paper)',border:'2px solid var(--green)',color:'var(--green-d)',display:'grid',placeItems:'center',fontWeight:800,fontSize:11,zIndex:1}}>W{t.week}</span>
          <div style={{flex:1,paddingTop:2}}><div style={{fontWeight:700,fontSize:14}}>{t.title}</div><div style={{fontSize:12.5,color:'var(--ink-soft)',marginTop:3,lineHeight:1.5}}>{t.desc}</div></div>
        </div>))}
      </div>
    </div>
  </MCard>;
}

function ReportScreen({crop, prov, water, go, onSms}){
  const c=cropByName(crop);
  if(!c) return null;
  return <div className="screen-pad">
    <ReportHeader c={c} prov={prov} water={water}/>
    <div style={{marginTop:18,display:'flex',flexDirection:'column',gap:14}}>
      <RainBanner prov={prov} go={go}/>
      <YieldCard c={c} water={water}/>
      <EconCard c={c} water={water}/>
      <VarietiesCard c={c}/>
      <CalendarCard c={c}/>
      <WeatherStripCard prov={prov} go={go}/>
      <PestCard c={c}/>
      <TimelineCard c={c}/>
      <div style={{borderRadius:20,padding:'20px',color:'#fff',background:'linear-gradient(135deg,var(--green),var(--green-d))',position:'relative',overflow:'hidden'}}>
        <div style={{position:'absolute',top:-30,right:-20,width:120,height:120,borderRadius:'50%',background:'radial-gradient(circle,rgba(201,151,43,.3),transparent 70%)'}}></div>
        <div style={{position:'relative'}}>
          <h3 className="serif" style={{margin:0,fontSize:19,fontWeight:800}}>Get {c.name} alerts</h3>
          <p style={{margin:'6px 0 14px',fontSize:13.5,color:'#cfe3d6',lineHeight:1.5}}>Price moves, weather warnings & pest outbreaks for {prov} — by free SMS.</p>
          <MButton tone="gold" onClick={onSms}><Icon name="phone" size={17}/> Sign up for SMS alerts</MButton>
        </div>
      </div>
    </div>
  </div>;
}

Object.assign(window, { ReportScreen });