function CookstovesApp() {
  // Top-level tabs: today | map | scan | qa | profile
  // Today sub-screens: household | photo | survey | sync
  const [tab, setTab] = React.useState('today');
  const [screen, setScreen] = React.useState('queue');
  const [hhId, setHhId] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const goto = (s, id) => { if (id) setHhId(id); setScreen(s); };
  const flash = (t) => { setToast(t); setTimeout(()=>setToast(null), 1800); };
  const switchTab = (next) => {
    setTab(next);
    if (next==='today') setScreen('queue');
    else setScreen(next);
  };
  const backFromSub = () => {
    if (screen==='household') { setScreen('queue'); setHhId(null); }
    else setScreen('household');
  };
  return (
    <div style={{height:'100%',display:'flex',flexDirection:'column',background:'#F6F8F7',fontFamily:"'Satoshi', system-ui, sans-serif",color:'#022C28',position:'relative'}}>
      <FAHeader screen={screen} tab={tab} onBack={backFromSub} hhId={hhId}/>
      <div style={{flex:1,overflowY:'auto'}}>
        {screen==='queue'    && <TodayQueue onOpen={(id)=>goto('household', id)}/>}
        {screen==='household'&& <HouseholdCard hhId={hhId} onTask={(t)=>goto(t, hhId)}/>}
        {screen==='photo'    && <KitchenPhoto onDone={()=>{flash('Kitchen photo saved · GPS auto-attached'); goto('household', hhId);}}/>}
        {screen==='survey'   && <CookInterview onDone={()=>{flash('Interview saved · 1 item left'); goto('household', hhId);}}/>}
        {screen==='sync'     && <SyncStatus onClose={()=>goto('household', hhId)}/>}
        {screen==='map'      && <RouteMap onOpen={(id)=>{setTab('today'); goto('household', id);}}/>}
        {screen==='scan'     && <ScanScreen onScan={(label)=>flash(label+' · captured')}/>}
        {screen==='qa'       && <QAScreen/>}
        {screen==='profile'  && <ProfileScreen onSync={()=>flash('Sync queued · waiting for Wi-Fi')}/>}
      </div>
      <FANav active={tab} onNav={switchTab}/>
      {toast && <div style={{position:'absolute',left:16,right:16,bottom:84,background:'#022C28',color:'#fff',padding:'12px 16px',borderRadius:10,fontSize:14,fontWeight:600,boxShadow:'0 8px 24px rgba(2,44,40,0.3)',display:'flex',alignItems:'center',gap:10}}><span style={{width:8,height:8,borderRadius:'50%',background:'#2BC48A'}}/>{toast}</div>}
    </div>
  );
}

// ---------- HEADER ----------
function FAHeader({ screen, tab, onBack, hhId }) {
  const titles = { queue:'Today', household: hhId||'Household', photo:'Kitchen photo', survey:'Primary cook', sync:'Sync status', map:'Route', scan:'Scan device', qa:'My QA', profile:'Joseph M.' };
  const eyebrows = { queue:'Joseph M. · Rwamagana', household:'Pamoja dMRV', photo:'Pamoja dMRV', survey:'Pamoja dMRV', sync:'Pamoja dMRV', map:'Joseph M. · 6 households', scan:'NFC · QR · Bluetooth', qa:'This monitoring period', profile:'Field agent · since Jan 2024' };
  const subTabs = ['household','photo','survey','sync'];
  const showBack = subTabs.includes(screen);
  return (
    <div style={{background:'#022C28',color:'#fff',padding:'14px 18px',display:'flex',alignItems:'center',gap:12}}>
      {showBack
        ? <button onClick={onBack} style={{background:'none',border:'none',color:'#fff',padding:6,marginLeft:-6,cursor:'pointer'}} aria-label="Back"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></button>
        : <div style={{width:30,height:30,borderRadius:'50%',background:'#F4C300',color:'#022C28',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:900,fontSize:13}}>JM</div>}
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:11,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:'rgba(255,255,255,0.6)'}}>{eyebrows[screen]||'Pamoja dMRV'}</div>
        <div style={{fontSize:18,fontWeight:900,letterSpacing:'-0.01em',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{titles[screen]}</div>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:6,fontSize:10,fontWeight:700,color:'rgba(255,255,255,0.7)',fontFamily:"'JetBrains Mono', monospace"}}>
        <span style={{width:7,height:7,borderRadius:'50%',background:'#F59E0B'}}/>Offline
      </div>
    </div>
  );
}

// ---------- TODAY QUEUE ----------
const HOUSEHOLDS = [
  { id:'HH-0142', name:'Mukamana, A.', village:'Rwamagana · Kabare cell', status:'critical', missing:2, due:'Today',     stove:'M5 Metered',   distance:'0.4 km' },
  { id:'HH-0157', name:'Uwimana, J.',  village:'Rwamagana · Kabare cell', status:'partial',  missing:1, due:'Today',     stove:'M5 Metered',   distance:'0.7 km' },
  { id:'HH-0164', name:'Habimana, P.', village:'Rwamagana · Karenge',     status:'ready',    missing:0, due:'Today',     stove:'M5 Metered',   distance:'1.1 km' },
  { id:'HH-0178', name:'Nshuti, C.',   village:'Rwamagana · Karenge',     status:'critical', missing:3, due:'Tomorrow',   stove:'TPDDTEC',      distance:'1.3 km' },
  { id:'HH-0191', name:'Murekatete, L.',village:'Rwamagana · Nzige',      status:'partial',  missing:1, due:'Tomorrow',   stove:'M5 Metered',   distance:'2.0 km' },
  { id:'HH-0204', name:'Kagabo, F.',   village:'Rwamagana · Nzige',       status:'callback', missing:1, due:'Callback',   stove:'TPDDTEC',      distance:'2.4 km' },
];

