/* global React, t */
// Knowledge Graphs for AECO — course teaser (landing page) + course sub-page.
// Gated behind window.CUE_FEATURES.course (landing/features.js).
// The sub-page is English-only by design, like About; the teaser is translated.

(function () {
  const { Button } = window.CueDesignSystem_89ac8b;
  const { useEffect } = React;
  const Icon = ({ name }) => <span className="cue-icon">{name}</span>;

  /* ---------- Graphic: disconnected silos → one connected graph ---------- */
  // 2×2 grid with generous gutters; each dashed stub stops well short and the
  // cross sits in the empty gutter — never inside a box.
  const SW = 84, SH = 50, CX = [10, 170], CY = [28, 132];
  const SILOS = [
    { x: CX[0], y: CY[0], label: "BIM" },
    { x: CX[1], y: CY[0], label: "GIS" },
    { x: CX[0], y: CY[1], label: "CMMS" },
    { x: CX[1], y: CY[1], label: "ERP" }];

  const GUT_X = (CX[0] + SW + CX[1]) / 2;
  const GUT_Y = (CY[0] + SH + CY[1]) / 2;
  const BREAKS = [
    { cx: GUT_X, cy: CY[0] + SH / 2 },
    { cx: GUT_X, cy: CY[1] + SH / 2 },
    { cx: CX[0] + SW / 2, cy: GUT_Y },
    { cx: CX[1] + SW / 2, cy: GUT_Y }];

  const STUBS = [
    `M${CX[0] + SW} ${CY[0] + SH / 2} H${GUT_X - 13}`, `M${GUT_X + 13} ${CY[0] + SH / 2} H${CX[1]}`,
    `M${CX[0] + SW} ${CY[1] + SH / 2} H${GUT_X - 13}`, `M${GUT_X + 13} ${CY[1] + SH / 2} H${CX[1]}`,
    `M${CX[0] + SW / 2} ${CY[0] + SH} V${GUT_Y - 13}`, `M${CX[0] + SW / 2} ${GUT_Y + 13} V${CY[1]}`,
    `M${CX[1] + SW / 2} ${CY[0] + SH} V${GUT_Y - 13}`, `M${CX[1] + SW / 2} ${GUT_Y + 13} V${CY[1]}`];

  const GNODES = [
    { x: 398, y: 46, label: "Space" },
    { x: 336, y: 152, label: "Asset" },
    { x: 512, y: 32, label: "Document" },
    { x: 590, y: 132, label: "Contract" },
    { x: 452, y: 196, label: "Person" }];

  const CORE = { x: 466, y: 112 };

  function SiloToGraph() {
    return (
      <svg className="kgfig" viewBox="0 0 660 240" role="img" aria-label="Four disconnected systems on the left; one connected knowledge graph on the right">
        {SILOS.map((s, i) =>
        <g key={i}>
            <rect className="kgfig__silo" x={s.x} y={s.y} width={SW} height={SH} rx="12" />
            <text className="kgfig__silo-l" x={s.x + SW / 2} y={s.y + SH / 2 + 5} textAnchor="middle">{s.label}</text>
          </g>
        )}
        {STUBS.map((d, i) => <path key={`s${i}`} className="kgfig__dash" d={d} />)}
        <g stroke="var(--cue-color-midgray)" strokeWidth="1.7" strokeLinecap="round">
          {BREAKS.map((b, i) =>
          <path key={`b${i}`} d={`M${b.cx - 7} ${b.cy - 7} l14 14 M${b.cx + 7} ${b.cy - 7} l-14 14`} />
          )}
        </g>

        <g className="kgfig__arrow">
          <path d="M272 112 h22" fill="none" stroke="var(--cue-color-darkgray)" strokeWidth="1.6" />
          <path d="M300 112 l-10 -6.5 v13 z" />
        </g>

        {GNODES.map((n, i) =>
        <path key={`e${i}`} className="kgfig__edge kgfig__pulse" strokeWidth="1.4"
        d={`M${CORE.x} ${CORE.y} L${n.x} ${n.y}`} />
        )}
        <path className="kgfig__edge" strokeWidth="1.2" d="M398 46 L512 32" />
        <path className="kgfig__edge" strokeWidth="1.2" d="M336 152 L452 196" />
        <path className="kgfig__edge" strokeWidth="1.2" d="M590 132 L512 32" />
        <circle className="kgfig__node kgfig__node--core" cx={CORE.x} cy={CORE.y} r="13" />
        {GNODES.map((n, i) =>
        <g key={`n${i}`}>
            <circle className="kgfig__node" cx={n.x} cy={n.y} r="8" />
            <text className="kgfig__nl" x={n.x} y={n.y - 15}>{n.label}</text>
          </g>
        )}
      </svg>);

  }

  /* ---------- Graphic: from a document to a canonical entity ---------- */
  const LAYERS = [
    { k: "File", d: "The document itself — recognised once, however many copies exist." },
    { k: "Fragments", d: "A page, a paragraph, a table, an image." },
    { k: "Selectors", d: "Exactly where it sits: page, bounding box, character range." },
    { k: "Entity Mentions", d: "Every individual occurrence of a named thing." },
    { k: "Canonical Entities", d: "The one record all those mentions resolve to." }];

  function LayersFig() {
    const H = 44, G = 10;
    return (
      <svg className="kgfig" viewBox={`0 0 900 ${LAYERS.length * (H + G)}`} role="img" aria-label="Five layers from file to canonical entity">
        <path d="M30 30 V210" stroke="var(--cue-color-lightgray)" strokeDasharray="3 5" />
        {LAYERS.map((l, i) => {
          const y = i * (H + G);
          const last = i === LAYERS.length - 1;
          return (
            <g key={i}>
              <rect x="30" y={y} width="252" height={H} rx="11"
              fill={last ? "var(--cue-color-blue)" : "#fff"}
              stroke={last ? "var(--cue-color-blue)" : "var(--cue-color-lightgray)"} />
              <text x="52" y={y + 27} fill={last ? "#fff" : "var(--cue-color-darkgray)"}
              style={{ font: "600 16px Poppins, sans-serif" }}>{l.k}</text>
              <path d={`M282 ${y + H / 2} h22`} stroke="var(--cue-color-lightgray)" />
              <text x="312" y={y + 27} fill="var(--cue-color-darkmidgray)"
              style={{ font: "400 15px Poppins, sans-serif" }}>{l.d}</text>
            </g>);

        })}
      </svg>);

  }

  /* ---------- Teaser (home page) ---------- */
  function CourseTeaser() {
    return (
      <section className="section section--canvas" id="course" data-screen-label="Course teaser">
        <div className="container">
          <div className="course-teaser">
            <div>
              <p className="eyebrow" data-reveal>{t("Training")}</p>
              <h2 className="h2" data-reveal style={{ transitionDelay: ".05s" }}>
                {t("Knowledge graphs, for the people who know the buildings.")}
              </h2>
              <p className="lead" data-reveal style={{ marginTop: 20, transitionDelay: ".1s" }}>
                {t("A six-week course that takes domain experts — asset owners, facility managers, planners — from \"what even is a graph?\" to a first shared vocabulary for their own organisation. No code, anywhere.")}
              </p>
              <div className="course-teaser__facts" data-reveal style={{ transitionDelay: ".14s" }}>
                <span className="course-fact"><Icon name="event_repeat" />{t("6 weeks, one session a week")}</span>
                <span className="course-fact"><Icon name="videocam" />{t("Online — or on site as a workshop")}</span>
                <span className="course-fact"><Icon name="code_off" />{t("No technical background needed")}</span>
              </div>
              <div className="course-teaser__actions" data-reveal style={{ transitionDelay: ".18s" }}>
                <a href="#/course"><Button variant="primary" size="l" trailingIcon="arrow_forward">{t("See the course")}</Button></a>
                <span className="badge-wip">{t("In preparation")}</span>
              </div>
            </div>
            <div className="course-teaser__fig" data-reveal style={{ transitionDelay: ".12s" }}>
              <SiloToGraph />
            </div>
          </div>
        </div>
      </section>);

  }

  /* ---------- Sub-page ---------- */
  const DAYS = [
    { n: "01", title: "Why knowledge graphs? Escaping the silo",
      theme: "Information in AECO is trapped, duplicated and incomplete across BIM, GIS, FM and ERP — and a graph is the most natural way to think about a connected industry.",
      aha: "\"My organisation's information already behaves like a graph — I've just been forcing it through filing cabinets.\"",
      tags: [{ i: "draw", t: "Exercise: graph your Monday" }] },
    { n: "02", title: "Making meaning machine-readable",
      theme: "Facts as subject–predicate–object triples, the difference between the schema (what can exist) and the data (what does), and why two conflicting statements are a feature, not a bug.",
      aha: "\"A fact isn't data — it's a claim, made by someone, at some point, with some confidence.\"",
      tags: [{ i: "style", t: "Exercise: triple it" }] },
    { n: "03", title: "Graphs vs. relational databases",
      theme: "Why a five-hop question needs four fragile joins in a table world and a single path traversal in a graph — and why AI removes any need for a domain expert to learn a query language.",
      aha: "\"I don't need to know the schema in advance to ask a new question.\"",
      tags: [{ i: "route", t: "Exercise: trace the path" }] },
    { n: "04", title: "Modelling buildings without the bloat",
      theme: "The Building Topology Ontology: Site, Building, Storey, Space, Zone, Element. Ten simple reusable ideas instead of thousands of ever-changing entity types — taught by BOT's own author.",
      aha: "\"Simplicity is what makes this work across every project, tool and discipline.\"",
      tags: [{ i: "dashboard", t: "Exercise: build a BOT graph by hand" }] },
    { n: "05", title: "The Object Type Library", lab: true,
      theme: "One shared catalogue of the things your organisation cares about — spaces, assets, documents, people, contracts — and how a mention in a PDF resolves to the same record as a row in your ERP.",
      aha: "\"I don't need one system to rule them all — I need one shared vocabulary.\"",
      tags: [{ i: "style", t: "Exercise: sort the index cards" }, { i: "tune", t: "Lab: your spreadsheet → Cue Tuner", lab: true }] },
    { n: "06", title: "The knowledge graph as integration layer", lab: true,
      theme: "A single view of truth rather than a single source of it: a layer of meaning on top of everything you already run, with provenance on every claim and an AI agent as the front door.",
      aha: "\"This isn't a new system to adopt — it's what finally lets everything we have talk to each other, and to AI.\"",
      tags: [{ i: "edit_note", t: "Capstone: draft your Object Type Library" }, { i: "smart_toy", t: "Lab: ask Claude your own data", lab: true }] }];

  const OUTCOMES = [
    { ico: "account_tree", h: "Read a graph", b: "Explain nodes, edges, triples and provenance to a colleague — in plain language, without a slide deck." },
    { ico: "inventory_2", h: "A first Object Type Library", b: "Leave with a drafted catalogue of your organisation's object types and the relationships between them." },
    { ico: "tune", h: "Your own data, mapped", b: "In the optional lab track, map a real spreadsheet into canonical entities in a Cue sandbox — form-driven, no code." },
    { ico: "smart_toy", h: "AI on your terms", b: "Connect Claude to that project and ask questions of data you loaded an hour earlier, with every answer traced to its source." }];

  function CoursePage() {
    useEffect(() => { window.scrollTo(0, 0); }, []);
    return (
      <main className="doc section section--canvas" data-screen-label="Course">
        <div className="container">
          <div className="course-hero doc__wrap" style={{ maxWidth: 820 }}>
            <a className="doc__back" href="#top"><span className="cue-icon">arrow_back</span> Back to home</a>
            <div><span className="badge-wip">In preparation</span></div>
            <h1 className="h1 doc__title" style={{ marginTop: 16 }}>Knowledge Graphs for AECO</h1>
            <p className="lead doc__lead">
              A six-week course for domain experts: asset owners, facility managers, planners and AEC
              professionals with deep knowledge of the built environment and no background in semantic
              web technology, databases or programming.
            </p>
            <p className="p" style={{ marginTop: 18 }}>
              Every project generates drawings, models, GIS layers, contracts, schedules and maintenance
              logs — and almost none of it talks to the rest. The course is built around one shift:
              stop asking <em>which application should own this data</em>, and start asking
              <em> what does this data mean, and how does it connect to everything else we know</em>.
            </p>
            <div className="course-hero__meta">
              <span className="course-fact"><Icon name="event_repeat" />6 sessions, one per week</span>
              <span className="course-fact"><Icon name="videocam" />Online, live</span>
              <span className="course-fact"><Icon name="groups" />Or on site as a workshop</span>
              <span className="course-fact"><Icon name="code_off" />No coding at any point</span>
            </div>
          </div>

          <div className="course-page__fig">
            <SiloToGraph />
            <p className="course-page__fig-cap">The whole course in one picture: four systems that have never met, and the layer that connects them.</p>
          </div>

          <div className="doc__wrap" style={{ maxWidth: 900, marginTop: "clamp(56px,7vw,96px)" }}>
            <h2 className="h2 doc__h2">The six sessions</h2>
            <p className="p doc__sub">
              Each session pairs one idea with an AECO story, a hands-on exercise that needs nothing but
              paper and a whiteboard, and a single takeaway it is built to deliver.
            </p>
          </div>

          <div className="course-rail" style={{ maxWidth: 900, margin: "38px auto 0" }}>
            {DAYS.map((d, i) =>
            <article key={i} className={`course-day ${d.lab ? "course-day--lab" : ""}`}>
                <div className="course-day__n">{d.n}</div>
                <div>
                  <h3 className="course-day__title">{d.title}</h3>
                  <p className="course-day__theme">{d.theme}</p>
                  <p className="course-day__aha">{d.aha}</p>
                  <div className="course-day__tags">
                    {d.tags.map((tg, j) =>
                  <span key={j} className={`course-tag ${tg.lab ? "course-tag--lab" : ""}`}>
                        <Icon name={tg.i} />{tg.t}
                      </span>
                  )}
                  </div>
                </div>
              </article>
            )}
          </div>

          <div className="doc__wrap" style={{ maxWidth: 900, marginTop: "clamp(56px,7vw,96px)" }}>
            <h2 className="h2 doc__h2">What a document becomes</h2>
            <p className="p doc__sub">
              Sessions five and six open up the machinery underneath Cue — five layers that turn a
              scattered pile of PDFs into records you can actually query.
            </p>
          </div>
          <div className="course-page__fig course-page__fig--wide"><LayersFig /></div>

          <div className="doc__wrap" style={{ maxWidth: 900, marginTop: "clamp(56px,7vw,96px)" }}>
            <h2 className="h2 doc__h2">What you leave with</h2>
          </div>
          <div className="course-grid" style={{ maxWidth: 900, margin: "34px auto 0" }}>
            {OUTCOMES.map((o, i) =>
            <div key={i} className="course-card">
                <div className="course-card__ico"><Icon name={o.ico} /></div>
                <h3 className="course-card__h">{o.h}</h3>
                <p className="course-card__b">{o.b}</p>
              </div>
            )}
          </div>

          <div className="doc__wrap" style={{ maxWidth: 900, marginTop: "clamp(56px,7vw,96px)" }}>
            <h2 className="h2 doc__h2">Two ways to run it</h2>
          </div>
          <div className="course-formats" style={{ maxWidth: 900, margin: "34px auto 0" }}>
            <div className="course-format course-format--primary">
              <div className="course-format__k"><Icon name="videocam" />Online course</div>
              <h3 className="course-format__h">Six weeks, one session a week</h3>
              <p className="course-format__b">
                Live sessions with time between them to let each idea land — and to try the exercise
                against your own organisation before the next one.
              </p>
              <ul className="course-format__list">
                <li><Icon name="check" /><span>Small cohorts, live facilitation</span></li>
                <li><Icon name="check" /><span>Exercise kits delivered as printables</span></li>
                <li><Icon name="check" /><span>Optional Cue sandbox for the session 5–6 labs</span></li>
              </ul>
            </div>
            <div className="course-format">
              <div className="course-format__k"><Icon name="groups" />On-site workshop</div>
              <h3 className="course-format__h">Compressed, in your building</h3>
              <p className="course-format__b">
                The same arc, run as an in-person workshop for one organisation — with the stories and
                the capstone flavoured for your portfolio and your people.
              </p>
              <ul className="course-format__list">
                <li><Icon name="check" /><span>Tailored to facility managers, planners or asset owners</span></li>
                <li><Icon name="check" /><span>Sticky notes, floor plans and index cards, not slides</span></li>
                <li><Icon name="check" /><span>Labs run as facilitator-led demos where access is limited</span></li>
              </ul>
            </div>
          </div>

          <div className="course-cta" style={{ maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>
            <h2 className="h2">Interested in a cohort?</h2>
            <p>
              The course is being finalised now. Tell us you want in and we'll come back with dates —
              or book a call to talk through an on-site workshop for your team.
            </p>
            <div className="course-cta__actions">
              <Button variant="accent" size="l" leadingIcon="notifications_active"
              onClick={() => window.dispatchEvent(new CustomEvent("cue:open-waitlist"))}>Join waiting list</Button>
              <a href="https://calendar.app.google/NPs1XYcJBhn6wuKq9" target="_blank" rel="noopener noreferrer">
                <Button variant="tertiary" size="l" leadingIcon="calendar_month" style={{ color: "var(--cue-color-white)" }}>Book a call</Button>
              </a>
            </div>
          </div>

          <div className="doc__wrap" style={{ maxWidth: 900 }}>
            <div className="doc__divider" />
            <div className="doc__footer-row">
              <span className="doc__updated">QAECY AG · Regensdorf, Switzerland</span>
              <a href="#top"><Button variant="secondary" size="m" leadingIcon="arrow_back">Back to home</Button></a>
            </div>
          </div>
        </div>
      </main>);

  }

  window.CourseTeaser = CourseTeaser;
  window.CoursePage = CoursePage;
})();