VanGuard — Food Safety App for Mobile Caterers UK

VanGuard

Stay compliant. Keep moving.

/** @jsxRuntime classic */
const { useState, useEffect, useRef } = React;

// ── SUPABASE MINI-CLIENT ──────────────────────────────────────────────────────
const SUPA_URL = 'https://qzzwkxborlmmyaukvhga.supabase.co';
const SUPA_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF6endreGJvcmxtbXlhdWt2aGdhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODIxNjM2MTUsImV4cCI6MjA5NzczOTYxNX0.CmI0bEHPpVUIxZIU7F1tdDAwN1vLryd8QqRny7ig3mk';
const VAPID_PUBLIC_KEY='BH3NTRSAJFv7P_APz14gT2TPvD963aU9fejfAeI0WfZERYOLIZr08V5GwVX-0H7Utp0dXYqgnryviaE3C4pNFSo';
const urlBase64ToUint8=s=>{const p=(s+'===').slice(0,s.length+((4-s.length%4)%4)).replace(/-/g,'+').replace(/_/g,'/');const r=atob(p);return Uint8Array.from(r,c=>c.charCodeAt(0));}
const _SK = 'vg_session';
const _getS = () => {
  try {
    const ss=sessionStorage.getItem(_SK);
    if(ss) return JSON.parse(ss);
    // Migrate any existing localStorage session into sessionStorage, then clear it
    const ls=localStorage.getItem(_SK);
    if(ls){ sessionStorage.setItem(_SK,ls); localStorage.removeItem(_SK); return JSON.parse(ls); }
    return null;
  } catch { return null; }
};
const _saveS = s => {
  if(s) sessionStorage.setItem(_SK,JSON.stringify(s));
  else sessionStorage.removeItem(_SK);
  localStorage.removeItem(_SK); // always wipe any lingering localStorage copy
};
const _ls = [];
const _h = tok => ({ 'apikey': SUPA_KEY, 'Content-Type': 'application/json', 'Authorization': `Bearer ${tok || SUPA_KEY}` });

class _Q {
  constructor(t, tok) { this.t=t; this.tok=tok; this.f=[]; this.cols='*'; this.ord=null; this.lim=null; this.cnt=false; this.hd=false; this.sg=false; this.mb=false; }
  select(c='*', o={}) { this.cols=c; if(o.count) this.cnt=true; if(o.head) this.hd=true; return this; }
  eq(c,v) { this.f.push(`${c}=eq.${encodeURIComponent(v)}`); return this; }
  gte(c,v) { this.f.push(`${c}=gte.${encodeURIComponent(v)}`); return this; }
  order(c,{ascending=true}={}) { this.ord=`${c}.${ascending?'asc':'desc'}`; return this; }
  limit(n) { this.lim=n; return this; }
  single() { this.sg=true; return this; }
  maybeSingle() { this.mb=true; return this; }
  async _run() {
    let url=`${SUPA_URL}/rest/v1/${this.t}?select=${this.cols}`;
    this.f.forEach(x=>url+=`&${x}`);
    if(this.ord) url+=`&order=${this.ord}`;
    if(this.cnt||this.hd) {
      const r=await fetch(url,{method:'HEAD',headers:{..._h(this.tok),'Prefer':'count=exact'}});
      const count=parseInt((r.headers.get('content-range')||'0/0').split('/')[1])||0;
      return {count,data:null,error:null};
    }
    if(this.mb) {
      const r=await fetch(url+'&limit=1',{headers:_h(this.tok)});
      const arr=await r.json().catch(()=>[]);
      return {data:Array.isArray(arr)?(arr[0]||null):null,error:null};
    }
    if(this.lim) url+=`&limit=${this.lim}`;
    const h={..._h(this.tok)};
    if(this.sg) h['Accept']='application/vnd.pgrst.object+json';
    const r=await fetch(url,{headers:h});
    const data=await r.json().catch(()=>null);
    if(data&&data.code) return {data:null,error:data};
    return {data,error:null};
  }
  then(res,rej) { return this._run().then(res,rej); }
}

class _U {
  constructor(t,tok,d) { this.t=t; this.tok=tok; this.d=d; this.f=[]; this.ret='minimal'; this.sg=false; }
  eq(c,v) { this.f.push(`${c}=eq.${encodeURIComponent(v)}`); return this; }
  select() { this.ret='representation'; return this; }
  single() { this.sg=true; return this; }
  async _run() {
    let url=`${SUPA_URL}/rest/v1/${this.t}?${this.f.join('&')}`;
    const h={..._h(this.tok),'Prefer':`return=${this.ret}`};
    if(this.sg) h['Accept']='application/vnd.pgrst.object+json';
    const r=await fetch(url,{method:'PATCH',headers:h,body:JSON.stringify(this.d)});
    const text=await r.text();
    if(!text||!text.trim()) return {data:null,error:null};
    const data=JSON.parse(text);
    return {data,error:null};
  }
  then(res,rej) { return this._run().then(res,rej); }
}

// ── DEMO MODE (fully client-side sample account) ──────────────────────────────
// When window.__vgDemo is true, the sb data layer returns canned sample rows and
// treats all writes as successful no-ops. No real accounts or Supabase writes.
const _DEMO_UID='demo-user';
const _DEMO_PROFILE={
  id:_DEMO_UID, name:'Sam Rivera', business_name:'The Demo Kitchen',
  email:'sam@thedemokitchen.example', unit_type:'van', authority:'Bristol City Council',
  lpg_enabled:true, water_enabled:true, subscription_status:'trialing',
  trial_start:new Date().toISOString().slice(0,10), onboarded:true,
  hygiene_rating:5, plan_interval:'month', food_type:'Street food',
  team_size:2, stripe_customer_id:null,
};
const _demoBuild=()=>{
  if(window.__vgDemoData) return window.__vgDemoData;
  const t=Date.now();
  const D=[];for(let i=0;i<6;i++)D.push(new Date(t-i*86400000).toISOString().slice(0,10));
  const p2=n=>('0'+n).slice(-2);
  const iso=(d,h,m)=>d+'T'+p2(h)+':'+p2(m)+':00+00:00';
  const full=n=>{const o={};for(let i=0;i<n;i++)o[i]=true;return o;};
  const locs=['Borough Market, London','Ropewalk, Bristol','Kings Cross, London','Camden Lock, London','Brick Lane, London','Greenwich Market'];
  const diaries=D.map((d,i)=>({id:'demo-diary-'+i,user_id:_DEMO_UID,date:d,location:locs[i%locs.length],opening:full(4),closing:full(4),issues:i===2?'Fridge 1 slightly warm at open (9°C) — adjusted thermostat, back to 4°C within 20 min.':'',created_at:iso(d,8,15)}));
  const temps=[];
  D.forEach((d,di)=>{
    const appl=[{unit:'Fridge 1',type:'cold',th:8,am:4,pm:5},{unit:'Freezer',type:'cold',th:-18,am:-19,pm:-18},{unit:'Hot Hold',type:'hot',th:63,am:71,pm:67}];
    appl.forEach((r,ri)=>{
      [{h:9,m:5,v:r.am},{h:15,m:30,v:r.pm}].forEach((slot,si)=>{
        let temp=slot.v, action=null;
        if(di===3&&ri===2&&si===0) temp=58; // one instructive failed hot-hold reading + corrective action
        const pass=r.type==='cold'?temp<=r.th:temp>=r.th;
        if(!pass) action='Reheated to 75°C and held above 63°C — re-checked OK.';
        temps.push({id:'demo-temp-'+di+'-'+ri+'-'+si,user_id:_DEMO_UID,date:d,time:p2(slot.h)+':'+p2(slot.m),unit:r.unit,type:r.type,threshold:r.th,temp,pass,action,created_at:iso(d,slot.h,slot.m)});
      });
    });
  });
  const cleaning_logs=D.map((d,i)=>({id:'demo-clean-'+i,user_id:_DEMO_UID,date:d,checks:full(8),saved_by:'Sam Rivera',created_at:iso(d,16,45)}));
  const van_checks=D.map((d,i)=>({id:'demo-van-'+i,user_id:_DEMO_UID,date:d,checks:full(8),signed_by:'Sam Rivera',created_at:iso(d,8,30)}));
  const lpg_logs=D.slice(0,5).map((d,i)=>({id:'demo-lpg-'+i,user_id:_DEMO_UID,date:d,hose:true,reg:true,flame:true,leak:true,notes:i===0?'Leak-tested all joints with detergent spray — no bubbles.':'',created_at:iso(d,8,20)}));
  const water_logs=D.slice(0,3).map((d,i)=>({id:'demo-water-'+i,user_id:_DEMO_UID,date:d,filled:true,cleaned:true,san:true,sanitised:true,created_at:iso(d,8,25)}));
  const pNames=['Borough Market','Ropewalk','Kings Cross','Camden Lock','Brick Lane','Greenwich Market'];
  const pAddrs=['8 Southwark St, London SE1','Ropewalk, Bristol BS1','Kings Blvd, London N1C','Camden Lock Pl, London NW1','91 Brick Ln, London E1','Greenwich, London SE10'];
  const pitch_logs=D.map((d,i)=>({id:'demo-pitch-'+i,user_id:_DEMO_UID,date:d,name:pNames[i%6],address:pAddrs[i%6],created_at:iso(d,7,50)}));
  const data={profiles:[_DEMO_PROFILE],diaries,temp_logs:temps,cleaning_logs,van_checks,lpg_logs,water_logs,pitch_logs,feedback:[]};
  window.__vgDemoData=data;
  return data;
};
class _DemoQ {
  constructor(t){this.t=t;this.rows=(_demoBuild()[t]||[]).map(x=>x);this.cnt=false;this.hd=false;this.sg=false;this.mb=false;this._lim=null;}
  select(c='*',o){o=o||{};if(o.count)this.cnt=true;if(o.head)this.hd=true;return this;}
  eq(c,v){this.rows=this.rows.filter(r=>String(r[c])===String(v));return this;}
  gte(c,v){this.rows=this.rows.filter(r=>String(r[c])>=String(v));return this;}
  order(c,o){const asc=!(o&&o.ascending===false);this.rows=this.rows.slice().sort((a,b)=>a[c]===b[c]?0:(a[c]>b[c]?1:-1)*(asc?1:-1));return this;}
  limit(n){this._lim=n;return this;}
  single(){this.sg=true;return this;}
  maybeSingle(){this.mb=true;return this;}
  _run(){let rows=this.rows;if(this._lim!=null)rows=rows.slice(0,this._lim);if(this.cnt||this.hd)return Promise.resolve({count:rows.length,data:null,error:null});if(this.mb||this.sg)return Promise.resolve({data:rows[0]||null,error:null});return Promise.resolve({data:rows,error:null});}
  then(res,rej){return this._run().then(res,rej);}
}
class _DemoU {
  constructor(t){this.t=t;}
  eq(){return this;} select(){return this;} single(){return this;}
  _run(){return Promise.resolve({data:this.t==='profiles'?_DEMO_PROFILE:null,error:null});}
  then(res,rej){return this._run().then(res,rej);}
}
const _demoFrom=table=>({
  select:(c,o)=>new _DemoQ(table).select(c,o),
  insert:async()=>({data:null,error:null}),
  upsert:async()=>({data:null,error:null}),
  update:()=>new _DemoU(table),
});

// ── OFFLINE QUEUE ─────────────────────────────────────────────────────────────
const _OQ_KEY='vg_offline_queue';
const _getQ=()=>{try{return JSON.parse(localStorage.getItem(_OQ_KEY)||'[]');}catch{return[];}};
const _saveQ=q=>localStorage.setItem(_OQ_KEY,JSON.stringify(q));
const _addQ=item=>{const q=_getQ();q.push({...item,qid:Date.now()+Math.random().toString(36).slice(2)});_saveQ(q);};
const replayOfflineQueue=async()=>{
  const q=_getQ();
  if(!q.length) return 0;
  const remain=[];
  for(const item of q){
    try{
      const tok=_getS()?.access_token||item.tok;
      const heads={..._h(tok)};
      if(item.prefer) heads['Prefer']=item.prefer;
      const r=await fetch(`${SUPA_URL}/rest/v1/${item.table}`,{method:'POST',headers:heads,body:JSON.stringify(item.data)});
      if(!r.ok) remain.push(item);
    }catch{remain.push(item);}
  }
  _saveQ(remain);
  return q.length-remain.length;
};

// ── HELPERS ───────────────────────────────────────────────────────────────────
const today = () => new Date().toISOString().slice(0,10);
const nowTime = () => new Date().toTimeString().slice(0,5);
const fmtDate = d => new Date(d+'T12:00:00').toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'});
const fmtDateShort = d => new Date(d+'T12:00:00').toLocaleDateString('en-GB',{day:'numeric',month:'short'});

// ── ICONS ─────────────────────────────────────────────────────────────────────
const I = {
  home:<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>,
  diary:<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.966 8.966 0 00-6 2.292m0-14.25v14.25"/>,
  temp:<><path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5-4.5m0 0l4.5 4.5m-4.5-4.5v12m-7.5 0h15"/><path strokeLinecap="round" strokeLinejoin="round" d="M15 15a3 3 0 11-6 0 3 3 0 016 0z"/></>,
  van:<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>,
  eho:<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>,
  check:<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5"/>,
  warn:<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>,
  user:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>,
  chevron:<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>,
  back:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>,
  fire:<path strokeLinecap="round" strokeLinejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/>,
  location:<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0zM19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>,
  water:<path strokeLinecap="round" strokeLinejoin="round" d="M12 3.75a6.715 6.715 0 00-3.722 1.118c-1.88 2.528-2.028 5.147-1.328 7.382A8.978 8.978 0 0012 15.75a8.978 8.978 0 005.05-3.5c.7-2.235.552-4.854-1.328-7.382A6.715 6.715 0 0012 3.75z"/>,
  lock:<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>,
  logout:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>,
  star:<path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>,
  plus:<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>,
  team:<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>,
  download:<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>,
  mail:<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>,
  chat:<path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/>,
  bell:<path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>,
};
const Icon = ({name,size=20,color='currentColor'}) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2}>{I[name]}</svg>
);

// ── VAN ICON SVG ─────────────────────────────────────────────────────────────
const VanIcon = ({size=40, wheelColor='#1A2744'}) => (
  <svg width={size} height={Math.round(size*0.68)} viewBox="0 0 100 68" fill="none" xmlns="http://www.w3.org/2000/svg">
    <line x1="2" y1="24" x2="20" y2="24" stroke="white" strokeWidth="4.5" strokeLinecap="round"/>
    <line x1="7" y1="33" x2="20" y2="33" stroke="white" strokeWidth="4.5" strokeLinecap="round"/>
    <line x1="12" y1="42" x2="20" y2="42" stroke="white" strokeWidth="4.5" strokeLinecap="round"/>
    <path d="M22 56 L22 22 L38 16 L38 56 Z" fill="white"/>
    <path d="M24.5 53 L24.5 26 L36.5 21 L36.5 53 Z" fill="rgba(255,255,255,0.18)"/>
    <rect x="38" y="16" width="52" height="40" rx="5" fill="white"/>
    <circle cx="31" cy="58" r="8.5" fill={wheelColor}/>
    <circle cx="31" cy="58" r="3.5" fill="white"/>
    <circle cx="70" cy="58" r="8.5" fill={wheelColor}/>
    <circle cx="70" cy="58" r="3.5" fill="white"/>
    <circle cx="73" cy="34" r="11" fill="#0D7377"/>
    <polyline points="67.5,34 72,38.5 79.5,27" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </svg>
);

// ── SHARED UI ─────────────────────────────────────────────────────────────────
const Spinner = ({full}) => (
  <div className={`flex items-center justify-center ${full?'h-64':'py-8'}`}>
    <div className="w-7 h-7 border-2 border-teal/20 border-t-teal rounded-full animate-spin"/>
  </div>
);
const Card = ({children,className=''}) => <div className={`bg-white rounded-2xl shadow-sm border border-gray-100 ${className}`}>{children}</div>;
const Badge = ({label,color='teal'}) => {
  const cls={green:'bg-green-100 text-green-700',red:'bg-red-100 text-red-700',amber:'bg-amber-100 text-amber-700',teal:'bg-teal-light text-teal',navy:'bg-navy/10 text-navy'}[color]||'bg-teal-light text-teal';
  return <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${cls}`}>{label}</span>;
};
const Checkbox = ({checked,onChange,label,isNA,onToggleNA}) => {
  if(isNA) return (
    <div className="flex items-center gap-3 py-2.5">
      <span className="w-6 h-6 rounded-lg border-2 border-gray-100 bg-gray-50 flex items-center justify-center flex-shrink-0">
        <span className="text-gray-300 text-[8px] font-black tracking-tight">NA</span>
      </span>
      <span className="flex-1 text-sm text-gray-300 line-through leading-snug">{label}</span>
      <button onClick={onToggleNA} className="text-[10px] font-bold text-teal px-2 py-1 rounded-lg bg-teal-light active:opacity-70 flex-shrink-0">Restore</button>
    </div>
  );
  return (
    <div className="flex items-center gap-3 py-2.5 w-full">
      <button onClick={()=>onChange(!checked)} className="flex items-center gap-3 flex-1 text-left active:opacity-60">
        <span className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 transition-colors ${checked?'bg-teal border-teal':'border-gray-200 bg-gray-50'}`}>
          {checked&&<Icon name="check" size={13} color="white"/>}
        </span>
        <span className={`text-sm leading-snug ${checked?'text-gray-400 line-through':'text-gray-700'}`}>{label}</span>
      </button>
      {onToggleNA&&<button onClick={onToggleNA} className="text-[10px] font-bold text-gray-300 px-1.5 py-0.5 rounded border border-gray-200 active:bg-gray-100 flex-shrink-0 ml-1">NA</button>}
    </div>
  );
};
const Input = ({label,value,onChange,type='text',placeholder='',required=false,hint}) => (
  <div className="mb-4">
    {label&&<label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">{label}{required&&<span className="text-red-400 ml-1">*</span>}</label>}
    <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-800 bg-gray-50 focus:outline-none focus:border-teal focus:bg-white transition-colors"/>
    {hint&&<p className="text-xs text-gray-400 mt-1">{hint}</p>}
  </div>
);
const Btn = ({children,onClick,variant='primary',className='',disabled=false,loading=false,size='md'}) => {
  const cls={primary:'bg-teal text-white active:opacity-80',navy:'bg-navy text-white active:opacity-80',ghost:'bg-gray-100 text-gray-600 active:bg-gray-200',outline:'border border-navy text-navy bg-white active:bg-gray-50',danger:'bg-red-500 text-white active:opacity-80'}[variant];
  const sz={md:'py-3.5 text-sm',sm:'py-2.5 text-xs',lg:'py-4 text-base'}[size];
  return (
    <button onClick={onClick} disabled={disabled||loading} className={`w-full ${sz} rounded-xl font-semibold transition-all flex items-center justify-center gap-2 ${cls} ${(disabled||loading)?'opacity-40':''} ${className}`}>
      {loading&&<div className="w-4 h-4 border-2 border-current/30 border-t-current rounded-full animate-spin"/>}
      {children}
    </button>
  );
};
const ErrMsg = ({msg}) => msg?<div className="bg-red-50 border border-red-100 text-red-600 text-sm rounded-xl px-4 py-3 mb-4 leading-snug">{msg}</div>:null;
const OkMsg = ({msg}) => msg?<div className="bg-green-50 border border-green-100 text-green-700 text-sm rounded-xl px-4 py-3 text-center font-semibold">{msg}</div>:null;

// ── TOP NAV ───────────────────────────────────────────────────────────────────
const TABS = [
  {key:'dashboard',label:'Home',icon:'home'},
  {key:'diary',label:'Diary',icon:'diary'},
  {key:'temp',label:'Temps',icon:'temp'},
  {key:'van',label:'Equipment',icon:'van'},
  {key:'records',label:'Records',icon:'eho'},
];

// ── LIVE COMPLIANCE (today's %) ───────────────────────────────────────────────
// Same 4-part logic as the Dashboard: diary (opening+closing), 2+ temps, cleaning, unit.
async function computeTodayCompliance(userId){
  try{
    const todayStr=today();
    const [{data:tD},{data:tT},{data:tC2},{data:tV}]=await Promise.all([
      sb.from('diaries').select('opening,closing').eq('user_id',userId).eq('date',todayStr),
      sb.from('temp_logs').select('id').eq('user_id',userId).eq('date',todayStr),
      sb.from('cleaning_logs').select('id').eq('user_id',userId).eq('date',todayStr),
      sb.from('van_checks').select('id').eq('user_id',userId).eq('date',todayStr),
    ]);
    let na={};try{na=JSON.parse(localStorage.getItem('vg_na_diary_'+userId))||{};}catch{}
    const rmO=readRemoved(userId,'opening'),rmC=readRemoved(userId,'closing');
    const d0=tD&&tD[0];
    const openDone=!!d0&&DEFAULT_OPENING.every((_,i)=>rmO.includes(i)||(d0.opening&&d0.opening[i])||na['o'+i]);
    const closeDone=!!d0&&DEFAULT_CLOSING.every((_,i)=>rmC.includes(i)||(d0.closing&&d0.closing[i])||na['c'+i]);
    const done=[openDone&&closeDone,(tT?.length||0)>=2,!!(tC2?.length),!!(tV?.length)].filter(Boolean).length;
    return Math.round(done/4*100);
  }catch{return 0;}
}
const complianceColor=(p)=>`hsl(${(30+(140-30)*(Math.max(0,Math.min(100,p))/100)).toFixed(1)},78%,45%)`;
const ComplianceRing=({pct=0,variant='header',onClick})=>{
  const size=variant==='sidebar'?60:38;
  const sw=variant==='sidebar'?6:4.5;
  const r=(size-sw)/2-1, c=2*Math.PI*r;
  const col=complianceColor(pct);
  const done=pct>=100;
  const fs=variant==='sidebar'?18:12;
  return (
    <button onClick={onClick} aria-label={`Today ${pct}% complete — open dashboard`}
      className={`flex-shrink-0 flex items-center justify-center active:scale-95 transition-transform ${variant==='sidebar'?'flex-col gap-1.5':''}`}
      style={{background:'none',border:'none',padding:0,cursor:'pointer'}}>
      <span className="relative inline-block" style={{width:size,height:size,filter:done?`drop-shadow(0 0 5px ${col})`:'none',transition:'filter .5s'}}>
        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.16)" strokeWidth={sw}/>
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={col} strokeWidth={sw} strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c*(1-Math.max(0,Math.min(100,pct))/100)} transform={`rotate(-90 ${size/2} ${size/2})`}
            style={{transition:'stroke-dashoffset .9s cubic-bezier(.34,.12,.2,1), stroke .9s linear'}}/>
        </svg>
        <span className={`absolute inset-0 flex items-center justify-center font-black ${done?'vg-ring-pulse':''}`}
          style={{color:col,fontSize:done?fs+3:fs,lineHeight:1,transition:'color .9s linear'}}>{done?'✓':pct}</span>
      </span>
      {variant==='sidebar'&&<span className="text-[10px] font-bold uppercase tracking-wider" style={{color:done?col:'rgba(255,255,255,0.5)',transition:'color .9s'}}>{done?'EHO-ready':'Today'}</span>}
    </button>
  );
};