function TodayQueue({ onOpen }) {
  const counts = HOUSEHOLDS.reduce((a,h)=>{a[h.status]=(a[h.status]||0)+1; return a;},{});
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      {/* Copilot banner */}
      <div style={{background:'#022C28',color:'#fff',borderRadius:12,padding:'14px 16px',display:'flex',gap:12,alignItems:'flex-start'}}>
        <div style={{width:36,height:36,borderRadius:8,background:'#F4C300',color:'#022C28',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
        </div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',textTransform:'uppercase',color:'#F4C300',fontFamily:"'JetBrains Mono', monospace"}}>Compliance copilot</div>
          <div style={{fontSize:14,fontWeight:700,marginTop:4,lineHeight:1.35}}>Callback quota: <b style={{color:'#F4C300'}}>3 of 7</b> done this period. 4 more callbacks needed before Friday to keep TPDDTEC tier.</div>
        </div>
      </div>

      {/* KPI strip */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
        <KPI label="Critical" value={counts.critical||0} color="#DC2626"/>
        <KPI label="Partial"  value={counts.partial ||0} color="#F59E0B"/>
        <KPI label="Ready"    value={counts.ready   ||0} color="#059669"/>
      </div>

      {/* Map preview */}
      <div style={{position:'relative',borderRadius:12,overflow:'hidden',height:120,background:'linear-gradient(135deg,#0d3934 0%,#022C28 100%)'}}>
        <svg width="100%" height="100%" viewBox="0 0 360 120" style={{position:'absolute',inset:0}}>
          <defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/></pattern></defs>
          <rect width="360" height="120" fill="url(#grid)"/>
          <path d="M0,75 Q80,65 160,72 T360,68" stroke="rgba(244,195,0,0.25)" strokeWidth="1" fill="none" strokeDasharray="3 4"/>
          {[[60,40],[110,55],[170,42],[210,70],[260,55],[300,80]].map(([x,y],i)=>(
            <g key={i} transform={`translate(${x},${y})`}>
              <circle r="9" fill="rgba(244,195,0,0.2)"/><circle r="4" fill="#F4C300"/>
            </g>
          ))}
        </svg>
        <div style={{position:'absolute',top:10,left:12,fontSize:10,fontWeight:800,letterSpacing:'0.1em',textTransform:'uppercase',color:'#F4C300',fontFamily:"'JetBrains Mono', monospace"}}>Route · 6 households · 7.9 km</div>
        <div style={{position:'absolute',bottom:10,right:12,fontSize:11,color:'rgba(255,255,255,0.8)',fontWeight:700,background:'rgba(2,28,24,0.7)',padding:'5px 9px',borderRadius:6,fontFamily:"'JetBrains Mono', monospace"}}>Open map</div>
      </div>

      {/* List header */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginTop:4}}>
        <div style={{fontSize:14,fontWeight:900,letterSpacing:'-0.01em'}}>Today's route</div>
        <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace",fontWeight:700}}>Sorted by distance</div>
      </div>

      {/* List */}
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {HOUSEHOLDS.map(h => <HouseholdRow key={h.id} hh={h} onOpen={()=>onOpen(h.id)}/>)}
      </div>

      <div style={{marginTop:6,padding:'12px 14px',background:'#fff',border:'1px solid #E5E7EB',borderRadius:10,display:'flex',alignItems:'center',gap:10,fontSize:12,color:'#6B7280'}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        Offline mode · 6 records pending sync · auto-syncs on Wi-Fi
      </div>
    </div>
  );
}

function KPI({ label, value, color }) {
  return (
    <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:10,padding:'10px 12px'}}>
      <div style={{fontSize:24,fontWeight:900,color,letterSpacing:'-0.02em',lineHeight:1}}>{value}</div>
      <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.08em',textTransform:'uppercase',color:'#6B7280',marginTop:6}}>{label}</div>
    </div>
  );
}

