// Section 2 — Market Context: Why This Matters Now

/* ── Isometric line-figure helpers (monochrome, Linear-style) ────── */
const ISO_C = 0.8660254, ISO_S = 0.5;
const isoPt = (x, y, z, ox, oy, u) => [
  ox + (x - y) * ISO_C * u,
  oy + (x + y) * ISO_S * u - z * u,
];
const poly = (...pts) => pts.map((p) => p.map((n) => n.toFixed(1)).join(',')).join(' ');

// returns the three visible faces of an isometric box footprint (x,y)→(x+w,y+d), height h
const boxFaces = (x, y, w, d, h, ox, oy, u) => {
  const g = (X, Y, Z) => isoPt(X, Y, Z, ox, oy, u);
  const B = g(x + w, y, 0), Cc = g(x + w, y + d, 0), D = g(x, y + d, 0);
  const A2 = g(x, y, h), B2 = g(x + w, y, h), C2 = g(x + w, y + d, h), D2 = g(x, y + d, h);
  return {
    top: poly(A2, B2, C2, D2),
    right: poly(B, Cc, C2, B2),
    left: poly(D, Cc, C2, D2),
    key: x + y,
  };
};

const Box = ({ f }) => (
  <g className="iso-box">
    <polygon className="iso-face-l" points={f.left} />
    <polygon className="iso-face-r" points={f.right} />
    <polygon className="iso-face-t" points={f.top} />
  </g>
);

/* FIG 1 — adoption funnel: wide at top, narrows dramatically to a few at the bottom */
const FigFunnel = () => {
  const ox = 140, oy = 144, u = 42;
  const levels = [
    { s: 2.8, z: 2.0 },
    { s: 2.12, z: 1.5 },
    { s: 1.5, z: 1.0 },
    { s: 0.95, z: 0.5 },
    { s: 0.46, z: 0.0 },
  ];
  const ring = (s, z) => {
    const h = s / 2;
    return [
      isoPt(-h, -h, z, ox, oy, u), isoPt(h, -h, z, ox, oy, u),
      isoPt(h, h, z, ox, oy, u), isoPt(-h, h, z, ox, oy, u),
    ];
  };
  const rings = levels.map((l) => ring(l.s, l.z));
  return (
    <svg viewBox="0 0 280 160" className="iso-svg" preserveAspectRatio="xMidYMid meet">
      {/* funnel walls — connect corresponding corners of adjacent rings */}
      {rings.slice(0, -1).map((r, i) =>
        r.map((p, c) => {
          const q = rings[i + 1][c];
          return <line key={i + '-' + c} className="iso-edge" x1={p[0]} y1={p[1]} x2={q[0]} y2={q[1]} />;
        })
      )}
      {/* rings */}
      {rings.map((r, i) => (
        <polygon key={i} className={'iso-ring' + (i === 0 ? ' iso-ring-top' : '')} points={poly(...r)} />
      ))}
      {/* many entering the mouth … */}
      {[[-0.55, -0.35, 2.78], [0.05, 0.1, 2.95], [0.5, 0.42, 2.72]].map((c, i) => {
        const p = isoPt(c[0], c[1], c[2], ox, oy, u);
        return <circle key={'in' + i} className="iso-node iso-node-dim" cx={p[0]} cy={p[1]} r="2" />;
      })}
      {/* … one returning out the bottom */}
      {(() => { const p = isoPt(0, 0, -0.34, ox, oy, u); return <circle className="iso-node" cx={p[0]} cy={p[1]} r="2.4" />; })()}
    </svg>
  );
};

/* FIG 2 — workflow system: deep, connected, multi-layer stack */
const FigWorkflow = () => {
  const ox = 140, oy = 84, u = 32, w = 2.4, plate = 0.16, gap = 0.46, N = 5;
  const layers = [];
  for (let i = 0; i < N; i++) layers.push(i * (plate + gap));
  const g = (X, Y, Z) => isoPt(X, Y, Z, ox, oy, u);
  const corners = [[0, 0], [w, 0], [w, w], [0, w]];
  const topZ = (N - 1) * (plate + gap) + plate;
  return (
    <svg viewBox="0 0 280 160" className="iso-svg" preserveAspectRatio="xMidYMid meet">
      {corners.map(([cx, cy], i) => {
        const a = g(cx, cy, 0), b = g(cx, cy, topZ);
        return <line key={'c' + i} className="iso-dot" x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} />;
      })}
      {layers.map((z, i) => <Box key={i} f={boxFaces(0, 0, w, w, plate, ox, oy - z * u, u)} />)}
    </svg>
  );
};

