/* =========================================================
   COGNERYS — Home (v3, dark systems-grid editorial)
   ========================================================= */

const STREAM_SUMMARIES = {
  "01": "Applied research on models, agents and reasoning in live trading environments.",
  "02": "Designing the pipelines, contracts and observability that move and govern data.",
  "03": "Architecture for trading platforms that scale, adapt and remain reliable.",
  "04": "The layer that turns data and models into decisions you can trade on.",
};

const STREAM_NAMES = {
  "04": "Decision infrastructure",
};

const HOME_RESEARCH = [
  { num: "01", title: "Evaluation frameworks for LLMs in trading", date: "May 2024", tag: "PDF" },
  { num: "02", title: "Data contracts for real-time energy pipelines", date: "Mar 2024", tag: "PDF" },
  { num: "03", title: "Architectural patterns for ETRM modernisation", date: "Jan 2024", tag: "PDF" },
];

const STREAM_HOOK_HIDDEN_STYLE = { display: "none" };

function StreamGlyph({ num }) {
  const strokeProps = {
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.6,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    vectorEffect: "non-scaling-stroke",
  };

  if (num === "02") {
    return (
      <svg viewBox="0 0 40 40" width="40" height="40">
        <path {...strokeProps} d="M20 7 L31 11 L20 15 L9 11 Z" />
        <path {...strokeProps} d="M20 13 L31 17 L20 21 L9 17 Z" />
        <path {...strokeProps} d="M20 19 L31 23 L20 27 L9 23 Z" />
        <path {...strokeProps} d="M20 25 L31 29 L20 33 L9 29 Z" />
        <path {...strokeProps} d="M20 5 V35" />
      </svg>
    );
  }

  if (num === "03") {
    return (
      <svg viewBox="0 0 40 40" width="40" height="40">
        <rect x="32" y="6" width="4" height="4" fill="currentColor" />
        <path {...strokeProps} d="M32 8 H18 C14 8 10 12 10 16 V22" />
      </svg>
    );
  }

  if (num === "04") {
    return (
      <svg viewBox="0 0 40 40" width="40" height="40">
        <rect x="32" y="30" width="4" height="4" fill="currentColor" />
        <path {...strokeProps} d="M32 32 H18 C14 32 10 28 10 24 V18" />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 40 40" width="40" height="40">
      <rect x="4" y="6" width="4" height="4" fill="currentColor" />
      <path {...strokeProps} d="M8 8 H22 C26 8 30 12 30 16 V22" />
    </svg>
  );
}

function MarketDiagram() {
  return (
    <div className="market-diagram" aria-hidden="true">
      <div className="market-grid"></div>
      <svg viewBox="0 0 760 440" preserveAspectRatio="xMidYMid meet">
        <path className="terrain terrain-a" d="M0 340 C88 308 150 306 236 326 C322 346 388 234 474 228 C560 222 630 258 760 238" />
        <path className="terrain terrain-b" d="M0 382 C106 350 184 352 266 364 C350 378 418 304 508 300 C618 296 680 328 760 314" />
        <path className="terrain terrain-c" d="M0 288 C82 270 148 286 224 278 C318 268 392 190 476 198 C584 208 652 184 760 176" />
        <path className="terrain terrain-d" d="M0 250 C94 236 174 240 260 224 C342 208 408 150 486 156 C580 164 654 214 760 214" />
        <path className="signal-line" d="M32 262 C126 238 190 238 254 214 C334 184 376 114 456 112 C566 110 626 150 728 146" />
        <path className="signal-line signal-line-alt" d="M0 286 C112 286 176 282 244 256 C326 224 394 246 470 246 C582 246 648 190 760 188" />
        <path className="price-line" d="M26 286 C118 266 170 266 226 286 C286 308 326 366 392 360 C488 350 532 260 620 260 C670 260 712 282 760 278" />
        <path className="price-line price-line-secondary" d="M0 320 C102 300 174 310 252 332 C330 354 402 334 484 306 C590 270 658 274 760 290" />
        <g className="points">
          <rect x="28" y="258" width="6" height="6" />
          <rect x="148" y="236" width="6" height="6" />
          <rect x="244" y="208" width="6" height="6" />
          <rect x="388" y="356" width="6" height="6" />
          <rect x="456" y="110" width="6" height="6" />
          <rect x="620" y="258" width="6" height="6" />
          <rect x="726" y="142" width="6" height="6" />
          <path d="M542 196 h24 M554 184 v24" />
        </g>
      </svg>
      <span className="axis-label price">Price</span>
      <span className="axis-label time">Time</span>
      <p>Markets are complex.<br />Systems don't have to be.</p>
    </div>
  );
}

function StreamsDiagram() {
  return (
    <div className="streams-diagram" aria-hidden="true">
      <svg viewBox="0 0 560 360">
        <g className="stream-gridlines">
          <path className="stream-guide" d="M280 36 V324" />
          <path className="stream-guide" d="M154 102 H406" />
          <path className="stream-guide" d="M154 130 H406" />
          <path className="stream-guide" d="M154 158 H406" />
          <path className="stream-guide" d="M154 186 H406" />
          <path className="stream-guide" d="M154 214 H406" />
          <path className="stream-guide" d="M154 242 H406" />
        </g>
        <g className="system-core">
          <path className="stream-core" d="M280 78 L388 112 L280 146 L172 112 Z" />
          <path className="stream-core" d="M280 104 L390 138 L280 172 L170 138 Z" />
          <path className="stream-core" d="M280 130 L392 164 L280 198 L168 164 Z" />
          <path className="stream-core" d="M280 156 L390 190 L280 224 L170 190 Z" />
          <path className="stream-core" d="M280 182 L388 216 L280 250 L172 216 Z" />
          <path className="stream-core" d="M280 56 V298" />
        </g>
        <g className="stream-links">
          <path className="stream-link" d="M24 92 H146 C166 92 178 102 178 120 C178 128 184 134 194 136" />
          <path className="stream-link" d="M24 244 H146 C166 244 178 234 178 216 C178 206 184 198 194 194" />
          <path className="stream-link" d="M536 92 H414 C394 92 382 102 382 120 C382 128 376 134 366 136" />
          <path className="stream-link" d="M536 244 H414 C394 244 382 234 382 216 C382 206 376 198 366 194" />
          <path className="stream-link" d="M186 206 L194 194 L180 198" />
          <path className="stream-link" d="M374 206 L366 194 L380 198" />
        </g>
        <g className="stream-points">
          <rect x="21" y="89" width="6" height="6" />
          <rect x="21" y="241" width="6" height="6" />
          <rect x="277" y="52" width="6" height="6" />
          <rect x="277" y="295" width="6" height="6" />
          <rect x="533" y="89" width="6" height="6" />
          <rect x="533" y="241" width="6" height="6" />
        </g>
      </svg>
    </div>
  );
}

function ApproachDiagram() {
  return (
    <div className="approach-diagram" aria-hidden="true">
      <svg viewBox="0 0 560 340">
        <g className="approach-grid">
          <path d="M280 18 V322" />
          <path d="M78 170 H482" />
          <path d="M124 54 H436 M124 286 H436" />
          <path d="M152 28 V312 M408 28 V312" />
        </g>
        <ellipse className="approach-outer" cx="280" cy="170" rx="218" ry="150" />
        <circle className="approach-circle" cx="280" cy="116" r="78" />
        <circle className="approach-circle" cx="194" cy="210" r="78" />
        <circle className="approach-circle" cx="366" cy="210" r="78" />
        <path className="approach-axis" d="M280 88 V260" />
        <path className="approach-axis" d="M108 170 H452" />
        <g className="approach-dots">
          <circle cx="280" cy="20" r="3" />
          <circle cx="280" cy="320" r="3" />
          <circle cx="62" cy="170" r="3" />
          <circle cx="498" cy="170" r="3" />
          <circle cx="280" cy="146" r="2" />
          <circle cx="280" cy="158" r="2" />
        </g>
        <rect className="approach-core" x="265" y="155" width="30" height="30" />
        <g className="approach-hatch">
          <path d="M266 180 L290 156" />
          <path d="M266 170 L280 156" />
          <path d="M276 184 L294 166" />
        </g>
        <text x="280" y="116" textAnchor="middle">Research</text>
        <text x="194" y="214" textAnchor="middle">Systems</text>
        <text x="366" y="214" textAnchor="middle">Decisions</text>
      </svg>
    </div>
  );
}

function ResearchSketch() {
  return (
    <div className="research-sketch" aria-hidden="true">
      <div className="sketch-grid"></div>
      <svg viewBox="0 0 520 320" preserveAspectRatio="xMidYMid slice">
        <path className="sketch-curve" d="M22 246 C86 174 144 188 200 208 C248 226 280 148 338 166 C402 188 438 136 500 146" />
        <path className="sketch-curve muted" d="M14 82 C86 74 132 94 192 78 C268 58 320 58 390 64 C444 70 470 56 508 56" />
        <path className="sketch-curve muted" d="M22 102 C96 102 144 102 204 96 C274 90 320 90 390 92 C450 94 480 90 508 88" />
        <path className="sketch-curve muted" d="M34 206 H178 M242 206 H486" />
        <g className="sketch-notes">
          <path d="M114 118 h92 M160 118 v98" />
          <path d="M310 96 h122 M370 96 v126" />
          <path d="M392 142 h74" />
          <path d="M92 246 H456" />
        </g>
        <g className="sketch-points">
          <rect x="108" y="114" width="5" height="5" />
          <rect x="306" y="92" width="5" height="5" />
          <rect x="420" y="138" width="5" height="5" />
        </g>
      </svg>
      <span className="note n1">events</span>
      <span className="note n2">positions<br />trades</span>
      <span className="note n3">risk</span>
      <span className="note n4">signals</span>
    </div>
  );
}

function HomeOverview({ setRoute }) {
  return (
    <div className="home-board">
      <section className="home-panel hero-panel">
        <div className="hero-copy">
          <span className="eyebrow">{BRAND.estab}</span>
          <h1>
            Architecting<br />
            <em>decision systems</em><br />
            for energy trading.
          </h1>
          <div className="hairline"></div>
          <p>
            Cognerys is an independent research and advisory practice founded by <strong>{BRAND.person.name}</strong>, working at the intersection of AI, data operations, and ETRM architecture.
          </p>
          <p>
            We partner with energy trading firms to build systems that perform in the real world.
          </p>
          <div className="hero-actions">
            <a className="btn btn-primary" href="#" onClick={(e)=>{e.preventDefault(); setRoute("services");}}>
              Work with us →
            </a>
            <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault(); setRoute("research");}}>
              Read the research
            </a>
          </div>
        </div>
        <MarketDiagram />
      </section>

      <section className="home-panel research-panel">
        <div className="research-intro">
          <div className="research-title">
            <span className="eyebrow">Research</span>
            <h2>Four streams.<br /><em>One system.</em></h2>
            <div className="hairline small"></div>
          </div>
          <p>Our research programme spans applied AI, data operations, and the underlying architecture of the systems that carry it all. The streams inform each other — we don't separate them.</p>
        </div>
        <div className="research-layout">
          <div className="stream-grid">
            {PILLARS.map(p => (
              <button key={p.num} type="button" className="stream-item" data-stream={p.num} onClick={() => setRoute("research")}>
                <span className="stream-num">{p.num}</span>
                <div className="stream-copy">
                  <div className="stream-copy-line">
                    <div className="stream-glyph" data-stream={p.num} aria-hidden="true" style={STREAM_HOOK_HIDDEN_STYLE}>
                      <StreamGlyph num={p.num} />
                    </div>
                    <strong>{STREAM_NAMES[p.num] || p.name}</strong>
                    <i className="stream-plus" aria-hidden="true" style={STREAM_HOOK_HIDDEN_STYLE}>+</i>
                  </div>
                  <small>{STREAM_SUMMARIES[p.num]}</small>
                </div>
              </button>
            ))}
          </div>
          <StreamsDiagram />
        </div>
      </section>

      <section className="home-panel writing-panel">
        <div className="publication-copy">
          <span className="eyebrow">Recent research</span>
          <div className="publication-list">
            {HOME_RESEARCH.map((r) => (
              <button key={r.num} className="publication-row" onClick={() => setRoute("research")}>
                <span>{r.num}</span>
                <strong>{r.title}</strong>
                <small>{r.date}</small>
                <em>{r.tag}</em>
                <i aria-hidden="true">→</i>
              </button>
            ))}
          </div>
        </div>
        <ResearchSketch />
      </section>

      <section className="home-panel approach-panel">
        <div className="approach-copy">
          <span className="eyebrow">Approach</span>
          <h2>Research.<br />Build.<br /><em>Embed.</em></h2>
          <div className="hairline small"></div>
          <p>We don't stop at research. We work alongside your team to embed it in your systems, workflows, and decisions.</p>
        </div>
        <ApproachDiagram />
      </section>

      <section className="home-panel metrics-panel">
        <div>
          <h2>Built for the complexity of energy markets.</h2>
        </div>
        <div className="metric">
          <strong>10+</strong>
          <span>Years of hands-on trading systems experience</span>
        </div>
        <div className="metric">
          <strong>30+</strong>
          <span>Engagements across ETRMs, data platforms and AI systems</span>
        </div>
        <div className="metric">
          <strong>Global</strong>
          <span>Working with teams across energy markets</span>
        </div>
      </section>

    </div>
  );
}

function Home({ setRoute }) {
  return <HomeOverview setRoute={setRoute} />;
}
Object.assign(window, { Home, HomeOverview });