function HouseholdRow({ hh, onOpen }) {
  const colors = { critical:'#DC2626', partial:'#F59E0B', ready:'#059669', callback:'#7C3AED' };
  const labels = { critical:'CRITICAL', partial:'PARTIAL', ready:'READY', callback:'CALLBACK' };
  const c = colors[hh.status]; const l = labels[hh.status];
  return (
    <button onClick={onOpen} style={{textAlign:'left',background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:'14px 14px 14px 16px',display:'flex',gap:12,alignItems:'center',cursor:'pointer',fontFamily:'inherit',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:0,bottom:0,left:0,width:4,background:c}}/>
      <div style={{flex:1,minWidth:0}}>
        <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:3}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.08em',color:c,fontFamily:"'JetBrains Mono', monospace"}}>{hh.id}</div>
          <div style={{fontSize:9,fontWeight:800,letterSpacing:'0.1em',padding:'2px 6px',borderRadius:4,background:`${c}15`,color:c}}>{l}</div>
        </div>
        <div style={{fontSize:15,fontWeight:800,letterSpacing:'-0.01em',color:'#022C28'}}>{hh.name}</div>
        <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>{hh.village} · {hh.stove}</div>
        <div style={{fontSize:12,color:'#022C28',marginTop:6,fontWeight:700}}>
          {hh.missing===0
            ? <span style={{color:'#059669'}}>✓ Verifier-ready · No items missing</span>
            : <span>{hh.missing} item{hh.missing>1?'s':''} missing this month</span>}
        </div>
      </div>
      <div style={{textAlign:'right',display:'flex',flexDirection:'column',alignItems:'flex-end',gap:4}}>
        <div style={{fontSize:11,fontWeight:700,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace"}}>{hh.distance}</div>
        <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.06em',color:hh.due==='Callback'?'#7C3AED':'#022C28'}}>{hh.due.toUpperCase()}</div>
      </div>
    </button>
  );
}

// ---------- HOUSEHOLD DETAIL ----------
function HouseholdCard({ hhId, onTask }) {
  const hh = HOUSEHOLDS.find(h=>h.id===hhId) || HOUSEHOLDS[0];
  const tasks = [
    { id:'photo',   icon:'cam',   title:'Kitchen photo',          sub:'Wide shot · stove visible · cooking area', done:false, critical:true, hint:'AI will check focus, stove visibility, multiple-stove count' },
    { id:'survey',  icon:'chat',  title:'Primary cook interview', sub:'10 plain-language questions',              done:false, critical:true, hint:'~3 min · GPS auto-attached' },
    { id:'gps',     icon:'pin',   title:'GPS coordinates',        sub:'Captured at front door',                   done:true,  critical:false, value:'−1.9532, 30.4347 · ±4m' },
    { id:'meter',   icon:'meter', title:'Meter sync',             sub:'Bluetooth · M5-Metered',                   done:true,  critical:false, value:'Last reading 142.8 kWh · 3m ago' },
    { id:'consent', icon:'pen',   title:'Consent signature',      sub:'Captured at enrollment',                   done:true,  critical:false, value:'Signed 14 Jan 2026 · v2.1' },
  ];
  const missing = tasks.filter(t=>!t.done).length;
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      {/* Status banner */}
      <div style={{background:missing>0?'#FEF2F2':'#ECFDF5',border:`1px solid ${missing>0?'#FCA5A5':'#86EFAC'}`,borderRadius:12,padding:'14px 16px',display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:38,height:38,borderRadius:'50%',background:missing>0?'#DC2626':'#059669',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:900,fontSize:16,flexShrink:0}}>{missing>0?missing:'✓'}</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:15,fontWeight:900,color:missing>0?'#7F1D1D':'#065F46',letterSpacing:'-0.01em'}}>{missing>0?`${missing} items missing this month`:'Verifier-ready'}</div>
          <div style={{fontSize:12,color:missing>0?'#991B1B':'#047857',marginTop:2}}>{missing>0?'Complete below to mark ready for this monitoring period.':'All evidence captured for Apr 2026.'}</div>
        </div>
      </div>

      {/* Household block */}
      <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:'16px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:12,marginBottom:10}}>
          <div>
            <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',color:'#B8960A',fontFamily:"'JetBrains Mono', monospace"}}>{hh.id}</div>
            <div style={{fontSize:18,fontWeight:900,letterSpacing:'-0.01em',color:'#022C28',marginTop:3}}>{hh.name}</div>
            <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>{hh.village} · 5 people</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.06em',color:'#6B7280'}}>STOVE</div>
            <div style={{fontSize:13,fontWeight:800,color:'#022C28',marginTop:2}}>{hh.stove}</div>
            <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace"}}>SN-MK5-00142</div>
          </div>
        </div>
        <div style={{display:'flex',gap:6,marginTop:10,paddingTop:12,borderTop:'1px solid #F3F4F6'}}>
          {[{l:'INSTALLED',v:'14 Jan'},{l:'LAST VISIT',v:'Mar 28'},{l:'FUEL THIS MONTH',v:'12.4 kg'}].map((s,i)=>(
            <div key={i} style={{flex:1}}>
              <div style={{fontSize:9,fontWeight:800,letterSpacing:'0.08em',color:'#9CA3AF'}}>{s.l}</div>
              <div style={{fontSize:13,fontWeight:800,color:'#022C28',marginTop:3}}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Task list */}
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
          <div style={{fontSize:14,fontWeight:900}}>This month's checklist</div>
          <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace",fontWeight:700}}>Apr 2026</div>
        </div>
        {tasks.map(t => <TaskTile key={t.id} t={t} onOpen={()=>!t.done && onTask(t.id)}/>)}
      </div>

      <button onClick={()=>onTask('sync')} style={{marginTop:6,padding:'14px',background:missing>0?'#022C28':'#F4C300',color:missing>0?'#fff':'#022C28',border:'none',borderRadius:12,fontWeight:900,fontSize:15,cursor:'pointer',fontFamily:'inherit',letterSpacing:'-0.01em',opacity:missing>0?0.5:1}} disabled={missing>0}>
        {missing>0 ? `Submit · ${missing} items left` : 'Submit · verifier-ready ✓'}
      </button>
    </div>
  );
}

function TaskTile({ t, onOpen }) {
  const Ico = ({n})=>{
    const p = { cam:'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 13a4 4 0 1 0 0 0z',
                chat:'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z',
                pin:'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M12 13a3 3 0 1 0 0 0z',
                meter:'M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4',
                pen:'M12 20h9 M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z' }[n];
    return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={p}/></svg>;
  };
  return (
    <button onClick={onOpen} disabled={t.done} style={{textAlign:'left',background:t.done?'#F6F8F7':'#fff',border:`1px solid ${t.done?'#D1FAE5':'#E5E7EB'}`,borderRadius:12,padding:'14px',display:'flex',gap:12,alignItems:'flex-start',cursor:t.done?'default':'pointer',fontFamily:'inherit',width:'100%'}}>
      <div style={{width:36,height:36,borderRadius:8,background:t.done?'#059669':(t.critical?'#FEF2F2':'#F6F8F7'),color:t.done?'#fff':(t.critical?'#DC2626':'#022C28'),display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        {t.done
          ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          : <Ico n={t.icon}/>}
      </div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
          <div style={{fontSize:15,fontWeight:800,color:'#022C28',letterSpacing:'-0.01em',whiteSpace:'nowrap'}}>{t.title}</div>
          {!t.done && t.critical && <div style={{fontSize:9,fontWeight:800,letterSpacing:'0.08em',padding:'2px 6px',borderRadius:4,background:'#FEF2F2',color:'#DC2626',flexShrink:0}}>REQUIRED</div>}
        </div>
        <div style={{fontSize:12,color:'#6B7280',marginTop:3}}>{t.done?t.value:t.sub}</div>
        {!t.done && t.hint && <div style={{fontSize:11,color:'#7C3AED',marginTop:6,display:'flex',alignItems:'center',gap:6,fontWeight:600}}><svg width="12" height="12" viewBox="0 0 24 24" fill="#7C3AED"><circle cx="12" cy="12" r="3"/></svg>{t.hint}</div>}
      </div>
      {!t.done && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0,marginTop:8}}><polyline points="9 18 15 12 9 6"/></svg>}
    </button>
  );
}

