/* ============================================================================
   "WHAT HAPPENS IF YOU DO NOTHING?"  — the most important screen.
   Lab-specific 4-stage decay timeline + a rising cost-of-delay curve that
   draws in as the stages reveal in sequence.
   ============================================================================ */
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function DoNothing({ lab }) {
  const stages = lab.doNothing;
  const [ref, shown] = window.useReveal({ threshold: 0.3 });
  const [active, setActive] = useStateD(window.prefersReduced() ? stages.length - 1 : -1);

  useEffectD(() => {
    if (!shown) return;
    if (window.prefersReduced()) { setActive(stages.length - 1); return; }
    let i = 0;
    setActive(0);
    const id = setInterval(() => {
      i += 1;
      if (i >= stages.length) { clearInterval(id); return; }
      setActive(i);
    }, 640);
    return () => clearInterval(id);
  }, [shown]);

  // build the cost curve path (rising, eased) across the 4 points
  const W = 1000, H = 320, padL = 40, padR = 40, padB = 46, padT = 24;
  const xs = stages.map((_, i) => padL + (i * (W - padL - padR)) / (stages.length - 1));
  const ys = stages.map((s) => padT + (1 - s.level) * (H - padT - padB));
  let d = `M ${xs[0]} ${ys[0]}`;
  for (let i = 1; i < stages.length; i++) {
    const cx = (xs[i - 1] + xs[i]) / 2;
    d += ` C ${cx} ${ys[i - 1]}, ${cx} ${ys[i]}, ${xs[i]} ${ys[i]}`;
  }
  const area = `${d} L ${xs[xs.length - 1]} ${H - padB} L ${xs[0]} ${H - padB} Z`;

  return React.createElement(
    "section",
    { className: "section donothing", ref },
    React.createElement(
      "div",
      { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "The cost of waiting"),
      React.createElement("h2", { className: "section-title" }, "What happens if you do nothing?"),
      React.createElement(
        "p",
        { className: "section-lede" },
        "Standing still is a decision. Companies that delay spend ",
        React.createElement("span", { className: "accent-text strong" }, lab.delayMultiple, " more"),
        " catching up — if they catch up at all."
      )
    ),

    React.createElement(
      "div",
      { className: "dn-grid" },

      /* curve */
      React.createElement(
        "div",
        { className: "dn-chart" },
        React.createElement(
          "svg",
          { viewBox: `0 0 ${W} ${H}`, className: "dn-svg", preserveAspectRatio: "none" },
          React.createElement(
            "defs",
            null,
            React.createElement(
              "linearGradient",
              { id: "dnFill", x1: "0", y1: "0", x2: "0", y2: "1" },
              React.createElement("stop", { offset: "0", stopColor: "var(--accent)", stopOpacity: "0.32" }),
              React.createElement("stop", { offset: "1", stopColor: "var(--accent)", stopOpacity: "0" })
            )
          ),
          // gridlines
          [0.25, 0.5, 0.75].map((g) =>
            React.createElement("line", {
              key: g, x1: padL, x2: W - padR, y1: padT + g * (H - padT - padB), y2: padT + g * (H - padT - padB),
              className: "dn-grid-line",
            })
          ),
          React.createElement("path", { d: area, fill: "url(#dnFill)", className: `dn-area ${shown ? "in" : ""}` }),
          React.createElement("path", { d, className: `dn-curve ${shown ? "in" : ""}`, fill: "none" }),
          xs.map((x, i) =>
            React.createElement("circle", {
              key: i, cx: x, cy: ys[i], r: 5,
              className: `dn-pt ${active >= i ? "in" : ""}`,
            })
          )
        ),
        React.createElement("span", { className: "dn-axis-y" }, "Cost of delay"),
        React.createElement("span", { className: "dn-axis-x" }, "Time")
      ),

      /* stages */
      React.createElement(
        "ol",
        { className: "dn-stages" },
        stages.map((s, i) =>
          React.createElement(
            "li",
            { key: i, className: `dn-stage ${active >= i ? "in" : ""} ${i === stages.length - 1 ? "terminal" : ""}` },
            React.createElement("span", { className: "dn-year mono" }, s.year),
            React.createElement("span", { className: "dn-stage-title" }, s.title)
          )
        )
      )
    )
  );
}

window.DoNothing = DoNothing;