// ── CONFETTI (plays once on success) ──────────────────────────────────────────
const Confetti=({show,onDone})=>{
  const ref=useRef(null);
  useEffect(()=>{
    if(!show) return;
    if(!ref.current||!window.lottie){ const t=setTimeout(()=>onDone&&onDone(),100); return ()=>clearTimeout(t); }
    let anim;
    try{
      anim=window.lottie.loadAnimation({container:ref.current,renderer:'svg',loop:false,autoplay:true,path:'/success-confetti.json'});
      anim.addEventListener('complete',()=>onDone&&onDone());
    }catch{ onDone&&onDone(); }
    const safety=setTimeout(()=>onDone&&onDone(),4500);
    return ()=>{clearTimeout(safety);try{anim&&anim.destroy();}catch{}};
  },[show]);
  if(!show) return null;
  return <div ref={ref} className="fixed inset-0 z-[200] pointer-events-none flex items-center justify-center" aria-hidden="true"/>;
};
const TopNav = ({screen,onChange,profile,compliance=0}) => {
  const initials = (profile?.name||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase();
  return (
    <div className="vg-topnav fixed top-0 left-0 right-0 z-50 max-w-lg mx-auto">
      {/* Header bar */}
      <div className="bg-navy flex items-center px-4 h-14 gap-2.5">
        <div className="flex-shrink-0 flex items-center">
          <img src="/icon-navy.png" alt="VanGuard" style={{width:'40px',height:'38px',objectFit:'contain'}}/>
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-white font-black text-base leading-none">Van<span className="text-teal">Guard</span></p>
          <p className="text-white/40 text-xs leading-none mt-0.5 truncate">{profile?.business_name||'Stay compliant. Keep moving.'}</p>
        </div>
        <ComplianceRing pct={compliance} variant="header" onClick={()=>onChange('dashboard')}/>
        <button onClick={()=>onChange('account')} aria-label="Settings"
          className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${screen==='account'?'bg-teal text-white':'bg-white/10 text-white/80 hover:bg-white/20'}`}>
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </button>
      </div>
      {/* Tab bar */}
      <div className="bg-white border-b border-gray-100 flex shadow-sm">
        {TABS.map(t=>(
          <button key={t.key} onClick={()=>onChange(t.key)}
            className={`flex-1 flex flex-col items-center py-2 gap-0.5 border-b-2 transition-all ${screen===t.key?'border-teal text-teal':'border-transparent text-gray-400'}`}>
            <Icon name={t.icon} size={18} color={screen===t.key?'#0D7377':'#9CA3AF'}/>
            <span className="text-[10px] font-semibold">{t.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

// ── DESKTOP SIDEBAR (≥lg) ─────────────────────────────────────────────────────
const CogIcon = ({size=18})=>(
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
);
const DesktopSidebar = ({screen,onChange,profile,onHelp,compliance=0}) => {
  const item=(active)=>`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all ${active?'bg-teal text-white':'text-white/60 hover:bg-white/10 hover:text-white'}`;
  return (
    <div className="vg-sidebar hidden lg:flex lg:flex-col lg:w-64 lg:h-screen lg:sticky lg:top-0 shrink-0 bg-navy text-white">
      <div className="flex items-center gap-2.5 px-5 h-16 border-b border-white/10">
        <img src="/icon-navy.png" alt="VanGuard" style={{width:'34px',height:'32px',objectFit:'contain'}}/>
        <div className="min-w-0">
          <p className="font-black text-base leading-none">Van<span className="text-teal">Guard</span></p>
          <p className="text-white/40 text-[11px] leading-none mt-1 truncate">{profile?.business_name||'Stay compliant'}</p>
        </div>
      </div>
      <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
        {TABS.map(t=>(
          <button key={t.key} onClick={()=>onChange(t.key)} className={item(screen===t.key)}>
            <Icon name={t.icon} size={18} color={screen===t.key?'white':'rgba(255,255,255,0.6)'}/>
            {t.label}
          </button>
        ))}
      </nav>
      <div className="px-3 py-5 border-t border-white/10 flex justify-center">
        <ComplianceRing pct={compliance} variant="sidebar" onClick={()=>onChange('dashboard')}/>
      </div>
      <div className="px-3 py-4 border-t border-white/10 space-y-1">
        <button onClick={()=>onChange('account')} className={item(screen==='account')}><CogIcon/> Settings</button>
        <button onClick={onHelp} className={item(false)}><span className="w-[18px] text-center font-black">?</span> Help</button>
      </div>
    </div>
  );
};

// ── LANDING PAGE ──────────────────────────────────────────────────────────────
// ── ISO CAROUSEL ──────────────────────────────────────────────────────────────
const IsoCarousel = ({bg='#0C1628'}) => {
  const stkRef=useRef(null);
  const titleRef=useRef(null);
  const dotsRef=useRef(null);
  const wrapRef=useRef(null);
  useEffect(()=>{
    const S=[
      {t:'Dashboard',i:'📊',c:'#14A085',rows:[{l:'Temperature logs',v:'3 readings',ok:true},{l:'Van checks',v:'All clear',ok:true},{l:'Food diary',v:'Pending',ok:null},{l:'Cleaning log',v:'Done',ok:true}]},
      {t:'Temperature Log',i:'🌡',c:'#E85D04',rows:[{l:'Fridge',v:'3°C',ok:true},{l:'Freezer',v:'-18°C',ok:true},{l:'Hot hold',v:'68°C',ok:true},{l:'Delivery box',v:'5°C',ok:true}]},
      {t:'Van Checks',i:'🚐',c:'#0D7377',rows:[{l:'Wheels & tyres',ok:true},{l:'Fire extinguisher',ok:true},{l:'First aid kit',ok:true},{l:'Gas seals checked',ok:true}]},
      {t:'EHO Report',i:'📋',c:'#7209B7',cta:'↓ Download PDF report',rows:[{l:'30-day log complete',ok:true},{l:'Temperature records',ok:true},{l:'Cleaning schedule',ok:true},{l:'Food diary entries',ok:true}]},
      {t:'Food Diary',i:'📖',c:'#F77F00',rows:[{l:'09:15 Delivery in',v:'Butcher+veg'},{l:'11:00 Trading',v:'Borough Mkt'},{l:'14:30 Complaints',v:'None'},{l:'16:00 Waste',v:'0.5 kg'}]},
    ];
    const ZP=[115,58,0,-58,-115],OP=[1,0.82,0.64,0.48,0.34];
    const mkP=s=>{
      const rows=s.rows.map(r=>{const dot=r.ok===true?'#14A085':r.ok===null?'#F59E0B':'rgba(255,255,255,0.1)';return`<div style="display:flex;align-items:center;justify-content:space-between;padding:3.5px 0;border-bottom:0.5px solid rgba(255,255,255,0.07)"><div style="display:flex;align-items:center;gap:5px"><div style="width:5px;height:5px;border-radius:50%;flex-shrink:0;background:${dot}"></div><span style="font-size:7.5px;color:rgba(255,255,255,0.85)">${r.l}</span></div>${r.v?`<span style="font-size:7px;color:rgba(255,255,255,0.4)">${r.v}</span>`:''}</div>`;}).join('');
      const cta=s.cta?`<div style="margin-top:7px;background:${s.c};border-radius:5px;padding:4px 0;text-align:center;font-size:7px;font-weight:700;color:white">${s.cta}</div>`:'';
      return`<div style="width:144px;background:#07101f;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1)"><div style="height:12px;background:#040c18;display:flex;align-items:center;justify-content:center"><div style="width:28px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px"></div></div><div style="padding:7px 8px 7px"><div style="display:flex;align-items:center;gap:5px;margin-bottom:6px"><div style="width:19px;height:19px;background:${s.c};border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">${s.i}</div><span style="font-size:9px;font-weight:700;color:white">${s.t}</span></div>${rows}${cta}</div><div style="height:10px;background:#040c18;display:flex;align-items:center;justify-content:center"><div style="width:32px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px"></div></div></div><div style="font-size:7.5px;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:1px;text-align:center;margin-top:7px">${s.t.toUpperCase()}</div>`;
    };
    const stk=stkRef.current,titleEl=titleRef.current,dotsEl=dotsRef.current;
    if(!stk)return;
    const cards=S.map((s,i)=>{
      const d=document.createElement('div');
      d.style.cssText='position:absolute;top:50%;left:50%;width:170px;height:212px;background:rgba(8,17,38,0.93);border-top:1px solid rgba(255,255,255,0.30);border-left:1px solid rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.07);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;box-sizing:border-box;will-change:transform,opacity';
      d.innerHTML=mkP(s);
      d.style.transform=`translate(-50%,-50%) translateZ(${ZP[i]}px)`;
      d.style.opacity=String(OP[i]);
      d.style.zIndex=String(10-i);
      stk.appendChild(d);
      return d;
    });
    let queue=[0,1,2,3,4],busy=false;
    const updateUI=()=>{
      if(titleEl)titleEl.textContent=S[queue[0]].t.toUpperCase();
      if(dotsEl)dotsEl.querySelectorAll('.iso-dot').forEach((d,i)=>{d.className='iso-dot'+(queue[0]===i?' iso-on':'');});
    };
    if(dotsEl){
      S.forEach((_,i)=>{
        const d=document.createElement('span');
        d.className='iso-dot'+(i===0?' iso-on':'');
        d.style.cssText='width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.22);display:inline-block;margin:0 3px;cursor:pointer;transition:all 0.3s;vertical-align:middle';
        d.onclick=()=>{
          if(busy||queue[0]===i)return;
          const pos=queue.indexOf(i);if(pos<0)return;
          queue=[...queue.slice(pos),...queue.slice(0,pos)];
          queue.forEach((sc,p)=>{cards[sc].style.transition='transform 0.46s cubic-bezier(0.4,0,0.2,1),opacity 0.36s';cards[sc].style.transform=`translate(-50%,-50%) translateZ(${ZP[p]}px)`;cards[sc].style.opacity=String(OP[p]);cards[sc].style.zIndex=String(10-p);});
          updateUI();
        };
        dotsEl.appendChild(d);
      });
    }
    // Dot active style via JS since we can't use a <style> tag cleanly in useEffect
    const styleEl=document.createElement('style');
    styleEl.textContent='.iso-on{background:#0D7377!important;width:20px!important;border-radius:3px!important}';
    document.head.appendChild(styleEl);
    const advance=()=>{
      if(busy)return;busy=true;
      const fi=queue[0],fc=cards[fi];
      fc.style.transition='transform 0.30s cubic-bezier(0.2,0,0.4,1),opacity 0.22s';
      fc.style.transform='translate(-50%,-50%) translateZ(210px) rotateY(-18deg) translateY(-6px)';
      fc.style.opacity='0.72';fc.style.zIndex='20';
      setTimeout(()=>{
        for(let p=1;p<5;p++){const sc=queue[p];cards[sc].style.transition='transform 0.50s cubic-bezier(0.4,0,0.2,1),opacity 0.38s';cards[sc].style.transform=`translate(-50%,-50%) translateZ(${ZP[p-1]}px)`;cards[sc].style.opacity=String(OP[p-1]);cards[sc].style.zIndex=String(10-(p-1));}
        fc.style.transition='transform 0.50s cubic-bezier(0.55,0,0.9,0.5),opacity 0.30s';
        fc.style.transform='translate(-50%,-50%) translateZ(-175px) rotateY(0deg) translateY(0px)';
        fc.style.opacity='0';
        setTimeout(()=>{
          const f=queue.shift();queue.push(f);
          fc.style.transition='none';fc.style.transform=`translate(-50%,-50%) translateZ(${ZP[4]}px)`;fc.style.zIndex='6';
          setTimeout(()=>{fc.style.transition='opacity 0.28s';fc.style.opacity=String(OP[4]);},30);
          updateUI();busy=false;
        },520);
      },310);
    };
    let timer=setInterval(advance,3800);
    const wrap=wrapRef.current;
    const isTouch='ontouchstart' in window||navigator.maxTouchPoints>0;
    if(wrap&&!isTouch){
      wrap.addEventListener('mouseenter',()=>clearInterval(timer));
      wrap.addEventListener('mouseleave',()=>{clearInterval(timer);timer=setInterval(advance,3800);});
    }
    return()=>{clearInterval(timer);styleEl.remove();while(stk.firstChild)stk.removeChild(stk.firstChild);if(dotsEl)dotsEl.innerHTML='';};
  },[]);
  return (
    <div ref={wrapRef} style={{background:bg,borderRadius:bg==='transparent'?0:'16px',padding:'28px 0 20px',margin:'0 0 0 0'}}>
      <div style={{perspective:'600px',perspectiveOrigin:'50% 44%',height:'310px',display:'flex',alignItems:'center',justifyContent:'center',overflow:'visible'}}>
        <div ref={stkRef} style={{position:'relative',width:'170px',height:'210px',transformStyle:'preserve-3d',transform:'rotateX(9deg) rotateY(-24deg)'}}></div>
      </div>
      <div ref={titleRef} style={{textAlign:'center',color:'rgba(255,255,255,0.42)',fontSize:'9.5px',fontWeight:'600',letterSpacing:'1.4px',marginTop:'4px'}}>DASHBOARD</div>
      <div ref={dotsRef} style={{textAlign:'center',marginTop:'13px'}}></div>
    </div>
  );
};

// ── LANDING PAGE ──────────────────────────────────────────────────────────────
const LandingPage = ({onGetStarted,onDemo}) => {
  const [userCount,setUserCount]=useState(null);
  useEffect(()=>{
    sb.from('profiles').select('*',{count:'exact',head:true})
      .then(({count})=>{if(count>=10)setUserCount(count);})
      .catch(()=>{});
  },[]);
  const features=[
    {icon:'temp',title:'Temperature Logs',desc:'Log fridge, hot hold & delivery temps in seconds. Timestamped and tamper-proof.'},
    {icon:'van',title:'Van & Cleaning Checks',desc:'Daily vehicle, equipment and cleaning checklists tailored to your unit type.'},
    {icon:'eho',title:'EHO Audit Report',desc:'One tap generates a PDF report covering your entire compliance history — ready for inspection day.'},
    {icon:'diary',title:'Food Safety Diary',desc:'Record deliveries, waste, complaints and allergen notes with date and time stamps.'},
  ];
  const steps=[
    {n:'1',title:'Start free trial',desc:'14 days free, every feature included. Card required to start — cancel anytime.'},
    {n:'2',title:'Log as you trade',desc:'30 seconds per check. Works on any phone, no app install needed.'},
    {n:'3',title:'Ace your inspection',desc:'Download your audit report and hand it straight to the EHO.'},
  ];
  return (
    <div className="min-h-screen bg-white" style={{fontFamily:'system-ui,-apple-system,sans-serif'}}>

{/* ── NAV ── */}
      <div style={{background:'#1A2744'}} className="sticky top-0 z-50 flex items-center justify-between px-5 py-3">
        <div className="flex items-center gap-2">
          <img src="/icon-192.png" alt="VanGuard" style={{width:'28px',height:'28px',borderRadius:'7px'}}/>
          <span className="text-xl font-black text-white">Van<span style={{color:'#0D7377'}}>Guard</span></span>
        </div>
        <button onClick={()=>onGetStarted('login')}
          className="text-sm font-semibold text-white border border-white/30 rounded-lg px-4 py-1.5">
          Sign in
        </button>
      </div>

{/* ── HERO (split: text left + carousel right) ── */}
      <div style={{
        background:'linear-gradient(115deg,#1A2744 0%,#122033 47%,#0C1628 100%)',
        position:'relative',
        overflow:'visible'
      }}>
        {/* Teal radial glow at the seam — visual glue between the two halves */}
        <div style={{
          position:'absolute',top:'50%',left:'47%',
          transform:'translate(-50%,-50%)',
          width:'360px',height:'360px',
          background:'radial-gradient(ellipse,rgba(13,115,119,0.16) 0%,transparent 68%)',
          pointerEvents:'none'
        }}/>
        {/* Subtle vertical highlight line at the seam — hidden on mobile */}
        <div className="hero-divider" style={{
          position:'absolute',top:'10%',left:'46.5%',
          width:'1px',height:'80%',
          background:'linear-gradient(to bottom,transparent,rgba(13,115,119,0.25) 30%,rgba(13,115,119,0.25) 70%,transparent)',
          pointerEvents:'none'
        }}/>

{/* LEFT: headline + CTA */}
          <div className="hero-left" style={{flex:'0 0 47%',padding:'36px 14px 36px 20px',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',textAlign:'center'}}>
            <div className="hero-logo-row" style={{display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',marginBottom:'14px'}}>
              <img src="/icon-192.png" alt="VanGuard" style={{width:'30px',height:'30px',borderRadius:'8px',boxShadow:'0 4px 16px rgba(0,0,0,0.5)',flexShrink:0}}/>
              <span style={{fontSize:'8px',fontWeight:'700',letterSpacing:'1.3px',color:'rgba(255,255,255,0.38)',lineHeight:'1.4',textTransform:'uppercase'}}>Mobile caterer<br/>food safety</span>
            </div>
            <h1 style={{color:'white',fontSize:'30px',fontWeight:'900',lineHeight:'1.1',margin:'0 0 10px',letterSpacing:'-0.5px'}}>
              Stay compliant.<br/>Keep moving.
            </h1>
            <p style={{color:'rgba(255,255,255,0.5)',fontSize:'11.5px',lineHeight:'1.6',margin:'0 0 20px'}}>
              Food safety records built for mobile caterers. EHO-ready in under a minute a day.
            </p>
            <button onClick={()=>onGetStarted('register')}
              style={{background:'#0D7377',color:'white',fontWeight:'800',fontSize:'13px',padding:'13px 0',borderRadius:'14px',border:'none',cursor:'pointer',width:'100%',boxShadow:'0 4px 24px rgba(13,115,119,0.45)',letterSpacing:'0.2px'}}>
              Start Free Trial
            </button>
            <button onClick={onDemo}
              style={{background:'rgba(255,255,255,0.08)',color:'white',fontWeight:'700',fontSize:'12.5px',padding:'11px 0',borderRadius:'14px',border:'1px solid rgba(255,255,255,0.25)',cursor:'pointer',width:'100%',marginTop:'10px'}}>
              Take a look inside
            </button>
            <button onClick={()=>onGetStarted('login')}
              style={{background:'transparent',border:'none',color:'rgba(255,255,255,0.3)',fontSize:'10px',padding:'9px 0 0',cursor:'pointer',fontWeight:'600',textAlign:'center'}}>
              Already have an account?
            </button>
            <p style={{color:'rgba(255,255,255,0.18)',fontSize:'9px',textAlign:'center',margin:'5px 0 0'}}>14-day free trial · Cancel anytime</p>
          </div>

{/* RIGHT: live carousel */}
          <div className="hero-right" style={{flex:'1',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',overflow:'visible',padding:'8px 0'}}>
            <p style={{color:'rgba(255,255,255,0.28)',fontSize:'8.5px',fontWeight:'700',letterSpacing:'1.6px',marginBottom:'2px',textAlign:'center'}}>SEE IT IN ACTION</p>
            <IsoCarousel bg="transparent"/>
          </div>

</div>
      </div>

{/* ── TRUST STRIP ── */}
      <div className="border-b border-gray-100">
        {userCount&&(
          <div className="flex items-center justify-center gap-2 py-3 border-b border-gray-100" style={{background:'#E6F6F6'}}>
            <span className="text-lg">👨‍🍳</span>
            <span className="text-sm font-bold" style={{color:'#0D7377'}}>{userCount} mobile caterers</span>
            <span className="text-xs text-gray-500">already keeping records with VanGuard</span>
          </div>
        )}
        <div className="flex justify-around px-4 py-5">
          {[['✓','14-day free trial'],['✓','Cancel anytime'],['✓','Any phone']].map(([icon,label])=>(
            <div key={label} className="flex items-center gap-1.5">
              <span className="font-bold text-sm" style={{color:'#0D7377'}}>{icon}</span>
              <span className="text-xs text-gray-500 font-medium">{label}</span>
            </div>
          ))}
        </div>
      </div>

{/* ── PROBLEM ── */}
      <div className="px-5 py-10">
        <h2 className="text-xl font-black text-center mb-2" style={{color:'#1A2744'}}>
          Paper records are a liability.
        </h2>
        <p className="text-gray-500 text-sm text-center mb-6 leading-relaxed">
          Most food safety apps are built for restaurants — too complex, too expensive, or missing the checks mobile caterers actually need. Paper gets wet, lost, or forgotten. Neither impresses an EHO.
        </p>
        <div className="rounded-2xl p-4" style={{background:'#E6F6F6'}}>
          <p className="text-sm font-bold mb-2" style={{color:'#0D7377'}}>VanGuard is different:</p>
          {['Designed around the mobile caterer workflow','Van, trailer & gazebo-specific checks','Instant audit report — no manual compilation','£7.99/month. Not £50+ like the big players'].map(p=>(
            <div key={p} className="flex items-start gap-2 mb-2">
              <span className="mt-0.5 font-bold flex-shrink-0" style={{color:'#0D7377'}}>→</span>
              <span className="text-sm text-gray-700">{p}</span>
            </div>
          ))}
        </div>
      </div>

{/* ── FEATURES ── */}
      <div style={{background:'#F8FAFB'}} className="px-5 py-10">
        <h2 className="text-xl font-black text-center mb-1" style={{color:'#1A2744'}}>Everything you need.</h2>
        <p className="text-gray-400 text-sm text-center mb-6">Nothing you don't.</p>
        <div className="grid grid-cols-2 gap-3">
          {features.map(f=>(
            <div key={f.title} className="bg-white rounded-2xl p-4 shadow-sm">
              <div className="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style={{background:'#E6F6F6'}}>
                <Icon name={f.icon} size={18} color="#0D7377"/>
              </div>
              <p className="text-xs font-bold mb-1" style={{color:'#1A2744'}}>{f.title}</p>
              <p className="text-xs text-gray-400 leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>

{/* ── HOW IT WORKS ── */}
      <div className="px-5 py-10">
        <h2 className="text-xl font-black text-center mb-6" style={{color:'#1A2744'}}>Up and running in minutes.</h2>
        <div className="space-y-4">
          {steps.map(s=>(
            <div key={s.n} className="flex items-start gap-4">
              <div className="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 font-black text-white text-sm" style={{background:'#0D7377'}}>
                {s.n}
              </div>
              <div className="pt-1">
                <p className="text-sm font-bold mb-0.5" style={{color:'#1A2744'}}>{s.title}</p>
                <p className="text-sm text-gray-400">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* ── PRICING ── */}
      <div style={{background:'#F8FAFB'}} className="px-5 py-10">
        <h2 className="text-xl font-black text-center mb-1" style={{color:'#1A2744'}}>Simple pricing.</h2>
        <p className="text-gray-400 text-sm text-center mb-6">No hidden fees.</p>

{/* Monthly — featured */}
        <div className="rounded-2xl p-5 mb-4 border-2 relative overflow-hidden" style={{background:'#1A2744',borderColor:'#0D7377'}}>
          <div className="absolute top-3 right-3 text-xs font-bold px-2 py-0.5 rounded-full" style={{background:'#0D7377',color:'white'}}>
            ⭐ 14 days free
          </div>
          <p className="text-xs font-bold tracking-wider mb-3" style={{color:'#0D7377'}}>SOLO PLAN</p>
          <div className="flex items-end gap-1 mb-1">
            <span className="text-4xl font-black text-white">£7.99</span>
            <span className="text-white/40 text-sm mb-1">/month</span>
          </div>
          <p className="text-sm font-semibold mb-1" style={{color:'#4ECDC4'}}>Free for your first 14 days.</p>
          <p className="text-xs mb-1" style={{color:'rgba(255,255,255,0.55)'}}>or <strong>£69.99/year</strong> — save 27%</p>
          <p className="text-xs mb-4" style={{color:'rgba(255,255,255,0.4)'}}>Cancel anytime before your trial ends and you won't be charged</p>
          <button onClick={()=>onGetStarted('register')}
            className="w-full py-3.5 rounded-xl font-bold text-white text-sm"
            style={{background:'#0D7377'}}>
            Start Free Trial
          </button>
        </div>

{/* Reassurance */}
        <div className="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
          <p className="text-xs font-bold tracking-wider mb-3 text-gray-400">WHAT YOU GET</p>
          <div className="flex items-end gap-1 mb-1">
            <span className="text-3xl font-black" style={{color:'#1A2744'}}>Everything</span>
          </div>
          <p className="text-xs text-gray-400 mb-1">Every feature, from day one. One simple price after your free trial.</p>
          <p className="text-xs text-gray-400">Card details taken to start your trial · Cancel anytime · No long contracts</p>
        </div>
      </div>

{/* ── COMPARISON ── */}
      <div className="px-5 py-10">
        <h2 className="text-xl font-black text-center mb-2" style={{color:'#1A2744'}}>VanGuard vs. paper records.</h2>
        <p className="text-center text-xs text-gray-400 mb-6">Most mobile caterers still use clipboards. Here's what that costs you.</p>
        <div className="rounded-2xl overflow-hidden border border-gray-100 shadow-sm">
          <table className="w-full text-sm">
            <thead>
              <tr style={{background:'#1A2744'}}>
                <th className="text-left py-3 px-4 text-white/60 font-medium text-xs"></th>
                <th className="py-3 px-2 text-white/40 font-medium text-xs">Paper</th>
                <th className="py-3 px-2 text-white font-bold text-xs">VanGuard</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['Survives a rainy market day','✗','✓'],
                ['Auto-timestamps every entry','✗','✓'],
                ['Flags a failed temp reading instantly','✗','✓'],
                ['Export a full inspection pack in one tap','✗','✓'],
                ['Morning reminder to log your checks','✗','✓'],
                ['Works on any phone, nothing to install','✗','✓'],
              ].map(([label,...cells],i)=>(
                <tr key={label} style={{background:i%2===0?'white':'#F8FAFB'}}>
                  <td className="py-3 px-4 text-gray-600 text-xs">{label}</td>
                  {cells.map((c,j)=>(
                    <td key={j} className={`py-3 px-2 text-center text-xs font-semibold ${c==='✓'?'text-teal':c==='✗'?'text-red-400':'text-gray-400'}`}>{c}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

{/* ── BOTTOM CTA ── */}
      <div style={{background:'#1A2744'}} className="px-5 py-12 text-center">
        <h2 className="text-2xl font-black text-white mb-3">Ready to go paperless?</h2>
        <p className="text-white/50 text-sm mb-6">Join mobile caterers already using VanGuard to stay compliant.</p>
        <button onClick={()=>onGetStarted('register')}
          className="w-full max-w-xs mx-auto block font-bold text-white py-4 rounded-2xl text-base mb-3 shadow-lg"
          style={{background:'#0D7377'}}>
          Start Your Free Trial
        </button>
        <button onClick={onDemo}
          className="w-full max-w-xs mx-auto block font-semibold text-white/80 py-3 rounded-2xl text-sm mb-3 border border-white/25">
          Take a look inside — no sign-up
        </button>
        <p className="text-white/25 text-xs">14 days free · Cancel anytime</p>
      </div>

{/* ── FOOTER ── */}
      <div className="px-5 py-6 text-center border-t border-gray-100">
        <p className="text-xs text-gray-300 mb-1">© 2026 VanGuard · Food safety for UK mobile caterers</p>
        <p className="text-xs text-gray-300">
          <a href="mailto:hello@vanguardapp.co.uk" style={{color:'#0D7377'}}>Contact & support</a>
          {' · '}
          <a href="/privacy.html" style={{color:'#0D7377'}}>Privacy</a>
          {' · '}
          <a href="/terms.html" style={{color:'#0D7377'}}>Terms</a>
        </p>
      </div>

</div>
  );
};

// ── AUTH SCREEN ───────────────────────────────────────────────────────────────
const AuthScreen = ({initialMode='login', onBack=null, onDemo=null}) => {
  const [mode,setMode]=useState(initialMode); // 'login' | 'register' | 'forgot'
  const [email,setEmail]=useState('');
  const [pass,setPass]=useState('');
  const [name,setName]=useState('');
  const [biz,setBiz]=useState('');
  const [err,setErr]=useState('');
  const [ok,setOk]=useState('');
  const [loading,setLoading]=useState(false);
  const submit=async()=>{
    setErr(''); setOk(''); setLoading(true);
    if(mode==='forgot'){
      if(!email){setErr('Please enter your email address.');setLoading(false);return;}
      const {error}=await sb.auth.resetPassword(email);
      if(error){setErr(error.message);}else{setOk('Reset link sent! Check your inbox.');}
      setLoading(false); return;
    }
    if(mode==='register'){
      if(!name||!biz||!email||!pass){setErr('Please fill in all fields.');setLoading(false);return;}
      try{
        const refCode=new URLSearchParams(window.location.search).get('ref')||localStorage.getItem('vg_ref')||null;
        const {error,data:signUpData}=await sb.auth.signUp({email,password:pass,options:{data:{name,businessName:biz,referred_by:refCode}}});
        if(refCode) localStorage.removeItem('vg_ref');
        if(error){setErr(error.message);setLoading(false);return;}
        // If email confirmation is required, no session is returned. Tell the user
        // instead of leaving the button spinning forever.
        if(!signUpData?.session){
          setOk('Account created! Check your inbox to confirm your email, then sign in.');
          setMode('login');setPass('');setLoading(false);return;
        }
        // Otherwise onAuthStateChange will take over and load the app.
      }catch(e){setErr('Sign up failed. Please try again.');setLoading(false);}
    } else {
      if(!email||!pass){setErr('Please fill in all fields.');setLoading(false);return;}
      try{
        const {error}=await sb.auth.signInWithPassword({email,password:pass});
        if(error){setErr(error.message);setPass('');setLoading(false);}
      }catch(e){setErr('Sign in failed. Please try again.');setPass('');setLoading(false);}
    }
  };
  return (
    <div className="relative min-h-screen bg-navy flex flex-col items-center justify-center p-5">
      {onBack&&<button onClick={onBack} className="absolute top-5 left-5 flex items-center gap-1 text-white/40 text-xs">
        <Icon name="back" size={14} color="rgba(255,255,255,0.4)"/> Back
      </button>}
      <img src="/icon-192.png" className="mb-4 shadow-2xl" alt="VanGuard" style={{width:'80px',height:'80px',borderRadius:'20px'}}/>
      <h1 className="text-3xl font-black text-white mb-1">Van<span style={{color:'#0D7377'}}>Guard</span></h1>
      <p className="text-white/40 text-sm mb-8 text-center">Stay compliant. Keep moving.</p>
      <div className="w-full max-w-sm bg-white rounded-2xl p-6 shadow-2xl">
        {mode==='forgot'?(
          <>
            <button onClick={()=>{setMode('login');setErr('');setOk('');}} className="flex items-center gap-1 text-xs text-gray-400 mb-4">
              <Icon name="back" size={14} color="#9CA3AF"/> Back to sign in
            </button>
            <h2 className="font-black text-navy text-lg mb-1">Reset password</h2>
            <p className="text-sm text-gray-400 mb-4">Enter your email and we'll send a reset link.</p>
            <ErrMsg msg={err}/>
            {ok?<OkMsg msg={ok}/>:<>
              <Input label="Email" value={email} onChange={setEmail} type="email" placeholder="you@example.com" required/>
              <Btn onClick={submit} loading={loading}>Send reset link</Btn>
            </>}
          </>
        ):(
          <>
            <div className="flex rounded-xl bg-gray-100 p-1 mb-5">
              {['login','register'].map(m=>(
                <button key={m} onClick={()=>{setMode(m);setErr('');}}
                  className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-all ${mode===m?'bg-white shadow text-navy':'text-gray-400'}`}>
                  {m==='login'?'Sign In':'Free Trial'}
                </button>
              ))}
            </div>
            <ErrMsg msg={err}/>
            {ok&&<OkMsg msg={ok}/>}
            {mode==='register'&&<>
              <Input label="Your name" value={name} onChange={setName} placeholder="Sarah Jones" required/>
              <Input label="Business name" value={biz} onChange={setBiz} placeholder="The Taco Van" required/>
            </>}
            <Input label="Email" value={email} onChange={setEmail} type="email" placeholder="you@example.com" required/>
            <Input label="Password" value={pass} onChange={setPass} type="password" placeholder="Min. 6 characters" required/>
            {mode==='register'&&<p className="text-xs text-gray-400 text-center mb-4">14-day free trial · Card required to start · Cancel anytime</p>}
            <Btn onClick={submit} loading={loading}>{mode==='register'?'Start Free Trial':'Sign In'}</Btn>
            {mode==='login'&&<button onClick={()=>{setMode('forgot');setErr('');}} className="w-full text-center text-xs text-gray-400 mt-3 py-1">Forgot password?</button>}
            {onDemo&&<button onClick={onDemo} className="w-full text-center text-xs text-gray-400 mt-2 py-1 underline">Just want to look? View the demo</button>}
          </>
        )}
      </div>
      <p className="text-white/25 text-xs mt-6 text-center">Food safety compliance built for mobile caterers · £7.99/month after trial</p>
    </div>
  );
};

