/* ============================================================
   BEDROCK — Strata 7–9 : Crux · Integration · Narrative
   ============================================================ */
const { Eyebrow: Ey, Pull: Pl, Stanza: Sz, Cards: Cr, Reveal: Re, Prompts: Pm,
        RankList: Rl, Capture: Ca, Stone } = window;
const { useState: uS } = React;

/* ---------- STRATUM 7 — CRUX ---------- */
const CRUX_CANDIDATES = [
  { t: "Find the first beachhead", d: "One market where touch matters enough to pay." },
  { t: "Build the technology", d: "Solve the science; assume markets follow." },
  { t: "Prove one sensory loop", d: "One contact · one signal · one felt sensation · one measurable lift." },
  { t: "Convert wonder into belief", d: "Move people from “fascinating” to “I believe.”" },
  { t: "Raise the seed round", d: "Capital first; solve everything else later." },
  { t: "Prove performance improves", d: "Operators do real tasks better because of touch." },
  { t: "Become the touch layer", d: "Infrastructure for robotics, not one application." },
];
const CRUX_VERDICT = [
  { t: "Prove one sensory loop", s: "10 / 10", win: true },
  { t: "Convert wonder into belief", s: "9 / 10" },
  { t: "Prove performance improves", s: "8.5 / 10" },
  { t: "Find the first beachhead", s: "8.5 / 10" },
  { t: "Become the touch layer", s: "7 / 10" },
  { t: "Build the technology", s: "6 / 10" },
  { t: "Raise the seed round", s: "4 / 10" },
];

function StratumCrux() {
  const [verdict, setVerdict] = uS(false);
  return (
    <>
      <p className="stratum-lede beat-in">
        Most deep-tech founders frame the challenge as <span className="serif">“how do we build
        Project Juvet?”</span> That is not the crux. The crux is the single, solvable challenge
        that unlocks the next 18–36 months — <strong>and makes everything else easier.</strong>
      </p>

      <hr className="hr" />

      <Ey>Weigh the seven reframings</Ey>
      <div className="prose"><p className="ash" style={{ marginTop: 8 }}>
        Before the verdict — drag these into the room's order. Which challenge is most important,
        most solvable, most within reach, and unlocks the most?
      </p></div>
      <div className="spacer-s" />
      <Rl id="crux" items={CRUX_CANDIDATES} note="01 is the room's chosen crux · drag or use ▲ ▼" accentTop />

      <div className="spacer-m" />

      {!verdict ? (
        <button className="reveal-stub" onClick={() => setVerdict(true)} style={{ borderColor: "var(--stage-fg)" }}>
          <span className="mono sig">the verdict</span>
          <span className="stub-label">Reveal how the seven scored</span>
          <span className="stub-mark">+</span>
        </button>
      ) : (
        <div className="reveal-body">
          <Ey><span className="sig">●</span> &nbsp;SCORED ON: IMPORTANT · SOLVABLE · IN OUR POWER · UNLOCKS THE REST</Ey>
          <div className="spacer-s" />
          <div className="verdict">
            {CRUX_VERDICT.map((c) => (
              <div className={"verdict-row" + (c.win ? " win" : "")} key={c.t}>
                <span className="verdict-bar"><span style={{ width: (parseFloat(c.s) * 10) + "%" }} /></span>
                <span className="verdict-t">{c.t}</span>
                <span className="verdict-s">{c.s}</span>
              </div>
            ))}
          </div>
          <Pl sig>How do we create the smallest possible proof that causes sophisticated people to believe biological touch return can improve real-world robotic performance?</Pl>
          <p className="prose ash">Solvable. Fundable. Measurable. Within Varjoun's power. Aligned with the next 18–36 months. Solving it untangles nearly every other challenge facing the company.</p>
        </div>
      )}

      <hr className="hr hr-ink" />
      <Ey><span className="sig">●</span> &nbsp;FOR THE ROOM</Ey>
      <div className="spacer-s" />
      <Pm items={[
        { kind: "Predict", q: "What single challenge seems to unlock everything else?" },
        { kind: "Interact", q: "Compare “raise money,” “build technology,” and “prove one loop.”" },
        { kind: "What if", q: "Which challenge would still matter with unlimited funding?" },
      ]} />

      <Ca id="crux" label="Name our crux." placeholder="Our crux is to…" />
    </>
  );
}

