/* =========================================================
   COGNERYS — Inner pages (v2, clean, with imagery)
   ========================================================= */
function PageHeader({ eyebrow, title, lede }) {
  return (
    <section className="hero page-hero">
      <div className="wrap">
        <span className="eyebrow">{eyebrow}</span>
        <div>
          <h1>{title}</h1>
          {lede && <p className="lede">{lede}</p>}
        </div>
      </div>
    </section>
  );
}

function AboutIntroDiagram() {
  return (
    <div className="about-intro-diagram" aria-hidden="true">
      <svg viewBox="0 0 760 360" preserveAspectRatio="xMidYMid slice">
        <g className="about-grid">
          <path d="M0 58 H760" />
          <path d="M0 98 H760" />
          <path d="M0 138 H760" />
          <path d="M0 178 H760" />
          <path d="M0 218 H760" />
          <path d="M0 258 H760" />
          <path d="M0 298 H760" />
          <path d="M96 0 V360" />
          <path d="M196 0 V360" />
          <path d="M296 0 V360" />
          <path d="M396 0 V360" />
          <path d="M496 0 V360" />
          <path d="M596 0 V360" />
          <path d="M696 0 V360" />
        </g>
        <rect className="about-frame" x="250" y="38" width="184" height="198" />
        <g className="about-grid about-grid-faint">
          <path d="M0 78 H760" />
          <path d="M0 118 H760" />
          <path d="M0 158 H760" />
          <path d="M0 198 H760" />
          <path d="M0 238 H760" />
          <path d="M0 278 H760" />
        </g>
        <g className="about-flow">
          <path d="M0 248 C122 248 186 248 250 248 C318 248 336 186 396 186 C454 186 478 286 560 286 C640 286 704 278 760 270" />
          <path d="M0 228 C122 228 186 228 250 228 C318 228 336 168 396 168 C454 168 478 266 560 266 C640 266 704 258 760 250" />
          <path d="M0 208 C122 208 186 208 250 208 C318 208 336 148 396 148 C454 148 478 246 560 246 C640 246 704 238 760 230" />
          <path d="M0 188 C122 188 186 188 250 188 C318 188 336 128 396 128 C454 128 478 226 560 226 C640 226 704 218 760 210" />
          <path d="M0 168 C122 168 186 168 250 168 C318 168 336 108 396 108 C454 108 478 206 560 206 C640 206 704 198 760 190" />
          <path d="M0 148 C122 148 186 148 250 148 C318 148 336 88 396 88 C454 88 478 186 560 186 C640 186 704 178 760 170" />
        </g>
      </svg>
    </div>
  );
}

