/* ============================================================
   TECHIYAT — ecosystem / Israel Innovation Authority view
   ============================================================ */

function Ecosystem({ go }){
  const E = window.TZ.ECO;
  const totalRisk = E.sectors.reduce((a,s)=>a+s.atRisk,0);
  const totalPreserved = E.sectors.reduce((a,s)=>a+s.preserved,0);
  const totalTalent = E.sectors.reduce((a,s)=>a+s.talent,0);
  const maxRisk = Math.max(...E.sectors.map(s=>s.atRisk));
  const statusBadge = { overdue:["risk","Overdue"], flagged:["watch","Flagged"], current:["ok","Current"] };

  return (
    <div className="fadein">
      <PageHd eyebrow="Ecosystem oversight · aggregated & anonymized"
        title="Ecosystem view"
        sub="Aggregate, anonymized signal on grant-backed companies — so Israeli IP, data, and talent can be preserved before assets disappear.">
        <span className="chip"><Icon name="eyeOff" size={13}/> Aggregated & anonymized</span>
        <button className="btn btn-dark btn-sm"><Icon name="file" size={14}/> Export report</button>
      </PageHd>

      {/* headline metrics */}
      <div className="grid g4 mb24">
        {[["At-risk companies",totalRisk,"warn","var(--amber)","across 6 sectors"],
          ["Preserved YTD",totalPreserved,"checkCircle","var(--moss)","IP & teams retained"],
          ["Talent retention pool",totalTalent,"users","var(--pine)","engineers & specialists"],
          ["Grant IP at stake","₪8.2M","scale","var(--amber)","across active grants"]].map(([l,v,ic,col,sub])=>(
          <div key={l} className="card card-pad" style={{padding:18}}>
            <Icon name={ic} size={18} style={{color:col}}/>
            <div className="stat mt8"><span className="sv" style={{color:col}}>{v}</span><span className="sl">{l}</span></div>
            <span className="muted" style={{fontSize:11.5, marginTop:2}}>{sub}</span>
          </div>
        ))}
      </div>

      <div className="grid mb24" style={{gridTemplateColumns:"1.5fr 1fr", gap:18}}>
        {/* at-risk by sector */}
        <div className="card" style={{overflow:"hidden"}}>
          <div className="card-hd"><Icon name="layers" size={17} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16.5}}>At-risk & preservation by sector</h3></div>
          <div className="card-pad col gap16">
            {E.sectors.map(s=>(
              <div key={s.name}>
                <div className="row between mb6">
                  <span style={{fontSize:13.5, fontWeight:600, color:"var(--ink)"}}>{s.name}</span>
                  <span className="row gap10" style={{fontSize:12}}>
                    <span className="muted">{s.atRisk} at-risk</span>
                    <span style={{color:"var(--moss)", fontWeight:600}}>{s.preserved} preserved</span>
                  </span>
                </div>
                <div className="row gap8" style={{alignItems:"center"}}>
                  <div className="meter amber" style={{flex:1}}><i style={{width:(s.atRisk/maxRisk*100)+"%"}}/></div>
                  <span className="mono muted" style={{fontSize:11, width:54, textAlign:"right"}}>{s.talent} talent</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* preservation pipeline */}
        <div className="card" style={{overflow:"hidden"}}>
          <div className="card-hd"><Icon name="trend" size={17} style={{color:"var(--moss)"}}/><h3 className="serif" style={{fontSize:16.5}}>IP preservation pipeline</h3></div>
          <div className="card-pad col gap12">
            {[["Surfaced early",34,"var(--sage)"],["In confidential matching",18,"var(--info)"],["Buyer engaged",11,"var(--amber)"],["Preserved / closed",15,"var(--moss)"]].map(([l,v,c],i)=>(
              <div key={l} className="row gap12" style={{alignItems:"center"}}>
                <span className="chip-dot" style={{background:c, width:9, height:9}}/>
                <span className="grow" style={{fontSize:13.5, color:"var(--ink-2)"}}>{l}</span>
                <span className="serif" style={{fontSize:22, fontWeight:600, color:"var(--ink)"}}>{v}</span>
              </div>
            ))}
            <div className="divider mt4"/>
            <div className="col gap6 mt4">
              <span className="muted" style={{fontSize:12}}>Talent retained in ecosystem</span>
              <div className="row gap10"><Meter value={78} tone=""/><span className="mono" style={{fontSize:13, fontWeight:600, color:"var(--moss)"}}>78%</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* grant reporting table */}
      <div className="card mb24" style={{overflow:"hidden"}}>
        <div className="card-hd between">
          <div className="row gap10"><Icon name="file" size={17} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16.5}}>Grant-backed company reporting</h3></div>
          <span className="muted" style={{fontSize:12.5}}>Anonymized · coded identifiers</span>
        </div>
        <div style={{padding:"8px 12px 14px"}}>
          <table className="tbl">
            <thead><tr><th>Company</th><th>Sector</th><th>Grant</th><th>Reporting</th><th>IP obligation</th><th></th></tr></thead>
            <tbody>
              {E.grants.map(g=>{
                const [c,l] = statusBadge[g.status];
                return (
                  <tr key={g.co} className="clickable">
                    <td className="mono" style={{fontWeight:600, color:"var(--ink)"}}>{g.co}</td>
                    <td>{g.sector}</td>
                    <td className="mono">{g.grant}</td>
                    <td><span className={"badge "+c}>{l}</span></td>
                    <td className="muted">{g.obligation}</td>
                    <td style={{textAlign:"right"}}><Icon name="chevRight" size={15} style={{color:"var(--sage-2)"}}/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* reporting as infrastructure */}
      <div className="card" style={{overflow:"hidden", background:"var(--pine)", color:"#fff", border:"none"}}>
        <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:0}}>
          <div style={{padding:"32px 34px"}}>
            <div className="eyebrow mb12" style={{color:"var(--amber-2)"}}>Reporting terms as ecosystem infrastructure</div>
            <h2 className="serif" style={{fontSize:26, color:"#fff", lineHeight:1.15, maxWidth:440}}>Early reporting is how value gets preserved.</h2>
            <p style={{fontSize:15, color:"rgba(238,243,239,.8)", lineHeight:1.6, marginTop:14, maxWidth:460}}>
              When reporting happens early enough, the ecosystem can preserve value: IP can be licensed, teams can be
              retained, buyers can be matched, and grant-backed innovation can continue in a new home.
            </p>
            <p style={{fontSize:13.5, color:"rgba(238,243,239,.6)", lineHeight:1.55, marginTop:14, maxWidth:460}}>
              Grants or VC financing could include lightweight reporting obligations — a low-friction signal that
              surfaces companies before their assets quietly disappear.
            </p>
          </div>
          <div style={{padding:"32px 34px", borderLeft:"1px solid rgba(255,255,255,.1)"}} className="col gap14">
            {[["sprout","Detect early","Lightweight status signals surface at-risk companies months sooner."],
              ["heart","Preserve value","IP, datasets, and regulatory assets are matched instead of abandoned."],
              ["users","Retain talent","Teams find a second home inside the Israeli ecosystem."]].map(([ic,t,d])=>(
              <div key={t} className="row gap12" style={{alignItems:"flex-start"}}>
                <div className="side-mark" style={{width:34,height:34,background:"rgba(255,255,255,.08)",boxShadow:"none",border:"1px solid rgba(255,255,255,.14)",flex:"none"}}>
                  <Icon name={ic} size={16} style={{color:"var(--amber-2)"}}/>
                </div>
                <div><div style={{fontSize:14, fontWeight:600, color:"#fff"}}>{t}</div><div style={{fontSize:12.5, color:"rgba(238,243,239,.65)", lineHeight:1.45}}>{d}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Ecosystem });