/* ---------- STRATUM 8 — INTEGRATION (the climax) ---------- */
function StratumIntegration() {
  const [lit, setLit] = uS(false);
  return (
    <>
      <p className="stratum-lede beat-in">
        The deepest truth here is not about robotics. It is about belief. Brilliant ideas rarely
        fail because they are impossible — <strong>they fail because they never become believable.</strong>
      </p>

      <Pl>One loop. One proof. One moment when someone says: “I felt that.” And suddenly the future is harder to dismiss.</Pl>

      <Stone lit={lit} onLight={() => setLit(true)} />

      {lit && (
        <div className="reveal-body">
          <Re mono="see it" label="The dark city, the single stone">
            <div className="prose"><p className="ash">
              Ahead of you, a massive city — embodied robotics, telepresence, prosthetics, surgery,
              defense, human-machine convergence — stretching past the horizon. You cannot build it
              tonight. But in your hand is a flashlight, and it illuminates one stone: the first
              sensory loop. The moment that stone becomes real, the city becomes believable.
            </p></div>
          </Re>
          <div className="spacer-s" />
          <Re mono="feel it" label="Pressure. Texture. Contact.">
            <div className="prose"><p className="ash">
              Reach out and touch a wall through a machine. At first: nothing. Just video, just
              control, just distance. Then — pressure, texture, contact. The smallest possible
              sensation. Not enough to change the world. Just enough to change belief.
            </p></div>
          </Re>

          <hr className="hr" />
          <Ey><span className="sig">●</span> &nbsp;THE IDENTITY SHIFT</Ey>
          <div className="spacer-s" />
          <Sz lines={[
            { t: "I am now someone who looks for the proof that changes belief." },
            { t: "I am now someone who separates vision from validation." },
            { t: "I build great futures through small, undeniable demonstrations." },
            { t: "I ask: what is the smallest proof that makes the future real — and I build that first.", turn: true },
          ]} />
        </div>
      )}

      <Ca id="integration" label="What shifts for us, starting tomorrow?" placeholder="Starting tomorrow, we stop… and we start…" />
    </>
  );
}

/* ---------- STRATUM 9 — NARRATIVE (resurface) ---------- */
const CAP_MAP = [
  ["listening", "Listening", "What did this room actually hear?"],
  ["framing", "Framing", "State the master challenge in one sentence."],
  ["envisioning", "Envisioning", "What does success feel like in the room?"],
  ["assumptions", "Assumptions", "Which assumption do we test first?"],
  ["transformation", "Transformation", "The one transformation that matters most."],
  ["reference", "Reference Frames", "Which frame is doing the most work?"],
  ["crux", "Crux", "Name our crux."],
  ["integration", "Integration", "What shifts for us, starting tomorrow?"],
];

function NotebookReview() {
  const [open, setOpen] = uS(false);
  if (!open) {
    return (
      <button className="reveal-stub" onClick={() => setOpen(true)} style={{ borderColor: "var(--stage-fg)" }}>
        <span className="mono sig">field notebook</span>
        <span className="stub-label">Read back what the room decided</span>
        <span className="stub-mark">+</span>
      </button>
    );
  }
  const entries = CAP_MAP.map(([id, name, q]) => ({
    name, q, v: (localStorage.getItem("bedrock.capture." + id) || "").trim(),
  }));
  const any = entries.some((e) => e.v);
  return (
    <div className="reveal-body notebook">
      {!any && <p className="prose ash">The notebook is empty — nothing was captured on the way down. The descent still happened; the words simply weren't written.</p>}
      {entries.filter((e) => e.v).map((e) => (
        <div className="nb-row" key={e.name}>
          <div className="nb-k"><span className="mono">{e.name}</span><span className="nb-q">{e.q}</span></div>
          <div className="nb-v serif">“{e.v}”</div>
        </div>
      ))}
    </div>
  );
}

function StratumNarrative() {
  return (
    <>
      <p className="stratum-lede beat-in">
        We have reached the surface again — carrying a story instead of a pitch. Remote robotics
        has a missing sense. Looking Glass is closing it. Not with better vibration —{" "}
        <strong>with a biological touch layer that makes robotic contact feel meaningful.</strong>
      </p>

      <hr className="hr" />

      <Ey>The one-word pitch</Ey>
      <div className="oneword">Embodiment</div>
      <p className="prose ash">Bigger than haptics. More human than robotics. More fundable than “bio-photonic neural interface.” It names the transformation: remote control becomes felt presence.</p>

      <hr className="hr" />

      <Ey>The question that does the selling</Ey>
      <div className="spacer-s" />
      <p className="serif" style={{ fontSize: "clamp(24px,3.2vw,44px)", lineHeight: 1.15, maxWidth: "20ch" }}>
        What changes when the operator can feel what the robot touches?
      </p>
      <p className="prose ash" style={{ marginTop: 16 }}>It makes the listener complete the argument — surgery, bomb disposal, hazardous work, prosthetics, industrial manipulation — without being told what to think.</p>

      <hr className="hr" />

      <Re mono="the arc" label="The whole story, in six beats">
        <Sz lines={[
          { t: "Once, humans controlled robots mostly by sight." },
          { t: "Every day, operators had to infer pressure, slip, edge, and contact from video." },
          { t: "One day, we asked: what if the operator could feel what the robot touches?" },
          { t: "Because of that, we began building a biological touch layer for teleoperation." },
          { t: "Because of that, the next challenge is not the whole future — it is one sensory loop." },
          { t: "Until finally, the operator no longer just drives the robot, but feels through it.", turn: true },
        ]} />
      </Re>

      <hr className="hr hr-ink" />

      <Ey><span className="sig">●</span> &nbsp;THE FIELD NOTEBOOK</Ey>
      <div className="prose"><p className="ash" style={{ marginTop: 8 }}>Everything the room decided on the way down — the descent in your own words.</p></div>
      <div className="spacer-s" />
      <NotebookReview />

      <Pl sig>Prove the first sensation, and the platform becomes possible.</Pl>

      <Ca id="narrative" label="The one sentence we leave with." placeholder="Looking Glass is…" />
    </>
  );
}

window.STRATA_C = { StratumCrux, StratumIntegration, StratumNarrative };