// ---------- KITCHEN PHOTO ----------
function KitchenPhoto({ onDone }) {
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      <div style={{position:'relative',aspectRatio:'4 / 3',borderRadius:14,overflow:'hidden',background:'linear-gradient(180deg,#2d2417 0%,#1a1610 100%)'}}>
        <svg width="100%" height="100%" viewBox="0 0 300 225" style={{position:'absolute',inset:0}}>
          <rect x="0" y="160" width="300" height="65" fill="rgba(120,80,40,0.4)"/>
          <rect x="80" y="100" width="100" height="80" fill="#3a2818" rx="4"/>
          <circle cx="130" cy="130" r="22" fill="#1a0e08"/>
          <circle cx="130" cy="130" r="14" fill="#f59e0b" opacity="0.5"/>
          <rect x="190" y="60" width="90" height="120" fill="rgba(60,40,25,0.6)" rx="2"/>
          <path d="M 0 60 Q 150 50 300 65" stroke="rgba(255,255,255,0.05)" strokeWidth="2" fill="none"/>
        </svg>
        <div style={{position:'absolute',top:10,left:10,fontSize:10,fontWeight:800,letterSpacing:'0.1em',color:'#F4C300',background:'rgba(2,28,24,0.7)',padding:'5px 9px',borderRadius:6,fontFamily:"'JetBrains Mono', monospace"}}>LIVE · CAPTURED</div>
        <div style={{position:'absolute',inset:14,border:'2px dashed rgba(244,195,0,0.6)',borderRadius:8,pointerEvents:'none'}}/>
        <div style={{position:'absolute',bottom:10,right:10,fontSize:10,color:'#fff',background:'rgba(2,28,24,0.7)',padding:'5px 9px',borderRadius:6,fontFamily:"'JetBrains Mono', monospace"}}>09:42 · −1.953, 30.434</div>
      </div>

      {/* AI review */}
      <div style={{background:'#F5F0FF',border:'1px solid #DDD6FE',borderRadius:12,padding:'14px'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
          <div style={{width:24,height:24,borderRadius:6,background:'#7C3AED',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg>
          </div>
          <div style={{fontSize:11,fontWeight:800,letterSpacing:'0.08em',textTransform:'uppercase',color:'#5B21B6',fontFamily:"'JetBrains Mono', monospace"}}>AI photo review</div>
          <div style={{marginLeft:'auto',fontSize:10,fontWeight:700,color:'#7C3AED'}}>3 of 3 passed</div>
        </div>
        {[
          {ok:true,  label:'Stove clearly visible',     val:'M5 Metered detected · 94%'},
          {ok:true,  label:'Single stove in frame',     val:'No traditional stove visible'},
          {ok:true,  label:'Image quality',             val:'Sharp · well-lit'},
        ].map((r,i)=>(
          <div key={i} style={{display:'flex',gap:10,alignItems:'flex-start',padding:'6px 0'}}>
            <div style={{width:18,height:18,borderRadius:'50%',background:r.ok?'#059669':'#DC2626',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:900,flexShrink:0,marginTop:1}}>✓</div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:700,color:'#022C28'}}>{r.label}</div>
              <div style={{fontSize:11,color:'#6B7280'}}>{r.val}</div>
            </div>
          </div>
        ))}
        <div style={{fontSize:10,color:'#6B7280',marginTop:8,fontStyle:'italic'}}>AI drafts. Humans decide. Final pass on submission.</div>
      </div>

      {/* Auto-attached */}
      <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:10,padding:'12px 14px'}}>
        <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.08em',color:'#6B7280',marginBottom:6}}>AUTO-ATTACHED</div>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:12,color:'#022C28',padding:'3px 0'}}><span>GPS</span><span style={{fontFamily:"'JetBrains Mono', monospace"}}>−1.9532, 30.4347 · ±4m</span></div>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:12,color:'#022C28',padding:'3px 0'}}><span>Timestamp</span><span style={{fontFamily:"'JetBrains Mono', monospace"}}>09:42:18 · 11 May 2026</span></div>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:12,color:'#022C28',padding:'3px 0'}}><span>Monitoring tier</span><span style={{fontFamily:"'JetBrains Mono', monospace",color:'#059669',fontWeight:700}}>TPDDTEC · Good practice</span></div>
      </div>

      <div style={{display:'flex',gap:10}}>
        <button style={{flex:1,padding:'14px',background:'#fff',color:'#022C28',border:'1.5px solid #E5E7EB',borderRadius:10,fontWeight:800,fontSize:14,cursor:'pointer',fontFamily:'inherit'}}>Retake</button>
        <button onClick={onDone} style={{flex:2,padding:'14px',background:'#022C28',color:'#fff',border:'none',borderRadius:10,fontWeight:900,fontSize:14,cursor:'pointer',fontFamily:'inherit'}}>Save photo</button>
      </div>
    </div>
  );
}

