/* global React */
const { useState } = React;

/* =====================================================================
   SECTION 07 — FORM, NOT FACTS
   The constructive counterpoint to the Empty Glove. If every output
   is a hallucination, why use the tool at all? Because hallucination
   is the engine, and many tasks want a probability engine — they want
   shape, not truth.
   ===================================================================== */

const FIT_BUCKETS = [
  {
    id: "ideal",
    label: "Ideal fit",
    tag: "✓",
    headline: "When the shape is the goal.",
    blurb: "Tasks that need plausible structure. The hallucination engine is exactly the right tool for the job. You're paying it to invent fluent shape.",
    examples: [
      "Translate this email into Spanish",
      "Port this Python function to JavaScript",
      "Brainstorm ten names for the workshop",
      "Reformat this paste as a CSV",
      "Soften the tone of this paragraph",
      "Draft a polite decline",
    ],
  },
  {
    id: "verify",
    label: "Verify the seam",
    tag: "⚠",
    headline: "When the shape carries claims.",
    blurb: "The shape will be good, convincingly so. Every factual claim inside it must be checked against ground truth before you trust it. This is where the danger lives.",
    examples: [
      "Summarize this research paper",
      "Draft a memo with citations",
      "Explain a historical event",
      "Write technical documentation",
      "Compare two products' specs",
      "Synthesize across multiple sources",
    ],
  },
  {
    id: "wrong",
    label: "Wrong tool",
    tag: "✗",
    headline: "When you want an answer.",
    blurb: "Here, the job calls for an answer rather than a sentence. Use a database, a search engine, a calculator. The probability engine has no advantage here, only added risk.",
    examples: [
      "What is the current weather?",
      "Calculate 47% of 18,432",
      "Look up a phone number",
      "Today's stock price",
      "Verify a citation exists",
      "Check a court ruling",
    ],
  },
];

function FitGuide() {
  const [selected, setSelected] = useState("ideal");
  return (
    <div className="fit-guide">
      <div className="fit-axes">
        {FIT_BUCKETS.map(b => (
          <button
            key={b.id}
            className={"fit-bucket fit-" + b.id + (selected === b.id ? " active" : "")}
            onClick={() => setSelected(b.id)}
          >
            <div className="fit-tag">{b.tag}</div>
            <div className="fit-label">{b.label}</div>
            <div className="fit-headline">{b.headline}</div>
          </button>
        ))}
      </div>
      {FIT_BUCKETS.filter(b => b.id === selected).map(b => (
        <div key={b.id} className={"fit-detail fit-detail-" + b.id}>
          <p className="fit-blurb">{b.blurb}</p>
          <div className="fit-examples">
            <div className="mono fit-examples-head">Example tasks</div>
            <ul>
              {b.examples.map(ex => <li key={ex}>{ex}</li>)}
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
}

/* =====================================================================
   LATENT SCAFFOLDING — a small "outline with bad ideas struck through"
   illustration. Makes the brainstorming case physical.
   ===================================================================== */

function ScaffoldingDemo() {
  // Ten plausible outline points for "an essay on dice as a metaphor."
  // The struck-through ones are the ones the human cuts. Net: 7 useful
  // ideas in seconds, instead of a blank page.
  const points = [
    { t: "Open with the standard d6 — uniform randomness as the baseline",  bad: false },
    { t: "The 100,000-sided die as the vocabulary",                          bad: false },
    { t: "Compare to a coin flip (overlaps with point 1)",                   bad: true  },
    { t: "Weighted gravity as the mechanism of fluency",                     bad: false },
    { t: "Brief detour into casino history",                                 bad: true  },
    { t: "Temperature as a single, tunable knob",                            bad: false },
    { t: "Hallucination = the die landed light",                             bad: false },
    { t: "Quote a famous mathematician (which one?)",                        bad: true  },
    { t: "The 'always hallucinating' reframe",                               bad: false },
    { t: "Closing: form, not facts",                                         bad: false },
  ];
  return (
    <div className="scaffold">
      <div className="scaffold-head">
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
          A draft outline · 10 ideas · ~3 seconds of model time
        </div>
      </div>
      <ol className="scaffold-list">
        {points.map((p, i) => (
          <li key={i} className={p.bad ? "bad" : ""}>
            <span className="i">{String(i + 1).padStart(2, "0")}</span>
            <span className="t">{p.t}</span>
            {p.bad && <span className="x">cut</span>}
          </li>
        ))}
      </ol>
      <div className="scaffold-foot">
        <span><b>{points.filter(p => !p.bad).length}</b> useful ideas kept</span>
        <span><b>{points.filter(p => p.bad).length}</b> cut on review</span>
        <span><b>1</b> blank page avoided</span>
      </div>
    </div>
  );
}

Object.assign(window, { FitGuide, ScaffoldingDemo });