/* Parent → GPS Watch companion: live location, battery, SOS, safe zones. */
function WatchScreen({ onNav, onBack }) {
  const child = jlChild();
  const [sos, setSos] = React.useState(false);
  React.useEffect(() => {
    let t;
    const read = () => { try { const a = JSON.parse(localStorage.getItem('jl_watch')||'{}'); setSos(!!a.sos); } catch(e){} };
    read(); t = setInterval(read, 1500); window.addEventListener('storage', read);
    return () => { clearInterval(t); window.removeEventListener('storage', read); };
  }, []);
  const places = [
    { n:'At school', icon:'school', active:true, time:'since 8:02 AM', tint:'var(--success-100)', ic:'var(--success-500)' },
    { n:'Home', icon:'home', active:false, time:'safe zone', tint:'var(--gray-100)', ic:'var(--gray-500)' },
    { n:'Grandma\u2019s', icon:'map-pin', active:false, time:'safe zone', tint:'var(--gray-100)', ic:'var(--gray-500)' },
  ];

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title={child.first + "'s Watch"} onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        {sos && (
          <div style={{ display:'flex', alignItems:'center', gap:11, background:'var(--danger-500)', borderRadius:14, padding:'14px 15px', marginBottom:14, color:'#fff', boxShadow:'0 8px 20px rgba(229,72,77,.3)' }}>
            <Icon name="siren" size={20} color="#fff" />
            <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:800 }}>SOS from {child.first}'s watch</div><div style={{ fontSize:12, opacity:.9 }}>Tap to call now</div></div>
            <button onClick={()=>jlToast('Calling ' + child.first + '…', { icon:'phone' })} style={{ background:'#fff', color:'var(--danger-600)', border:0, borderRadius:9, padding:'8px 14px', fontWeight:800, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Call</button>
          </div>
        )}

        {/* live map */}
        <div style={{ position:'relative', height:200, borderRadius:16, overflow:'hidden', border:'1px solid var(--gray-200)', background:'linear-gradient(160deg,#E9EEF5,#DCE4EF)' }}>
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
            {[22,44,66,88].map(y=><line key={y} x1="0" y1={y} x2="100" y2={y} stroke="rgba(120,140,170,.14)" strokeWidth=".5" />)}
            {[20,44,68,90].map(x=><line key={x} x1={x} y1="0" x2={x} y2="100" stroke="rgba(120,140,170,.14)" strokeWidth=".5" />)}
          </svg>
          <div style={{ position:'absolute', left:'54%', top:'46%', transform:'translate(-50%,-50%)' }}>
            <span className="jl-pulse" style={{ display:'flex', width:40, height:40, borderRadius:'999px', background:'var(--blue-500)', border:'3px solid #fff', alignItems:'center', justifyContent:'center', boxShadow:'0 4px 12px rgba(0,0,0,.25)' }}><Icon name="watch" size={20} color="#fff" /></span>
          </div>
          <div style={{ position:'absolute', top:12, left:12, display:'inline-flex', alignItems:'center', gap:6, background:'rgba(255,255,255,.94)', borderRadius:'999px', padding:'6px 12px', boxShadow:'var(--shadow-sm)', fontSize:12, fontWeight:700, color:'var(--success-600)' }}><span className="jl-pulse" style={{ width:7, height:7, borderRadius:'999px', background:'var(--success-500)' }} />Live · Katy Middle School</div>
        </div>

        {/* status tiles */}
        <div style={{ display:'flex', gap:12, marginTop:14 }}>
          <div style={{ flex:1, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px', boxShadow:'var(--shadow-sm)', textAlign:'center' }}>
            <Icon name="battery-medium" size={22} color="var(--success-500)" /><div style={{ fontSize:18, fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)', marginTop:4 }}>74%</div><div style={{ fontSize:11.5, color:'var(--gray-500)' }}>Battery</div>
          </div>
          <div style={{ flex:1, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px', boxShadow:'var(--shadow-sm)', textAlign:'center' }}>
            <Icon name="signal" size={22} color="var(--blue-500)" /><div style={{ fontSize:18, fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)', marginTop:4 }}>Strong</div><div style={{ fontSize:11.5, color:'var(--gray-500)' }}>Signal</div>
          </div>
          <div style={{ flex:1, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px', boxShadow:'var(--shadow-sm)', textAlign:'center' }}>
            <Icon name="clock" size={22} color="var(--gold-600)" /><div style={{ fontSize:18, fontWeight:800, color:'var(--ink)', fontFamily:'var(--font-mono)', marginTop:4 }}>2m</div><div style={{ fontSize:11.5, color:'var(--gray-500)' }}>Updated</div>
          </div>
        </div>

        {/* safe zones */}
        <SectionLabel>Safe Zones</SectionLabel>
        <div style={cardWrap}>
          {places.map((p,i) => (
            <React.Fragment key={p.n}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:p.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={p.icon} size={18} color={p.ic} /></span>
                <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{p.n}</div><div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{p.time}</div></div>
                {p.active && <Pill bg="var(--success-100)" fg="var(--success-600)">Inside</Pill>}
              </div>
            </React.Fragment>
          ))}
        </div>

        <div style={{ display:'flex', gap:10, marginTop:16 }}>
          <button onClick={()=>jlToast('Ringing ' + child.first + "'s watch", { icon:'bell' })} style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'#fff', color:'var(--navy-600)', border:'1px solid var(--gray-200)', borderRadius:12, padding:'13px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="bell-ring" size={17} color="var(--navy-600)" />Ring</button>
          <button onClick={()=>jlToast('Sending a check-in ping', { icon:'message-circle' })} style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:12, padding:'13px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="message-circle" size={17} color="#fff" />Ping</button>
        </div>
        <div style={{ fontSize:11.5, color:'var(--gray-400)', textAlign:'center', marginTop:16, lineHeight:1.5 }}>Concept: GPS-watch companion. A real device would stream location &amp; SOS to this screen.</div>
      </div>
    </div>
  );
}
Object.assign(window, { WatchScreen });