// ---------- COOK INTERVIEW ----------
function CookInterview({ onDone }) {
  const [answers, setAnswers] = React.useState({q1:'yes', q2:'yes', q3:null, q4:'yes', q5:null});
  const set = (k,v)=>setAnswers(a=>({...a,[k]:v}));
  const Yn = ({k,q})=>(
    <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:'14px'}}>
      <div style={{fontSize:14,fontWeight:700,color:'#022C28',lineHeight:1.35,marginBottom:10}}>{q}</div>
      <div style={{display:'flex',gap:8}}>
        {[['yes','Yes'],['no','No'],['na','Not sure']].map(([v,l])=>{
          const sel = answers[k]===v;
          return <button key={v} onClick={()=>set(k,v)} style={{flex:1,padding:'10px 8px',background:sel?'#022C28':'#fff',color:sel?'#fff':'#022C28',border:`1.5px solid ${sel?'#022C28':'#E5E7EB'}`,borderRadius:8,fontWeight:800,fontSize:13,cursor:'pointer',fontFamily:'inherit'}}>{l}</button>;
        })}
      </div>
    </div>
  );
  // AI inconsistency check: q1=yes (used today) but q3=no (used last 7d) would flag
  const flag = answers.q1==='yes' && answers.q3==='no';
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:12}}>
      <div style={{padding:'10px 12px',background:'#FFF8E0',border:'1px solid #FDE68A',borderRadius:10,fontSize:12,color:'#92400E'}}>
        <b>Interviewing:</b> Mukamana, Alice · Primary cook · Speaks Kinyarwanda
      </div>
      <Yn k="q1" q="Was the stove used today?"/>
      <Yn k="q2" q="Is the stove warm or showing recent use?"/>
      <Yn k="q3" q="Has it been used most days in the last week?"/>
      {flag && <div style={{padding:'12px 14px',background:'#FEF2F2',border:'1px solid #FCA5A5',borderRadius:10,fontSize:12,color:'#7F1D1D',display:'flex',gap:10,alignItems:'flex-start'}}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0,marginTop:1}}><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
        <div><b>AI flag:</b> "Used today" but "not used most days last week" is inconsistent. Confirm with primary cook before saving.</div>
      </div>}
      <Yn k="q4" q="Is there still a traditional (3-stone) stove in use?"/>
      <Yn k="q5" q="Was any maintenance or follow-up needed today?"/>

      <button onClick={onDone} style={{marginTop:6,padding:'14px',background:'#022C28',color:'#fff',border:'none',borderRadius:12,fontWeight:900,fontSize:15,cursor:'pointer',fontFamily:'inherit'}}>Save interview</button>
      <div style={{fontSize:11,color:'#6B7280',textAlign:'center'}}>Maps to TPDDTEC usage-rate questions behind the scenes</div>
    </div>
  );
}

// ---------- SYNC STATUS ----------
function SyncStatus({ onClose }) {
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      <div style={{padding:'18px',background:'#022C28',color:'#fff',borderRadius:12,textAlign:'center'}}>
        <div style={{fontSize:32,fontWeight:900,color:'#F4C300',letterSpacing:'-0.02em'}}>6</div>
        <div style={{fontSize:12,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',color:'rgba(255,255,255,0.7)',marginTop:4}}>Records pending sync</div>
      </div>
      <div style={{fontSize:13,color:'#6B7280',padding:'0 4px'}}>Auto-syncs when you reach Wi-Fi. All records are queued locally and signed for tamper-evidence.</div>
      <button onClick={onClose} style={{padding:'14px',background:'#F4C300',color:'#022C28',border:'none',borderRadius:12,fontWeight:900,fontSize:15,cursor:'pointer',fontFamily:'inherit'}}>Back to household</button>
    </div>
  );
}

// ---------- NAV ----------
function FANav({ active, onNav }) {
  const items = [
    { id:'today',  l:'Today',     i:'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM9 22V12h6v10' },
    { id:'map',    l:'Map',       i:'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M12 13a3 3 0 1 0 0 0z' },
    { id:'scan',   l:'Scan',      i:'M3 7V5a2 2 0 0 1 2-2h2 M17 3h2a2 2 0 0 1 2 2v2 M21 17v2a2 2 0 0 1-2 2h-2 M7 21H5a2 2 0 0 1-2-2v-2 M7 12h10' },
    { id:'qa',     l:'QA',        i:'M9 12l2 2 4-4 M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z' },
    { id:'profile',l:'Me',        i:'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z' },
  ];
  return (
    <div style={{background:'#fff',borderTop:'1px solid #E5E7EB',display:'flex',padding:'8px 4px 12px'}}>
      {items.map(it => {
        const isActive = it.id===active;
        return (
          <button key={it.id} onClick={()=>onNav(it.id)} style={{flex:1,background:'none',border:'none',padding:'6px 4px',display:'flex',flexDirection:'column',alignItems:'center',gap:4,cursor:'pointer',fontFamily:'inherit'}}>
            <div style={{padding:'4px 14px',borderRadius:14,background:isActive?'#FFF8E0':'transparent'}}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={isActive?'#022C28':'#9CA3AF'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={it.i}/></svg>
            </div>
            <div style={{fontSize:11,fontWeight:isActive?800:600,color:isActive?'#022C28':'#9CA3AF',letterSpacing:'0.02em'}}>{it.l}</div>
          </button>
        );
      })}
    </div>
  );
}

// ---------- ROUTE MAP ----------
function RouteMap({ onOpen }) {
  const [selected, setSelected] = React.useState('HH-0142');
  const pins = [
    { id:'HH-0142', x:60,  y:62, status:'critical', name:'Mukamana, A.',  d:'0.4 km', order:1 },
    { id:'HH-0157', x:118, y:88, status:'partial',  name:'Uwimana, J.',   d:'0.7 km', order:2 },
    { id:'HH-0164', x:176, y:64, status:'ready',    name:'Habimana, P.',  d:'1.1 km', order:3 },
    { id:'HH-0178', x:218, y:118,status:'critical', name:'Nshuti, C.',    d:'1.3 km', order:4 },
    { id:'HH-0191', x:268, y:96, status:'partial',  name:'Murekatete, L.',d:'2.0 km', order:5 },
    { id:'HH-0204', x:308, y:154,status:'callback', name:'Kagabo, F.',    d:'2.4 km', order:6 },
  ];
  const colors = { critical:'#DC2626', partial:'#F59E0B', ready:'#059669', callback:'#7C3AED' };
  const sel = pins.find(p=>p.id===selected);
  const routeD = 'M ' + pins.map(p=>`${p.x},${p.y}`).join(' L ');
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%'}}>
      {/* Map canvas */}
      <div style={{position:'relative',flex:1,background:'linear-gradient(135deg,#1a3d39 0%,#022C28 100%)',overflow:'hidden'}}>
        <svg width="100%" height="100%" viewBox="0 0 360 220" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="mapgrid" width="24" height="24" patternUnits="userSpaceOnUse"><path d="M 24 0 L 0 0 0 24" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.5"/></pattern>
          </defs>
          <rect width="360" height="220" fill="url(#mapgrid)"/>
          {/* Rivers */}
          <path d="M0,40 Q60,55 120,45 T260,60 T360,50" stroke="rgba(43,196,138,0.18)" strokeWidth="3" fill="none"/>
          <path d="M0,180 Q80,165 160,178 T360,170" stroke="rgba(43,196,138,0.12)" strokeWidth="2" fill="none"/>
          {/* Roads */}
          <path d="M0,90 L360,110" stroke="rgba(244,195,0,0.18)" strokeWidth="4" fill="none"/>
          <path d="M180,0 L200,220" stroke="rgba(244,195,0,0.12)" strokeWidth="3" fill="none"/>
          {/* Route polyline */}
          <path d={routeD} stroke="#F4C300" strokeWidth="2" fill="none" strokeDasharray="4 4" opacity="0.85"/>
          {/* Pins */}
          {pins.map(p=>{
            const c = colors[p.status];
            const isSel = p.id===selected;
            return (
              <g key={p.id} transform={`translate(${p.x},${p.y})`} style={{cursor:'pointer'}} onClick={()=>setSelected(p.id)}>
                {isSel && <circle r="16" fill={c} opacity="0.25"/>}
                <circle r="11" fill={c} stroke="#fff" strokeWidth="2"/>
                <text x="0" y="4" textAnchor="middle" fontSize="10" fontWeight="900" fill="#fff" fontFamily="'JetBrains Mono', monospace">{p.order}</text>
              </g>
            );
          })}
          {/* Joseph (current location) */}
          <g transform="translate(20,200)">
            <circle r="14" fill="#F4C300" opacity="0.25"/>
            <circle r="7" fill="#F4C300" stroke="#022C28" strokeWidth="2"/>
          </g>
        </svg>
        {/* Legend / chips */}
        <div style={{position:'absolute',top:12,left:12,right:12,display:'flex',gap:6,flexWrap:'wrap'}}>
          {['critical','partial','ready','callback'].map(s=>(
            <div key={s} style={{display:'inline-flex',alignItems:'center',gap:5,background:'rgba(2,28,24,0.7)',padding:'4px 8px',borderRadius:6,fontSize:10,color:'#fff',fontFamily:"'JetBrains Mono', monospace",fontWeight:700,letterSpacing:'0.04em',textTransform:'uppercase'}}>
              <span style={{width:7,height:7,borderRadius:'50%',background:colors[s]}}/>{s}
            </div>
          ))}
        </div>
        <div style={{position:'absolute',bottom:12,right:12,background:'rgba(2,28,24,0.85)',padding:'6px 10px',borderRadius:6,fontSize:10,color:'#F4C300',fontFamily:"'JetBrains Mono', monospace",fontWeight:800,letterSpacing:'0.06em',backdropFilter:'blur(4px)'}}>7.9 KM · ≈88 MIN</div>
      </div>
      {/* Selected card */}
      <div style={{padding:'14px 16px 16px',background:'#fff',borderTop:'1px solid #E5E7EB'}}>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',color:colors[sel.status],fontFamily:"'JetBrains Mono', monospace"}}>STOP {sel.order} · {sel.id}</div>
            <div style={{fontSize:17,fontWeight:900,color:'#022C28',letterSpacing:'-0.01em',marginTop:2}}>{sel.name}</div>
            <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>{sel.d} from current location</div>
          </div>
          <span style={{fontSize:9,fontWeight:800,letterSpacing:'0.1em',padding:'3px 7px',borderRadius:4,background:`${colors[sel.status]}15`,color:colors[sel.status]}}>{sel.status.toUpperCase()}</span>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:12}}>
          <button onClick={()=>onOpen(sel.id)} style={{padding:'12px',background:'#022C28',color:'#fff',border:'none',borderRadius:10,fontWeight:800,fontSize:13,cursor:'pointer',fontFamily:'inherit'}}>Open household</button>
          <button style={{padding:'12px',background:'#fff',color:'#022C28',border:'1.5px solid #E5E7EB',borderRadius:10,fontWeight:800,fontSize:13,cursor:'pointer',fontFamily:'inherit',display:'inline-flex',alignItems:'center',justifyContent:'center',gap:6}}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
            Navigate
          </button>
        </div>
      </div>
    </div>
  );
}