// ── ONBOARDING WIZARD ─────────────────────────────────────────────────────────
const unitTypes=[
  {key:'van',label:'Food Van',emoji:'🚐',desc:'Motorised catering van'},
  {key:'trailer',label:'Trailer',emoji:'🚛',desc:'Towed catering trailer'},
  {key:'gazebo',label:'Gazebo / Stall',emoji:'⛺',desc:'Market stall or tent'},
  {key:'tricycle',label:'Bike / Trike',emoji:'🚲',desc:'Bicycle or tricycle unit'},
];
// Default daily checklists (shared by onboarding + the Daily Diary).
const DEFAULT_OPENING=['Fridge/freezer temps checked','Hand washing station set up','Unit cleaned from previous use','Food stored correctly (covered & separated)'];
const DEFAULT_CLOSING=['Food stored away or safely discarded','Equipment cleaned and put away','All power and gas turned off','Unit secured and locked'];
const DEFAULT_CLEANING=['Work surfaces wiped & sanitised','Chopping boards cleaned','Fridge/freezer wiped inside','Cooking equipment cleaned','Floors swept & mopped','Bins emptied & relined','Hand wash station restocked','Waste disposed correctly'];
// localStorage keys for a user's custom checklist lines (also mirrored to profiles.custom_checklists).
const ckKeys=uid=>({opening:`vg_coj_${uid}`,closing:`vg_cclosej_${uid}`,cleaning:`vg_ccj_${uid}`});
const rmKeys=uid=>({opening:`vg_rmopen_${uid}`,closing:`vg_rmclose_${uid}`,cleaning:`vg_rmclean_${uid}`});
const readCustom=(uid,which)=>{try{return JSON.parse(localStorage.getItem(ckKeys(uid)[which]))||[];}catch{return[];}};
const writeCustom=(uid,which,list)=>{try{localStorage.setItem(ckKeys(uid)[which],JSON.stringify(list));}catch{}};
const readRemoved=(uid,which)=>{try{return JSON.parse(localStorage.getItem(rmKeys(uid)[which]))||[];}catch{return[];}};
const writeRemoved=(uid,which,list)=>{try{localStorage.setItem(rmKeys(uid)[which],JSON.stringify(list));}catch{}};
// Hydrate localStorage from a saved profile so custom checklists follow the user across devices.
const hydrateChecklists=(uid,saved)=>{
  if(!saved||typeof saved!=='object') return;
  ['opening','closing','cleaning'].forEach(which=>{
    if(Array.isArray(saved[which])&&!localStorage.getItem(ckKeys(uid)[which])) writeCustom(uid,which,saved[which]);
    if(saved.removed&&Array.isArray(saved.removed[which])&&!localStorage.getItem(rmKeys(uid)[which])) writeRemoved(uid,which,saved.removed[which]);
  });
};
// One editable checklist inside the onboarding "customise" step.
const ChecklistEditor=({title,defaults,removed,setRemoved,custom,setCustom})=>{
  const [txt,setTxt]=useState('');
  const add=()=>{const v=txt.trim();if(!v)return;setCustom([...custom,{id:Date.now().toString(),label:v}]);setTxt('');};
  return (
    <div className="bg-white rounded-2xl p-4 mb-3">
      <p className="font-bold text-navy text-sm mb-2">{title}</p>
      {defaults.map((item,i)=>{
        const gone=removed.includes(i);
        return (
          <div key={i} className={`flex items-center gap-2 py-1.5 ${gone?'opacity-40':''}`}>
            <div className="w-4 h-4 rounded border-2 border-gray-200 flex-shrink-0"/>
            <span className={`text-sm flex-1 text-gray-700 ${gone?'line-through':''}`}>{item}</span>
            <button onClick={()=>setRemoved(gone?removed.filter(x=>x!==i):[...removed,i])}
              className="text-xs font-semibold flex-shrink-0" style={{color:gone?'#0D7377':'#EF4444'}}>
              {gone?'Add back':'Remove'}
            </button>
          </div>
        );
      })}
      {custom.map(job=>(
        <div key={job.id} className="flex items-center gap-2 py-1.5">
          <div className="w-4 h-4 rounded border-2 border-teal flex-shrink-0"/>
          <span className="text-sm flex-1 text-gray-700">{job.label}</span>
          <button onClick={()=>setCustom(custom.filter(j=>j.id!==job.id))} className="text-gray-300 hover:text-red-400 text-lg leading-none flex-shrink-0">×</button>
        </div>
      ))}
      <div className="flex gap-2 mt-2 pt-2 border-t border-gray-100">
        <input value={txt} onChange={e=>setTxt(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()} placeholder="Add your own line…"
          className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
        <button onClick={add} disabled={!txt.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
      </div>
    </div>
  );
};

// ── DASHBOARD ─────────────────────────────────────────────────────────────────
const Dashboard = ({profile,userId,onNav}) => {
  const [status,setStatus]=useState({diary:false,temps:0,clean:false,van:false});
  const [counts,setCounts]=useState({diaries:0,temps:0});
  const [loading,setLoading]=useState(true);
  const todayStr=today();
  useEffect(()=>{
    const load=async()=>{
      const [{count:dC},{count:tC},{data:tD},{data:tT},{data:tC2},{data:tV}]=await Promise.all([
        sb.from('diaries').select('*',{count:'exact',head:true}).eq('user_id',userId),
        sb.from('temp_logs').select('*',{count:'exact',head:true}).eq('user_id',userId),
        sb.from('diaries').select('opening,closing').eq('user_id',userId).eq('date',todayStr),
        sb.from('temp_logs').select('id').eq('user_id',userId).eq('date',todayStr),
        sb.from('cleaning_logs').select('id').eq('user_id',userId).eq('date',todayStr),
        sb.from('van_checks').select('id').eq('user_id',userId).eq('date',todayStr),
      ]);
      setCounts({diaries:dC||0,temps:tC||0});
      // Diary counts as done only when BOTH opening and closing are complete
      // (mirrors the Diary screen, honouring removed lines and NA items).
      let na={};try{na=JSON.parse(localStorage.getItem('vg_na_diary_'+userId))||{};}catch{}
      const rmO=readRemoved(userId,'opening'),rmC=readRemoved(userId,'closing');
      const d0=tD&&tD[0];
      const openDone=!!d0&&DEFAULT_OPENING.every((_,i)=>rmO.includes(i)||(d0.opening&&d0.opening[i])||na['o'+i]);
      const closeDone=!!d0&&DEFAULT_CLOSING.every((_,i)=>rmC.includes(i)||(d0.closing&&d0.closing[i])||na['c'+i]);
      setStatus({diary:openDone&&closeDone,diaryOpen:openDone,diaryClose:closeDone,temps:tT?.length||0,clean:!!(tC2?.length),van:!!(tV?.length)});
      setLoading(false);
    };
    load();
  },[userId]);
  const tasks=[
    {label:'Daily diary completed',done:status.diary,nav:'diary',hint:status.diary?'Opening & closing done':status.diaryOpen?'Closing checks still to do':'Opening checks to do'},
    {label:'Temperature checks',done:status.temps>=2,nav:'temp',hint:`${status.temps}/2 readings today`},
    {label:'Cleaning schedule',done:status.clean,nav:'diary',hint:'Sign off today\'s cleaning'},
    {label:'Van & safety check',done:status.van,nav:'van',hint:'Daily unit inspection'},
  ];
  const done=tasks.filter(t=>t.done).length;
  const pct=Math.round((done/4)*100);
  const ringCol=pct===100?'#16a34a':pct>=50?'#f59e0b':'#ef4444';
  const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0;
  const trialLeft=Math.max(0,14-trialDays);
  const hour=new Date().getHours();
  const greeting=hour<12?'Good morning':hour<17?'Good afternoon':'Good evening';
  return (
    <div className="pt-28 pb-8 px-4">
      {/* Hero */}
      <div className="bg-navy rounded-2xl p-5 mb-4 flex items-center gap-4">
        {loading?(
          <div className="w-16 h-16 flex items-center justify-center"><div className="w-6 h-6 border-2 border-white/20 border-t-white rounded-full animate-spin"/></div>
        ):(
          <div className="relative w-16 h-16 flex-shrink-0">
            <svg viewBox="0 0 36 36" className="w-16 h-16 -rotate-90">
              <circle cx="18" cy="18" r="15.9" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="3"/>
              <circle cx="18" cy="18" r="15.9" fill="none" stroke={ringCol} strokeWidth="3"
                strokeDasharray={`${pct} ${100-pct}`} strokeLinecap="round"/>
            </svg>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-white font-black text-sm">{pct}%</span>
            </div>
          </div>
        )}
        <div className="flex-1 min-w-0">
          <p className="text-white/50 text-xs">{greeting},</p>
          <p className="text-white font-bold text-lg leading-tight">{profile?.name?.split(' ')[0]||'there'} 👋</p>
          <p className={`text-sm font-semibold mt-1 ${pct===100?'text-green-400':pct>0?'text-amber-400':'text-white/50'}`}>
            {pct===100?'✓ EHO ready for today':`${done} of 4 checks done`}
          </p>
        </div>
        {trialLeft>0&&<Badge label={`${trialLeft}d left`} color="amber"/>}
      </div>
      {/* Today's tasks */}
      <div className="mb-2"><p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-2">Today's Checks</p></div>
      <Card className="divide-y divide-gray-50 mb-5">
        {tasks.map((t,i)=>(
          <button key={i} onClick={()=>onNav(t.nav)}
            className="w-full flex items-center gap-3 px-4 py-3.5 active:bg-gray-50 text-left">
            <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${t.done?'bg-green-100':'bg-gray-100'}`}>
              {t.done?<Icon name="check" size={15} color="#16a34a"/>:<div className="w-2 h-2 rounded-full bg-gray-300"/>}
            </div>
            <div className="flex-1 min-w-0">
              <p className={`text-sm font-semibold ${t.done?'line-through text-gray-300':'text-gray-800'}`}>{t.label}</p>
              <p className={`text-xs ${t.done?'text-gray-300':'text-gray-400'}`}>{t.hint}</p>
            </div>
            {!t.done&&<Icon name="chevron" size={16} color="#CBD5E1"/>}
          </button>
        ))}
      </Card>
      {/* Stats */}
      <div className="mb-2"><p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-2">Your Records</p></div>
      <div className="grid grid-cols-2 gap-3 mb-5">
        <Card className="p-4"><p className="text-2xl font-black text-teal">{counts.diaries}</p><p className="text-xs text-gray-400 mt-0.5">Diary entries</p></Card>
        <Card className="p-4"><p className="text-2xl font-black text-teal">{counts.temps}</p><p className="text-xs text-gray-400 mt-0.5">Temp readings</p></Card>
      </div>
      {/* Records shortcut */}
      <button onClick={()=>onNav('records')} className="w-full bg-navy rounded-2xl p-4 flex items-center gap-3 active:opacity-80">
        <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0">
          <Icon name="eho" size={20} color="white"/>
        </div>
        <div className="flex-1 text-left">
          <p className="text-white font-bold text-sm">Compliance Records</p>
          <p className="text-white/40 text-xs">Browse history & export EHO pack</p>
        </div>
        <Icon name="chevron" size={18} color="rgba(255,255,255,0.3)"/>
      </button>
    </div>
  );
};

// ── DIARY ─────────────────────────────────────────────────────────────────────
const DiaryScreen = ({userId,profile}) => {
  const todayStr=today();
  const [tab,setTab]=useState('opening');
  const [location,setLocation]=useState('');
  const [opening,setOpening]=useState({});
  const [closing,setClosing]=useState({});
  const [issues,setIssues]=useState('');
  const [cleanChecks,setCleanChecks]=useState({});
  const [cleanBy,setCleanBy]=useState(profile?.name||'');
  const [saving,setSaving]=useState(false);
  const [savedD,setSavedD]=useState(false);
  const [savedC,setSavedC]=useState(false);
  const [recent,setRecent]=useState([]);
  const [loading,setLoading]=useState(true);
  const [diaryNA,setDiaryNA]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_na_diary_${userId}`))||{};}catch{return{};}});
  const toggleDiaryNA=key=>{const u={...diaryNA,[key]:!diaryNA[key]};setDiaryNA(u);localStorage.setItem(`vg_na_diary_${userId}`,JSON.stringify(u));};
  const [customCleanJobs,setCustomCleanJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_ccj_${userId}`))||[];}catch{return[];}});
  const [newCleanJob,setNewCleanJob]=useState('');
  const addCleanJob=()=>{if(!newCleanJob.trim())return;const job={id:Date.now().toString(),label:newCleanJob.trim()};const u=[...customCleanJobs,job];setCustomCleanJobs(u);localStorage.setItem(`vg_ccj_${userId}`,JSON.stringify(u));setNewCleanJob('');};
  const removeCleanJob=id=>{const u=customCleanJobs.filter(j=>j.id!==id);setCustomCleanJobs(u);localStorage.setItem(`vg_ccj_${userId}`,JSON.stringify(u));const nc={...cleanChecks};delete nc[`ccj_${id}`];setCleanChecks(nc);};
  const [customOpenJobs,setCustomOpenJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_coj_${userId}`))||[];}catch{return[];}});
  const [newOpenJob,setNewOpenJob]=useState('');
  const addOpenJob=()=>{if(!newOpenJob.trim())return;const job={id:Date.now().toString(),label:newOpenJob.trim()};const u=[...customOpenJobs,job];setCustomOpenJobs(u);localStorage.setItem(`vg_coj_${userId}`,JSON.stringify(u));setNewOpenJob('');};
  const removeOpenJob=id=>{const u=customOpenJobs.filter(j=>j.id!==id);setCustomOpenJobs(u);localStorage.setItem(`vg_coj_${userId}`,JSON.stringify(u));const nc={...opening};delete nc[`coj_${id}`];setOpening(nc);};
  const [customCloseJobs,setCustomCloseJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cclosej_${userId}`))||[];}catch{return[];}});
  const [newCloseJob,setNewCloseJob]=useState('');
  const addCloseJob=()=>{if(!newCloseJob.trim())return;const job={id:Date.now().toString(),label:newCloseJob.trim()};const u=[...customCloseJobs,job];setCustomCloseJobs(u);localStorage.setItem(`vg_cclosej_${userId}`,JSON.stringify(u));setNewCloseJob('');};
  const removeCloseJob=id=>{const u=customCloseJobs.filter(j=>j.id!==id);setCustomCloseJobs(u);localStorage.setItem(`vg_cclosej_${userId}`,JSON.stringify(u));const nc={...closing};delete nc[`closej_${id}`];setClosing(nc);};
  const openingItems=DEFAULT_OPENING;
  const closingItems=DEFAULT_CLOSING;
  const cleanItems=DEFAULT_CLEANING;
  // Default lines the user removed during onboarding (or later). Treated like "not applicable".
  const rmOpen=readRemoved(userId,'opening');
  const rmClose=readRemoved(userId,'closing');
  const rmClean=readRemoved(userId,'cleaning');
  useEffect(()=>{
    const load=async()=>{
      const [{data:all},{data:cl}]=await Promise.all([
        sb.from('diaries').select('*').eq('user_id',userId).order('date',{ascending:false}).limit(14),
        sb.from('cleaning_logs').select('*').eq('user_id',userId).eq('date',todayStr).maybeSingle(),
      ]);
      const td=(all||[]).find(d=>d.date===todayStr);
      if(td){setLocation(td.location||'');setOpening(td.opening||{});setClosing(td.closing||{});setIssues(td.issues||'');setSavedD(true);}
      if(cl){setCleanChecks(cl.checks||{});setCleanBy(cl.saved_by||profile?.name||'');setSavedC(true);}
      setRecent((all||[]).filter(d=>d.date!==todayStr).slice(0,7));
      setLoading(false);
    };
    load();
  },[userId]);
  const saveDiary=async()=>{
    setSaving(true);
    await sb.from('diaries').upsert({user_id:userId,date:todayStr,location,opening,closing,issues},{onConflict:'user_id,date'});
    setSavedD(true); setSaving(false);
    window.__vgRefreshCompliance&&window.__vgRefreshCompliance();
  };
  const saveClean=async()=>{
    setSaving(true);
    await sb.from('cleaning_logs').upsert({user_id:userId,date:todayStr,checks:cleanChecks,saved_by:cleanBy},{onConflict:'user_id,date'});
    setSavedC(true); setSaving(false);
    window.__vgRefreshCompliance&&window.__vgRefreshCompliance();
  };
  const saveEndOfDay=async()=>{
    setSaving(true);
    await Promise.all([
      sb.from('diaries').upsert({user_id:userId,date:todayStr,location,opening,closing,issues},{onConflict:'user_id,date'}),
      sb.from('cleaning_logs').upsert({user_id:userId,date:todayStr,checks:cleanChecks,saved_by:cleanBy},{onConflict:'user_id,date'}),
    ]);
    setSavedD(true);setSavedC(true);setSaving(false);
    window.__vgRefreshCompliance&&window.__vgRefreshCompliance();
  };
  if(loading) return <div className="pt-28"><Spinner full/></div>;
  const allOpen=openingItems.every((_,i)=>rmOpen.includes(i)||opening[i]||diaryNA['o'+i]);
  const allClose=closingItems.every((_,i)=>rmClose.includes(i)||closing[i]||diaryNA['c'+i]);
  const allClean=cleanItems.every((_,i)=>rmClean.includes(i)||cleanChecks[i]||diaryNA['cl'+i]);
  const tickAllOpen=()=>{const o={...opening};openingItems.forEach((_,i)=>{if(!rmOpen.includes(i))o[i]=true;});customOpenJobs.forEach(j=>{o[`coj_${j.id}`]=true;});setOpening(o);};
  const tickAllClose=()=>{const c={...closing};closingItems.forEach((_,i)=>{if(!rmClose.includes(i))c[i]=true;});customCloseJobs.forEach(j=>{c[`closej_${j.id}`]=true;});setClosing(c);};
  const tickAllClean=()=>{const c={...cleanChecks};cleanItems.forEach((_,i)=>{if(!rmClean.includes(i))c[i]=true;});customCleanJobs.forEach(j=>{c[`ccj_${j.id}`]=true;});setCleanChecks(c);};
  const TickAll=({onClick})=>(<button onClick={onClick} className="text-xs font-bold text-teal active:opacity-60">Tick all</button>);
  return (
    <div className="pt-28 pb-8 px-4">
      <Card className="p-4 mb-4">
        <div className="flex items-center gap-2 mb-3">
          <Icon name="location" size={14} color="#0D7377"/>
          <span className="text-xs font-bold text-teal uppercase tracking-wide">{fmtDate(todayStr)}</span>
          {savedD&&<Badge label="Saved" color="green"/>}
        </div>
        <Input label="Where are you trading today?" value={location} onChange={setLocation} placeholder="e.g. Borough Market, Stall 12"/>
      </Card>
      {/* Tab selector */}
      <div className="flex rounded-xl bg-gray-100 p-1 mb-4">
        {[{k:'opening',l:'Opening'},{k:'closing',l:'End of Day'}].map(t=>(
          <button key={t.k} onClick={()=>setTab(t.k)}
            className={`flex-1 py-2.5 rounded-lg text-xs font-bold transition-all ${tab===t.k?'bg-white shadow text-navy':'text-gray-400'}`}>
            {t.l}
          </button>
        ))}
      </div>
      {tab==='opening'&&(
        <Card className="p-4 fade-in">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-navy text-sm">Opening Checks</h3>
            <div className="flex items-center gap-2">{allOpen?<Badge label="All done" color="green"/>:<TickAll onClick={tickAllOpen}/>}</div>
          </div>
          {openingItems.map((item,i)=>rmOpen.includes(i)?null:(
            <Checkbox key={i} checked={!!opening[i]} onChange={v=>setOpening(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['o'+i]} onToggleNA={()=>toggleDiaryNA('o'+i)}/>
          ))}
          {customOpenJobs.map(job=>(
            <div key={job.id} className="flex items-center gap-1">
              <div className="flex-1"><Checkbox checked={!!opening[`coj_${job.id}`]} onChange={v=>setOpening(p=>({...p,[`coj_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`coj_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`coj_${job.id}`)}/></div>
              <button onClick={()=>removeOpenJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
            </div>
          ))}
          <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
            <input value={newOpenJob} onChange={e=>setNewOpenJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addOpenJob()} placeholder="Add custom item…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
            <button onClick={addOpenJob} disabled={!newOpenJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
          </div>
          <div className="mt-4"><Btn onClick={saveDiary} loading={saving} variant={savedD?'ghost':'primary'}>{savedD?'Apply changes':'Save opening checks'}</Btn></div>
        </Card>
      )}
      {tab==='closing'&&(
        <Card className="p-4 fade-in">
          {/* ── Closing Checks ── */}
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-navy text-sm">Closing Checks</h3>
            <div className="flex items-center gap-2">{allClose?<Badge label="Done" color="green"/>:<TickAll onClick={tickAllClose}/>}</div>
          </div>
          {closingItems.map((item,i)=>rmClose.includes(i)?null:(
            <Checkbox key={i} checked={!!closing[i]} onChange={v=>setClosing(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['c'+i]} onToggleNA={()=>toggleDiaryNA('c'+i)}/>
          ))}
          {customCloseJobs.map(job=>(
            <div key={job.id} className="flex items-center gap-1">
              <div className="flex-1"><Checkbox checked={!!closing[`closej_${job.id}`]} onChange={v=>setClosing(p=>({...p,[`closej_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`closej_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`closej_${job.id}`)}/></div>
              <button onClick={()=>removeCloseJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
            </div>
          ))}
          <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
            <input value={newCloseJob} onChange={e=>setNewCloseJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addCloseJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
            <button onClick={addCloseJob} disabled={!newCloseJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
          </div>
          {/* ── Cleaning Schedule ── */}
          <div className="flex items-center justify-between mt-6 mb-4 pt-5 border-t-2 border-gray-100">
            <h3 className="font-bold text-navy text-sm">Cleaning Schedule</h3>
            <div className="flex items-center gap-2">{allClean?<Badge label="Done" color="green"/>:<TickAll onClick={tickAllClean}/>}</div>
          </div>
          {cleanItems.map((item,i)=>rmClean.includes(i)?null:(
            <Checkbox key={i} checked={!!cleanChecks[i]} onChange={v=>setCleanChecks(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['cl'+i]} onToggleNA={()=>toggleDiaryNA('cl'+i)}/>
          ))}
          {customCleanJobs.map(job=>(
            <div key={job.id} className="flex items-center gap-1">
              <div className="flex-1"><Checkbox checked={!!cleanChecks[`ccj_${job.id}`]} onChange={v=>setCleanChecks(p=>({...p,[`ccj_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`ccj_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`ccj_${job.id}`)}/></div>
              <button onClick={()=>removeCleanJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
            </div>
          ))}
          <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
            <input value={newCleanJob} onChange={e=>setNewCleanJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addCleanJob()} placeholder="Add custom item…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
            <button onClick={addCleanJob} disabled={!newCleanJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
          </div>
          {/* ── Notes + sign-off ── */}
          <div className="mt-5 pt-5 border-t border-gray-100">
            <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Issues / notes (optional)</label>
            <textarea value={issues} onChange={e=>setIssues(e.target.value)} rows={3} placeholder="Any issues, incidents or actions taken today?"
              className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal resize-none"/>
          </div>
          <div className="mt-3"><Input label="Signed off by" value={cleanBy} onChange={setCleanBy} placeholder="Your name"/></div>
          <Btn onClick={saveEndOfDay} loading={saving} variant={(savedD&&savedC)?'ghost':'primary'}>{(savedD&&savedC)?'Apply changes':'Save end of day'}</Btn>
        </Card>
      )}
      {recent.length>0&&(
        <div className="mt-6">
          <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Recent Entries</p>
          {recent.map((d,i)=>(
            <Card key={i} className="p-3.5 mb-2 flex items-center gap-3">
              <div className="w-8 h-8 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <Icon name="check" size={14} color="#16a34a"/>
              </div>
              <div className="flex-1">
                <p className="text-sm font-bold text-navy">{fmtDate(d.date)}</p>
                <p className="text-xs text-gray-400 truncate">{d.location||'No location recorded'}</p>
              </div>
              <span className="text-xs text-gray-300">{fmtDateShort(d.date)}</span>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
};

// ── TEMPERATURE LOG ───────────────────────────────────────────────────────────
const DEFAULT_APPLIANCES=[
  {id:'a1',name:'Fridge 1',type:'cold',th:8,emoji:'🧊'},
  {id:'a2',name:'Freezer',type:'cold',th:-18,emoji:'❄️'},
  {id:'a3',name:'Hot Hold',type:'hot',th:63,emoji:'🔥'},
];
const applKey=uid=>`vg_appliances_${uid}`;
const loadAppliances=uid=>{try{return JSON.parse(localStorage.getItem(applKey(uid)))||DEFAULT_APPLIANCES;}catch{return DEFAULT_APPLIANCES;}};
const saveAppliances=(uid,list)=>localStorage.setItem(applKey(uid),JSON.stringify(list));

if(loading) return <div className="pt-28"><Spinner full/></div>;
  return (
    <div className="pt-28 pb-8 px-4">
      {/* Status banner */}
      <div className={`rounded-2xl p-4 mb-4 flex items-center gap-3 border ${todayTemps.length>=2?'bg-green-50 border-green-100':'bg-amber-50 border-amber-100'}`}>
        <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${todayTemps.length>=2?'bg-green-100':'bg-amber-100'}`}>
          <span className={`text-lg font-black ${todayTemps.length>=2?'text-green-700':'text-amber-700'}`}>{todayTemps.length}</span>
        </div>
        <div className="flex-1">
          <p className={`font-bold text-sm ${todayTemps.length>=2?'text-green-700':'text-amber-800'}`}>
            {todayTemps.length>=2?'Daily requirement met ✓':`${todayTemps.length} of 2 readings done today`}
          </p>
          <p className={`text-xs ${todayTemps.length>=2?'text-green-500':'text-amber-600'}`}>Need at least 2 readings per day</p>
        </div>
      </div>

