/* ================================================================
   modelling.jsx — "Modelling — Awaiting Proposition".
   A status and decision artefact for CE board / stakeholder review.
   Shows that the Modelling page has a reserved place in the site
   structure, that its absence is a deliberate consequence of
   unanswered commercial questions, and that design can proceed the
   moment those questions are answered.

   Inherits the CE header, footer, grid, type scale and tokens. The
   STATUS system uses a neutral/amber accent, deliberately distinct
   from CE brand blue so it can never be mistaken for brand chrome.
   UK English. No dashes in copy.
================================================================ */
const { MAX, NS, SERIF, SiteHeader, SiteFooter } = window;

/* ---------- icons ---------- */
const MI = {
  "alert-octagon": <><path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z" /><path d="M12 8v4M12 16h.01" /></>,
  lock: <><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  circle: <circle cx="12" cy="12" r="9" />,
  "dot-circle": <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" /></>,
  "message": <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
  check: <path d="M20 6 9 17l-5-5" />,
  calendar: <><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></>,
};
function MIcon({ name, size = 18, stroke = 2, style }) {
  return <svg style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{MI[name]}</svg>;
}

/* ================================================================
   Questions — 13 across 5 themed groups. Status defaults to "Open".
================================================================ */
const GROUPS = [
  {
    n: 1, title: "Commercial model", determines: "Determines where the page sits and what it sells.",
    questions: [
      { q: "Is modelling part of the platform subscription, a paid add-on, or a consultancy engagement?", d: "Page location in the IA, the primary CTA, and whether this is ARR or project revenue", owner: "Product / Commercial" },
      { q: "If it is an add-on, does it attach to selected coverage, full coverage, or both?", d: "Whether the page can reference the new product structure, and how it appears on the Subscription Products page", owner: "Product" },
      { q: "Is there a price or a price signal, or is this quote only?", d: "Whether the page can carry any commercial detail or must route entirely to a conversation", owner: "Commercial" },
    ],
  },
  {
    n: 2, title: "Audience", determines: "Determines the language and the entry points.",
    questions: [
      { q: "Who is the primary reader, the quantitative user or the budget holder?", d: "Technical depth of the copy, and whether the page leads with method or with outcome", owner: "Marketing / Product" },
      { q: "Which existing role and sector pages should route into this page?", d: "Internal linking, and whether the page has any inbound journey at all", owner: "Marketing" },
    ],
  },
  {
    n: 3, title: "Conversion", determines: "Determines what the page is trying to make the user do.",
    questions: [
      { q: "What is the single action this page should produce: start a trial, book a demo, or make an enquiry?", d: "The entire page structure. A page with no agreed action cannot be designed", owner: "Product / Marketing" },
      { q: "Is modelling visible or usable inside the limited trial?", d: "If not, the page cannot route to trial and must route to sales, placing it outside the self-serve funnel", owner: "Product" },
      { q: "Who receives and owns an enquiry from this page?", d: "Form routing, follow-up expectations, and reporting", owner: "Sales" },
    ],
  },
  {
    n: 4, title: "Proof", determines: "Determines whether the page can be credible.",
    questions: [
      { q: "What can be named specifically: which models, which methodology, which coverage?", d: "Whether the page carries substance or generic claims", owner: "Modelling team" },
      { q: "What evidence exists: back-testing, track record, client outcomes, published work?", d: "Whether there is a proof section, and what a finance buyer is given to believe", owner: "Modelling team" },
      { q: "Can we show the output, as a chart, an interface view or a sample deliverable?", d: "Whether this is a visual page or a text page. A modelling page with nothing to show is a hard page to sell from", owner: "Modelling team / Product" },
    ],
  },
  {
    n: 5, title: "Structure and search", determines: "Determines the route in.",
    questions: [
      { q: "Does this page replace, absorb or duplicate existing content on Data and Forecasts, Technology, or Consultancy?", d: "Cannibalisation risk, and whether existing pages need cutting back", owner: "Marketing" },
      { q: "Is there real search demand, and for which terms?", d: "Whether the page earns organic entry or exists only as an internal destination", owner: "SEO" },
      { q: "Does the page sit under Solutions, What We Do, or Consultancy?", d: "Navigation placement and URL, which should be decided once and not moved", owner: "Marketing / SEO" },
    ],
  },
];
const TOTAL_Q = GROUPS.reduce((a, g) => a + g.questions.length, 0);