// ---------- SCAN ----------
function ScanScreen({ onScan }) {
  const recents = [
    { kind:'QR',  label:'Stove SN', value:'SN-MK5-00142', hh:'HH-0142', t:'2 min ago' },
    { kind:'BT',  label:'Meter sync', value:'M5-MTR-7821', hh:'HH-0157', t:'18 min ago' },
    { kind:'NFC', label:'Cylinder tag', value:'LPG-AS-991', hh:'HH-0164', t:'46 min ago' },
  ];
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      {/* Viewfinder */}
      <div style={{position:'relative',aspectRatio:'1 / 1',borderRadius:18,overflow:'hidden',background:'#0e2825'}}>
        <svg width="100%" height="100%" viewBox="0 0 300 300" style={{position:'absolute',inset:0}}>
          <defs><pattern id="scanline" width="6" height="6" patternUnits="userSpaceOnUse"><path d="M 0 6 L 6 0" stroke="rgba(255,255,255,0.03)" strokeWidth="0.5"/></pattern></defs>
          <rect width="300" height="300" fill="url(#scanline)"/>
          {/* Mock QR */}
          <g transform="translate(90,90)">
            {Array.from({length:8}).map((_,i)=>Array.from({length:8}).map((_,j)=>{
              const fill = (i+j*3+i*j)%3===0;
              return fill ? <rect key={`${i}-${j}`} x={i*15} y={j*15} width="13" height="13" fill="rgba(255,255,255,0.5)"/> : null;
            }))}
            <rect x="0" y="0" width="35" height="35" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="3"/>
            <rect x="85" y="0" width="35" height="35" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="3"/>
            <rect x="0" y="85" width="35" height="35" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="3"/>
          </g>
          {/* Scan line */}
          <line x1="60" y1="150" x2="240" y2="150" stroke="#F4C300" strokeWidth="2" opacity="0.9"/>
        </svg>
        {/* Corner brackets */}
        {[{t:30,l:30,b:'tl'},{t:30,r:30,b:'tr'},{b:30,l:30,b2:'bl'},{b:30,r:30,b2:'br'}].map((c,i)=>{
          const s = {position:'absolute',width:36,height:36};
          if (c.t!==undefined) s.top=c.t; if (c.b!==undefined && !c.b2) s.bottom=c.b; if (c.b2) s.bottom=c.b;
          if (c.l!==undefined) s.left=c.l; if (c.r!==undefined) s.right=c.r;
          const top = c.t!==undefined; const left = c.l!==undefined;
          return <div key={i} style={{...s, borderTop:top?'3px solid #F4C300':'none', borderBottom:!top?'3px solid #F4C300':'none', borderLeft:left?'3px solid #F4C300':'none', borderRight:!left?'3px solid #F4C300':'none'}}/>;
        })}
        <div style={{position:'absolute',top:14,left:0,right:0,textAlign:'center',color:'#F4C300',fontSize:11,fontWeight:800,letterSpacing:'0.12em',fontFamily:"'JetBrains Mono', monospace"}}>POINT AT STOVE QR · METER BARCODE</div>
      </div>
      {/* Tab chips */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
        {[['QR','Stove SN'],['BT','Bluetooth meter'],['NFC','Cylinder tag']].map(([k,l])=>(
          <button key={k} onClick={()=>onScan(l)} style={{background:k==='QR'?'#022C28':'#fff',color:k==='QR'?'#fff':'#022C28',border:k==='QR'?'none':'1.5px solid #E5E7EB',borderRadius:10,padding:'12px 8px',cursor:'pointer',fontFamily:'inherit'}}>
            <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',fontFamily:"'JetBrains Mono', monospace",opacity:0.7}}>{k}</div>
            <div style={{fontSize:12,fontWeight:800,marginTop:3,letterSpacing:'-0.01em'}}>{l}</div>
          </button>
        ))}
      </div>
      {/* Recents */}
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:8}}>
          <div style={{fontSize:14,fontWeight:900,letterSpacing:'-0.01em'}}>Recent scans</div>
          <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace",fontWeight:700}}>This shift</div>
        </div>
        <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,overflow:'hidden'}}>
          {recents.map((r,i)=>(
            <div key={i} style={{display:'flex',gap:12,padding:'12px 14px',alignItems:'center',borderBottom:i<recents.length-1?'1px solid #F3F4F6':'none'}}>
              <div style={{width:34,height:34,borderRadius:8,background:'#F6F8F7',color:'#022C28',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:900,fontFamily:"'JetBrains Mono', monospace",letterSpacing:'0.04em',flexShrink:0}}>{r.kind}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:800,color:'#022C28',letterSpacing:'-0.01em'}}>{r.label}</div>
                <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace"}}>{r.value} · {r.hh}</div>
              </div>
              <div style={{fontSize:10,fontWeight:700,color:'#9CA3AF',fontFamily:"'JetBrains Mono', monospace"}}>{r.t}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{fontSize:11,color:'#6B7280',textAlign:'center',padding:'0 12px',lineHeight:1.5}}>Scans auto-attach to the active household. Tap a recent scan to re-link.</div>
    </div>
  );
}