{/* Appliance header + manage button */}
      <div className="flex items-center justify-between mb-3">
        <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1">Log Temperatures</p>
        <button onClick={()=>{setEditMode(p=>!p);setShowAdd(false);setNewName('');setNewTh('');}}
          className={`flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-bold transition-all ${editMode?'bg-navy text-white':'bg-teal text-white'}`}>
          {editMode?(
            <><span className="text-base leading-none">✓</span> Done</>
          ):(
            <><Icon name="plus" size={14} color="white"/> Add / Remove</>
          )}
        </button>
      </div>

{appliances.map(appl=>{
        const tempVal=temps[appl.id]||'';
        const tempNum=parseFloat(tempVal);
        const isPass=tempVal?(appl.type==='hot'?tempNum>=appl.th:tempNum<=appl.th):null;
        const flashed=flash[appl.id];
        return (
          <Card key={appl.id} className="p-4 mb-3">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-xl">{appl.emoji}</span>
              <div className="flex-1">
                <p className="font-bold text-navy text-sm">{appl.name}</p>
                <p className="text-xs text-gray-400">{appl.type==='hot'?`Must be ≥${appl.th}°C`:`Must be ≤${appl.th}°C`}</p>
              </div>
              {isPass!==null&&(
                <span className={`text-xs font-bold px-2 py-1 rounded-lg ${isPass?'bg-green-100 text-green-700':'bg-red-100 text-red-600'}`}>{isPass?'PASS':'FAIL'}</span>
              )}
              {editMode&&(
                <button onClick={()=>removeAppliance(appl.id)} className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center ml-1">
                  <span className="text-red-500 font-black text-base leading-none">−</span>
                </button>
              )}
            </div>
            {flashed?<OkMsg msg="✓ Reading saved!"/>:(
              <>
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <input type="number" value={tempVal} onChange={e=>setTemps(p=>({...p,[appl.id]:e.target.value}))} placeholder="0"
                      className="w-full border border-gray-200 rounded-xl px-4 py-3 text-2xl font-black bg-gray-50 focus:outline-none focus:border-teal pr-10"/>
                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 font-bold text-sm">°C</span>
                  </div>
                  <button onClick={()=>logTemp(appl)} disabled={!tempVal||saving[appl.id]}
                    className={`px-6 rounded-xl font-bold text-sm transition-all flex items-center gap-1 ${tempVal?'bg-teal text-white':'bg-gray-100 text-gray-400'}`}>
                    {saving[appl.id]?<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"/>:'Log'}
                  </button>
                </div>
                {tempVal&&!isPass&&(
                  <div className="mt-2">
                    <textarea value={actions[appl.id]||''} onChange={e=>setActions(p=>({...p,[appl.id]:e.target.value}))} rows={2}
                      placeholder="FAIL — note corrective action taken..."
                      className="w-full border border-red-200 rounded-xl px-4 py-2 text-sm bg-red-50 focus:outline-none resize-none mt-1"/>
                  </div>
                )}
              </>
            )}
          </Card>
        );
      })}

{/* Inline add form — shown in edit mode */}
      {editMode&&(
        <Card className="p-4 mb-3 border-2 border-teal/30 fade-in">
          <p className="text-xs font-bold text-teal uppercase tracking-wide mb-3">Add New Appliance</p>
          <div className="grid grid-cols-3 gap-2 mb-3">
            {[{label:'Fridge',type:'cold',th:8,emoji:'🧊'},{label:'Freezer',type:'cold',th:-18,emoji:'❄️'},{label:'Hot Hold',type:'hot',th:63,emoji:'🔥'}].map(p=>(
              <button key={p.label} onClick={()=>{setNewName(p.label);setNewType(p.type);setNewTh(String(p.th));}}
                className={`py-2.5 rounded-xl border-2 text-xs font-semibold text-center transition-all ${newName===p.label?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>
                <div className="text-lg">{p.emoji}</div><div>{p.label}</div>
              </button>
            ))}
          </div>
          <Input label="Name" value={newName} onChange={setNewName} placeholder="e.g. Fridge 2, Prep Fridge"/>
          <div className="grid grid-cols-2 gap-3 mb-3">
            <div>
              <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Type</label>
              <div className="flex gap-2">
                {[{v:'cold',l:'Cold'},{v:'hot',l:'Hot'}].map(o=>(
                  <button key={o.v} onClick={()=>setNewType(o.v)}
                    className={`flex-1 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all ${newType===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>{o.l}</button>
                ))}
              </div>
            </div>
            <Input label="Safe limit (°C)" value={newTh} onChange={setNewTh} type="number" placeholder={newType==='cold'?'8':'63'}/>
          </div>
          <Btn onClick={addAppliance} disabled={!newName} size="sm">+ Add appliance</Btn>
        </Card>
      )}

{/* Today's readings */}
      {todayTemps.length>0&&(
        <>
          <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Today's Readings</p>
          {todayTemps.map((t,i)=>(
            <Card key={i} className="p-3.5 mb-2 flex items-center gap-3">
              <div className={`w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0 ${t.pass?'bg-green-100':'bg-red-100'}`}>
                <Icon name={t.pass?'check':'warn'} size={14} color={t.pass?'#16a34a':'#dc2626'}/>
              </div>
              <div className="flex-1">
                <p className="text-sm font-bold text-navy">{t.unit}</p>
                <p className="text-xs text-gray-400">{t.time} · {t.temp}°C</p>
              </div>
              <span className={`text-xs font-bold px-2 py-1 rounded-lg ${t.pass?'bg-green-100 text-green-700':'bg-red-100 text-red-600'}`}>{t.pass?'PASS':'FAIL'}</span>
              <button onClick={()=>{if(window.confirm('Delete this reading?'))deleteTemp(t.id);}} className="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center active:bg-red-100 flex-shrink-0 ml-1" title="Delete reading">
                <span className="text-gray-400 text-sm font-bold leading-none">×</span>
              </button>
            </Card>
          ))}
        </>
      )}
      {allTemps.filter(t=>t.date!==todayStr).length>0&&(
        <>
          <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mt-5 mb-3">Previous</p>
          {allTemps.filter(t=>t.date!==todayStr).slice(0,10).map((t,i)=>(
            <Card key={i} className="p-3 mb-2 flex items-center gap-3">
              <div className={`w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0 ${t.pass?'bg-green-100':'bg-red-100'}`}>
                <Icon name={t.pass?'check':'warn'} size={12} color={t.pass?'#16a34a':'#dc2626'}/>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-xs font-semibold text-navy">{t.unit} · {t.temp}°C · {t.time}</p>
                <p className="text-xs text-gray-400">{fmtDate(t.date)}</p>
              </div>
              <span className={`text-xs font-bold ${t.pass?'text-green-600':'text-red-500'}`}>{t.pass?'PASS':'FAIL'}</span>
            </Card>
          ))}
        </>
      )}
    </div>
  );
};

// ── VAN & SAFETY ──────────────────────────────────────────────────────────────
const VanScreen = ({userId,profile}) => {
  const [tab,setTab]=useState('vehicle');
  const showLPG=profile?.lpg_enabled!==false;
  const showWater=profile?.water_enabled===true;
  const todayStr=today();
  const [saving,setSaving]=useState(false);
  const [vChecks,setVChecks]=useState({});
  const [vBy,setVBy]=useState(profile?.name||'');
  const [vSaved,setVSaved]=useState(false);
  const [lpgRecs,setLpgRecs]=useState([]);
  const [lpg,setLpg]=useState({hose:false,reg:false,flame:false,leak:false});
  const [lpgNotes,setLpgNotes]=useState('');
  const [lpgFlash,setLpgFlash]=useState(false);
  const [waterRecs,setWaterRecs]=useState([]);
  const [water,setWater]=useState({filled:false,cleaned:false,san:false});
  const [waterFlash,setWaterFlash]=useState(false);
  const [pitches,setPitches]=useState([]);
  const [pitchName,setPitchName]=useState('');
  const [pitchAddr,setPitchAddr]=useState('');
  const [pitchFlash,setPitchFlash]=useState(false);
  const [loading,setLoading]=useState(true);
  const [vanNA,setVanNA]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_na_van_${userId}`))||{};}catch{return{};}});
  const toggleVanNA=key=>{const u={...vanNA,[key]:!vanNA[key]};setVanNA(u);localStorage.setItem(`vg_na_van_${userId}`,JSON.stringify(u));};
  const [customVanJobs,setCustomVanJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cvj_${userId}`))||[];}catch{return[];}});
  const [newVanJob,setNewVanJob]=useState('');
  const addVanJob=()=>{if(!newVanJob.trim())return;const job={id:Date.now().toString(),label:newVanJob.trim()};const u=[...customVanJobs,job];setCustomVanJobs(u);localStorage.setItem(`vg_cvj_${userId}`,JSON.stringify(u));setNewVanJob('');};
  const removeVanJob=id=>{const u=customVanJobs.filter(j=>j.id!==id);setCustomVanJobs(u);localStorage.setItem(`vg_cvj_${userId}`,JSON.stringify(u));const nc={...vChecks};delete nc[`cvj_${id}`];setVChecks(nc);};
  const [customLpgJobs,setCustomLpgJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_clpgj_${userId}`))||[];}catch{return[];}});
  const [customLpgChecks,setCustomLpgChecks]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_clpgchecks_${userId}`))||{};}catch{return{};}});
  const [newLpgJob,setNewLpgJob]=useState('');
  const addLpgJob=()=>{if(!newLpgJob.trim())return;const job={id:Date.now().toString(),label:newLpgJob.trim()};const u=[...customLpgJobs,job];setCustomLpgJobs(u);localStorage.setItem(`vg_clpgj_${userId}`,JSON.stringify(u));setNewLpgJob('');};
  const removeLpgJob=id=>{const u=customLpgJobs.filter(j=>j.id!==id);setCustomLpgJobs(u);localStorage.setItem(`vg_clpgj_${userId}`,JSON.stringify(u));const nc={...customLpgChecks};delete nc[id];setCustomLpgChecks(nc);localStorage.setItem(`vg_clpgchecks_${userId}`,JSON.stringify(nc));};
  const toggleLpgCheck=(id,v)=>{const nc={...customLpgChecks,[id]:v};setCustomLpgChecks(nc);localStorage.setItem(`vg_clpgchecks_${userId}`,JSON.stringify(nc));};
  const [customWaterJobs,setCustomWaterJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cwj_${userId}`))||[];}catch{return[];}});
  const [customWaterChecks,setCustomWaterChecks]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cwchecks_${userId}`))||{};}catch{return{};}});
  const [newWaterJob,setNewWaterJob]=useState('');
  const addWaterJob=()=>{if(!newWaterJob.trim())return;const job={id:Date.now().toString(),label:newWaterJob.trim()};const u=[...customWaterJobs,job];setCustomWaterJobs(u);localStorage.setItem(`vg_cwj_${userId}`,JSON.stringify(u));setNewWaterJob('');};
  const removeWaterJob=id=>{const u=customWaterJobs.filter(j=>j.id!==id);setCustomWaterJobs(u);localStorage.setItem(`vg_cwj_${userId}`,JSON.stringify(u));const nc={...customWaterChecks};delete nc[id];setCustomWaterChecks(nc);localStorage.setItem(`vg_cwchecks_${userId}`,JSON.stringify(nc));};
  const toggleWaterCheck=(id,v)=>{const nc={...customWaterChecks,[id]:v};setCustomWaterChecks(nc);localStorage.setItem(`vg_cwchecks_${userId}`,JSON.stringify(nc));};
  const vehicleItems=['Unit is clean and ready for service',showLPG?'Gas connections checked — no leaks':'Electrical connections checked','Fire extinguisher present and accessible','First aid kit stocked and accessible','Hand washing station set up and stocked','Food at correct temperatures','All equipment safely stored','Waste disposal set up'];
  useEffect(()=>{
    const load=async()=>{
      const [{data:vc},{data:lR},{data:wR},{data:pR}]=await Promise.all([
        sb.from('van_checks').select('*').eq('user_id',userId).eq('date',todayStr).maybeSingle(),
        sb.from('lpg_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(5),
        sb.from('water_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(3),
        sb.from('pitch_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(20),
      ]);
      if(vc){setVChecks(vc.checks||{});setVBy(vc.signed_by||profile?.name||'');setVSaved(true);}
      setLpgRecs(lR||[]); setWaterRecs(wR||[]); setPitches(pR||[]);
      setLoading(false);
    };
    load();
  },[userId]);
  const saveVehicle=async()=>{setSaving(true);await sb.from('van_checks').upsert({user_id:userId,date:todayStr,checks:vChecks,signed_by:vBy},{onConflict:'user_id,date'});setVSaved(true);setSaving(false);window.__vgRefreshCompliance&&window.__vgRefreshCompliance();};
  const saveLPG=async()=>{
    if(!Object.values(lpg).every(Boolean)) return;
    setSaving(true);
    await sb.from('lpg_logs').insert({user_id:userId,date:todayStr,...lpg,notes:lpgNotes});
    const{data}=await sb.from('lpg_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(5);
    setLpgRecs(data||[]); setLpgFlash(true); setTimeout(()=>setLpgFlash(false),2000); setSaving(false);
  };
  const saveWater=async()=>{
    setSaving(true);
    await sb.from('water_logs').insert({user_id:userId,date:todayStr,...water});
    const{data}=await sb.from('water_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(3);
    setWaterRecs(data||[]); setWaterFlash(true); setTimeout(()=>setWaterFlash(false),2000); setSaving(false);
  };
  const savePitch=async()=>{
    if(!pitchName) return;
    setSaving(true);
    await sb.from('pitch_logs').insert({user_id:userId,date:todayStr,name:pitchName,address:pitchAddr});
    const{data}=await sb.from('pitch_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(20);
    setPitches(data||[]); setPitchFlash(true); setTimeout(()=>setPitchFlash(false),2000); setPitchName(''); setPitchAddr(''); setSaving(false);
  };
  const lastLPG=lpgRecs[0];
  const lpgDays=lastLPG?Math.floor((new Date()-new Date(lastLPG.created_at))/86400000):null;
  const lpgDue=!lastLPG||lpgDays>30;
  const tabs=[{k:'vehicle',l:'Unit'},{k:'lpg',l:'LPG'},{k:'water',l:'Water'},{k:'pitch',l:'Pitch'}].filter(t=>(t.k!=='lpg'||showLPG)&&(t.k!=='water'||showWater));
  if(loading) return <div className="pt-28"><Spinner full/></div>;
  return (
    <div className="pt-28 pb-8 px-4">
      <div className={`flex rounded-xl bg-gray-100 p-1 mb-4`}>
        {tabs.map(t=>(
          <button key={t.k} onClick={()=>setTab(t.k)}
            className={`flex-1 py-2.5 rounded-lg text-xs font-bold transition-all ${tab===t.k?'bg-white shadow text-navy':'text-gray-400'}`}>
            {t.l}
          </button>
        ))}
      </div>
      {tab==='vehicle'&&(
        <Card className="p-4 fade-in">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-navy text-sm">Daily Unit Check</h3>
            <button onClick={()=>{const c={...vChecks};vehicleItems.forEach((_,i)=>{c[i]=true;});customVanJobs.forEach(j=>{c[`cvj_${j.id}`]=true;});setVChecks(c);}} className="text-xs font-bold text-teal active:opacity-60">Tick all</button>
          </div>
          {vehicleItems.map((item,i)=>(
            <Checkbox key={i} checked={!!vChecks[i]} onChange={v=>setVChecks(p=>({...p,[i]:v}))} label={item} isNA={!!vanNA['v'+i]} onToggleNA={()=>toggleVanNA('v'+i)}/>
          ))}
          {customVanJobs.map(job=>(
            <div key={job.id} className="flex items-center gap-1">
              <div className="flex-1"><Checkbox checked={!!vChecks[`cvj_${job.id}`]} onChange={v=>setVChecks(p=>({...p,[`cvj_${job.id}`]:v}))} label={job.label} isNA={!!vanNA[`cvj_${job.id}`]} onToggleNA={()=>toggleVanNA(`cvj_${job.id}`)}/></div>
              <button onClick={()=>removeVanJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
            </div>
          ))}
          <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
            <input value={newVanJob} onChange={e=>setNewVanJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addVanJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
            <button onClick={addVanJob} disabled={!newVanJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
          </div>
          <div className="mt-4"><Input label="Checked by" value={vBy} onChange={setVBy} placeholder="Your name"/></div>
          <Btn onClick={saveVehicle} loading={saving} variant={vSaved?'ghost':'primary'}>{vSaved?'Apply changes':'Save unit check'}</Btn>
        </Card>
      )}
      {tab==='lpg'&&showLPG&&(
        <div className="fade-in">
          <div className={`rounded-2xl p-4 mb-4 flex items-start gap-3 border ${lpgDue?'bg-amber-50 border-amber-200':'bg-green-50 border-green-100'}`}>
            <Icon name={lpgDue?'warn':'check'} size={18} color={lpgDue?'#d97706':'#16a34a'}/>
            <div>
              <p className={`font-bold text-sm ${lpgDue?'text-amber-800':'text-green-700'}`}>
                {!lastLPG?'No LPG check on record':lpgDue?`Overdue — last checked ${lpgDays} days ago`:`Checked ${lpgDays}d ago — next in ${30-lpgDays}d`}
              </p>
              <p className="text-xs text-gray-500 mt-0.5">Monthly LPG checks are required</p>
            </div>
          </div>
          <Card className="p-4 mb-3">
            <h3 className="font-bold text-navy text-sm mb-4">LPG Safety Inspection</h3>
            <Checkbox checked={lpg.hose} onChange={v=>setLpg(p=>({...p,hose:v}))} label="Gas hose in good condition — no cracks or damage" isNA={!!vanNA['lpg_hose']} onToggleNA={()=>toggleVanNA('lpg_hose')}/>
            <Checkbox checked={lpg.reg} onChange={v=>setLpg(p=>({...p,reg:v}))} label="Regulator secure and undamaged" isNA={!!vanNA['lpg_reg']} onToggleNA={()=>toggleVanNA('lpg_reg')}/>
            <Checkbox checked={lpg.flame} onChange={v=>setLpg(p=>({...p,flame:v}))} label="Flame supervision devices working correctly" isNA={!!vanNA['lpg_flame']} onToggleNA={()=>toggleVanNA('lpg_flame')}/>
            <Checkbox checked={lpg.leak} onChange={v=>setLpg(p=>({...p,leak:v}))} label="No gas smell or leaks detected" isNA={!!vanNA['lpg_leak']} onToggleNA={()=>toggleVanNA('lpg_leak')}/>
            {customLpgJobs.map(job=>(
              <div key={job.id} className="flex items-center gap-1">
                <div className="flex-1"><Checkbox checked={!!customLpgChecks[job.id]} onChange={v=>toggleLpgCheck(job.id,v)} label={job.label} isNA={!!vanNA[`lpgj_${job.id}`]} onToggleNA={()=>toggleVanNA(`lpgj_${job.id}`)}/></div>
                <button onClick={()=>removeLpgJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
              </div>
            ))}
            <div className="flex gap-2 mt-2 pt-3 border-t border-gray-100 mb-2">
              <input value={newLpgJob} onChange={e=>setNewLpgJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addLpgJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
              <button onClick={addLpgJob} disabled={!newLpgJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
            </div>
            <div className="mt-3 mb-3">
              <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Notes (optional)</label>
              <textarea value={lpgNotes} onChange={e=>setLpgNotes(e.target.value)} rows={2} className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none resize-none"/>
            </div>
            {lpgFlash?<OkMsg msg="✓ LPG check recorded!"/>:<Btn onClick={saveLPG} loading={saving} disabled={!Object.values(lpg).every(Boolean)}>Save LPG Check</Btn>}
          </Card>
          {lpgRecs.slice(0,3).map((r,i)=>(
            <Card key={i} className="p-3 mb-2 flex items-center gap-3">
              <div className="w-8 h-8 bg-green-100 rounded-xl flex items-center justify-center"><Icon name="fire" size={14} color="#16a34a"/></div>
              <div><p className="text-sm font-bold text-navy">{fmtDate(r.date)}</p><p className="text-xs text-green-600">All checks passed</p></div>
            </Card>
          ))}
        </div>
      )}
      {tab==='water'&&(
        <Card className="p-4 fade-in">
          <h3 className="font-bold text-navy text-sm mb-1">Water Tank Log</h3>
          {waterRecs[0]&&<p className="text-xs text-teal font-semibold mb-3">Last logged: {fmtDate(waterRecs[0].date)}</p>}
          <p className="text-xs text-gray-400 mb-4">Record potable water management</p>
          <Checkbox checked={water.filled} onChange={v=>setWater(p=>({...p,filled:v}))} label="Fresh water tank filled with potable water" isNA={!!vanNA['w_filled']} onToggleNA={()=>toggleVanNA('w_filled')}/>
          <Checkbox checked={water.cleaned} onChange={v=>setWater(p=>({...p,cleaned:v}))} label="Tank and pipes cleaned" isNA={!!vanNA['w_cleaned']} onToggleNA={()=>toggleVanNA('w_cleaned')}/>
          <Checkbox checked={water.san} onChange={v=>setWater(p=>({...p,san:v}))} label="Tank sanitised with appropriate solution" isNA={!!vanNA['w_san']} onToggleNA={()=>toggleVanNA('w_san')}/>
          {customWaterJobs.map(job=>(
            <div key={job.id} className="flex items-center gap-1">
              <div className="flex-1"><Checkbox checked={!!customWaterChecks[job.id]} onChange={v=>toggleWaterCheck(job.id,v)} label={job.label} isNA={!!vanNA[`wj_${job.id}`]} onToggleNA={()=>toggleVanNA(`wj_${job.id}`)}/></div>
              <button onClick={()=>removeWaterJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button>
            </div>
          ))}
          <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100">
            <input value={newWaterJob} onChange={e=>setNewWaterJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addWaterJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/>
            <button onClick={addWaterJob} disabled={!newWaterJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button>
          </div>
          <div className="mt-4">{waterFlash?<OkMsg msg="✓ Water log saved!"/>:<Btn onClick={saveWater} loading={saving}>Save Water Log</Btn>}</div>
        </Card>
      )}
      {tab==='pitch'&&(
        <div className="fade-in">
          <Card className="p-4 mb-4">
            <h3 className="font-bold text-navy text-sm mb-4">Log Today's Pitch</h3>
            <Input label="Event / Market name" value={pitchName} onChange={setPitchName} placeholder="e.g. Borough Market" required/>
            <Input label="Address" value={pitchAddr} onChange={setPitchAddr} placeholder="e.g. Southwark, London SE1"/>
            {pitchFlash?<OkMsg msg="✓ Pitch logged!"/>:<Btn onClick={savePitch} loading={saving} disabled={!pitchName}>Log pitch</Btn>}
          </Card>
          {pitches.length>0&&<>
            <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Pitch History</p>
            {pitches.map((r,i)=>(
              <Card key={i} className="p-3.5 mb-2 flex items-center gap-3">
                <div className="w-8 h-8 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0"><Icon name="location" size={14} color="#0D7377"/></div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-bold text-navy truncate">{r.name}</p>
                  <p className="text-xs text-gray-400">{fmtDate(r.date)}{r.address?` · ${r.address}`:''}</p>
                </div>
              </Card>
            ))}
          </>}
          {!pitches.length&&<p className="text-sm text-gray-400 text-center py-6">No pitches logged yet</p>}
        </div>
      )}
    </div>
  );
};

// ── EHO PACK ──────────────────────────────────────────────────────────────────
const RecordsScreen = ({userId,profile}) => {
  const [period,setPeriod]=useState('week');
  const [logType,setLogType]=useState('temps');
  const [records,setRecords]=useState([]);
  const [counts,setCounts]=useState({});
  const [passRate,setPassRate]=useState(0);
  const [todayPct,setTodayPct]=useState(0);
  const [loading,setLoading]=useState(true);
  const todayStr=today();

const getCutoff=(p)=>{
    if(p==='today') return todayStr;
    if(p==='week') return new Date(Date.now()-7*864e5).toISOString().slice(0,10);
    if(p==='month') return new Date(Date.now()-30*864e5).toISOString().slice(0,10);
    return null;
  };

useEffect(()=>{
    let ok=true;
    const load=async()=>{
      const cs=getCutoff(period);
      const ar=(q)=>period==='today'?q.eq('date',cs):cs?q.gte('date',cs):q;
      const mq=(t)=>ar(sb.from(t).select('*',{count:'exact',head:true}).eq('user_id',userId));
      const [dC,tC,cC,vC,lC,wC,pC,allT,tD,tT,tCl,tV]=await Promise.all([
        mq('diaries'),mq('temp_logs'),mq('cleaning_logs'),mq('van_checks'),
        mq('lpg_logs'),mq('water_logs'),mq('pitch_logs'),
        sb.from('temp_logs').select('pass').eq('user_id',userId),
        sb.from('diaries').select('id').eq('user_id',userId).eq('date',todayStr),
        sb.from('temp_logs').select('id').eq('user_id',userId).eq('date',todayStr),
        sb.from('cleaning_logs').select('id').eq('user_id',userId).eq('date',todayStr),
        sb.from('van_checks').select('id').eq('user_id',userId).eq('date',todayStr),
      ]);
      if(!ok) return;
      setCounts({diary:dC.count||0,temp:tC.count||0,clean:cC.count||0,van:vC.count||0,lpg:lC.count||0,water:wC.count||0,pitch:pC.count||0});
      const passing=(allT.data||[]).filter(t=>t.pass).length;
      setPassRate(allT.data?.length?Math.round((passing/allT.data.length)*100):0);
      const done=[!!(tD.data?.length),!!(tT.data?.length>=2),!!(tCl.data?.length),!!(tV.data?.length)].filter(Boolean).length;
      setTodayPct(Math.round((done/4)*100));
    };
    load();
    return()=>{ok=false;};
  },[userId,period]);

useEffect(()=>{
    let ok=true;
    const load=async()=>{
      setLoading(true);
      setRecords([]);
      const cs=getCutoff(period);
      const tableMap={temps:'temp_logs',diary:'diaries',cleaning:'cleaning_logs',equipment:'van_checks',lpg:'lpg_logs',water:'water_logs',pitches:'pitch_logs'};
      const table=tableMap[logType];
      let q=sb.from(table).select('*').eq('user_id',userId).order('date',{ascending:false}).order('created_at',{ascending:false}).limit(100);
      if(period==='today') q=q.eq('date',cs);
      else if(cs) q=q.gte('date',cs);
      const{data}=await q;
      if(!ok) return;
      setRecords(data||[]);
      setLoading(false);
    };
    load();
    return()=>{ok=false;};
  },[userId,logType,period]);

const total=Object.values(counts).reduce((a,b)=>a+b,0);

const LOG_TYPES=[
    {key:'temps',label:'Temps',cnt:counts.temp},
    {key:'diary',label:'Diary',cnt:counts.diary},
    {key:'cleaning',label:'Cleaning',cnt:counts.clean},
    {key:'equipment',label:'Equipment',cnt:counts.van},
    {key:'lpg',label:'LPG',cnt:counts.lpg},
    {key:'water',label:'Water',cnt:counts.water},
    {key:'pitches',label:'Pitches',cnt:counts.pitch},
  ];

return (
    <div className="pt-28 pb-8 px-4">
      <div className={`rounded-2xl p-4 mb-4 border flex items-center gap-4 ${sBg}`}>
        <div className="relative flex-shrink-0" style={{width:'56px',height:'56px'}}>
          <svg width="56" height="56" viewBox="0 0 56 56">
            <circle cx="28" cy="28" r="24" fill="none" stroke="#FFFFFF" strokeWidth="6"/>
            <circle cx="28" cy="28" r="24" fill="none" stroke={sRing} strokeWidth="6" strokeLinecap="round"
              strokeDasharray={2*Math.PI*24} strokeDashoffset={2*Math.PI*24*(1-todayPct/100)} transform="rotate(-90 28 28)"/>
          </svg>
          <div className="absolute inset-0 flex items-center justify-center">
            <span className={`text-sm font-black ${sTxt}`}>{todayPct}%</span>
          </div>
        </div>
        <div className="flex-1 min-w-0">
          <p className={`font-bold text-sm ${sTxt}`}>{todayPct===100?'EHO-ready for today':todayPct>0?'Some checks outstanding':'No checks logged today'}</p>
          <p className="text-xs text-gray-500 mt-0.5">Across diary, temps, cleaning & equipment</p>
        </div>
      </div>
      <Btn onClick={exportPack} variant="navy" className="mb-4"><Icon name="download" size={16} color="white"/>Export / email records</Btn>
      <div className="grid grid-cols-4 gap-1.5 mb-4">
        {[['today','Today'],['week','This week'],['month','Month'],['all','All time']].map(([p,l])=>(
          <button key={p} onClick={()=>setPeriod(p)}
            className={`py-2 rounded-xl text-xs font-bold border-2 transition-all ${period===p?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>{l}</button>
        ))}
      </div>
      <div className="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-1 px-1" style={{scrollbarWidth:'none',msOverflowStyle:'none'}}>
        {LOG_TYPES.map(t=>(
          <button key={t.key} onClick={()=>setLogType(t.key)}
            className={`flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-bold border transition-all ${logType===t.key?'bg-navy border-navy text-white':'bg-white border-gray-200 text-gray-600'}`}>
            {t.label}{t.cnt>0?` (${t.cnt})`:''}
          </button>
        ))}
      </div>
      <Card className="p-4 mb-4">
        {loading
          ?<Spinner/>
          :records.length===0
            ?<div className="text-center py-8">
              <p className="text-4xl mb-2">📭</p>
              <p className="text-sm text-gray-400">No {LOG_TYPES.find(t=>t.key===logType)?.label.toLowerCase()} records for this period</p>
            </div>
            :<div>
              <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{records.length} record{records.length!==1?'s':''}</p>
              {records.map(r=>renderRecord(r))}
            </div>
        }
      </Card>
      <Card className="p-4 mb-4">
        <div className="flex justify-between items-center mb-1">
          <h3 className="font-bold text-navy text-sm">Export EHO Pack</h3>
          <span className="text-xs text-gray-400">{total} total records</span>
        </div>
        <p className="text-xs text-gray-400 mb-3">All record types for the selected period. Save as PDF, print, or email to your EHO or team.</p>
        <Btn onClick={exportPack} variant="navy"><Icon name="download" size={16} color="white"/>Export / email records</Btn>
        <p className="text-xs text-gray-400 text-center mt-2">Opens a printable page · save as PDF</p>
      </Card>
      <div className="grid grid-cols-2 gap-3">
        <Card className="p-4"><p className="text-2xl font-black text-teal">{passRate}%</p><p className="text-xs text-gray-400 mt-1">Temperature pass rate</p></Card>
        <Card className="p-4"><p className="text-2xl font-black text-teal">{total}</p><p className="text-xs text-gray-400 mt-1">Records this period</p></Card>
      </div>
    </div>
  );
};

// ── FEEDBACK CARD ─────────────────────────────────────────────────────────────
const FeedbackCard = ({userId,email}) => {
  const [msg,setMsg]=useState('');
  const [sent,setSent]=useState(false);
  const [sending,setSending]=useState(false);
  const send=async()=>{
    if(!msg.trim())return;
    setSending(true);
    await sb.from('feedback').insert({user_id:userId,email,message:msg.trim()});
    setSending(false);setSent(true);setMsg('');
    setTimeout(()=>setSent(false),5000);
  };
  return (
    <Card className="p-4 mt-4">
      <div className="flex items-center gap-3 mb-3">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{background:'#EAF6F6'}}>
          <Icon name="chat" size={18} color="#0D7377"/>
        </div>
        <div>
          <p className="font-bold text-navy text-sm">Feedback & suggestions</p>
          <p className="text-xs text-gray-400">We read every message, and aim to add requested features within a week.</p>
        </div>
      </div>
      {sent?(
        <div className="bg-green-50 border border-green-100 rounded-xl p-3 text-center">
          <p className="text-green-700 text-sm font-semibold">Thank you — we've got it. 🙌</p>
          <p className="text-green-600 text-xs mt-0.5">We read everything and will be in touch if we need more detail.</p>
        </div>
      ):(<>
        <textarea value={msg} onChange={e=>setMsg(e.target.value)} rows={3}
          placeholder="What would make VanGuard better for you? Bugs, ideas or feature requests all welcome…"
          className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal resize-none mb-2"/>
        <Btn onClick={send} loading={sending}>Send feedback</Btn>
      </>)}
    </Card>
  );
};

// ── ACCOUNT ───────────────────────────────────────────────────────────────────
const AccountScreen = ({userId,profile,onUpdate}) => {
  const [section,setSection]=useState('profile');
  const [name,setName]=useState(profile?.name||'');
  const [biz,setBiz]=useState(profile?.business_name||'');
  const [unitType,setUnitType]=useState(profile?.unit_type||'van');
  const [authority,setAuthority]=useState(profile?.authority||'');
  const [lpgEnabled,setLpgEnabled]=useState(profile?.lpg_enabled!==false);
  const [waterEnabled,setWaterEnabled]=useState(profile?.water_enabled??false);
  const [teamSize,setTeamSize]=useState(profile?.team_size||'solo');
  const [foodType,setFoodType]=useState(profile?.food_type||'');
  const [hygieneRating,setHygieneRating]=useState(profile?.hygiene_rating??null);
  // Keep the form in sync when the profile loads/changes (e.g. name from signup).
  useEffect(()=>{
    setName(profile?.name||'');
    setBiz(profile?.business_name||'');
    setUnitType(profile?.unit_type||'van');
    setAuthority(profile?.authority||'');
    setLpgEnabled(profile?.lpg_enabled!==false);
    setWaterEnabled(profile?.water_enabled??false);
    setTeamSize(profile?.team_size||'solo');
    setFoodType(profile?.food_type||'');
    setHygieneRating(profile?.hygiene_rating??null);
  },[profile?.id]);
  const [saving,setSaving]=useState(false);
  const [flash,setFlash]=useState('');
  const [newPass,setNewPass]=useState('');
  const [passFlash,setPassFlash]=useState('');
  const [passErr,setPassErr]=useState('');
  const [passLoading,setPassLoading]=useState(false);
  const saveProfile=async()=>{
    setSaving(true);
    const{data}=await sb.from('profiles').update({name,business_name:biz,unit_type:unitType,authority,lpg_enabled:lpgEnabled,water_enabled:waterEnabled,team_size:teamSize,food_type:foodType,hygiene_rating:hygieneRating}).eq('id',userId).select().single();
    if(data) onUpdate(data);
    setFlash('Profile saved!'); setTimeout(()=>setFlash(''),2000); setSaving(false);
  };
  const changePass=async()=>{
    setPassErr(''); setPassFlash('');
    if(newPass.length<6){setPassErr('Password must be at least 6 characters.');return;}
    setPassLoading(true);
    const{error}=await sb.auth.updatePassword(newPass);
    if(error){setPassErr(error.message);} else {setPassFlash('Password updated!');setNewPass('');}
    setPassLoading(false);
  };
  const logout=async()=>{if(window.__vgDemo){window.__vgExitDemo&&window.__vgExitDemo();return;}await sb.auth.signOut();};
  const [subLoading,setSubLoading]=useState('');
  const isActive=profile?.subscription_status==='active';
  const isLifetime=profile?.subscription_status==='lifetime';
  const isTrialing=profile?.subscription_status==='trialing';
  const isPastDue=profile?.subscription_status==='past_due';
  const hasStripe=!!profile?.stripe_customer_id;
  const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0;
  const trialLeft=isTrialing?Math.max(0,14-trialDays):0;
  const isYearly=profile?.plan_interval==='year';
  const planName=isYearly?'Yearly plan':'Monthly plan';
  const planPrice=isYearly?'£69.99/year':'£7.99/month';
  const cancelling=!!profile?.cancel_at_period_end;
  const periodEnd=profile?.period_end?new Date(profile.period_end):null;
  const fmtEnd=periodEnd&&!isNaN(periodEnd)?periodEnd.toLocaleDateString('en-GB',{day:'numeric',month:'long',year:'numeric'}):null;
  const subscribe=async(plan='monthly')=>{
    if(window.__vgDemo){window.__vgExitDemo&&window.__vgExitDemo();return;}
    setSubLoading(plan);
    try{
      const tok=_getS()?.access_token;
      const res=await fetch('/.netlify/functions/create-checkout',{
        method:'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},
        body:JSON.stringify({userId,email:profile?.email||_getS()?.user?.email,trial:false}),
      });
      const {url,error}=await res.json();
      if(error)throw new Error(error);
      window.location.href=url;
    } catch(e){
      alert('Could not start checkout: '+e.message);
      setSubLoading('');
    }
  };
  const [portalLoading,setPortalLoading]=useState(false);
  const openPortal=async()=>{
    if(window.__vgDemo){window.__vgExitDemo&&window.__vgExitDemo();return;}
    setPortalLoading(true);
    try{
      const tok=_getS()?.access_token;
      const res=await fetch('/.netlify/functions/create-portal',{
        method:'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},
        body:JSON.stringify({userId}),
      });
      const {url,error}=await res.json();
      if(error)throw new Error(error);
      window.location.href=url;
    } catch(e){
      alert('Could not open the billing portal: '+e.message);
      setPortalLoading(false);
    }
  };
  const [notifStatus,setNotifStatus]=useState('checking');
  const [notifLoading,setNotifLoading]=useState(false);
  useEffect(()=>{
    if(window.__vgDemo){setNotifStatus('unsupported');return;}
    if(!('serviceWorker' in navigator)||!('PushManager' in window)){setNotifStatus('unsupported');return;}
    if(Notification.permission==='denied'){setNotifStatus('denied');return;}
    navigator.serviceWorker.ready.then(r=>r.pushManager.getSubscription()).then(sub=>{
      setNotifStatus(sub?'subscribed':'unsubscribed');
    }).catch(()=>setNotifStatus('unsubscribed'));
  },[]);
  const enableNotifs=async()=>{
    setNotifLoading(true);
    try{
      const perm=await Notification.requestPermission();
      if(perm!=='granted'){setNotifStatus('denied');setNotifLoading(false);return;}
      const reg=await navigator.serviceWorker.ready;
      const sub=await reg.pushManager.subscribe({userVisibleOnly:true,applicationServerKey:urlBase64ToUint8(VAPID_PUBLIC_KEY)});
      const tok=_getS()?.access_token;
      await fetch('/.netlify/functions/push-subscribe',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},body:JSON.stringify({subscription:sub.toJSON(),action:'subscribe'})}).catch(()=>{});
      setNotifStatus('subscribed');
    }catch{setNotifStatus('unsubscribed');}
    setNotifLoading(false);
  };
  const disableNotifs=async()=>{
    setNotifLoading(true);
    try{
      const reg=await navigator.serviceWorker.ready;
      const sub=await reg.pushManager.getSubscription();
      if(sub){
        const tok=_getS()?.access_token;
        await fetch('/.netlify/functions/push-subscribe',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},body:JSON.stringify({subscription:sub.toJSON(),action:'unsubscribe'})}).catch(()=>{});
        await sub.unsubscribe();
      }
      setNotifStatus('unsubscribed');
    }catch{}
    setNotifLoading(false);
  };
  const sections=[{k:'profile',l:'Profile',icon:'user'},{k:'security',l:'Security',icon:'lock'},{k:'subscription',l:'Plan',icon:'star'},{k:'notifications',l:'Reminders',icon:'bell'}];
  return (
    <div className="pt-28 pb-8 px-4">
      {/* Profile summary */}
      <Card className="p-4 mb-5">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-navy rounded-xl flex items-center justify-center flex-shrink-0">
            <span className="text-white font-black text-base">{(profile?.name||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase()}</span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-bold text-navy truncate">{profile?.name||'Your Name'}</p>
            <p className="text-xs text-gray-400 truncate">{profile?.business_name||'Your Business'}</p>
            {profile?.hygiene_rating!=null&&(()=>{
              const r=profile.hygiene_rating;
              const col=r>=4?'#16a34a':r>=3?'#d97706':'#ef4444';
              return <p className="text-xs font-bold mt-0.5" style={{color:col}}>{'★'.repeat(r)}{'☆'.repeat(5-r)} {r}/5 food hygiene</p>;
            })()}
          </div>
          {isLifetime?<Badge label="Founding Member" color="teal"/>:isActive?<Badge label="Active" color="green"/>:trialLeft>0?<Badge label={`Trial: ${trialLeft}d`} color="amber"/>:<Badge label="Expired" color="red"/>}
        </div>
        <div className="mt-3 pt-3 border-t border-gray-100">
          <button onClick={logout} className="w-full flex items-center gap-2 py-2 text-red-500 font-semibold text-sm active:opacity-60">
            <Icon name="logout" size={16} color="#ef4444"/>
            Sign out
          </button>
        </div>
      </Card>
      {/* ── Refer a friend (top for visibility) ── */}
      {(isActive||isLifetime||trialLeft>0)&&(
      <Card className="p-4 mb-5 border-2" style={{borderColor:'#FDE68A',background:'#FFFBEB'}}>
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{background:'#FFF3E0'}}>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <div>
            <p className="font-bold text-navy text-sm">Refer a friend — get 2 months free</p>
            <p className="text-xs text-gray-500">Share your link. When a friend starts their free trial, you get 2 months credited to your subscription.</p>
          </div>
        </div>
        {(()=>{
          const refCode=userId.slice(0,8);
          const refUrl=`https://vanguardapp.co.uk?ref=${refCode}`;
          const [copied,setCopied]=useState(false);
          const copy=()=>{
            navigator.clipboard.writeText(refUrl).then(()=>{
              setCopied(true); setTimeout(()=>setCopied(false),2000);
            });
          };
          return (
            <div>
              <div className="flex items-center gap-2 bg-white/70 rounded-xl px-3 py-2 mb-2">
                <p className="text-xs text-gray-600 flex-1 truncate font-mono">{refUrl}</p>
              </div>
              <Btn onClick={copy} variant={copied?'primary':'outline'} className="w-full">
                {copied?'✓ Copied!':'Copy referral link'}
              </Btn>
            </div>
          );
        })()}
      </Card>
      )}
      {/* Section tabs */}
      <div className="grid grid-cols-4 gap-1.5 mb-5">
        {sections.map(s=>(
          <button key={s.k} onClick={()=>setSection(s.k)}
            className={`flex flex-col items-center gap-1 py-3 rounded-xl border-2 transition-all ${section===s.k?'bg-navy border-navy text-white':'bg-white border-gray-100 text-gray-500'}`}>
            <Icon name={s.icon} size={16} color={section===s.k?'white':'#9CA3AF'}/>
            <span className="text-[10px] font-bold">{s.l}</span>
          </button>
        ))}
      </div>
      {section==='profile'&&(
        <Card className="p-4 fade-in">
          <h3 className="font-bold text-navy text-sm mb-4">Business Profile</h3>
          <Input label="Your name" value={name} onChange={setName} placeholder="Full name"/>
          <Input label="Business / trading name" value={biz} onChange={setBiz} placeholder="e.g. The Taco Van"/>
          <Input label="Local authority" value={authority} onChange={setAuthority} placeholder="e.g. Southwark Council"/>
          <div className="mb-4">
            <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Unit type</label>
            <div className="grid grid-cols-2 gap-2">
              {unitTypes.map(u=>(
                <button key={u.key} onClick={()=>setUnitType(u.key)}
                  className={`py-2.5 px-3 rounded-xl text-sm font-semibold border-2 text-left transition-all ${unitType===u.key?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>
                  {u.emoji} {u.label}
                </button>
              ))}
            </div>
          </div>
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <div>
              <p className="text-sm font-semibold text-navy">LPG / Gas equipment</p>
              <p className="text-xs text-gray-400">Show LPG safety checks in Van screen</p>
            </div>
            <button onClick={()=>setLpgEnabled(p=>!p)}
              className={`relative w-12 h-6 rounded-full transition-colors ${lpgEnabled?'bg-teal':'bg-gray-200'}`}>
              <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all ${lpgEnabled?'left-6':'left-0.5'}`}/>
            </button>
          </div>
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <div>
              <p className="text-sm font-semibold text-navy">Water tank on board</p>
              <p className="text-xs text-gray-400">Show water tank checks in Van screen</p>
            </div>
            <button onClick={()=>setWaterEnabled(p=>!p)}
              className={`relative w-12 h-6 rounded-full transition-colors ${waterEnabled?'bg-teal':'bg-gray-200'}`}>
              <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all ${waterEnabled?'left-6':'left-0.5'}`}/>
            </button>
          </div>
          <div className="py-3 border-b border-gray-100">
            <p className="text-sm font-semibold text-navy mb-2">Who runs the unit?</p>
            <div className="grid grid-cols-2 gap-2">
              {[{v:'solo',l:'Just me'},{v:'team',l:'Me + staff'}].map(o=>(
                <button key={o.v} onClick={()=>setTeamSize(o.v)}
                  className={`py-2.5 rounded-xl text-sm font-semibold border-2 transition-all ${teamSize===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>
                  {o.l}
                </button>
              ))}
            </div>
          </div>
          <div className="py-3 border-b border-gray-100 mb-1">
            <Input label="What you mainly serve" value={foodType} onChange={setFoodType} placeholder="e.g. Burgers, coffee, tacos"/>
          </div>
          <div className="py-3 border-b border-gray-100 mb-4">
            <p className="text-sm font-semibold text-navy mb-1">Food hygiene rating</p>
            <p className="text-xs text-gray-400 mb-2">Your current FSA rating (0–5 stars)</p>
            <div className="flex gap-1.5">
              {[1,2,3,4,5].map(v=>{
                const active=hygieneRating===v;
                const col=v>=4?'#16a34a':v===3?'#d97706':'#ef4444';
                return(
                  <button key={v} onClick={()=>setHygieneRating(active?null:v)}
                    className="flex-1 py-2 rounded-xl text-sm font-bold border-2 transition-all"
                    style={{background:active?col:'#F9FAFB',borderColor:active?col:'#E5E7EB',color:active?'white':col}}>
                    {v}★
                  </button>
                );
              })}
            </div>
            {hygieneRating===null&&<p className="text-xs text-gray-400 mt-1">Not set — tap to select</p>}
          </div>
          {flash?<OkMsg msg={flash}/>:<Btn onClick={saveProfile} loading={saving}>Save profile</Btn>}
        </Card>
      )}
      {section==='security'&&(
        <Card className="p-4 fade-in">
          <h3 className="font-bold text-navy text-sm mb-1">Change Password</h3>
          <p className="text-xs text-gray-400 mb-4">Set a new password for your account</p>
          <ErrMsg msg={passErr}/>
          <Input label="New password" value={newPass} onChange={setNewPass} type="password" placeholder="Min. 6 characters" hint="Must be at least 6 characters"/>
          {passFlash?<OkMsg msg={passFlash}/>:<Btn onClick={changePass} loading={passLoading}>Update password</Btn>}
        </Card>
      )}
      {section==='subscription'&&(
        <div className="fade-in">
          {/* ── Founding member ── */}
          {isLifetime&&(
            <Card className="p-4 mb-4 border-2 border-teal">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0">
                  <Icon name="star" size={18} color="white"/>
                </div>
                <div>
                  <p className="font-bold text-navy text-sm">Founding Member</p>
                  <p className="text-xs text-teal font-semibold">Lifetime access · Thank you!</p>
                </div>
              </div>
              <p className="text-xs text-gray-500">You're one of our founding members. You have full access to VanGuard forever, including all future features.</p>
            </Card>
          )}
          {/* ── Monthly active ── */}
          {isActive&&(
            <Card className="p-4 mb-4">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Icon name="star" size={18} color="#16a34a"/>
                </div>
                <div>
                  <p className="font-bold text-navy text-sm">{planName}</p>
                  <p className="text-xs text-gray-400">{planPrice} · Active</p>
                </div>
              </div>
              {cancelling?(
                <div className="bg-amber-50 border border-amber-100 rounded-xl p-3 mb-3">
                  <p className="text-amber-700 text-sm font-semibold">Subscription cancelled</p>
                  <p className="text-amber-600 text-xs mt-0.5">{fmtEnd?`Your access stays active until ${fmtEnd}, then your account will pause.`:'Your access stays active until the end of your current billing period.'}</p>
                </div>
              ):fmtEnd&&(
                <p className="text-xs text-gray-500 mb-3">Renews on {fmtEnd}.</p>
              )}
              <Btn variant="ghost" onClick={openPortal} loading={portalLoading}>{cancelling?'Resume or manage subscription':'Manage or cancel subscription'}</Btn>
              <p className="text-xs text-gray-400 text-center mt-2">Update your card, view invoices or cancel anytime</p>
            </Card>
          )}
          {/* ── Payment failed ── */}
          {isPastDue&&(
            <Card className="p-4 mb-4 border-2 border-red-200">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Icon name="star" size={18} color="#dc2626"/>
                </div>
                <div>
                  <p className="font-bold text-navy text-sm">Payment failed</p>
                  <p className="text-xs text-red-600 font-semibold">Update your card to keep your access</p>
                </div>
              </div>
              <Btn variant="primary" onClick={openPortal} loading={portalLoading}>Update payment details</Btn>
            </Card>
          )}
          {/* ── Free trial (card on file) ── */}
          {isTrialing&&(
            <Card className="p-4 mb-4 border-2 border-teal">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0">
                  <Icon name="star" size={18} color="#0D7377"/>
                </div>
                <div>
                  <p className="font-bold text-navy text-sm">{planName} · Free trial</p>
                  <p className="text-xs text-teal font-semibold">{trialLeft>0?`${trialLeft} day${trialLeft!==1?'s':''} left`:'Trial ending'} · then {planPrice}</p>
                </div>
              </div>
              <p className="text-xs text-gray-500 mb-3">Your card is on file. You won't be charged until your trial ends — cancel anytime before then and you'll pay nothing.</p>
              <Btn variant="ghost" onClick={openPortal} loading={portalLoading}>Manage or cancel trial</Btn>
            </Card>
          )}
          {/* ── Not subscribed / lapsed: plan card ── */}
          {!isActive&&!isLifetime&&!isTrialing&&!isPastDue&&(
            <>
              {trialLeft>0?(
                <div className="bg-amber-50 rounded-xl p-3 mb-4 border border-amber-100">
                  <p className="text-amber-700 text-sm font-semibold">Your trial ends in {trialLeft} days</p>
                  <p className="text-amber-600 text-xs mt-0.5">Choose a plan below to keep your data and stay compliant</p>
                </div>
              ):(
                <div className="bg-red-50 rounded-xl p-3 mb-4 border border-red-100">
                  <p className="text-red-700 text-sm font-semibold">Your trial has ended</p>
                  <p className="text-red-600 text-xs mt-0.5">Choose a plan to regain access to your records</p>
                </div>
              )}
              {/* Yearly card */}
              <Card className="p-4 mb-3 border-2 border-teal">
                <div className="flex items-center justify-between mb-2">
                  <p className="text-[10px] font-bold text-teal uppercase tracking-wider">Yearly · best value</p>
                  <span className="text-[10px] font-bold bg-teal text-white px-2 py-0.5 rounded-full">Save 27%</span>
                </div>
                <p className="font-black text-navy text-2xl mb-0.5">£69.99<span className="text-sm font-normal text-gray-400"> /year</span></p>
                <p className="text-xs text-gray-400 mb-3">Every feature · Cancel anytime</p>
                <Btn variant="primary" onClick={()=>subscribe('yearly')} loading={subLoading==='yearly'}>Subscribe yearly</Btn>
              </Card>
              {/* Monthly card */}
              <Card className="p-4 mb-4">
                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Monthly</p>
                <p className="font-black text-navy text-2xl mb-0.5">£7.99<span className="text-sm font-normal text-gray-400"> /month</span></p>
                <p className="text-xs text-gray-400 mb-3">Cancel anytime</p>
                <Btn variant="navy" onClick={()=>subscribe('monthly')} loading={subLoading==='monthly'}>Subscribe monthly</Btn>
              </Card>
            </>
          )}
          {/* ── What's included ── */}
          <Card className="p-4">
            <h3 className="font-bold text-navy text-sm mb-3">{isLifetime?'Everything included, forever':'What\'s included'}</h3>
            {[...['Unlimited diary entries','Temperature log & alerts','Cleaning schedules','Van & LPG safety checks','One-tap EHO export','Pitch location log'],...(isLifetime?['All future features']:[])].map((f,i)=>(
              <div key={i} className="flex items-center gap-2 py-1.5">
                <div className={`w-5 h-5 ${isLifetime?'bg-teal-light':'bg-green-100'} rounded-full flex items-center justify-center flex-shrink-0`}>
                  <Icon name="check" size={11} color={isLifetime?'#0D7377':'#16a34a'}/>
                </div>
                <span className="text-sm text-gray-700">{f}</span>
              </div>
            ))}
          </Card>
        </div>
      )}
      {section==='notifications'&&(
        <Card className="p-4 fade-in">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0">
              <Icon name="bell" size={18} color="#0D7377"/>
            </div>
            <div>
              <p className="font-bold text-navy text-sm">Daily Reminders</p>
              <p className="text-xs text-gray-400">Morning push notification to log your checks</p>
            </div>
          </div>
          {notifStatus==='unsupported'&&(
            <div className="bg-gray-50 rounded-xl p-4 text-center">
              <p className="text-sm text-gray-500">Push notifications aren't supported on this browser</p>
              <p className="text-xs text-gray-400 mt-1">Try installing VanGuard as an app (Add to Home Screen) and open it from there</p>
            </div>
          )}
          {notifStatus==='denied'&&(
            <div className="bg-red-50 rounded-xl p-4 border border-red-100">
              <p className="text-sm text-red-700 font-semibold mb-1">Notifications blocked</p>
              <p className="text-xs text-red-600">To enable reminders, go to your browser or phone settings and allow notifications for this site, then return here.</p>
            </div>
          )}
          {(notifStatus==='unsubscribed'||notifStatus==='checking')&& notifStatus!=='denied'&& notifStatus!=='unsupported'&&(
            <div>
              <div className="bg-gray-50 rounded-xl p-4 mb-4">
                <p className="text-sm text-gray-700 font-semibold mb-1">🌅 Daily reminder at 7am</p>
                <p className="text-xs text-gray-500">VanGuard will send you a push notification each morning reminding you to log your opening temperature check and open the day.</p>
              </div>
              <Btn onClick={enableNotifs} loading={notifLoading}>Enable daily reminders</Btn>
            </div>
          )}
          {notifStatus==='subscribed'&&(
            <div>
              <div className="bg-green-50 rounded-xl p-4 border border-green-100 mb-4">
                <p className="text-sm text-green-700 font-semibold">✓ Daily reminders active</p>
                <p className="text-xs text-green-600 mt-0.5">You'll get a push notification each morning at 7am to log your compliance checks.</p>
              </div>
              <Btn onClick={disableNotifs} variant="ghost" loading={notifLoading}>Turn off reminders</Btn>
            </div>
          )}
        </Card>
      )}
      {section==='team'&&(
        <Card className="p-4 fade-in">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center">
              <Icon name="team" size={18} color="#0D7377"/>
            </div>
            <div>
              <p className="font-bold text-navy text-sm">Team Members</p>
              <p className="text-xs text-gray-400">Coming in Fleet plan</p>
            </div>
          </div>
          <div className="bg-gray-50 rounded-xl p-4 text-center mb-4">
            <p className="text-sm text-gray-600 mb-1">Add staff members to your account so they can log records too</p>
            <p className="text-xs text-gray-400">Available in the VanGuard Fleet plan · £18.99/month</p>
          </div>
          <Btn variant="outline" onClick={()=>setSection('subscription')}>View plans</Btn>
        </Card>
      )}
      {/* ── Feedback & suggestions ── */}
      <FeedbackCard userId={userId} email={profile?.email||_getS()?.user?.email}/>
      {/* ── Support ── */}
      <Card className="p-4 mt-4">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0">
            <Icon name="mail" size={18} color="#0D7377"/>
          </div>
          <div>
            <p className="font-bold text-navy text-sm">Contact support</p>
            <p className="text-xs text-gray-400">Need help with something specific? Email us directly.</p>
          </div>
        </div>
        <div className="flex gap-2">
          <a href="mailto:hello@vanguardapp.co.uk"
            className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-semibold text-white active:opacity-80" style={{background:'#0D7377'}}>
            <Icon name="mail" size={16} color="#FFFFFF"/>
            Email support
          </a>
        </div>
      </Card>
    </div>
  );
};

// ── RESET PASSWORD SCREEN ────────────────────────────────────────────────────
const ResetPasswordScreen=({token,onDone})=>{
  const [pass,setPass]=useState('');
  const [confirm,setConfirm]=useState('');
  const [loading,setLoading]=useState(false);
  const [err,setErr]=useState('');
  const [ok,setOk]=useState('');
  const submit=async()=>{
    setErr('');
    if(pass.length<6){setErr('Password must be at least 6 characters.');return;}
    if(pass!==confirm){setErr('Passwords do not match.');return;}
    setLoading(true);
    const r=await fetch(`${SUPA_URL}/auth/v1/user`,{method:'PUT',headers:{'apikey':SUPA_KEY,'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({password:pass})});
    const d=await r.json();
    if(d.error||d.code>=400){setErr(d.message||'Failed to update password.');setLoading(false);return;}
    setOk('Password updated! Taking you to sign in...');
    setTimeout(onDone,2000);
    setLoading(false);
  };
  return (
    <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5">
      <img src="/icon-192.png" className="mb-4 shadow-2xl" alt="VanGuard" style={{width:'80px',height:'80px',borderRadius:'20px'}}/>
      <h1 className="text-3xl font-black text-white mb-1">Van<span className="text-teal">Guard</span></h1>
      <p className="text-white/40 text-sm mb-8">Stay compliant. Keep moving.</p>
      <div className="w-full max-w-sm bg-white rounded-2xl p-6 shadow-2xl">
        <h2 className="font-black text-navy text-lg mb-1">Choose a new password</h2>
        <p className="text-sm text-gray-400 mb-4">Make it at least 6 characters.</p>
        <ErrMsg msg={err}/>
        {ok?<OkMsg msg={ok}/>:<>
          <Input label="New password" value={pass} onChange={setPass} type="password" placeholder="Min. 6 characters"/>
          <Input label="Confirm password" value={confirm} onChange={setConfirm} type="password" placeholder="Repeat password"/>
          <Btn onClick={submit} loading={loading}>Set new password</Btn>
        </>}
      </div>
    </div>
  );
};

// ── HELP DRAWER ───────────────────────────────────────────────────────────────
const HELP={
  dashboard:{title:'Dashboard',emoji:'🏠',steps:['Your daily checklist shows what needs completing before you trade.','Aim for 100% every day — tap any incomplete item to go straight there.','Come back at end of day to complete your closing and cleaning checks.','The percentage is based on diary, temps, cleaning and equipment checks.'],tip:'An EHO inspector wants to see consistent daily records. The dashboard shows at a glance whether you\'re on track.'},
  diary:{title:'Daily Diary',emoji:'📋',steps:['Complete Opening checks before you start serving.','Closing checks now include gas/power off and unit secured — not cleaning (that\'s in the Cleaning tab).','Sign off the Cleaning schedule separately after your clean.','Log your trading location — EHOs cross-reference pitch records.','Tap NA on any item that doesn\'t apply to your setup. It won\'t block completion and is remembered between sessions.'],tip:'Food Standards Agency requires written records of your daily checks. Your diary is your evidence. Consistent, complete entries are more convincing than sporadic ones.'},
  temp:{title:'Temperature Control',emoji:'🌡️',steps:['Enter the temperature in the box next to each appliance and tap Log — takes about 5 seconds.','Log at least twice a day: once at start of service, once during service.','If a reading fails, a note box appears — always record what action you took.','Use Add Appliance to add fridges, freezers or hot-hold units. Tap Remove on any you don\'t use.','Made a mistake? Tap × on a today\'s reading to delete it. Yesterday\'s readings are locked to protect your audit trail.'],tip:'Temperature control is the #1 thing EHOs check. Cold food must be ≤8°C, hot food ≥63°C. Two readings per day is the legal minimum — more is better.'},
  van:{title:'Equipment & Safety',emoji:'🔧',steps:['Complete the Equipment check every day before opening.','Tap NA on any item that doesn\'t apply — for example, gas connections if you\'re electric-only. This persists between sessions.','Log LPG inspections monthly — legally required if you use gas.','Record water tank refills under Water.','Log every trading location under Pitch.'],tip:'Mobile caterers must demonstrate their unit is maintained and safe. These records are checked at every inspection — they show you take safety seriously.'},
  records:{title:'Records',emoji:'🛡️',steps:['Use the period buttons (Today / This week / Month / All time) to filter by date range.','Use the log type tabs to browse Temps, Diary, Cleaning, Equipment, LPG, Water or Pitches.','Tap Export to PDF to open a print-ready EHO pack in a new tab.','Tap Print / Save as PDF in the export page, then hand it to the inspector.'],tip:'Handing an inspector a complete, organised pack at the start of a visit creates an excellent first impression and often reduces the time they spend on site.'},
  account:{title:'Account',emoji:'👤',steps:['Keep your business name and local authority up to date — both appear on your EHO pack.','Update your unit type (van, trailer, stall etc.) and turn LPG checks on or off here.','Use Security to change your password.'],tip:'Your local authority name appears on every EHO pack you export. Make sure it matches the council that actually inspects you.'},
};

// ── INSTALL PROMPT ────────────────────────────────────────────────────────────
const InstallPrompt = ({userId}) => {
  const [show,setShow]=useState(false);
  const [isIOS,setIsIOS]=useState(false);
  const [deferred,setDeferred]=useState(null);
  const key=`vg_install_asked_${userId}`;

useEffect(()=>{
    if(localStorage.getItem(key)) return;
    if(window.matchMedia('(display-mode: standalone)').matches) return;
    if(window.navigator.standalone) return;

const ios=/iphone|ipad|ipod/i.test(navigator.userAgent);
    setIsIOS(ios);

const onPrompt=e=>{e.preventDefault();setDeferred(e);};
    window.addEventListener('beforeinstallprompt',onPrompt);

const t=setTimeout(()=>setShow(true), 45000);
    return ()=>{window.removeEventListener('beforeinstallprompt',onPrompt);clearTimeout(t);};
  },[]);

const dismiss=()=>{setShow(false);localStorage.setItem(key,'1');};
  const install=async()=>{
    if(deferred){deferred.prompt();await deferred.userChoice;setDeferred(null);}
    dismiss();
  };

if(!show) return null;
  return (
    <div style={{position:'fixed',bottom:0,left:0,right:0,zIndex:100,padding:'0 12px 20px',maxWidth:'512px',margin:'0 auto'}} className="fade-in">
      <div className="bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden">
        <div className="bg-navy px-4 py-3 flex items-center gap-3">
          <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0">
            <VanIcon size={28} wheelColor="#0D7377"/>
          </div>
          <div className="flex-1">
            <p className="text-white font-black text-sm leading-none">Van<span className="text-teal">Guard</span></p>
            <p className="text-white/40 text-xs mt-0.5">Food safety compliance</p>
          </div>
          <button onClick={dismiss} className="text-white/30 hover:text-white/60 text-xl leading-none w-8 h-8 flex items-center justify-center">×</button>
        </div>
        <div className="p-4">
          <p className="font-bold text-navy text-sm mb-1">Add to your Home Screen</p>
          <p className="text-xs text-gray-400 leading-relaxed mb-3">Get instant access to your food safety records — works offline too.</p>
          {isIOS&&(
            <div className="bg-teal-light rounded-xl p-3 text-xs text-gray-600 leading-relaxed mb-3">
              In Safari: tap <strong className="text-teal">Share ⬆</strong> at the bottom, then <strong className="text-teal">Add to Home Screen</strong>
            </div>
          )}
          <div className="flex gap-2">
            {!isIOS&&<Btn onClick={install} variant="primary" size="sm" className="flex-1">Install App</Btn>}
            <Btn onClick={dismiss} variant="ghost" size="sm" className={isIOS?'w-full':'flex-1'}>Not now</Btn>
          </div>
        </div>
      </div>
    </div>
  );
};

const HelpFab=({onClick})=>(
  <div style={{position:'fixed',right:'16px',top:'50%',transform:'translateY(-50%)',zIndex:39,width:'44px',height:'44px'}}>
    <span className="fab-ring"/>
    <span className="fab-ring fab-ring-2"/>
    <button onClick={onClick}
      className="fab-glow relative w-11 h-11 bg-teal rounded-full flex flex-col items-center justify-center gap-0.5 active:scale-95"
      style={{border:'none',cursor:'pointer',width:'44px',height:'44px'}}>
      <span className="text-white font-black text-base leading-none">?</span>
      <span style={{color:'rgba(255,255,255,0.75)',fontSize:'8px',fontWeight:'800',letterSpacing:'0.5px',lineHeight:1}}>TIPS</span>
    </button>
  </div>
);

// ── OFFLINE BANNER ────────────────────────────────────────────────────────────
const OfflineBanner=()=>{
  const [online,setOnline]=useState(navigator.onLine);
  const [syncing,setSyncing]=useState(false);
  const [flash,setFlash]=useState('');
  useEffect(()=>{
    const goOn=async()=>{
      setOnline(true);
      if(_getQ().length>0){
        setSyncing(true);
        const n=await replayOfflineQueue();
        setSyncing(false);
        if(n>0){setFlash(`✓ ${n} record${n!==1?'s':''} synced`);setTimeout(()=>setFlash(''),3000);}
      }
    };
    const goOff=()=>setOnline(false);
    window.addEventListener('online',goOn);
    window.addEventListener('offline',goOff);
    return()=>{window.removeEventListener('online',goOn);window.removeEventListener('offline',goOff);};
  },[]);
  const bar=(bg,msg)=>(
    <div className="fixed top-0 left-0 right-0 z-[100] max-w-lg mx-auto pointer-events-none">
      <div className={`${bg} text-white text-xs font-bold py-1.5 text-center`}>{msg}</div>
    </div>
  );
  if(flash) return bar('bg-green-500',flash);
  if(syncing) return bar('bg-teal','Syncing offline records...');
  if(!online) return bar('bg-amber-500','Offline — records will sync when reconnected');
  return null;
};

// ── TRIAL BANNER (last 7 days) ────────────────────────────────────────────────
const TrialBanner=({trialLeft,onUpgrade})=>{
  if(trialLeft<=0||trialLeft>7) return null;
  const urgent=trialLeft<=3;
  return (
    <div className={`fixed left-0 right-0 z-30 max-w-lg mx-auto flex items-center justify-between px-4 py-2 ${urgent?'bg-red-500':'bg-amber-500'}`}
      style={{top:'56px'}}>
      <p className="text-white text-xs font-bold">
        {urgent?`Trial ends in ${trialLeft} day${trialLeft!==1?'s':''}!`:`${trialLeft} days left on your free trial`}
      </p>
      <button onClick={onUpgrade}
        className="bg-white text-navy text-xs font-black px-3 py-1 rounded-full active:scale-95 transition-transform ml-3 flex-shrink-0">
        Upgrade
      </button>
    </div>
  );
};

// ── DEMO BANNER (shown across the app while exploring the demo) ───────────────
const DemoBanner=({onExit})=>(
  <div className="vg-demo-banner bg-teal text-white">
    <div className="max-w-5xl mx-auto flex items-center justify-between gap-3 px-4" style={{height:'44px'}}>
      <p className="text-xs sm:text-sm font-semibold truncate">
        <span className="font-black">You're exploring a demo</span><span className="hidden sm:inline"> — sample data only</span>
      </p>
      <button onClick={onExit}
        className="bg-white text-teal text-xs font-black px-3 py-1.5 rounded-full active:scale-95 transition-transform flex-shrink-0 whitespace-nowrap">
        Start 14-day free trial →
      </button>
    </div>
  </div>
);

// ── START TRIAL SCREEN (card required before first use) ──────────────────────
const StartTrialScreen=({userId,email,onLogout,onDemo})=>{
  const [loading,setLoading]=useState(false);
  const [err,setErr]=useState('');
  const [plan,setPlan]=useState('monthly');
  const startTrial=async()=>{
    setErr(''); setLoading(true);
    try{
      const tok=_getS()?.access_token;
      const res=await fetch('/.netlify/functions/create-checkout',{
        method:'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},
        body:JSON.stringify({userId,email,trial:true,plan}),
      });
      const{url,error}=await res.json();
      if(error) throw new Error(error);
      window.location.href=url;
    }catch(e){setErr('Could not start your trial: '+e.message);setLoading(false);}
  };
  return (
    <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5 pt-16">
      <div className="w-full max-w-sm fade-in">
        <div className="text-center mb-7">
          <img src="/icon-192.png" className="w-16 h-16 mx-auto rounded-2xl shadow-2xl mb-4" alt="VanGuard" style={{borderRadius:'18px'}}/>
          <h1 className="text-2xl font-black text-white leading-tight">Start your<br/>14-day free trial</h1>
          <p className="text-white/50 text-sm mt-2 leading-relaxed">Full access to every feature. We'll take your card to hold your place — you won't be charged until day 15.</p>
        </div>
        <div className="bg-white rounded-2xl p-5 mb-4">
          <div className="grid grid-cols-2 gap-2 mb-4">
            <button onClick={()=>setPlan('monthly')} className={`rounded-xl border-2 p-3 text-left transition-all ${plan==='monthly'?'border-teal bg-teal-light':'border-gray-100 bg-gray-50'}`}>
              <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide">Monthly</p>
              <p className="font-black text-navy text-lg leading-tight">£7.99<span className="text-xs font-normal text-gray-400">/mo</span></p>
            </button>
            <button onClick={()=>setPlan('yearly')} className={`relative rounded-xl border-2 p-3 text-left transition-all ${plan==='yearly'?'border-teal bg-teal-light':'border-gray-100 bg-gray-50'}`}>
              <span className="absolute -top-2 right-2 text-[9px] font-black bg-teal text-white px-1.5 py-0.5 rounded-full">SAVE 27%</span>
              <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide">Yearly</p>
              <p className="font-black text-navy text-lg leading-tight">£69.99<span className="text-xs font-normal text-gray-400">/yr</span></p>
            </button>
          </div>
          <div className="flex items-baseline gap-1 mb-1">
            <span className="text-3xl font-black text-navy">£0</span>
            <span className="text-gray-400 text-sm">for 14 days</span>
          </div>
          <p className="text-xs text-gray-500 mb-4">{plan==='yearly'?'then £69.99/year':'then £7.99/month'} · cancel anytime before day 15 and pay nothing</p>
          {[
            'Unlimited daily diary, temperature & cleaning logs',
            'Van, LPG & pitch safety checks',
            'One-tap EHO inspection export',
            'Daily reminder notifications',
          ].map((f,i)=>(
            <div key={i} className="flex items-center gap-2 py-1.5">
              <div className="w-5 h-5 bg-teal-light rounded-full flex items-center justify-center flex-shrink-0">
                <Icon name="check" size={11} color="#0D7377"/>
              </div>
              <span className="text-sm text-gray-700">{f}</span>
            </div>
          ))}
        </div>
        {err&&<div className="bg-red-500/10 border border-red-400/30 rounded-xl px-4 py-3 mb-3"><p className="text-red-200 text-xs">{err}</p></div>}
        <Btn variant="primary" onClick={startTrial} loading={loading}>Start free trial</Btn>
        <p className="text-center text-white/30 text-[11px] mt-3 leading-relaxed">Secure payment by Stripe · No charge for 14 days · Cancel anytime</p>
        {onDemo&&<button onClick={onDemo} className="w-full text-center text-white/40 text-xs mt-3 py-1 underline">Prefer to look around first? View the demo</button>}
        <button onClick={onLogout} className="w-full text-center text-white/30 text-xs mt-4 py-1">Sign out</button>
      </div>
    </div>
  );
};

// ── PAYWALL SCREEN (trial expired) ───────────────────────────────────────────
const PaywallScreen=({userId,profile})=>{
  const [subLoading,setSubLoading]=useState('');
  const [portalLoading,setPortalLoading]=useState(false);
  const subscribe=async(plan)=>{
    setSubLoading(plan);
    try{
      const tok=_getS()?.access_token;
      const res=await fetch('/.netlify/functions/create-checkout',{
        method:'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},
        body:JSON.stringify({userId,email:profile?.email||_getS()?.user?.email,trial:false,plan}),
      });
      const{url,error}=await res.json();
      if(error) throw new Error(error);
      window.location.href=url;
    }catch(e){alert('Could not start checkout: '+e.message);setSubLoading('');}
  };
  const openPortal=async()=>{
    setPortalLoading(true);
    try{
      const tok=_getS()?.access_token;
      const res=await fetch('/.netlify/functions/create-portal',{
        method:'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},
        body:JSON.stringify({userId}),
      });
      const{url,error}=await res.json();
      if(error) throw new Error(error);
      window.location.href=url;
    }catch(e){alert('Could not open the billing portal: '+e.message);setPortalLoading(false);}
  };
  const hasStripe=!!profile?.stripe_customer_id;
  return (
    <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5 pt-16">
      <div className="w-full max-w-sm fade-in">
        <div className="text-center mb-7">
          <img src="/icon-192.png" className="w-16 h-16 mx-auto rounded-2xl shadow-2xl mb-4" alt="VanGuard" style={{borderRadius:'18px'}}/>
          <h1 className="text-2xl font-black text-white leading-tight">Your free trial<br/>has ended</h1>
          <p className="text-white/50 text-sm mt-2 leading-relaxed">Choose a plan to keep your records and stay EHO-ready.</p>
        </div>
        <div className="bg-white rounded-2xl p-4 mb-3 relative overflow-hidden" style={{border:'2px solid #14B8A6'}}>
          <div className="absolute top-3 right-3 text-[10px] font-black bg-teal text-white px-2 py-0.5 rounded-full">SAVE 27%</div>
          <p className="font-black text-navy text-sm mb-0.5">Yearly</p>
          <div className="flex items-baseline gap-1 mb-1">
            <span className="text-3xl font-black text-navy">£69.99</span>
            <span className="text-gray-400 text-sm">/year</span>
          </div>
          <p className="text-xs text-gray-500 mb-4">Every feature · best value · cancel any time.</p>
          <Btn variant="primary" onClick={()=>subscribe('yearly')} loading={subLoading==='yearly'}>Subscribe Yearly</Btn>
        </div>
        <div className="bg-white/10 rounded-2xl p-4 mb-6">
          <p className="font-black text-white text-sm mb-0.5">Monthly</p>
          <div className="flex items-baseline gap-1 mb-1">
            <span className="text-3xl font-black text-white">£7.99</span>
            <span className="text-white/40 text-sm">/month</span>
          </div>
          <p className="text-xs text-white/40 mb-4">Cancel any time.</p>
          <Btn variant="outline" onClick={()=>subscribe('monthly')} loading={subLoading==='monthly'}>Subscribe Monthly</Btn>
        </div>
        {hasStripe&&(
          <button onClick={openPortal} disabled={portalLoading} className="w-full text-center text-white/50 text-xs mb-4 py-1 underline">
            {portalLoading?'Opening…':'Manage billing or update your card'}
          </button>
        )}
        <p className="text-center text-white/25 text-xs leading-relaxed">Your data is safe and waiting.</p>
      </div>
    </div>
  );
};

// ── APP ───────────────────────────────────────────────────────────────────────
const App = () => {
  const [session,setSession]=useState(null);
  const [profile,setProfile]=useState(null);
  const [screen,setScreen]=useState('dashboard');
  const [appLoading,setAppLoading]=useState(true);
  const [showOnboarding,setShowOnboarding]=useState(false);
  const [showHelp,setShowHelp]=useState(false);
  const [recoveryToken,setRecoveryToken]=useState(null);
  const [checkoutFlash,setCheckoutFlash]=useState('');
  const [showLanding,setShowLanding]=useState(true);
  const [authMode,setAuthMode]=useState('register');
  const [demo,setDemo]=useState(()=>{try{return new URLSearchParams(window.location.search).get('demo')==='1';}catch{return false;}});
  // Keep the global flag in sync synchronously during render so the sb data layer
  // sees it before any child effect fires a query.
  window.__vgDemo=demo;
  const enterDemo=()=>{
    window.__vgDemo=true;
    try{const u=new URL(window.location.href);u.searchParams.set('demo','1');window.history.replaceState(null,'',u.pathname+u.search);}catch{}
    setScreen('dashboard'); setDemo(true);
  };
  const exitDemo=()=>{
    window.__vgDemo=false;
    try{const u=new URL(window.location.href);u.searchParams.delete('demo');window.history.replaceState(null,'',u.pathname+(u.search||''));}catch{}
    setDemo(false); setShowLanding(false); setAuthMode('register');
  };
  window.__vgExitDemo=exitDemo;
  useEffect(()=>{document.body.classList.toggle('vg-demo',demo);},[demo]);

// Live compliance % for the nav rings, refreshed after any save (via window.__vgRefreshCompliance).
  const [compliance,setCompliance]=useState(0);
  const complianceRef=useRef(0);
  const [confetti,setConfetti]=useState(false);
  const refreshCompliance=async()=>{
    const uid=demo?_DEMO_UID:session?.user?.id;
    if(!uid) return;
    const p=await computeTodayCompliance(uid);
    setCompliance(p);
    if(p>=100&&complianceRef.current<100) setConfetti(true);
    complianceRef.current=p;
  };
  window.__vgRefreshCompliance=refreshCompliance;
  useEffect(()=>{ if(demo||session?.user?.id) refreshCompliance(); },[screen,session,demo]);

useEffect(()=>{
    const qs=new URLSearchParams(window.location.search);
    if(qs.get('demo')==='1'){window.__vgDemo=true;setAppLoading(false);return;}
    // Store referral code for use at sign-up
    const ref=qs.get('ref');
    if(ref) localStorage.setItem('vg_ref',ref);
    if(qs.get('checkout')==='success'){
      setCheckoutFlash('success');
      setScreen('account');
      window.history.replaceState(null,'',window.location.pathname);
    } else if(qs.get('checkout')==='cancelled'){
      setCheckoutFlash('cancelled');
      window.history.replaceState(null,'',window.location.pathname);
    } else if(qs.get('screen')==='account'){
      // Returning from the Stripe billing portal.
      setScreen('account');
      window.history.replaceState(null,'',window.location.pathname);
    }
    const hash=window.location.hash;
    if(hash.includes('type=recovery')&&hash.includes('access_token')){
      const params=new URLSearchParams(hash.slice(1));
      const token=params.get('access_token');
      if(token){setRecoveryToken(token);window.history.replaceState(null,'',window.location.pathname);setAppLoading(false);return;}
    }
    sb.auth.getSession().then(({data:{session}})=>{
      setSession(session);
      if(session) loadProfile(session.user.id);
      else setAppLoading(false);
    }).catch(()=>setAppLoading(false));
    const {data:{subscription}}=sb.auth.onAuthStateChange(async(_e,session)=>{
      setSession(session);
      if(session) loadProfile(session.user.id);
      else {setProfile(null);setShowLanding(true);setAppLoading(false);}
    });
    const IDLE_MS=30*60*1000;
    let idleTimer=null;
    const resetIdle=()=>{
      clearTimeout(idleTimer);
      idleTimer=setTimeout(()=>{ sb.auth.signOut(); },IDLE_MS);
    };
    const events=['mousemove','mousedown','touchstart','keydown','scroll'];
    events.forEach(e=>window.addEventListener(e,resetIdle,{passive:true}));
    resetIdle();
    return ()=>{
      subscription.unsubscribe();
      clearTimeout(idleTimer);
      events.forEach(e=>window.removeEventListener(e,resetIdle));
    };
  },[]);

// ── DEMO MODE: render the full app with a fake profile + mock data ──
  if(demo) return (
    <div className="lg:flex lg:items-stretch min-h-screen">
      <DemoBanner onExit={exitDemo}/>
      <Confetti show={confetti} onDone={()=>setConfetti(false)}/>
      <DesktopSidebar screen={screen} onChange={setScreen} profile={_DEMO_PROFILE} onHelp={()=>setShowHelp(true)} compliance={compliance}/>
      <div className="app-shell max-w-lg mx-auto lg:max-w-none lg:mx-0 lg:flex-1 relative min-h-screen">
        <div className="lg:hidden"><TopNav screen={screen} onChange={setScreen} profile={_DEMO_PROFILE} compliance={compliance}/></div>
        <div className="vg-content lg:max-w-3xl lg:mx-auto">
          {screen==='dashboard'&&<Dashboard profile={_DEMO_PROFILE} userId={_DEMO_UID} onNav={setScreen}/>}
          {screen==='diary'&&<DiaryScreen userId={_DEMO_UID} profile={_DEMO_PROFILE}/>}
          {screen==='temp'&&<TempScreen userId={_DEMO_UID}/>}
          {screen==='van'&&<VanScreen userId={_DEMO_UID} profile={_DEMO_PROFILE}/>}
          {screen==='records'&&<RecordsScreen userId={_DEMO_UID} profile={_DEMO_PROFILE}/>}
          {screen==='account'&&<AccountScreen userId={_DEMO_UID} profile={_DEMO_PROFILE} onUpdate={()=>{}}/>}
        </div>
        <div className="lg:hidden"><HelpFab onClick={()=>setShowHelp(true)}/></div>
        <HelpDrawer screen={screen} open={showHelp} onClose={()=>setShowHelp(false)}/>
      </div>
    </div>
  );

if(appLoading) return (
    <div className="min-h-screen bg-navy flex flex-col items-center justify-center gap-5">
      <img src="/icon-192.png" className="w-24 h-24 rounded-3xl shadow-2xl" alt="VanGuard" style={{borderRadius:'22px'}}/>
      <div>
        <p className="text-white font-black text-2xl text-center leading-none">Van<span className="text-teal">Guard</span></p>
        <p className="text-white/30 text-xs text-center mt-1 uppercase tracking-widest">Stay compliant. Keep moving.</p>
      </div>
      <div className="w-6 h-6 border-2 border-white/20 border-t-white rounded-full animate-spin"/>
    </div>
  );

if(recoveryToken) return <ResetPasswordScreen token={recoveryToken} onDone={()=>setRecoveryToken(null)}/>;
  if(!session) return showLanding
    ? <LandingPage onGetStarted={(m)=>{setAuthMode(m);setShowLanding(false);}} onDemo={enterDemo}/>
    : <AuthScreen initialMode={authMode} onBack={()=>setShowLanding(true)} onDemo={enterDemo}/>;

if(!session?.user?.id){_saveS(null);setSession(null);return null;}
  const userId=session.user.id;

const status=profile?.subscription_status;
  const isLifetime=status==='lifetime';
  const isActive=status==='active';
  const isTrialing=status==='trialing';
  const hasStripe=!!profile?.stripe_customer_id;
  const hasAccess=isLifetime||isActive||isTrialing;
  const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0;
  const trialLeft=isTrialing?Math.max(0,14-trialDays):0;
  // Signed in but never put a card on file → needs to start the card-required trial.
  const needsTrial=!!profile&&!hasAccess&&!hasStripe&&checkoutFlash!=='success';
  // Had a card but the subscription lapsed.
  const isExpired=!!profile&&hasStripe&&(status==='past_due'||status==='cancelled');

// 1) Force a one-time onboarding before anything else.
  const needsOnboarding=!!profile&&!profile.onboarded&&!localStorage.getItem('vg_ob_'+userId);
  if(needsOnboarding) return (
    <OnboardingWizard userId={userId} profile={profile} onComplete={p=>{setProfile(p);}}/>
  );

// 2) Then the card-required trial.
  if(needsTrial) return (
    <StartTrialScreen userId={userId} email={profile?.email||session?.user?.email} onLogout={()=>sb.auth.signOut()} onDemo={enterDemo}/>
  );

return (
    <div className="lg:flex lg:items-stretch min-h-screen">
      <Confetti show={confetti} onDone={()=>setConfetti(false)}/>
      <DesktopSidebar screen={screen} onChange={setScreen} profile={profile} onHelp={()=>setShowHelp(true)} compliance={compliance}/>
      <div className="app-shell max-w-lg mx-auto lg:max-w-none lg:mx-0 lg:flex-1 relative min-h-screen">
        <OfflineBanner/>
        <div className="lg:hidden"><TopNav screen={screen} onChange={setScreen} profile={profile} compliance={compliance}/></div>
        <TrialBanner trialLeft={trialLeft} onUpgrade={()=>setScreen('account')}/>
        {checkoutFlash==='success'&&<div className="fixed left-0 right-0 z-40 max-w-lg mx-auto px-4 pt-3" style={{top:trialLeft>0&&trialLeft<=7?'96px':'56px'}}>
          <div className="bg-green-500 text-white text-sm font-semibold px-4 py-3 rounded-xl flex items-center justify-between shadow-lg">
            <span>Subscription active!</span>
            <button onClick={()=>setCheckoutFlash('')} className="ml-3 opacity-70 text-lg leading-none">x</button>
          </div>
        </div>}
        {checkoutFlash==='cancelled'&&<div className="fixed top-14 left-0 right-0 z-40 max-w-lg mx-auto px-4 pt-3">
          <div className="bg-gray-600 text-white text-sm px-4 py-3 rounded-xl flex items-center justify-between shadow-lg">
            <span>Checkout cancelled.</span>
            <button onClick={()=>setCheckoutFlash('')} className="ml-3 opacity-70 text-lg leading-none">x</button>
          </div>
        </div>}
        <div className="vg-content lg:max-w-3xl lg:mx-auto">
          {isExpired&&screen!=='account'?(
            <PaywallScreen userId={userId} profile={profile}/>
          ):(
            <>
              {screen==='dashboard'&&<Dashboard profile={profile} userId={userId} onNav={setScreen}/>}
              {screen==='diary'&&<DiaryScreen userId={userId} profile={profile}/>}
              {screen==='temp'&&<TempScreen userId={userId}/>}
              {screen==='van'&&<VanScreen userId={userId} profile={profile}/>}
              {screen==='records'&&<RecordsScreen userId={userId} profile={profile}/>}
              {screen==='account'&&<AccountScreen userId={userId} profile={profile} onUpdate={p=>{setProfile(p);}}/>}
            </>
          )}
        </div>
        <div className="lg:hidden"><HelpFab onClick={()=>setShowHelp(true)}/></div>
        <HelpDrawer screen={screen} open={showHelp} onClose={()=>setShowHelp(false)}/>
        <InstallPrompt userId={userId}/>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);