// Platform with tabs: Definitions / Canvas BI / MCP
function Platform() {
  const tabs = [
    { id: 'definitions', label: 'Definitions' },
    { id: 'canvas', label: 'Canvas' },
    { id: 'mcp', label: 'MCP for AI' },
  ];
  const getTabFromHash = () => {
    const m = window.location.hash.match(/platform[-=](definitions|canvas|mcp)/i);
    return m ? m[1].toLowerCase() : 'definitions';
  };
  const [tab, setTab] = React.useState(getTabFromHash);
  React.useEffect(() => {
    const onHash = () => {
      const t = getTabFromHash();
      setTab(t);
      if (window.location.hash.match(/platform[-=]/i)) {
        const el = document.getElementById('platform');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };
    window.addEventListener('hashchange', onHash);
    // on mount — if URL already carries a tab anchor, scroll there
    if (window.location.hash.match(/platform[-=]/i)) {
      setTimeout(() => {
        const el = document.getElementById('platform');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
    }
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return (
    <section className="section" id="platform">
      <div className="wrap">
        <SectionHead num="04" kicker="The platform">
          One layer, three ways to use it. Define a metric once — then consume it on a canvas, in a report, or through an AI agent.
        </SectionHead>
        <div className="platform-tabs" role="tablist">
          {tabs.map((t, i) => (
            <button
              key={t.id}
              role="tab"
              aria-selected={tab === t.id}
              className={"platform-tab " + (tab === t.id ? 'active' : '')}
              onClick={() => { setTab(t.id); history.replaceState(null, '', '#platform-' + t.id); }}
            >
              <span className="idx">0{i+1}</span>{t.label}
            </button>
          ))}
        </div>
        <div className="platform-panel">
          {tab === 'definitions' && <DefinitionsPanel/>}
          {tab === 'canvas' && <CanvasPanel/>}
          {tab === 'mcp' && <MCPPanel/>}
        </div>
      </div>
    </section>
  );
}

function DefinitionsPanel() {
  const [expanded, setExpanded] = React.useState(0);
  const rows = [
    { name: "Monthly Recurring Revenue", type: "metric", owner: "Finance", initials: "FN", status: "approved",
      desc: "Sum of normalized subscription revenue for all active, paying customers.", binds: "fct_subscriptions → mrr_usd" },
    { name: "Active Customer", type: "segment", owner: "RevOps", initials: "RO", status: "approved",
      desc: "Paying customer with at least one billable subscription and no churn event in the last 30 days.", binds: "dim_customers WHERE status = 'active'" },
    { name: "Net Revenue Retention", type: "metric", owner: "Finance", initials: "FN", status: "approved",
      desc: "Expansion plus contraction plus churn, divided by starting MRR, measured over trailing 12 months.", binds: "fct_subscription_events → nrr_ttm" },
    { name: "Qualified Lead", type: "term", owner: "Marketing", initials: "MK", status: "draft",
      desc: "Lead that meets the fit and intent criteria in the current scoring model.", binds: "fct_lead_scores ≥ 65" },
  ];
  return (
    <React.Fragment>
      <div className="platform-copy">
        <h2>Approved meaning, versioned and owned.</h2>
        <p className="lede">Every metric, segment, and term lives in one place — with a plain-English description, an owner, and an executable binding to your tables. No more tribal knowledge in slack threads.</p>
        <ul className="bullets">
          <li>Business definitions written for humans, not SQL.</li>
          <li>Governed ownership, version history, and approval workflow.</li>
          <li>Maps cleanly to tables, columns, measures, and dbt models.</li>
          <li>Executable: what's defined here is what gets run, everywhere.</li>
        </ul>
      </div>
      <div>
        <div className="def-table">
          <div className="def-table__head">
            <div>Definition</div><div>Type</div><div>Owner</div><div style={{textAlign:'right'}}>Status</div>
          </div>
          {rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className="def-row" style={{ cursor: 'pointer' }} onClick={() => setExpanded(expanded === i ? -1 : i)}>
                <div className="name"><span className="dot" style={{ background: r.status === 'draft' ? 'var(--ink-4)' : 'var(--good)' }}/>{r.name}</div>
                <div className="type">{r.type}</div>
                <div className="owner"><span className="avatar">{r.initials}</span>{r.owner}</div>
                <div className={"status " + (r.status === 'draft' ? 'draft' : '')}>{r.status}</div>
              </div>
              {expanded === i && (
                <div className="def-expand">
                  <div>
                    <h4>Description</h4>
                    <div>{r.desc}</div>
                  </div>
                  <div>
                    <h4>Mapping</h4>
                    <div><code>{r.binds}</code></div>
                  </div>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

window.Platform = Platform;
window.DefinitionsPanel = DefinitionsPanel;