function AboutValues() {
  const values = [
    {
      title: "Independent",
      text: "Not tied to platforms or vendors. We ask the questions others aren't incentivised to ask.",
      icon: (
        <svg viewBox="0 0 48 48" aria-hidden="true">
          <circle cx="24" cy="14" r="8"></circle>
          <circle cx="16" cy="28" r="8"></circle>
          <circle cx="32" cy="28" r="8"></circle>
        </svg>
      ),
    },
    {
      title: "Rigorous",
      text: "Research-led, evidence-based, and grounded in how systems actually operate.",
      icon: (
        <svg viewBox="0 0 48 48" aria-hidden="true">
          <path d="M8 8h10M8 8v10M40 8H30M40 8v10M8 40h10M8 40V30M40 40H30M40 40V30"></path>
          <circle cx="24" cy="24" r="4"></circle>
        </svg>
      ),
    },
    {
      title: "Practical",
      text: "We work alongside your team to design solutions that are feasible and built to last.",
      icon: (
        <svg viewBox="0 0 48 48" aria-hidden="true">
          <path d="M24 10 36 18 24 26 12 18Z"></path>
          <path d="M24 20 36 28 24 36 12 28Z"></path>
          <path d="M24 30 36 38 24 46 12 38Z"></path>
        </svg>
      ),
    },
  ];

  return (
    <section className="about-values section">
      <div className="wrap">
        <div className="about-values-grid">
          {values.map((value) => (
            <div key={value.title} className="about-value">
              <div className="about-value-icon">{value.icon}</div>
              <div>
                <h3>{value.title}</h3>
                <p>{value.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
/* ------------ Writing ------------ */
function WritingHeroDiagram() {
  return (
    <div className="writing-hero-diagram" aria-hidden="true">
      <svg viewBox="0 0 760 360" preserveAspectRatio="xMidYMid slice">
        <g className="writing-grid">
          <path d="M120 0 V360" />
          <path d="M220 0 V360" />
          <path d="M320 0 V360" />
          <path d="M420 0 V360" />
          <path d="M520 0 V360" />
          <path d="M620 0 V360" />
          <path d="M720 0 V360" />
        </g>
        <g className="writing-flow writing-flow-dashed">
          <path d="M0 106 C98 104 160 112 220 112 C282 112 304 78 368 78 C434 78 500 108 580 108 C648 108 706 92 760 92" />
          <path d="M0 210 C110 210 166 188 226 188 C292 188 314 236 384 236 C454 236 514 176 596 176 C662 176 714 206 760 206" />
          <path d="M0 282 C102 282 170 302 228 302 C292 302 324 250 392 250 C460 250 520 286 604 286 C672 286 718 266 760 254" />
        </g>
        <g className="writing-flow">
          <path d="M0 142 C108 142 172 176 228 176 C288 176 314 108 384 108 C456 108 520 150 604 150 C672 150 718 140 760 132" />
          <path d="M0 184 C112 184 170 132 234 132 C296 132 318 228 390 228 C460 228 526 124 604 124 C672 124 720 150 760 164" />
          <path d="M0 242 C96 242 158 250 218 250 C280 250 320 188 388 188 C458 188 512 228 590 228 C660 228 712 210 760 194" />
          <path d="M0 316 C120 316 188 256 248 256 C306 256 334 332 398 332 C470 332 538 220 622 220 C680 220 720 244 760 286" />
        </g>
        <g className="writing-points">
          <circle cx="120" cy="210" r="2.4" />
          <circle cx="120" cy="282" r="2.4" />
          <circle cx="220" cy="112" r="2.4" />
          <circle cx="220" cy="176" r="2.6" />
          <circle cx="320" cy="78" r="2.8" />
          <circle cx="320" cy="132" r="2.5" />
          <circle cx="420" cy="188" r="2.5" />
          <circle cx="520" cy="150" r="2.5" />
          <circle cx="520" cy="286" r="2.3" />
          <circle cx="620" cy="108" r="2.4" />
          <circle cx="620" cy="220" r="2.6" />
          <circle cx="720" cy="92" r="2.4" />
        </g>
      </svg>
    </div>
  );
}

function WritingFeatureFigure() {
  return (
    <div className="writing-feature-figure" aria-hidden="true">
      <svg viewBox="0 0 760 300" preserveAspectRatio="xMidYMid meet">
        <g className="writing-feature-grid">
          <path d="M0 50 H760" />
          <path d="M0 100 H760" />
          <path d="M0 150 H760" />
          <path d="M0 200 H760" />
          <path d="M0 250 H760" />
          <path d="M96 0 V300" />
          <path d="M192 0 V300" />
          <path d="M288 0 V300" />
          <path d="M384 0 V300" />
          <path d="M480 0 V300" />
          <path d="M576 0 V300" />
          <path d="M672 0 V300" />
        </g>
        <g className="writing-feature-lines">
          <path d="M0 136 H760" />
          <path d="M384 0 V300" />
          <circle cx="476" cy="140" r="72" />
          <path d="M336 140 C404 140 432 180 484 180 C542 180 582 132 640 132 C692 132 726 146 760 158" />
        </g>
        <g className="writing-feature-blocks">
          <rect x="340" y="110" width="42" height="62" />
        </g>
        <g className="writing-feature-points">
          <circle cx="42" cy="88" r="2.4" />
          <circle cx="96" cy="150" r="2.4" />
          <circle cx="192" cy="150" r="2.4" />
          <circle cx="288" cy="150" r="2.4" />
          <circle cx="384" cy="150" r="2.4" />
          <circle cx="476" cy="140" r="2.4" />
          <circle cx="596" cy="150" r="2.4" />
          <circle cx="688" cy="182" r="2.4" />
          <circle cx="720" cy="126" r="2.4" />
        </g>
      </svg>
    </div>
  );
}

function PageWriting({ openEssay }) {
  const [featured, ...rest] = WRITING;

  return (
    <>
      <section className="writing-hero section">
        <div className="wrap">
          <div className="writing-hero-grid">
            <div className="writing-hero-copy">
              <span className="eyebrow">Writing</span>
              <h1>Writing<span className="writing-accent">.</span></h1>
              <p>Essays and field notes on the architecture of energy trade and risk systems. Written when there's something worth writing — not to a calendar.</p>
            </div>
            <WritingHeroDiagram />
          </div>
        </div>
      </section>

      <section className="writing-feature section">
        <div className="wrap">
          <div className="writing-feature-grid-layout">
            <div className="writing-feature-copy">
              <span className="eyebrow">Featured</span>
              <h2>{featured.title}</h2>
              <p>{featured.sub}</p>
              <a className="btn-link" href="#" onClick={(e)=>{e.preventDefault(); openEssay(featured.id);}}>Read essay →</a>
            </div>
            <WritingFeatureFigure />
          </div>
        </div>
      </section>

      <section className="writing-list section">
        <div className="wrap">
          <div className="writing-rows">
            {rest.map(w => (
              <div key={w.id} className="writing-row" onClick={() => openEssay(w.id)}>
                <span className="date">{w.date}</span>
                <span className="title">
                  {w.title}
                  <span className="sub">{w.sub}</span>
                </span>
                <span className="tag">{w.tag} · {w.read}</span>
                <span className="arrow">→</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="writing-subscribe section">
        <div className="wrap">
          <div className="writing-subscribe-grid">
            <div>
              <h2>Notes worth reading. <em>Occasionally.</em></h2>
            </div>
            <p>Essays, notes and field observations. No noise.</p>
            <form className="writing-subscribe-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="Enter your email" aria-label="Email address" />
              <button className="btn btn-primary" type="submit">Subscribe</button>
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

function PageEssay({ id, back }) {
  const essay = WRITING.find(w => w.id === id) || WRITING[0];
  return (
    <>
      <div className="wrap" style={{paddingTop: 32}}>
        <a className="btn-link" href="#" onClick={(e)=>{e.preventDefault(); back();}}>← All writing</a>
      </div>
      <article className="reading">
        <div className="essay-meta">
          <span>{essay.tag}</span>
          <span>{essay.date}</span>
          <span>{essay.read}</span>
        </div>
        <h1>{essay.title}</h1>
        <p>
          Every ETRM programme I've ever been asked to review starts from the same
          premise — that somewhere, if we just look hard enough, there exists a
          canonical trade object we can rally the rest of the estate around. Twenty
          years of this industry suggests otherwise.
        </p>
        <p>
          The trade is not a noun. It is a sequence of assertions, made by
          different authorities, at different times, against different clocks.
          When we flatten these into a single object we are not modelling
          reality; we are negotiating a compromise.
        </p>
        <blockquote>
          The architecture we want is not the architecture of a <em>thing</em> —
          it is the architecture of a <em>conversation</em> between the desks
          that have to agree on what the thing was.
        </blockquote>
        <h2>I. Three assertions, three clocks</h2>
        <p>
          Consider the simplest possible physical gas trade. Even here, there is
          no single moment at which the trade "is what it is." There are at
          least three: intent, operational nomination, and financial settlement —
          each captured by a different authority on a different clock.
        </p>
        <h2>II. The lifecycle is not a state machine</h2>
        <p>
          The instinct is to reach for a state machine. I have drawn it on many
          whiteboards, including several I wish I could take back. The states
          are not states of a single object — they are outcomes of distinct
          subsystems. What the domain wants, instead, is an event log.
        </p>
      </article>
    </>
  );
}

/* ------------ Research ------------ */
function ResearchHeroDiagram() {
  return (
    <div className="research-hero-diagram" aria-hidden="true">
      <svg viewBox="0 0 760 360" preserveAspectRatio="xMidYMid slice">
        <g className="research-grid">
          <path d="M100 0 V360" />
          <path d="M200 0 V360" />
          <path d="M300 0 V360" />
          <path d="M400 0 V360" />
          <path d="M500 0 V360" />
          <path d="M600 0 V360" />
          <path d="M700 0 V360" />
          <path d="M0 80 H760" />
          <path d="M0 120 H760" />
          <path d="M0 160 H760" />
          <path d="M0 200 H760" />
          <path d="M0 240 H760" />
          <path d="M0 280 H760" />
        </g>
        <g className="research-hero-lines">
          <circle cx="420" cy="144" r="102" />
          <path d="M0 120 H760" />
          <path d="M0 200 H760" />
        </g>
        <g className="research-points">
          <circle cx="100" cy="240" r="2.5" />
          <circle cx="200" cy="120" r="2.5" />
          <circle cx="200" cy="160" r="2.5" />
          <circle cx="300" cy="240" r="2.6" />
          <circle cx="420" cy="200" r="2.5" />
          <circle cx="520" cy="120" r="2.5" />
          <circle cx="520" cy="160" r="2.5" />
          <circle cx="600" cy="240" r="2.5" />
          <circle cx="700" cy="200" r="2.6" />
        </g>
      </svg>
    </div>
  );
}

function ResearchFigureOne() {
  return (
    <div className="research-figure research-figure-one" aria-hidden="true">
      <span className="research-figure-tag">Fig. 01</span>
      <svg viewBox="0 0 620 250" preserveAspectRatio="none">
        <g className="research-figure-grid">
          <path d="M0 42 H620" />
          <path d="M0 84 H620" />
          <path d="M0 126 H620" />
          <path d="M0 168 H620" />
          <path d="M0 210 H620" />
          <path d="M42 0 V250" />
          <path d="M114 0 V250" />
          <path d="M186 0 V250" />
          <path d="M258 0 V250" />
          <path d="M330 0 V250" />
          <path d="M402 0 V250" />
          <path d="M474 0 V250" />
          <path d="M546 0 V250" />
        </g>
        <g className="research-figure-lines">
          <path d="M0 112 H620" />
          <path d="M0 146 H620" />
          <circle cx="356" cy="124" r="84" />
          <path d="M300 170 C330 156 356 150 384 148 C430 146 482 150 620 154" />
        </g>
        <g className="research-points">
          <circle cx="42" cy="112" r="2.4" />
          <circle cx="84" cy="146" r="2.4" />
          <circle cx="126" cy="146" r="2.4" />
          <circle cx="210" cy="146" r="2.4" />
          <circle cx="266" cy="146" r="2.4" />
          <circle cx="332" cy="152" r="2.2" />
          <circle cx="332" cy="162" r="2.2" />
          <circle cx="494" cy="146" r="2.4" />
          <circle cx="494" cy="112" r="2.4" />
          <circle cx="578" cy="146" r="2.4" />
        </g>
      </svg>
      <span className="research-figure-label">Research figure</span>
    </div>
  );
}

function ResearchFigureTwo() {
  return (
    <div className="research-figure research-figure-two" aria-hidden="true">
      <span className="research-figure-tag">Fig. 02</span>
      <svg viewBox="0 0 620 250" preserveAspectRatio="none">
        <g className="research-figure-grid">
          <path d="M40 0 V250" />
          <path d="M124 0 V250" />
          <path d="M208 0 V250" />
          <path d="M292 0 V250" />
          <path d="M376 0 V250" />
          <path d="M460 0 V250" />
          <path d="M544 0 V250" />
          <path d="M0 70 H620" />
          <path d="M0 126 H620" />
          <path d="M0 182 H620" />
        </g>
        <g className="research-figure-flow">
          <path className="secondary" d="M0 30 C66 30 116 74 170 76 C240 78 288 90 346 90 C408 90 458 66 620 76" />
          <path className="secondary" d="M0 40 C68 40 118 84 172 86 C242 88 290 100 348 100 C410 100 460 76 620 88" />
          <path d="M0 52 C70 52 120 98 176 98 C244 98 292 86 352 86 C412 86 462 96 620 98" />
          <path className="secondary" d="M0 64 C72 64 122 112 178 112 C246 112 294 98 354 98 C416 98 464 110 620 112" />
          <path d="M0 76 C74 76 124 126 180 126 C248 126 296 112 356 112 C418 112 466 122 620 124" />
          <path className="secondary" d="M0 88 C76 88 126 138 182 138 C250 138 298 126 358 126 C420 126 468 134 620 138" />
          <path d="M0 100 C78 100 128 148 184 148 C252 148 300 138 360 138 C422 138 470 146 620 150" />
          <path className="secondary" d="M0 112 C80 112 130 156 186 156 C254 156 302 148 362 148 C424 148 472 154 620 160" />
          <path d="M0 126 C82 126 132 164 188 164 C258 164 304 156 366 156 C426 156 474 160 620 168" />
          <path className="secondary" d="M0 140 C84 140 134 170 190 170 C262 170 308 162 370 162 C430 162 476 166 620 176" />
          <path className="secondary" d="M0 170 C86 170 136 166 192 166 C266 166 312 158 374 158 C434 158 480 164 620 166" />
        </g>
        <g className="research-points">
          <circle cx="40" cy="30" r="2.2" />
          <circle cx="40" cy="64" r="2.2" />
          <circle cx="40" cy="106" r="2.2" />
          <circle cx="124" cy="64" r="2.2" />
          <circle cx="124" cy="106" r="2.2" />
          <circle cx="124" cy="168" r="2.2" />
          <circle cx="208" cy="104" r="2.2" />
          <circle cx="208" cy="140" r="2.2" />
          <circle cx="292" cy="118" r="2.2" />
          <circle cx="376" cy="140" r="2.2" />
          <circle cx="460" cy="64" r="2.2" />
          <circle cx="460" cy="104" r="2.2" />
          <circle cx="460" cy="140" r="2.2" />
        </g>
      </svg>
      <span className="research-figure-label">Research figure</span>
    </div>
  );
}

function PageResearch() {
  const pillarIcons = {
    "01": (
      <svg viewBox="0 0 32 32" aria-hidden="true">
        <path d="M4 10h12v12H4zM16 4h12v12H16z"></path>
      </svg>
    ),
    "02": (
      <svg viewBox="0 0 32 32" aria-hidden="true">
        <path d="M7 7h4v4H7zM14 7h4v4h-4zM21 7h4v4h-4zM7 14h4v4H7zM14 14h4v4h-4zM21 14h4v4h-4zM7 21h4v4H7zM14 21h4v4h-4zM21 21h4v4h-4z"></path>
      </svg>
    ),
    "03": (
      <svg viewBox="0 0 32 32" aria-hidden="true">
        <path d="M16 6 24 10 16 14 8 10Z"></path>
        <path d="M16 12 24 16 16 20 8 16Z"></path>
        <path d="M16 18 24 22 16 26 8 22Z"></path>
      </svg>
    ),
    "04": (
      <svg viewBox="0 0 32 32" aria-hidden="true">
        <circle cx="16" cy="11" r="6"></circle>
        <circle cx="11" cy="19" r="6"></circle>
        <circle cx="21" cy="19" r="6"></circle>
      </svg>
    ),
  };

  return (
    <>
      <section className="research-hero section">
        <div className="wrap">
          <div className="research-hero-grid-layout">
            <div className="research-hero-copy">
              <span className="eyebrow">Research</span>
              <h1>Research programme.</h1>
              <p>A working programme on the architecture of energy commodity systems, with focused streams on AI and data operations. Doctoral, industrial, and commissioned work sit alongside each other here.</p>
            </div>
            <ResearchHeroDiagram />
          </div>
        </div>
      </section>

      <section className="research-figures section">
        <div className="wrap">
          <div className="research-figures-grid">
            <ResearchFigureOne />
            <ResearchFigureTwo />
          </div>
        </div>
      </section>

      <section className="research-streams section">
        <div className="wrap">
          <div className="research-streams-head">
            <span className="eyebrow">Focus areas</span>
            <div className="research-streams-copy">
              <h2>Four streams.</h2>
              <p>Each pillar is a working research programme, not a marketing category. Outputs include working papers, essays, and embedded advisory work.</p>
            </div>
          </div>
          <div className="research-streams-grid">
            {PILLARS.map(p => (
              <article key={p.num} className="research-stream-card">
                <div className="research-stream-meta">{p.num} · {p.status}</div>
                <div className="research-stream-icon">{pillarIcons[p.num]}</div>
                <h3>{p.name}</h3>
                <p>{p.desc}</p>
                <a className="btn-link" href="#">Learn more →</a>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="research-papers section">
        <div className="wrap">
          <div className="research-papers-grid">
            <div className="research-papers-copy">
              <span className="eyebrow">Papers</span>
              <h2>Published, in review, and <em>in progress</em>.</h2>
              <p>All outputs listed here — peer-reviewed, submitted, and working papers — with current status.</p>
            </div>
            <div className="research-papers-list">
              {RESEARCH.map(r => (
                <div key={r.id} className="research-paper-row">
                  <span className="date">{r.date}</span>
                  <span className="title">
                    {r.title}
                    <span className="sub">{r.venue}</span>
                  </span>
                  <span className="tag">{r.tag}</span>
                  <span className="arrow">→</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="research-cta section">
        <div className="wrap">
          <div className="research-cta-grid">
            <h2>Curious about a topic? <em>Let's explore it.</em></h2>
            <p>New ideas, open questions, and collaboration opportunities are always welcome.</p>
            <div>
              <a className="btn btn-primary" href={`mailto:${BRAND.person.email}`}>Start a conversation →</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ------------ Services ------------ */
function ServicesHeroDiagram() {
  return (
    <div className="services-hero-diagram" aria-hidden="true">
      <svg viewBox="0 0 760 360" preserveAspectRatio="xMidYMid slice">
        <g className="svc-grid">
          <path d="M120 0 V360" />
          <path d="M240 0 V360" />
          <path d="M360 0 V360" />
          <path d="M480 0 V360" />
          <path d="M600 0 V360" />
          <path d="M720 0 V360" />
        </g>
        <g className="svc-flow svc-flow-dashed">
          <path d="M0 128 C104 128 170 156 242 156 C304 156 318 92 384 92 C464 92 510 118 592 118 C658 118 708 106 760 96" />
          <path d="M0 202 C110 202 176 202 240 202 C298 202 330 150 398 150 C468 150 530 164 620 164 C684 164 726 160 760 154" />
        </g>
        <g className="svc-flow">
          <path d="M0 286 C108 286 176 286 242 286 C304 286 322 198 384 198 C456 198 488 294 564 294 C642 294 702 244 760 238" />
          <path d="M0 250 C100 250 164 250 226 250 C286 250 306 164 364 164 C430 164 468 300 552 300 C628 300 686 264 760 260" />
          <path d="M0 322 C114 322 176 322 236 322 C292 322 310 248 366 248 C432 248 472 326 548 326 C630 326 694 292 760 286" />
          <path d="M162 182 C212 182 262 150 314 150 C360 150 392 184 446 184 C514 184 578 136 644 136 C694 136 726 142 760 150" />
        </g>
        <g className="svc-points">
          <circle cx="120" cy="202" r="2.4" />
          <circle cx="240" cy="156" r="2.5" />
          <circle cx="240" cy="250" r="2.5" />
          <circle cx="360" cy="92" r="2.8" />
          <circle cx="360" cy="164" r="2.5" />
          <circle cx="480" cy="118" r="2.3" />
          <circle cx="480" cy="300" r="2.5" />
          <circle cx="600" cy="164" r="2.5" />
          <circle cx="600" cy="294" r="2.4" />
          <circle cx="720" cy="96" r="2.5" />
          <circle cx="720" cy="238" r="2.3" />
        </g>
      </svg>
    </div>
  );
}

function ServiceFigure({ serviceId }) {
  if (serviceId === "s1") {
    return (
      <div className="service-figure service-figure-review" aria-hidden="true">
        <svg viewBox="0 0 620 220" preserveAspectRatio="xMidYMid meet">
          <g className="service-fig-grid">
            <path d="M0 48 H620" />
            <path d="M0 96 H620" />
            <path d="M0 144 H620" />
            <path d="M0 192 H620" />
            <path d="M88 0 V220" />
            <path d="M176 0 V220" />
            <path d="M264 0 V220" />
            <path d="M352 0 V220" />
            <path d="M440 0 V220" />
            <path d="M528 0 V220" />
          </g>
          <g className="service-fig-lines">
            <path d="M0 116 H620" />
            <path d="M310 0 V220" />
            <circle cx="310" cy="116" r="64" />
          </g>
          <g className="service-fig-points">
            <circle cx="116" cy="84" r="2.4" />
            <circle cx="264" cy="56" r="2.4" />
            <circle cx="310" cy="88" r="2.4" />
            <circle cx="408" cy="102" r="2.4" />
            <circle cx="500" cy="152" r="2.4" />
            <circle cx="560" cy="110" r="2.4" />
          </g>
        </svg>
      </div>
    );
  }

  if (serviceId === "s2") {
    return (
      <div className="service-figure service-figure-ai" aria-hidden="true">
        <svg viewBox="0 0 620 220" preserveAspectRatio="xMidYMid meet">
          <g className="service-fig-lines">
            <path d="M310 18 V202" />
            <path d="M220 52 310 18 400 52 310 86Z" />
            <path d="M220 84 310 50 400 84 310 118Z" />
            <path d="M220 116 310 82 400 116 310 150Z" />
            <path d="M220 148 310 114 400 148 310 182Z" />
          </g>
          <g className="service-fig-points">
            <circle cx="310" cy="18" r="2.4" />
            <circle cx="310" cy="50" r="2.3" />
            <circle cx="310" cy="82" r="2.3" />
            <circle cx="310" cy="114" r="2.3" />
            <circle cx="310" cy="146" r="2.3" />
            <circle cx="310" cy="182" r="2.4" />
          </g>
        </svg>
      </div>
    );
  }

  if (serviceId === "s3") {
    return (
      <div className="service-figure service-figure-embed" aria-hidden="true">
        <svg viewBox="0 0 620 220" preserveAspectRatio="xMidYMid meet">
          <g className="service-fig-grid">
            <path d="M0 44 H620" />
            <path d="M0 88 H620" />
            <path d="M0 132 H620" />
            <path d="M0 176 H620" />
            <path d="M80 0 V220" />
            <path d="M160 0 V220" />
            <path d="M240 0 V220" />
            <path d="M320 0 V220" />
            <path d="M400 0 V220" />
            <path d="M480 0 V220" />
            <path d="M560 0 V220" />
          </g>
          <g className="service-fig-blocks">
            <rect x="206" y="80" width="56" height="44" />
            <rect x="262" y="66" width="56" height="58" />
            <rect x="318" y="48" width="56" height="76" />
            <rect x="374" y="66" width="56" height="58" />
            <rect x="262" y="124" width="56" height="32" />
            <rect x="318" y="124" width="56" height="56" />
          </g>
          <g className="service-fig-points">
            <circle cx="172" cy="66" r="2.4" />
            <circle cx="298" cy="124" r="2.4" />
            <circle cx="352" cy="94" r="2.4" />
            <circle cx="438" cy="82" r="2.4" />
            <circle cx="522" cy="136" r="2.4" />
          </g>
        </svg>
      </div>
    );
  }

  return (
    <div className="service-figure service-figure-research" aria-hidden="true">
      <svg viewBox="0 0 620 220" preserveAspectRatio="xMidYMid meet">
        <g className="service-fig-lines service-fig-thin">
          <circle cx="310" cy="112" r="30" />
          <circle cx="310" cy="112" r="58" />
          <circle cx="310" cy="112" r="86" />
          <circle cx="310" cy="112" r="114" />
          <path d="M196 112 H424" />
          <path d="M310 0 V220" />
        </g>
        <g className="service-fig-points">
          <circle cx="310" cy="112" r="2.5" />
          <circle cx="310" cy="54" r="2.3" />
          <circle cx="310" cy="26" r="2.3" />
          <circle cx="424" cy="112" r="2.3" />
          <circle cx="196" cy="112" r="2.3" />
          <circle cx="254" cy="112" r="2.3" />
        </g>
      </svg>
    </div>
  );
}

function PageServices({ setRoute }) {
  const serviceKinds = {
    s1: "Diagnose",
    s2: "Evaluate",
    s3: "Embed",
    s4: "Extend",
  };

  const serviceDurations = {
    s1: "2 - 6 weeks",
    s2: "3 - 4 weeks",
    s3: "6 - 12 months",
    s4: "Variable",
  };

  const process = [
    {
      num: "01",
      title: "Frame the problem",
      text: "We start by understanding the context, objectives and constraints.",
      icon: (
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <path d="M6 12V6h6M26 12V6h-6M6 20v6h6M26 20v6h-6"></path>
        </svg>
      ),
    },
    {
      num: "02",
      title: "Establish constraints",
      text: "We map the system, identifying data, decisions and dependencies.",
      icon: (
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <path d="M8 8h4v4H8zM20 8h4v4h-4zM8 20h4v4H8zM20 20h4v4h-4zM14 14h4v4h-4z"></path>
        </svg>
      ),
    },
    {
      num: "03",
      title: "Build the model",
      text: "We create a model or framework that brings structure to complexity.",
      icon: (
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <path d="M16 6 24 11 16 16 8 11Z"></path>
          <path d="M16 12 24 17 16 22 8 17Z"></path>
          <path d="M16 18 24 23 16 28 8 23Z"></path>
        </svg>
      ),
    },
    {
      num: "04",
      title: "Produce the artefact",
      text: "You receive a written artefact that captures insight and decisions.",
      icon: (
        <svg viewBox="0 0 32 32" aria-hidden="true">
          <path d="M10 4h9l5 5v19H10z"></path>
          <path d="M19 4v6h5M13 16h8M13 20h8"></path>
        </svg>
      ),
    },
  ];

  return (
    <>
      <section className="services-hero section">
        <div className="wrap">
          <div className="services-hero-grid">
            <div className="services-hero-copy">
              <span className="eyebrow">Services</span>
              <h1>Different problems require different depths of <em>engagement</em>.</h1>
              <div className="hairline"></div>
              <p>Four structured ways to work with Cognerys. Every engagement produces a written artefact that belongs to you.</p>
            </div>
            <ServicesHeroDiagram />
          </div>
        </div>
      </section>

      <section className="services-list section">
        <div className="wrap">
          {SERVICES.map((s) => (
            <article key={s.id} className="service-row">
              <div className="service-num">
                <strong>{s.num}</strong>
                <span>{serviceKinds[s.id]}</span>
              </div>
              <div className="service-copy">
                <h2>{s.title}</h2>
                <p>{s.desc}</p>
                <ul className="service-bullets">
                  {s.bullets.map((b, i) => (
                    <li key={i}>{b}</li>
                  ))}
                </ul>
              </div>
              <div className="service-meta">
                <strong>{serviceDurations[s.id]}</strong>
                <span>Typical duration</span>
                <a className="btn-link" href="#" onClick={(e)=>{e.preventDefault(); setRoute("contact");}}>Discuss →</a>
              </div>
              <div className="service-media">
                <ServiceFigure serviceId={s.id} />
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="services-process section">
        <div className="wrap">
          <div className="services-process-grid">
            <div className="services-process-intro">
              <span className="eyebrow">How we work</span>
              <h2>A clear process. A written outcome.</h2>
            </div>
            {process.map((step) => (
              <div key={step.num} className="services-process-step">
                <div className="services-process-head">
                  <span className="services-process-icon">{step.icon}</span>
                  <span className="services-process-num">{step.num}</span>
                </div>
                <h3>{step.title}</h3>
                <p>{step.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="services-cta section">
        <div className="wrap">
          <div className="services-cta-grid">
            <h2>Start with the <em>problem</em>, not the solution.</h2>
            <p>A short brief is enough. We'll respond with how we'd approach it.</p>
            <div>
              <a className="btn btn-primary" href="#" onClick={(e)=>{e.preventDefault(); setRoute("contact");}}>Send a brief →</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ------------ Cases ------------ */
function EngagementsHeroDiagram() {
  return (
    <div className="engagements-hero-diagram" aria-hidden="true">
      <svg viewBox="0 0 760 360" preserveAspectRatio="xMidYMid slice">
        <g className="eng-grid">
          <path d="M100 0 V360" />
          <path d="M220 0 V360" />
          <path d="M340 0 V360" />
          <path d="M460 0 V360" />
          <path d="M580 0 V360" />
          <path d="M700 0 V360" />
        </g>
        <g className="eng-flow eng-flow-dashed">
          <path d="M0 132 C120 128 182 128 238 128 C286 128 310 84 360 84 C430 84 480 120 562 120 C644 120 692 76 760 70" />
          <path d="M0 182 C132 182 190 182 244 182 C298 182 332 144 392 144 C470 144 514 178 612 178 C678 178 716 166 760 160" />
        </g>
        <g className="eng-flow">
          <path d="M0 250 C88 250 148 250 208 250 C262 250 280 192 332 192 C386 192 400 264 454 264 C506 264 542 136 610 136 C684 136 722 202 760 194" />
          <path d="M0 300 C96 300 162 300 220 300 C276 300 292 242 346 242 C400 242 420 316 476 316 C538 316 564 212 636 212 C696 212 726 248 760 242" />
          <path d="M0 218 C98 218 162 216 222 216 C284 216 314 198 372 198 C438 198 478 272 554 272 C638 272 694 240 760 230" />
        </g>
        <g className="eng-points">
          <circle cx="220" cy="250" r="3.1" />
          <circle cx="220" cy="300" r="2.4" />
          <circle cx="340" cy="192" r="2.8" />
          <circle cx="340" cy="84" r="2.5" />
          <circle cx="460" cy="264" r="3.2" />
          <circle cx="460" cy="144" r="2.5" />
          <circle cx="580" cy="136" r="2.5" />
          <circle cx="580" cy="272" r="2.2" />
          <circle cx="700" cy="70" r="2.7" />
          <circle cx="700" cy="194" r="2.2" />
        </g>
      </svg>
    </div>
  );
}

function EngagementCaseFigure({ caseId }) {
  if (caseId === "c1") {
    return (
      <div className="engagement-figure engagement-figure-flow" aria-hidden="true">
        <svg viewBox="0 0 760 340" preserveAspectRatio="xMidYMid meet">
          <g className="figure-grid">
            <path d="M0 48 H760" />
            <path d="M0 102 H760" />
            <path d="M0 156 H760" />
            <path d="M0 210 H760" />
            <path d="M0 264 H760" />
            <path d="M58 0 V340" />
            <path d="M170 0 V340" />
            <path d="M282 0 V340" />
            <path d="M394 0 V340" />
            <path d="M506 0 V340" />
            <path d="M618 0 V340" />
            <path d="M730 0 V340" />
          </g>
          <g className="figure-flow">
            <path d="M0 88 C118 88 180 88 236 88 C286 88 314 34 378 34 C458 34 498 108 596 108 C674 108 718 82 760 72" />
            <path d="M0 134 C122 134 184 134 246 134 C304 134 336 78 402 78 C480 78 520 160 618 160 C688 160 724 142 760 132" />
            <path d="M0 180 C114 180 176 180 240 180 C302 180 334 126 398 126 C474 126 518 214 610 214 C682 214 718 194 760 184" />
            <path d="M0 226 C112 226 180 226 244 226 C302 226 334 176 398 176 C468 176 520 260 604 260 C680 260 720 244 760 236" />
            <path d="M0 272 C108 272 174 272 238 272 C298 272 326 230 390 230 C466 230 520 304 600 304 C680 304 716 292 760 286" />
          </g>
          <g className="figure-points">
            <circle cx="58" cy="134" r="2.1" />
            <circle cx="170" cy="226" r="2.1" />
            <circle cx="282" cy="180" r="2.2" />
            <circle cx="394" cy="126" r="2.2" />
            <circle cx="506" cy="214" r="2.2" />
            <circle cx="618" cy="160" r="2.2" />
            <circle cx="730" cy="72" r="2.2" />
            <circle cx="730" cy="286" r="2.2" />
          </g>
        </svg>
      </div>
    );
  }

  if (caseId === "c2") {
    return (
      <div className="engagement-figure engagement-figure-blocks" aria-hidden="true">
        <svg viewBox="0 0 760 340" preserveAspectRatio="xMidYMid meet">
          <g className="figure-grid">
            <path d="M0 40 H760" />
            <path d="M0 90 H760" />
            <path d="M0 140 H760" />
            <path d="M0 190 H760" />
            <path d="M0 240 H760" />
            <path d="M0 290 H760" />
            <path d="M70 0 V340" />
            <path d="M170 0 V340" />
            <path d="M270 0 V340" />
            <path d="M370 0 V340" />
            <path d="M470 0 V340" />
            <path d="M570 0 V340" />
            <path d="M670 0 V340" />
          </g>
          <g className="figure-blocks">
            <rect x="212" y="126" width="82" height="86" />
            <rect x="294" y="94" width="106" height="118" />
            <rect x="400" y="72" width="98" height="140" />
            <rect x="286" y="212" width="112" height="52" />
            <rect x="398" y="212" width="86" height="34" />
          </g>
          <g className="figure-lines">
            <path d="M0 176 H760" />
            <path d="M370 0 V340" />
            <path d="M0 230 H760" />
          </g>
          <g className="figure-points">
            <circle cx="38" cy="92" r="2.2" />
            <circle cx="186" cy="36" r="2.2" />
            <circle cx="294" cy="20" r="2.2" />
            <circle cx="534" cy="204" r="2.2" />
            <circle cx="608" cy="128" r="2.2" />
            <circle cx="686" cy="280" r="2.2" />
          </g>
        </svg>
      </div>
    );
  }

  if (caseId === "c3") {
    return (
      <div className="engagement-figure engagement-figure-orbit" aria-hidden="true">
        <svg viewBox="0 0 760 340" preserveAspectRatio="xMidYMid meet">
          <g className="figure-grid">
            <path d="M0 170 H760" />
            <path d="M380 0 V340" />
            <path d="M560 0 V340" />
          </g>
          <g className="figure-circles">
            <circle cx="202" cy="162" r="130" />
            <circle cx="202" cy="162" r="98" />
            <circle cx="202" cy="162" r="66" />
          </g>
          <g className="figure-lines">
            <path d="M202 18 V308" />
            <path d="M54 162 H344" />
            <path d="M570 40 V300" />
            <path d="M470 206 H720" />
          </g>
          <g className="figure-blocks">
            <rect x="352" y="150" width="24" height="24" />
          </g>
          <g className="figure-points">
            <circle cx="64" cy="162" r="2.2" />
            <circle cx="202" cy="32" r="2.2" />
            <circle cx="306" cy="84" r="2.2" />
            <circle cx="494" cy="206" r="2.2" />
            <circle cx="570" cy="84" r="2.2" />
            <circle cx="650" cy="164" r="2.2" />
          </g>
        </svg>
      </div>
    );
  }

  return (
    <div className="engagement-figure engagement-figure-verticals" aria-hidden="true">
      <svg viewBox="0 0 760 340" preserveAspectRatio="xMidYMid meet">
        <g className="figure-grid">
          <path d="M90 0 V340" />
          <path d="M200 0 V340" />
          <path d="M310 0 V340" />
          <path d="M420 0 V340" />
          <path d="M530 0 V340" />
          <path d="M640 0 V340" />
        </g>
        <g className="figure-lines">
          <path d="M318 0 V340" />
          <path d="M332 0 V340" />
          <path d="M346 0 V340" />
          <path d="M360 0 V340" />
          <path d="M74 146 H706" />
          <path d="M74 234 H706" />
        </g>
        <g className="figure-points">
          <circle cx="90" cy="146" r="2.2" />
          <circle cx="146" cy="182" r="2.2" />
          <circle cx="200" cy="128" r="2.2" />
          <circle cx="254" cy="206" r="2.2" />
          <circle cx="332" cy="164" r="2.4" />
          <circle cx="420" cy="118" r="2.2" />
          <circle cx="476" cy="242" r="2.2" />
          <circle cx="584" cy="186" r="2.2" />
          <circle cx="640" cy="88" r="2.2" />
          <circle cx="692" cy="238" r="2.2" />
        </g>
      </svg>
    </div>
  );
}

function PageCases() {
  return (
    <>
      <section className="engagements-hero section">
        <div className="wrap">
          <div className="engagements-hero-grid">
            <div className="engagements-hero-copy">
              <span className="eyebrow">Engagements</span>
              <h1>Engagements.</h1>
              <p>
                Selected recent work. All engagements carry confidentiality — what's below is given with client permission, or in a form that doesn't need it.
              </p>
            </div>
            <EngagementsHeroDiagram />
          </div>
        </div>
      </section>

      <section className="engagements-list section">
        <div className="wrap">
          {CASES.map((c, index) => {
            const parts = c.label.split("·").map((part) => part.trim());
            const isReversed = index % 2 === 1;

            return (
              <article key={c.id} className={`engagement-case ${isReversed ? "is-reversed" : ""}`}>
                <div className="engagement-case-media">
                  <EngagementCaseFigure caseId={c.id} />
                </div>
                <div className="engagement-case-copy">
                  <div className="engagement-case-meta">
                    <span>{parts[0]}</span>
                    <span>{parts[1]}</span>
                    <span>{c.role}</span>
                  </div>
                  <h2>{c.title}</h2>
                  <p>{c.desc}</p>
                  <a className="btn-link" href="#">
                    View case summary →
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="engagements-cta section">
        <div className="wrap">
          <div className="engagements-cta-grid">
            <h2>Let's build better systems together.</h2>
            <p>If you're working on hard problems in energy markets, let's start a conversation.</p>
            <div>
              <a className="btn btn-primary" href={`mailto:${BRAND.person.email}`}>Get in touch →</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ------------ About ------------ */
function PageAbout() {
  const experience = [
    { years: "2025 -", role: "Director, Cognerys.", status: "Present" },
    { years: "2024 -", role: "Doctoral researcher, University of Bath.", status: "Present" },
    { years: "2025 -", role: "Solutions Architect, SEFE.", status: "Contract" },
    { years: "2023 - 2024", role: "Senior Solutions Architect, Shell.", status: "Contract" },
    { years: "2020 - 2023", role: "Technical Team Lead, Shell.", status: "Contract" },
    { years: "2021 -", role: "Senior Consultant, Sky.", status: "Contract" },
    { years: "2019 - 2020", role: "Lead Engineer, Argus Media.", status: "Contract" },
    { years: "2017 - 2019", role: "Technical Lead, Drax Group.", status: "Contract" },
  ];

  return (
    <>
      <section className="about-hero section">
        <div className="wrap">
          <div className="about-hero-grid">
            <div className="about-hero-copy">
              <span className="eyebrow">About</span>
              <h1>Independent by design. Focused on what <em>matters</em>.</h1>
              <p>
                Cognerys is an independent research and advisory practice working at the intersection of AI, data operations, and architecture for energy trading.
              </p>
            </div>
            <AboutIntroDiagram />
          </div>
        </div>
      </section>

      <section className="about-profile section">
        <div className="wrap">
          <div className="about-profile-grid">
            <div className="about-portrait">
              <div className="portrait-frame about-portrait-frame">
                <img
                  className="portrait-image"
                  src="src/assets/gary-portrait.jpg"
                  alt="Gary Morris portrait"
                  loading="lazy"
                />
              </div>
              <div className="about-signature">Gary Morris</div>
              <div className="about-portrait-meta">
                <strong>{BRAND.person.name}</strong>
                <span>Founder</span>
              </div>
            </div>
            <div className="about-story">
              <span className="eyebrow">The person behind the practice</span>
              <h2>A working life in energy-system architecture.</h2>
              <p>
                Before founding Cognerys, Gary spent a decade inside energy-trading technology — as a platform engineer, a lead architect, and eventually the person called in when a programme had gone quiet for a quarter too long.
              </p>
              <p>
                The work spanned data pipelines, real-time systems, and the architecture that holds it all together. The common thread was complexity — and the realisation that better systems come from clear thinking and honest questions.
              </p>
              <p>
                Cognerys is that approach made independent: research-led, deliberately small, and focused on outcomes that matter.
              </p>
            </div>
          </div>
        </div>
      </section>

      <AboutValues />

      <section className="about-experience section">
        <div className="wrap">
          <div className="about-experience-grid">
            <div className="about-experience-copy">
              <span className="eyebrow">Experience</span>
              <h2>Two decades building systems that <em>perform</em>.</h2>
            </div>
            <div className="about-timeline">
              {experience.map((row, i) => (
                <div key={i} className="about-timeline-row">
                  <span className="years">{row.years}</span>
                  <span className="dot"></span>
                  <strong>{row.role}</strong>
                  <span className="status">{row.status}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="about-cta section">
        <div className="wrap">
          <div className="about-cta-grid">
            <div>
              <span className="eyebrow">Let's work together</span>
              <h2>Thinking <em>clearly</em> about complex systems.</h2>
            </div>
            <p>If you're working on hard problems in energy markets, let's start a conversation.</p>
            <div>
              <a className="btn btn-primary" href={`mailto:${BRAND.person.email}`}>Get in touch →</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ------------ Contact ------------ */
function PageContact() {
  return (
    <>
      <PageHeader eyebrow="Contact" title="Write."
        lede="The best way to begin is a short, honest email. Two working days to first response; a 30-minute call costs nothing, and either of us can decide it isn't a fit." />

      <section className="section" style={{paddingTop: 0}}>
        <div className="wrap">
          <div className="contact-grid">
            <div>
              {[
                ["Email", BRAND.person.email],
                ["Post", "Cognerys Ltd., Bath, BA1, UK"],
                ["ORCID", "0000-0002-3456-7890"],
                ["Scheduling", "cal.com/cognerys"],
                ["Availability", BRAND.person.availability],
              ].map(([k,v]) => (
                <div key={k} className="contact-field">
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
            </div>
            <div className="contact-copy">
              <p>Most engagements begin with a written brief of a page or two. If you don't have one, a few lines about the shape of the situation is plenty — I'll write back with questions.</p>
              <p>For commissioned research, include the decision you're trying to make, the audience for the output, and an honest sense of timeline.</p>
              <p>For press and academic enquiries, the same email works. Please mention publication or institution.</p>
              <p className="contact-signoff">
                — {BRAND.person.name}, {BRAND.person.loc}
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  PageHeader, PageWriting, PageEssay, PageResearch,
  PageServices, PageCases, PageAbout, PageContact,
});