const WHY_HELD = [
  { n: "01", lead: "The commercial model determines the page.", body: "Whether modelling is included, an add-on or a consultancy engagement changes the page's location, its call to action and which sales team receives the lead. These are structural, not cosmetic." },
  { n: "02", lead: "Assumed positioning is expensive.", body: "Copy written to fill a gap gets read as a recommendation, defended in review, and rebuilt when the real proposition lands." },
  { n: "03", lead: "The work itself is small.", body: "Once the questions below are answered, this page follows an established template and can be designed inside a single sprint." },
];

const WIREFRAME = ["Hero with primary CTA", "Proposition in three parts", "How it works", "Proof and evidence", "Integration with the platform", "Repeat CTA"];

/* ---------- status chip (three visually distinct states) ---------- */
function StatusChip({ state }) {
  const map = {
    Open: { cls: "is-open", icon: "dot-circle" },
    "In discussion": { cls: "is-disc", icon: "message" },
    Answered: { cls: "is-ans", icon: "check" },
  };
  const m = map[state] || map.Open;
  return <span className={"md-status " + m.cls}><MIcon name={m.icon} size={13} stroke={2.4} />{state}</span>;
}

/* ================================================================
   Question row + group
================================================================ */
function QuestionRow({ item }) {
  return (
    <div className="md-qrow">
      <div className="md-qmain">
        <p className="md-q">{item.q}</p>
        <p className="md-qdet"><span className="md-qdet-k">What it determines</span> {item.d}</p>
      </div>
      <div className="md-qmeta">
        <span className="md-owner">{item.owner}</span>
        <StatusChip state="Open" />
      </div>
    </div>
  );
}

function GroupCard({ g }) {
  return (
    <section className="md-group" aria-label={"Group " + g.n + ": " + g.title}>
      <div className="md-group-head">
        <span className="md-group-n">Group {g.n}</span>
        <div>
          <h3 className="md-group-title">{g.title}</h3>
          <p className="md-group-det">{g.determines}</p>
        </div>
        <span className="md-group-count">{g.questions.length} open</span>
      </div>
      <div className="md-qlist">
        {g.questions.map((item, i) => <QuestionRow key={i} item={item} />)}
      </div>
    </section>
  );
}

