function Architecture() {
  const [selected, setSelected] = React.useState('specs');
  const nodes = {
    // sources
    warehouse: { layer: 'sources', label: 'Warehouse', sub: 'snowflake · bigquery · databricks', title: 'Your warehouse', desc: "Clearmetric reads metadata — schemas, measures, lineage. Row-level data never leaves your warehouse." },
    bi: { layer: 'sources', label: 'BI metadata', sub: 'tableau · looker · powerbi', title: 'BI metadata', desc: "Existing reports, datasets, and semantic models are scanned for measures and usage — surfaced as suggested definitions for review." },
    sem: { layer: 'sources', label: 'Semantic models', sub: 'dbt · cube · lookml', title: 'Semantic models', desc: "Pull metric logic already expressed in dbt, Cube, or LookML. Clearmetric reconciles them into one governed definition." },
    // layer
    metadata: { layer: 'layer', label: 'metadata_bank', sub: 'organizational memory', title: 'Metadata bank', desc: "Reusable AI context — lineage, technical assets, prior reasoning. Persisted once, reused by MCP, AI workflows, and definition intelligence." },
    specs: { layer: 'layer', label: 'definition_specs', sub: 'single source of truth', title: 'Definition specs (SSOT)', desc: "Governed business terms, segments, and metrics with owners, descriptions, and domain context. This is the truth every consumer reads from.", hero: true },
    governed: { layer: 'layer', label: 'governed_semantic', sub: 'executable bindings', title: 'Governed semantics', desc: "Expressions, predicates, and joins that make a definition executable — the bridge from business meaning to running queries." },
    // mappings
    mappings: { layer: 'mappings', label: 'definition_mappings', sub: '→ tables · columns · measures · datasets', title: 'Definition mappings', desc: "Each governed definition is wired to the tables, columns, measures, and reports that implement it. Executable, not documentation." },
    // consumption
    canvas: { layer: 'consumption', label: 'Canvas', sub: 'for humans', title: 'Canvas — for humans', desc: "A governed workspace where analysts start from an approved definition and continue the workflow. Pulls live data; nothing is saved as yet-another-dashboard." },
    mcp: { layer: 'consumption', label: 'MCP server', sub: 'for AI agents', planned: true, title: 'MCP server — for AI agents', desc: "Planned. Will expose governed definitions and metadata context over the Model Context Protocol so any AI assistant grounds answers in approved business meaning." },
    api: { layer: 'consumption', label: 'Governed APIs', sub: 'for product workflows', planned: true, title: 'Governed APIs — for product workflows', desc: "Planned. Products and internal tools will fetch the same governed definitions programmatically. One contract, many consumers." },
  };

  const Node = ({ id }) => {
    const n = nodes[id];
    const active = selected === id;
    return (
      <button
        type="button"
        className={"arch-node " + (n.hero ? "arch-node--hero " : "") + (n.planned ? "arch-node--planned " : "") + (active ? "active" : "")}
        onMouseEnter={() => setSelected(id)}
        onFocus={() => setSelected(id)}
        onClick={() => setSelected(id)}
      >
        {n.planned && <span className="arch-node__pill">planned</span>}
        <div className="arch-node__label">{n.label}</div>
        <div className="arch-node__sub">{n.sub}</div>
      </button>
    );
  };

  const sel = nodes[selected];

  return (
    <section className="section section--tinted" id="architecture">
      <div className="wrap">
        <SectionHead num="05" kicker="Where Clearmetric sits">
          Between your data sources and everything that consumes them — as the meaning layer. Not a warehouse, not a dashboard tool. Hover any block to explore.
        </SectionHead>

        <div className="arch2">
          <div className="arch2__diagram">
            <div className="arch2__group">
              <div className="arch2__glabel">Sources · your stack</div>
              <div className="arch2__row arch2__row--3">
                <Node id="warehouse"/><Node id="bi"/><Node id="sem"/>
              </div>
            </div>

            <div className="arch2__flow"><svg width="12" height="28" viewBox="0 0 12 28"><path d="M6 0 V24 M2 20 L6 24 L10 20" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg></div>

            <div className="arch2__cm">
              <div className="arch2__cm-tag">Clearmetric</div>

              <div className="arch2__group arch2__group--hero">
                <div className="arch2__glabel">Defined intelligence layer</div>
                <div className="arch2__row arch2__row--3">
                  <Node id="metadata"/><Node id="specs"/><Node id="governed"/>
                </div>
                <div className="arch2__row arch2__row--1">
                  <Node id="mappings"/>
                </div>
              </div>

              <div className="arch2__flow"><svg width="12" height="28" viewBox="0 0 12 28"><path d="M6 0 V24 M2 20 L6 24 L10 20" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg></div>

              <div className="arch2__group">
                <div className="arch2__glabel">Consumption</div>
                <div className="arch2__row arch2__row--3">
                  <Node id="canvas"/><Node id="mcp"/><Node id="api"/>
                </div>
              </div>
            </div>
          </div>

          <aside className="arch2__panel">
            <div className="mono-label" style={{ marginBottom: 14 }}><span className="num">→</span>{sel.layer.toUpperCase()}</div>
            <h3 className="arch2__title">{sel.title}</h3>
            <p className="arch2__desc">{sel.desc}</p>
            <div className="arch2__hint">Hover any block to explore.</div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.Architecture = Architecture;