// ---------- MY QA ----------
function QAScreen() {
  const flags = [
    { sev:'high', hh:'HH-0178', label:'Photo blurred', detail:'AI photo reviewer · retake before Apr lock' },
    { sev:'high', hh:'HH-0142', label:'GPS · outside village fence', detail:'Captured 420m from registered location' },
    { sev:'med',  hh:'HH-0204', label:'Callback overdue', detail:'5 days past TPDDTEC callback window' },
    { sev:'med',  hh:'HH-0191', label:'Interview · inconsistent answers', detail:'Q1=yes today, Q3=no last 7 days' },
    { sev:'low',  hh:'HH-0157', label:'Meter gap', detail:'No reading since Apr 02 · reconnect Bluetooth' },
  ];
  const sevC = { high:'#DC2626', med:'#F59E0B', low:'#6B7280' };
  return (
    <div style={{padding:'16px 18px 24px',display:'flex',flexDirection:'column',gap:14}}>
      {/* Score ring */}
      <div style={{background:'#022C28',color:'#fff',borderRadius:14,padding:'18px',display:'flex',alignItems:'center',gap:18}}>
        <div style={{position:'relative',width:80,height:80,flexShrink:0}}>
          <svg width="80" height="80" viewBox="0 0 80 80">
            <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="7"/>
            <circle cx="40" cy="40" r="34" fill="none" stroke="#F4C300" strokeWidth="7" strokeDasharray={`${0.82*213.6} 213.6`} strokeDashoffset="0" strokeLinecap="round" transform="rotate(-90 40 40)"/>
          </svg>
          <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
            <div style={{fontSize:22,fontWeight:900,color:'#F4C300',letterSpacing:'-0.02em',lineHeight:1}}>82</div>
            <div style={{fontSize:8,fontWeight:700,letterSpacing:'0.1em',color:'rgba(255,255,255,0.6)',fontFamily:"'JetBrains Mono', monospace"}}>SCORE</div>
          </div>
        </div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',color:'#F4C300',fontFamily:"'JetBrains Mono', monospace"}}>MY QA · APR 2026</div>
          <div style={{fontSize:16,fontWeight:900,letterSpacing:'-0.01em',marginTop:3,lineHeight:1.25}}>Good practice tier</div>
          <div style={{fontSize:12,color:'rgba(255,255,255,0.7)',marginTop:3,lineHeight:1.45}}>Fix 2 high flags before period lock to keep TPDDTEC eligibility.</div>
        </div>
      </div>
      {/* KPI strip */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
        <KPI label="Completeness" value="94%" color="#059669"/>
        <KPI label="Callbacks"    value="3/7"  color="#F59E0B"/>
        <KPI label="Flags"        value="5"    color="#DC2626"/>
      </div>
      {/* Flags */}
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10,paddingTop:4}}>
          <div style={{fontSize:14,fontWeight:900,letterSpacing:'-0.01em'}}>Open flags</div>
          <div style={{fontSize:11,color:'#6B7280',fontFamily:"'JetBrains Mono', monospace",fontWeight:700}}>Sorted by severity</div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {flags.map((f,i)=>(
            <div key={i} style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:'12px 14px',display:'flex',gap:12,alignItems:'flex-start',position:'relative',overflow:'hidden'}}>
              <div style={{position:'absolute',top:0,bottom:0,left:0,width:3,background:sevC[f.sev]}}/>
              <div style={{paddingLeft:6,flex:1,minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
                  <span style={{fontSize:9,fontWeight:800,letterSpacing:'0.1em',padding:'2px 6px',borderRadius:4,background:`${sevC[f.sev]}15`,color:sevC[f.sev]}}>{f.sev.toUpperCase()}</span>
                  <span style={{fontSize:10,fontWeight:800,letterSpacing:'0.08em',color:'#6B7280',fontFamily:"'JetBrains Mono', monospace"}}>{f.hh}</span>
                </div>
                <div style={{fontSize:14,fontWeight:800,color:'#022C28',marginTop:4,letterSpacing:'-0.01em'}}>{f.label}</div>
                <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>{f.detail}</div>
              </div>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0,marginTop:6}}><polyline points="9 18 15 12 9 6"/></svg>
            </div>
          ))}
        </div>
      </div>
      {/* Methodology footer */}
      <div style={{padding:'12px 14px',background:'#fff',border:'1px dashed #E5E7EB',borderRadius:10,fontSize:11,color:'#6B7280',lineHeight:1.5}}>
        Flags map to TPDDTEC monitoring rules. Supervisors and verifiers see the same scoreboard. Fixing flags here clears them everywhere.
      </div>
    </div>
  );
}

