/* SystemDiagram — interactive Natait engine diagram. */

const NODES = [
  {
    id: "st",
    title: "ServiceTitan",
    num: "01",
    meta: "Source of truth",
    color: "#4a7fca",
    detail: {
      label: "Source",
      name: "ServiceTitan",
      desc: "Every job, invoice, technician note, membership, and equipment record pulled in continuously. Nothing leaves your system — we read it where it lives.",
      stats: [
        { k: "Records", v: "58,000+", color: "#4a7fca" },
        { k: "Refresh", v: "Hourly",  color: "#4a7fca" },
        { k: "Coverage", v: "8 divs", color: "#4a7fca" },
      ],
    },
  },
  {
    id: "wh",
    title: "Warehouse",
    num: "02",
    meta: "Snowflake pipeline",
    color: "#29B5E8",
    detail: {
      label: "Storage",
      name: "Snowflake warehouse",
      desc: "ServiceTitan, GoHighLevel, Meta, Yelp, and Google data unified into a single model — the place every downstream agent reads from. One number, every meeting.",
      stats: [
        { k: "Sources unified", v: "6+",       color: "#29B5E8" },
        { k: "Latency",         v: "<5 min",   color: "#29B5E8" },
        { k: "Storage model",   v: "Versioned",color: "#29B5E8" },
      ],
    },
  },
  {
    id: "en",
    title: "Enrichment",
    num: "03",
    meta: "Property + wealth",
    color: "#fb923c",
    detail: {
      label: "Enrichment",
      name: "Property + wealth signals",
      desc: "Every customer record gets home value, income tier, equity, system age, permit history, and homeowner status appended overnight. The data was always available — it just wasn't connected.",
      stats: [
        { k: "Signals / record", v: "30+",    color: "#fb923c" },
        { k: "Match rate",       v: "85%+",   color: "#fb923c" },
        { k: "Refresh",          v: "Nightly",color: "#fb923c" },
      ],
    },
  },
  {
    id: "sc",
    title: "Scoring",
    num: "04",
    meta: "Replacement · LTV · churn",
    color: "#a78bfa",
    detail: {
      label: "Intelligence",
      name: "Agent scoring layer",
      desc: "An agentic loop scores every customer for replacement likelihood, lifetime value, and churn risk — then writes back tagged segments with full reasoning. Visible, auditable, never a black box.",
      stats: [
        { k: "Segments live",  v: "12",         color: "#a78bfa" },
        { k: "Score refresh",  v: "Daily",      color: "#a78bfa" },
        { k: "Avg LTV lift",   v: "+38%",       color: "#4ade80" },
      ],
      kpis: [
        { label: "Replace likelihood", pct: 94, color: "#a78bfa" },
        { label: "LTV model accuracy", pct: 81, color: "#4ade80" },
        { label: "Churn prediction",   pct: 76, color: "#fbbf24" },
      ],
    },
  },
  {
    id: "ac",
    title: "Activation",
    num: "05",
    meta: "Meta · Yelp · Google",
    color: "#4ade80",
    detail: {
      label: "Activation",
      name: "Auto-fired ad campaigns",
      desc: "When a segment crosses a threshold, the system uploads it to Meta Custom Audiences, lifts Yelp budgets, and adjusts Google LSA bidding — without anyone lifting a finger. Attribution closes the loop back to invoiced revenue.",
      stats: [
        { k: "CPL change",  v: "−31%",              color: "#4ade80" },
        { k: "Platforms",   v: "Meta · Yelp · GGL", color: "#4ade80" },
        { k: "Attribution", v: "Impression→invoice", color: "#4ade80" },
      ],
    },
  },
  {
    id: "at",
    title: "Attribution",
    num: "06",
    meta: "Invoice → impression",
    color: "#fbbf24",
    detail: {
      label: "Closed loop",
      name: "Full attribution layer",
      desc: "Every booked job triggers a CAPI Lead event. Every invoiced job triggers a CAPI Purchase with the actual dollar value. Revenue traces from ServiceTitan invoice back to the original ad impression — across Meta, Yelp, and Google — in a single view.",
      stats: [
        { k: "Loop closes", v: "Impr → invoice", color: "#fbbf24" },
        { k: "Channels",    v: "Meta · Yelp · G",color: "#fbbf24" },
        { k: "Latency",     v: "Under 48 hrs",   color: "#fbbf24" },
      ],
    },
  },
];

function SystemDiagram() {
  const [active, setActive] = React.useState("sc");
  const node = NODES.find((n) => n.id === active);

  return (
    <div className="diagram">
      <div className="natit-tag" title="Natait — the engine inside MarTech LA">
        <span className="nd"></span>
        <span>powered by <strong>natit</strong></span>
      </div>
      <div className="diagram-inner">
        <div className="diagram-row">
          {NODES.map((n) => (
            <button
              key={n.id}
              className={"dnode" + (active === n.id ? " is-active" : "")}
              onClick={() => setActive(n.id)}
              type="button"
            >
              <div className="dnode-num">{n.num}</div>
              <div className="dnode-title">{n.title}</div>
              <div className="dnode-meta">{n.meta}</div>
            </button>
          ))}
        </div>

        <div className="diagram-detail" key={node.id}>
          <div>
            <div className="label" style={{color: node.color}}>{node.detail.label}</div>
            <div className="name">{node.detail.name}</div>
          </div>
          <div>
            <p className="desc">{node.detail.desc}</p>
            <div className="stats">
              {node.detail.stats.map((s, i) => (
                <span key={i} style={{borderColor: (s.color || node.color) + '40', background: (s.color || node.color) + '0d'}}>
                  <strong style={{color: s.color || node.color}}>{s.v}</strong>{s.k}
                </span>
              ))}
            </div>
            {node.detail.kpis && (
              <div className="diagram-kpis">
                {node.detail.kpis.map((kpi, i) => (
                  <div className="diagram-kpi-row" key={i}>
                    <span className="diagram-kpi-label">{kpi.label}</span>
                    <div className="diagram-kpi-track">
                      <div className="diagram-kpi-fill" style={{width: kpi.pct + '%', background: kpi.color}}></div>
                    </div>
                    <span className="diagram-kpi-pct" style={{color: kpi.color}}>{kpi.pct}%</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.SystemDiagram = SystemDiagram;