/* FIG 3 — FDE growth: steeply ascending steps + dotted trend line */
const FigGrowth = () => {
  const ox = 86, oy = 60, u = 33, fw = 0.66, dx = 0.92;
  const hs = [0.4, 0.75, 1.35, 2.05, 3.0];
  const faces = hs.map((h, i) => ({ ...boxFaces(i * dx, 0, fw, fw, h, ox, oy, u), h }));
  const tops = hs.map((h, i) => isoPt(i * dx + fw, fw, h, ox, oy, u));
  const trend = tops.map((p) => p.map((n) => n.toFixed(1)).join(',')).join(' ');
  return (
    <svg viewBox="0 0 280 160" className="iso-svg" preserveAspectRatio="xMidYMid meet">
      {faces.map((f, i) => <Box f={f} key={i} />)}
      <polyline className="iso-trend" points={trend} />
      {tops.map((p, i) => <circle key={i} className="iso-node" cx={p[0]} cy={p[1]} r="2.2" />)}
    </svg>
  );
};

const FIGS = { '01': FigFunnel, '02': FigWorkflow, '03': FigGrowth };

const MarketCard = ({ num, title, body, source, stat }) => {
  const Fig = FIGS[num];
  return (
    <div className="mctx-card">
      <div className="mctx-fig">{Fig && <Fig />}</div>
      <div className="mctx-body-wrap">
        <div className="mctx-head">
          <span className="mctx-num">{num}</span>
          <h4 className="mctx-title">{title}</h4>
        </div>
        <p className="mctx-body">{body}</p>
        <div className="mctx-foot">
          {stat && <div className="mctx-stat">{stat}</div>}
          {source && <div className="mctx-source">{source}</div>}
        </div>
      </div>
    </div>
  );
};

const MarketContext = () => (
  <section className="section" id="market" data-screen-label="02 Market Context">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 03 — Why this matters now</span>
        <h2>AI adoption is exploding.<br />Production <span className="gradient">ownership</span> is still missing.</h2>
        <p className="lede">
          The market does not need another wrapper. It needs infrastructure that turns
          real usage into owned model behavior.
        </p>
      </div>

      <div className="mctx-grid">
        <MarketCard
          num="01"
          title="AI adoption is high, but ROI is uneven."
          body="The funnel narrows dramatically toward the bottom: many companies adopt AI, but only a few achieve significant returns. The gap is not access to models; it is deployment, workflow integration, eval, governance, and feedback loops."
          stat={<>78% of companies used AI in at least one function in 2024, up from 55% in 2023. Generative AI private investment reached $33.9B in 2024.</>}
          source="Source: WSJ / McKinsey / Stanford AI Index"
        />
        <MarketCard
          num="02"
          title="Application-layer winners are workflow systems, not thin wrappers."
          body="The strongest AI application companies create value through deep workflow control, domain-native intelligence, and compounding user behavior — not through a thin prompt interface over a frontier API."
          stat={<>Anysphere raised $900M at ~$9B valuation. ARR reported ~$200M by April 2025.</>}
          source="Source: Financial Times, May 2025"
        />
        <MarketCard
          num="03"
          title="FDE growth proves the deployment gap."
          body="Forward-deployed engineering is rising because enterprise AI is not simple API integration. Real deployment requires workflow discovery, integration, eval, guardrails, monitoring, and continuous improvement."
          stat={<>FDE job postings grew 729% year over year from April 2025 to April 2026.</>}
          source="Source: Business Insider / Indeed, May 2026"
        />
      </div>

      <div className="mctx-punch">
        <div className="mctx-p-line">The winning AI companies own the model behavior that powers their product.</div>
        <div className="mctx-p-sub">Model OS is the infrastructure that makes that ownership possible.</div>
      </div>
    </div>
  </section>
);

window.MarketContext = MarketContext;