// ---------- ME / PROFILE ----------
function ProfileScreen({ onSync }) {
  return (
    <div style={{padding:'16px 18px 40px',display:'flex',flexDirection:'column',gap:14}}>
      {/* Profile card */}
      <div style={{background:'#022C28',color:'#fff',borderRadius:14,padding:'18px',display:'flex',alignItems:'center',gap:14}}>
        <div style={{width:54,height:54,borderRadius:'50%',background:'#F4C300',color:'#022C28',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:900,fontSize:20,flexShrink:0}}>JM</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:'0.1em',color:'#F4C300',fontFamily:"'JetBrains Mono', monospace"}}>AGENT · ID 0042</div>
          <div style={{fontSize:18,fontWeight:900,letterSpacing:'-0.01em',marginTop:2}}>Joseph Mugabe</div>
          <div style={{fontSize:12,color:'rgba(255,255,255,0.7)',marginTop:2}}>Rwamagana · since Jan 2024</div>
        </div>
      </div>
      {/* This period stats */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
        <KPI label="Households"    value="142" color="#022C28"/>
        <KPI label="Visits · Apr"   value="118" color="#059669"/>
        <KPI label="Photos taken"  value="96"  color="#022C28"/>
        <KPI label="Avg score"     value="82"  color="#F4C300"/>
      </div>
      {/* Sync queue */}
      <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:'14px 16px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div>
            <div style={{fontSize:11,fontWeight:800,letterSpacing:'0.08em',color:'#6B7280',fontFamily:"'JetBrains Mono', monospace"}}>SYNC QUEUE</div>
            <div style={{fontSize:16,fontWeight:900,color:'#022C28',letterSpacing:'-0.01em',marginTop:3}}>6 records pending</div>
            <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>Auto-syncs on Wi-Fi · last attempt 09:14</div>
          </div>
          <button onClick={onSync} style={{padding:'10px 18px',background:'#F4C300',color:'#022C28',border:'none',borderRadius:8,fontWeight:900,fontSize:13,cursor:'pointer',fontFamily:'inherit',whiteSpace:'nowrap',flexShrink:0}}>Sync now</button>
        </div>
      </div>
      {/* Settings list */}
      <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,overflow:'hidden'}}>
        {[
          { l:'Language', v:'English · Kinyarwanda', i:'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a14 14 0 0 1 0 20M12 2a14 14 0 0 0 0 20' },
          { l:'Offline maps', v:'Rwamagana · 42 MB', i:'M9 20l-5.4-1.8a2 2 0 0 1-1.4-1.9V5.6a2 2 0 0 1 2.6-1.9L9 5m0 15l6-2m-6 2V5m6 13l5.4 1.8a2 2 0 0 0 2.6-1.9V6.4a2 2 0 0 0-1.4-1.9L15 3M15 18V3M9 5l6-2' },
          { l:'Notifications', v:'Callbacks only', i:'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0' },
          { l:'Data · tamper-evidence', v:'Signed at capture', i:'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' },
          { l:'About · v0.4.0-beta', v:'pamojadmrv.earth', i:'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 16v-4M12 8h.01' },
        ].map((s,i,a)=>(
          <div key={s.l} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 16px',borderBottom:i<a.length-1?'1px solid #F3F4F6':'none'}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#022C28" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}><path d={s.i}/></svg>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:13,fontWeight:700,color:'#022C28',letterSpacing:'-0.01em'}}>{s.l}</div>
              <div style={{fontSize:11,color:'#6B7280',marginTop:1}}>{s.v}</div>
            </div>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        ))}
      </div>
      <button style={{padding:'14px',background:'#fff',color:'#022C28',border:'1.5px solid #E5E7EB',borderRadius:12,fontWeight:800,fontSize:14,cursor:'pointer',fontFamily:'inherit'}}>Sign out</button>
      <div style={{fontSize:11,color:'#9CA3AF',textAlign:'center',fontFamily:"'JetBrains Mono', monospace",letterSpacing:'0.02em',lineHeight:1.5,padding:'0 8px'}}>
        Pamoja dMRV Field · operator of pamojadmrv.earth<br/>By Consuming Carbon Corporation
      </div>
    </div>
  );
}

window.CookstovesApp = CookstovesApp;