/* ================================================================
   Page
================================================================ */
function ModellingPage() {
  return (
    <div className="md-wrap">
      <div className="md-watermark" aria-hidden="true" />
      <SiteHeader />

      {/* Section 1 — fixed status bar */}
      <div className="md-statusbar" role="status">
        <div className="md-statusbar-in">
          <span className="md-blocked"><MIcon name="alert-octagon" size={16} stroke={2.2} />Blocked</span>
          <span className="md-statusbar-msg">Modelling page design cannot start until the proposition is defined</span>
          <span className="md-statusbar-fields">
            <span className="md-field"><span className="md-field-k">Questions outstanding</span><span className="md-field-v">{TOTAL_Q}</span></span>
            <span className="md-field"><span className="md-field-k">Answers needed by</span><span className="md-field-v md-editable">[DATE]</span></span>
          </span>
        </div>
      </div>

      <main className="md-main">
        {/* Section 2 — page header */}
        <header className="md-header">
          <div className="md-breadcrumb">
            <span className="md-crumb-route">Home / Solutions / Modelling</span>
            <span className="md-crumb-label">Route reserved, not published</span>
          </div>
          <h1 className="md-h1">Modelling</h1>
          <div className="md-stageline"><MIcon name="lock" size={15} stroke={2.2} />Design stage: not started. Blocked pending proposition definition.</div>
          <p className="md-standfirst">The modelling proposition is still being defined internally with the modelling team. Design has been deliberately held rather than filled with assumed positioning, because a page built on unconfirmed claims would need rebuilding once the proposition settles.</p>
        </header>

        {/* Section 3 — why this page is held */}
        <section className="md-why" aria-label="Why this page is held">
          <div className="md-why-eyebrow">Why this page is held</div>
          <div className="md-why-row">
            {WHY_HELD.map((w) => (
              <div key={w.n} className="md-why-item">
                <span className="md-why-n">{w.n}</span>
                <p className="md-why-lead">{w.lead}</p>
                <p className="md-why-body">{w.body}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Section 4 — the questions */}
        <section className="md-questions" aria-label="The questions">
          <div className="md-q-head">
            <h2 className="md-section-h">The questions</h2>
            <p className="md-section-sub">Thirteen decisions in five groups. Each group determines a structural property of the page. Statuses are updated between reviews.</p>
          </div>
          {GROUPS.map((g) => <GroupCard key={g.n} g={g} />)}
        </section>

        {/* Section 5 — indicative structure */}
        <section className="md-indicative" aria-label="Indicative structure once unblocked">
          <h2 className="md-section-h">Indicative structure once unblocked</h2>
          <p className="md-section-sub">The established Solutions template this page is expected to follow. Shown to demonstrate the work is scoped, not to be reviewed as a design.</p>
          <div className="md-wire">
            <div className="md-wire-overlay"><span>Indicative structure only. Not a design. Not approved.</span></div>
            {WIREFRAME.map((b, i) => (
              <div key={i} className={"md-wire-block" + (i === 0 ? " is-hero" : "")}>
                <span className="md-wire-tag">{b}</span>
                <div className="md-wire-skel">
                  <span className="md-wire-bar" style={{ width: i === 0 ? "52%" : "40%" }} />
                  <span className="md-wire-bar md-wire-bar-sm" style={{ width: i === 0 ? "38%" : "68%" }} />
                  {(i === 1 || i === 3) && <div className="md-wire-cols">{[0, 1, 2].map((c) => <span key={c} className="md-wire-col" />)}</div>}
                  {(i === 0 || i === 5) && <span className="md-wire-cta" />}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Section 6 — what unblocks this */}
        <section className="md-unblock" aria-label="What unblocks this">
          <p className="md-unblock-line">Answer the thirteen questions above and this page can be designed within one sprint.</p>
          <div className="md-unblock-fields">
            <span className="md-field md-field-lg"><span className="md-field-k">Proposition owner</span><span className="md-field-v md-editable">[NAME]</span></span>
            <span className="md-field md-field-lg"><span className="md-field-k">Review date</span><span className="md-field-v md-editable">[DATE]</span></span>
          </div>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}

/* ================================================================ CSS */
(function injectMDCSS() {
  if (typeof document === "undefined" || document.getElementById("md-css")) return;
  const wmSvg = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='360' height='96'><text x='0' y='52' font-family='Arial, sans-serif' font-size='22' font-weight='700' letter-spacing='3' fill='%23222222'>NOT FOR PUBLICATION</text></svg>");
  const css = `
  .md-wrap { position: relative; min-height: 100vh; background: var(--surface-page); }
  /* watermark ribbon, very low opacity, behind everything, non-interactive */
  .md-watermark { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 0; pointer-events: none; transform: rotate(-28deg); background-image: url("${wmSvg}"); background-repeat: repeat; opacity: 0.045; }
  .md-wrap > *:not(.md-watermark) { position: relative; z-index: 1; }

  /* status accent tokens (amber / neutral, distinct from CE brand) */
  .md-wrap { --amber: #9a6700; --amber-bg: #fbefd6; --amber-bd: #ebce93; --amber-solid: #b45309; --slate: #475569; --slate-bg: #eef1f5; --slate-bd: #cbd5e1; --green: #2f7d4f; --green-bg: #e7f4ec; --green-bd: #bfe3cc; }

  /* Section 1 — fixed status bar */
  .md-statusbar { position: sticky; top: 0; z-index: 30; background: #fbf7ee; border-top: 3px solid var(--amber-solid); border-bottom: 1px solid var(--amber-bd); }
  .md-statusbar-in { max-width: ${MAX}px; margin: 0 auto; padding: 11px 32px; display: flex; align-items: center; gap: 20px; }
  .md-blocked { display: inline-flex; align-items: center; gap: 7px; background: var(--amber-solid); color: #fff; font-family: ${NS}; font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 5px; flex: 0 0 auto; }
  .md-statusbar-msg { font-family: ${NS}; font-size: 14.5px; font-weight: 600; color: #4a3f22; flex: 1; }
  .md-statusbar-fields { display: flex; gap: 22px; flex: 0 0 auto; }
  .md-field { display: flex; flex-direction: column; line-height: 1.2; }
  .md-field-k { font-family: ${NS}; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
  .md-field-v { font-family: ${NS}; font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 2px; }
  .md-editable { color: var(--amber-solid); background: #fff; border: 1px dashed var(--amber-bd); border-radius: 4px; padding: 0 7px; }

  .md-main { max-width: ${MAX}px; margin: 0 auto; padding: 0 32px 20px; }

  /* Section 2 — header */
  .md-header { padding: 44px 0 36px; border-bottom: 1px solid var(--border-subtle); }
  .md-breadcrumb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
  .md-crumb-route { font-family: ${NS}; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 5px 12px; border: 1px dashed var(--border-strong, #c7ccd6); border-radius: 999px; opacity: 0.7; }
  .md-crumb-label { font-family: ${NS}; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
  .md-h1 { font-family: ${SERIF}; font-weight: 600; font-size: 52px; line-height: 1.02; letter-spacing: -0.025em; color: var(--text-primary); margin: 0; }
  .md-stageline { display: inline-flex; align-items: center; gap: 8px; font-family: ${NS}; font-size: 14px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: 6px; padding: 7px 13px; margin: 18px 0 0; }
  .md-standfirst { font-family: ${SERIF}; font-size: 20px; line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0; max-width: 820px; }

  /* Section 3 — why held */
  .md-why { padding: 40px 0; border-bottom: 1px solid var(--border-subtle); }
  .md-why-eyebrow { font-family: ${NS}; font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 22px; }
  .md-why-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .md-why-item { border-top: 2px solid var(--text-primary); padding-top: 16px; }
  .md-why-n { font-family: ${SERIF}; font-weight: 600; font-size: 22px; color: var(--brand); }
  .md-why-lead { font-family: ${NS}; font-weight: 700; font-size: 17px; line-height: 1.32; color: var(--text-primary); margin: 8px 0 8px; }
  .md-why-body { font-family: ${NS}; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

  /* section heads */
  .md-section-h { font-family: ${SERIF}; font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: -0.018em; color: var(--text-primary); margin: 0; }
  .md-section-sub { font-family: ${NS}; font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); margin: 10px 0 0; max-width: 760px; }

  /* Section 4 — questions */
  .md-questions { padding: 44px 0; }
  .md-q-head { margin-bottom: 26px; }
  .md-group { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden; }
  .md-group-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: var(--surface-sunken, #f2f4f8); border-bottom: 1px solid var(--border-subtle); }
  .md-group-n { font-family: ${NS}; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 5px 10px; border-radius: 5px; flex: 0 0 auto; }
  .md-group-title { font-family: ${SERIF}; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; }
  .md-group-det { font-family: ${NS}; font-size: 13.5px; color: var(--text-secondary); margin: 3px 0 0; }
  .md-group-count { margin-left: auto; font-family: ${NS}; font-weight: 700; font-size: 12px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-bd); padding: 4px 11px; border-radius: 999px; flex: 0 0 auto; }
  .md-qlist { display: flex; flex-direction: column; }
  .md-qrow { display: flex; align-items: flex-start; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
  .md-qrow:last-child { border-bottom: 0; }
  .md-qmain { flex: 1; }
  .md-q { font-family: ${NS}; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--text-primary); margin: 0; }
  .md-qdet { font-family: ${NS}; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); margin: 8px 0 0; }
  .md-qdet-k { font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; margin-right: 4px; }
  .md-qmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; width: 200px; }
  .md-owner { font-family: ${NS}; font-weight: 600; font-size: 12.5px; color: var(--text-secondary); background: var(--surface-sunken, #f2f4f8); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 11px; text-align: center; }
  .md-status { display: inline-flex; align-items: center; gap: 6px; font-family: ${NS}; font-weight: 700; font-size: 12px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
  .md-status.is-open { color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-bd); }
  .md-status.is-disc { color: var(--slate); background: var(--slate-bg); border: 1px solid var(--slate-bd); }
  .md-status.is-ans { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-bd); }

  /* Section 5 — indicative wireframe */
  .md-indicative { padding: 24px 0 44px; }
  .md-wire { position: relative; margin-top: 24px; padding: 26px; background: #eef0f2; border: 1px solid var(--border-default); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; filter: grayscale(1); }
  .md-wire-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .md-wire-overlay span { font-family: ${NS}; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #5b5b5b; background: rgba(255,255,255,0.86); border: 1px dashed #9a9a9a; border-radius: 6px; padding: 10px 18px; }
  .md-wire-block { position: relative; background: #f7f8f9; border: 1px dashed #b9bdc4; border-radius: 8px; padding: 16px 18px; }
  .md-wire-block.is-hero { padding: 26px 18px; background: #f1f2f4; }
  .md-wire-tag { position: absolute; top: 10px; right: 12px; font-family: ${NS}; font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8f97; }
  .md-wire-skel { display: flex; flex-direction: column; gap: 9px; }
  .md-wire-bar { height: 13px; border-radius: 4px; background: #cfd3d9; }
  .md-wire-bar-sm { height: 9px; background: #dde0e5; }
  .md-wire-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
  .md-wire-col { height: 46px; border-radius: 6px; background: #dde0e5; }
  .md-wire-cta { height: 30px; width: 130px; border-radius: 6px; background: #b7bcc4; margin-top: 4px; }

  /* Section 6 — unblock */
  .md-unblock { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 30px; background: #fbf7ee; border: 1px solid var(--amber-bd); border-left: 4px solid var(--amber-solid); border-radius: var(--radius-lg); margin-bottom: 40px; }
  .md-unblock-line { font-family: ${SERIF}; font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; max-width: 620px; }
  .md-unblock-fields { display: flex; gap: 26px; flex-wrap: wrap; }
  .md-field-lg .md-field-v { font-size: 16px; padding: 3px 10px; }

  @media (max-width: 900px) {
    .md-statusbar-in { flex-wrap: wrap; gap: 12px; padding: 11px 18px; }
    .md-statusbar-msg { flex: 1 1 100%; order: 3; }
    .md-main { padding: 0 18px 20px; }
    .md-h1 { font-size: 38px; }
    .md-why-row { grid-template-columns: 1fr; gap: 22px; }
    .md-qrow { flex-direction: column; gap: 14px; }
    .md-qmeta { flex-direction: row; align-items: center; width: auto; }
    .md-standfirst { font-size: 18px; }
    .md-unblock { flex-direction: column; align-items: flex-start; }
  }
  `;
  const el = document.createElement("style"); el.id = "md-css"; el.textContent = css;
  document.head.appendChild(el);
})();

ReactDOM.createRoot(document.getElementById("root")).render(<ModellingPage />);