/* AUTONOMY — the unifying dial.
   Fidelity, budget, and confidence are one control: how much judgment the agent
   exercises before it defers to you. Slide from "you decide" to "agent decides";
   the two payment rails (Stripe = human-approved · x402 = autonomous) are its two ends.
   This is the thesis made tangible — one dial governs perceive → spend → settle. */

function Autonomy() {
  const [ref, shown] = useReveal();
  const [a, setA] = React.useState(32); // 0..100 — the autonomy threshold

  const posture =
    a < 22 ? { name: "Assisted",   tone: "var(--grain)",        note: "you hold the pen" } :
    a < 55 ? { name: "Supervised", tone: "var(--grain-bright)", note: "agent drafts, you approve the big calls" } :
    a < 82 ? { name: "Delegated",  tone: "var(--wire)",         note: "agent acts within your bounds" } :
             { name: "Autonomous", tone: "var(--wire)",         note: "the agent runs the economy" };

  // the same threshold, read by every critical step
  const fidelity = a < 40 ? "asks you to confirm the fidelity"
                 : a < 75 ? "picks fidelity, flags low confidence"
                 :          "self-selects fidelity, refines on its own";
  const spend = a < 30 ? "every charge needs your approval"
              : a < 70 ? "auto under budget · asks above"
              :          "settles on its own — no prompt";
  const conf = a < 35 ? "pauses on anything below 0.9"
             : a < 75 ? "acts above its confidence bar, asks below"
             :          "acts on its own judgment";
  const rail = a < 55 ? { k: "STRIPE", c: "var(--grain)", d: "human-approved" }
                      : { k: "x402",   c: "var(--wire)",  d: "agent-to-agent" };

  const rows = [
    ["reconstruct · fidelity", fidelity, "var(--grain)"],
    ["acquire · spend", spend, "var(--grain)"],
    ["act · confidence", conf, "var(--wire)"],
  ];

  return (
    <section className="section" id="autonomy" ref={ref}>
      <div className="wrap">
        <SectionHead
          idx="THE DIAL — 04" kind="DECIDE"
          title="One dial, from assisted to autonomous"
          sub="Fidelity, budget, confidence — they're the same control: how much judgment the agent exercises before it defers to you. Slide it. The two payment rails are simply its two ends."
          shown={shown} accent="var(--grain)" />

        <div className={`panel ${shown ? "in" : ""}`} style={{ marginTop: 56, padding: 0 }}>
          <div className="panel-head">
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span className="panel-dots"><i></i><i></i><i></i></span>
              <span className="panel-title">grain · autonomy</span>
            </div>
            <span className="panel-title" style={{ color: posture.tone }}>● {posture.name.toUpperCase()}</span>
          </div>

          <div style={{ padding: "32px 28px 26px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 11 }}>
              <span className="mono" style={{ fontSize: 12, color: "var(--grain)" }}>◐ you decide</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--wire)" }}>agent decides ◑</span>
            </div>

            <div className="slider" style={{ height: 30 }}>
              <div className="fill" style={{ width: `${a}%`, background: "linear-gradient(90deg, var(--grain), var(--wire))" }} />
              <input type="range" min="0" max="100" value={a} onChange={e => setA(+e.target.value)} aria-label="autonomy" />
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 10, marginBottom: 28 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 23, fontWeight: 600, letterSpacing: "-0.02em", color: posture.tone }}>
                {posture.name}<span className="muted" style={{ fontSize: 14.5, fontWeight: 400 }}> — {posture.note}</span>
              </span>
              <span className="mono" style={{ fontSize: 13, color: posture.tone }}>{a}%</span>
            </div>

            {rows.map(([k, v, c]) => (
              <div key={k} className="param" style={{ gridTemplateColumns: "176px 1fr" }}>
                <span className="param-label"><span className="sig" style={{ color: c }}>▍</span> {k}</span>
                <span className="mono muted" style={{ fontSize: 13, letterSpacing: "-0.01em" }}>{v}</span>
              </div>
            ))}
            <div className="param" style={{ gridTemplateColumns: "176px 1fr", borderBottom: "none" }}>
              <span className="param-label"><span className="sig">⇅</span> settles via</span>
              <span className="mono" style={{ fontSize: 13, color: rail.c, transition: "color 0.3s var(--ease)" }}>
                {rail.k} <span className="faint">· {rail.d}</span>
              </span>
            </div>
          </div>
        </div>

        <p className="mono faint" style={{ fontSize: 12, marginTop: 16, textAlign: "center" }}>
          The same dial runs every step — perception, spend, settlement. <span style={{ color: "var(--text-soft)" }}>You choose where judgment lives.</span>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Autonomy });