function CatalogScreen() {
  const [selected, setSelected] = useState("gem_transactions");
  const item = CATALOG.find(c => c.name === selected) || CATALOG[0];

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Data Catalog & Governance</div>
          <div className="screen-sub">{CATALOG.length} certified datasets · Avg data quality <b className="mono">94.2%</b> · Lineage tracked across 12 sources</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="filter"/>Filter</button>
          <button className="btn"><Icon name="scale"/>Business Glossary</button>
          <button className="btn primary"><Icon name="plus"/>Register dataset</button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid g-4" style={{ marginBottom: 16 }}>
        <div className="card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600 }}>Total datasets</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>142</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>68 Gold · 42 Silver · 32 Bronze</div>
        </div>
        <div className="card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600 }}>Data quality score</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: 'var(--ok)' }}>94.2%</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>+1.4% vs last month</div>
        </div>
        <div className="card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600 }}>PII datasets</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>28</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>All encrypted at rest · DPDP compliant</div>
        </div>
        <div className="card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600 }}>Open quality issues</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4, color: 'var(--accent-2)' }}>12</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>3 critical · 9 warnings</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr' }}>
        {/* Dataset list */}
        <div className="card">
          <div className="card-head">
            <h3>All Datasets</h3>
            <div className="hstack">
              <input placeholder="Search datasets…" style={{ height: 26, borderRadius: 6, border: '1px solid var(--border)', background: 'var(--panel-2)', padding: '0 10px', fontSize: 11.5, color: 'var(--ink)', outline: 'none', fontFamily: 'inherit', width: 180 }}/>
            </div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>Dataset</th>
                <th>Owner</th>
                <th className="num">Rows</th>
                <th className="num">Quality</th>
                <th>Cert</th>
              </tr></thead>
              <tbody>
                {CATALOG.map(c => (
                  <tr key={c.name} onClick={() => setSelected(c.name)} style={{ background: selected === c.name ? 'var(--panel-2)' : 'transparent', cursor: 'pointer' }}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon name="database" size={13} style={{ color: 'var(--primary)' }}/>
                        <div>
                          <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{c.name}</div>
                          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 1 }}>{c.desc}</div>
                        </div>
                        {c.pii && <span className="tag danger" style={{ fontSize: 10 }}><Icon name="lock" size={9}/>PII</span>}
                      </div>
                    </td>
                    <td style={{ color: 'var(--ink-2)' }} className="small">{c.owner}</td>
                    <td className="num">{c.rows}</td>
                    <td className="num">
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>
                        <div style={{ width: 40, height: 4, background: 'var(--panel-3)', borderRadius: 2, overflow: 'hidden' }}>
                          <div style={{ width: `${c.quality}%`, height: '100%', background: c.quality >= 95 ? 'var(--ok)' : c.quality >= 85 ? 'var(--accent)' : 'var(--danger)' }}/>
                        </div>
                        <span style={{ fontWeight: 600, minWidth: 30 }}>{c.quality}%</span>
                      </div>
                    </td>
                    <td>
                      <span className="tag" style={{ background: c.cert === "Gold" ? 'oklch(0.94 0.06 85)' : c.cert === "Silver" ? 'oklch(0.94 0.02 250)' : 'oklch(0.94 0.04 40)', color: c.cert === "Gold" ? 'oklch(0.48 0.15 65)' : c.cert === "Silver" ? 'oklch(0.42 0.05 250)' : 'oklch(0.5 0.13 40)', fontWeight: 600 }}>
                        {c.cert}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Detail panel */}
        <div className="vstack">
          <div className="card">
            <div className="card-head">
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="database" size={14} style={{ color: 'var(--primary)' }}/>
                <h3 className="mono">{item.name}</h3>
              </div>
              <div className="card-actions">
                <button className="btn sm"><Icon name="eye" size={11}/>Preview</button>
                <button className="btn sm primary"><Icon name="sparkles" size={11}/>Ask</button>
              </div>
            </div>
            <div className="card-body">
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginBottom: 12, lineHeight: 1.5 }}>{item.desc}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 12 }}>
                {item.tags.map(t => <span key={t} className="tag">#{t}</span>)}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 12 }}>
                <div><div style={{ color: 'var(--ink-3)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Owner</div><div style={{ marginTop: 3, fontWeight: 500 }}>{item.owner}</div></div>
                <div><div style={{ color: 'var(--ink-3)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Rows</div><div className="mono" style={{ marginTop: 3, fontWeight: 600 }}>{item.rows}</div></div>
                <div><div style={{ color: 'var(--ink-3)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Certification</div><div style={{ marginTop: 3, fontWeight: 500 }}>{item.cert}</div></div>
                <div><div style={{ color: 'var(--ink-3)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Quality</div><div style={{ marginTop: 3, fontWeight: 600, color: item.quality >= 95 ? 'var(--ok)' : item.quality >= 85 ? 'var(--accent-2)' : 'var(--danger)' }}>{item.quality}%</div></div>
              </div>
            </div>
          </div>

          {/* Lineage */}
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}>
              <h3 style={{ fontSize: 12 }}>Data Lineage</h3>
              <span className="tag primary" style={{ fontSize: 10 }}>Live</span>
            </div>
            <div className="card-body" style={{ padding: 12 }}>
              <svg viewBox="0 0 380 180" width="100%" height="180">
                {/* Sources */}
                <Node x={10} y={20} label="GeM API" type="source" small/>
                <Node x={10} y={68} label="Postgres" type="source" small/>
                <Node x={10} y={116} label="Kafka Stream" type="source" small/>

                {/* ETL */}
                <Node x={140} y={68} label="etl.gem_ingest" type="etl"/>

                {/* Dataset */}
                <Node x={260} y={68} label={item.name} type="dataset" highlighted/>

                {/* Consumers */}
                <Node x={260} y={20} label="exec_dash" type="dash" small pos="right"/>
                <Node x={260} y={116} label="ai_copilot" type="dash" small pos="right"/>

                <Edge x1={70} y1={30} x2={140} y2={78}/>
                <Edge x1={70} y1={78} x2={140} y2={78}/>
                <Edge x1={70} y1={126} x2={140} y2={78}/>
                <Edge x1={200} y1={78} x2={260} y2={78}/>
              </svg>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6, textAlign: 'center' }}>3 upstream sources · 2 downstream consumers</div>
            </div>
          </div>

          {/* Quality rules */}
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}>
              <h3 style={{ fontSize: 12 }}>Data Quality Rules</h3>
              <button className="btn sm"><Icon name="plus" size={11}/>Add</button>
            </div>
            <div className="card-body" style={{ padding: 0 }}>
              {[
                { name: "vendor_id NOT NULL", pass: true, checks: "428.6M / 428.6M" },
                { name: "order_value > 0", pass: true, checks: "428.5M / 428.6M" },
                { name: "state_code IN geo_ref", pass: true, checks: "428.6M / 428.6M" },
                { name: "gst_number matches regex", pass: false, checks: "428.4M / 428.6M · 218K failed" },
              ].map((r, i) => (
                <div key={i} style={{ padding: '9px 12px', borderTop: i > 0 ? '1px solid var(--border)' : 0, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name={r.pass ? "check" : "alert"} size={13} style={{ color: r.pass ? 'var(--ok)' : 'var(--accent-2)' }}/>
                  <span className="mono" style={{ fontSize: 11.5, flex: 1 }}>{r.name}</span>
                  <span className="mono small" style={{ color: r.pass ? 'var(--ok)' : 'var(--accent-2)' }}>{r.checks}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Node({ x, y, label, type, small, highlighted, pos = "top" }) {
  const w = small ? 60 : 60;
  const h = 20;
  const colors = {
    source: { bg: "var(--panel-2)", border: "var(--border-strong)", ic: "database" },
    etl: { bg: "var(--primary-tint)", border: "var(--primary)", ic: "branch" },
    dataset: { bg: "var(--accent-tint)", border: "var(--accent-2)", ic: "layers" },
    dash: { bg: "var(--panel-2)", border: "var(--border-strong)", ic: "dashboard" },
  };
  const c = colors[type];
  return <g>
    <rect x={x} y={y} width={w} height={h} rx="4" fill={c.bg} stroke={highlighted ? 'var(--primary)' : c.border} strokeWidth={highlighted ? 2 : 1}/>
    <text x={x + w/2} y={y + h/2 + 3} fontSize="9" fill="var(--ink)" textAnchor="middle" fontFamily="JetBrains Mono" fontWeight="600">{label.length > 10 ? label.slice(0, 9) + '…' : label}</text>
  </g>;
}
function Edge({ x1, y1, x2, y2 }) {
  const mx = (x1 + x2) / 2;
  return <path d={`M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`} stroke="var(--border-strong)" strokeWidth="1.5" fill="none" markerEnd="url(#arrow)"/>;
}

window.CatalogScreen = CatalogScreen;