window.Graphs = function Graphs({ navigate }) {
  // Catalog comes from env.js — edit GRAPHS there to add / remove cards.
  // Live counts on each LIVE card come from central /health (just
  // entities/relationships/facts — central exposes one graph today, so
  // every live card sees the same totals; revisit when there's more than one).
  const health = window.api.useHealth();
  const fmt = window.api.fmtNumber;
  const catalog = (window.__ENV && window.__ENV.GRAPHS) || [];

  const graphs = catalog.map((g) => ({
    ...g,
    entities: g.status === 'live' ? fmt(health.entities) : '—',
    relationships: g.status === 'live' ? fmt(health.relationships) : '—',
    facts: g.status === 'live' ? fmt(health.facts) : '—',
  }));

  return (
    <div className="page">
      <section className="section" style={{paddingTop:96,borderTop:0}}>
        <div className="container">
          <div className="section-head">
            <h2>Domain graphs, each continuously verified.</h2>
            <p className="lede">
              A separate graph for each domain so types, relationships, and evidence standards can be tuned to how analysts in that field actually reason.{' '}
              {graphs.filter((g) => g.status === 'live').length} live,{' '}
              {graphs.filter((g) => g.status === 'soon').length} in development.
            </p>
          </div>
          <div className="graphs-grid">
            {graphs.map((g) => (
              <article
                key={g.slug}
                className={'graph-card' + (g.status === 'soon' ? ' disabled' : '')}
                onClick={() => g.status === 'live' && navigate('/graphs/' + g.slug)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' && g.status === 'live') navigate('/graphs/' + g.slug); }}
              >
                <div className="graph-card-preview">
                  <CardScene seed={g.seed} palette={g.palette} spin={g.status === 'soon' ? 0.4 : 1} />
                  <div style={{position:'absolute',top:14,right:14,zIndex:2}}>
                    {g.status === 'live'
                      ? <span className="badge badge-live"><span className="pulse" /> LIVE</span>
                      : <span className="badge badge-soon">COMING SOON</span>}
                  </div>
                </div>
                <div className="graph-card-body">
                  <div className="graph-card-row">
                    <h3>{g.name}</h3>
                    {g.status === 'live' && <Icon name="arrow" size={16} style={{color:'var(--fg-mute)'}} />}
                  </div>
                  <p className="desc">{g.desc}</p>
                  <div className="graph-card-meta mono">
                    <span><b>{g.entities}</b> entities</span>
                    <span><b>{g.relationships}</b> rels</span>
                    <span><b>{g.facts}</b> facts</span>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div style={{marginTop:80,padding:'28px 32px',border:'1px dashed var(--border-strong)',borderRadius:14,display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,flexWrap:'wrap'}}>
            <div>
              <div style={{fontWeight:600,fontSize:16}}>Want a graph for your domain?</div>
              <div style={{color:'var(--fg-dim)',fontSize:14,marginTop:4}}>Private knowledge graphs are available on the Enterprise tier. We've built graphs for supply chains, geopolitical risk, and clinical evidence.</div>
            </div>
            <a className="btn btn-ghost" href="#/pricing" onClick={(e)=>{e.preventDefault();navigate('/pricing');}}>Talk to us <Icon name="arrow" /></a>
          </div>
        </div>
      </section>
      <Footer navigate={navigate} />
    </div>
  );
};